/* Match list desktop overrides — Remix-style league cards. Pure CSS,
   scope is `.has-desktop-shell` + `≥1200px`. Mobile and non-shell pages
   keep the current card-per-match look 1:1.

   Visual contract:
     - `.league-group` becomes the Remix card wrapper (dark bg, subtle
       border, radius 16, overflow hidden so children stay rounded).
     - `.league-group__header` gets a slightly darker bg to anchor the
       title row, with a thin divider against the matches list below.
     - Individual `.match-card` rows lose their per-card surface fill
       and rounding — they become rows inside the card, separated by a
       hairline `border-bottom`.

   We deliberately don't touch the inner two-row layout (home above,
   away below) yet — that's a bigger refactor we'll iterate on top of
   this baseline once the surrounding chrome lands. */

@layer components {
  @media (width >= 1200px) {
    .has-desktop-shell .league-group {
      background: rgb(17 17 19);
      border: 1px solid rgb(255 255 255 / 8%);
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 12px;
    }

    .has-desktop-shell .league-group__header {
      background: rgb(22 22 26);
      padding: 12px 16px;
      border-bottom: 1px solid rgb(255 255 255 / 8%);
    }

    /* Matches list inside the card — flush to the card edges, no
       residual padding around individual rows. */
    .has-desktop-shell .league-group__matches {
      padding: 0;
    }

    /* Per-row match card — strip surface fill, rounded corners and
       margin; rely on a hairline border to separate consecutive rows.
       Padding stays on the row so the inner two-line content keeps its
       breathing room. */
    .has-desktop-shell .league-group__matches .match-card {
      background: transparent;
      border-radius: 0;
      border-bottom: 1px solid rgb(255 255 255 / 5%);
      margin: 0;
      padding: 12px 16px;
    }

    /* Strip the border only on the ABSOLUTE last match of the card —
       covers both flat leagues (direct child of `.__matches`) and
       grouped leagues where the last match lives inside the last
       `.__group` wrapper (display: contents). Intermediate group
       boundaries keep their divider so consecutive single-match
       groups (Copa Sudamericana matchday 1, etc.) read as separate
       buckets instead of running together. */
    .has-desktop-shell .league-group__matches > .match-card:last-child,
    .has-desktop-shell .league-group__matches > .league-group__group:last-child > .match-card:last-child {
      border-bottom: 0;
    }

    .has-desktop-shell .league-group__matches .match-card:hover {
      background: rgb(255 255 255 / 3%);
    }

    /* Sub-headers (e.g. "Grupo C" in group-stage days) align with the
       row padding instead of the mobile's outer offset. */
    .has-desktop-shell .league-group__matches .league-group__group-header {
      padding: 8px 16px 4px;
      margin: 0;
    }

    /* Time-sort flat view doesn't get the card chrome — but match
       rows still lose their per-card bg and gain a hairline divider so
       the central column reads as a single list. */
    .has-desktop-shell .time-sort {
      padding: 0;
      background: rgb(17 17 19);
      border: 1px solid rgb(255 255 255 / 8%);
      border-radius: 16px;
      overflow: hidden;
    }

    .has-desktop-shell .time-sort .match-card {
      background: transparent;
      border-radius: 0;
      border-bottom: 1px solid rgb(255 255 255 / 5%);
      margin: 0;
      padding: 12px 16px;
    }

    .has-desktop-shell .time-sort .match-card:last-child {
      border-bottom: 0;
    }

    .has-desktop-shell .time-sort .match-card:hover {
      background: rgb(255 255 255 / 3%);
    }
  }
}