/* ============================================================
   PACY — RESPONSIVE + RTL
   Breakpoints follow the layout's own break points, not device
   names: the grid drops to one column when a card can no longer
   hold a 64px score and two team names comfortably.
   ============================================================ */

/* ---- WIDE DESKTOP ------------------------------------------- */
@media (min-width: 1200px) {
  /* Roughly 70/30 when the contextual panel has something to say. With
     nothing to add it is not rendered, and the board takes the width
     rather than being narrowed to make room for an empty column. */
  .with-aside[data-aside="filled"] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
    gap: var(--s-7);
    align-items: start;
  }
  .aside-sticky {
    position: sticky;
    top: calc(var(--header-h) + 68px);
  }
}

/* The content column grows with the display instead of holding a
   single cap. A fixed 1360px looked correct on a laptop and left a
   large empty band on anything wider; these steps keep the cards
   growing rather than the margins. Line length is still bounded —
   prose blocks cap themselves, and the grid adds width to cards
   rather than columns. */
@media (min-width: 1500px) { :root { --page-max: 1480px; } }
@media (min-width: 1800px) { :root { --page-max: 1680px; } }
@media (min-width: 2200px) { :root { --page-max: 1880px; } }

/* Spotlight cards scale with the rail so a wide display shows
   more of the next match rather than more empty rail. */
@media (min-width: 1800px) {
  .spotlight-rail > .card { flex-basis: clamp(360px, 30%, 600px); }
}

/* ---- LIVE RAIL: how many complete cards fit ------------------
   Three complete cards at common laptop widths, one on a phone. The
   card itself is not shrunk to achieve either — the basis is derived
   from the rail width and the gap, so a card is always a whole card
   and a score is never clipped. Below the laptop step the count drops
   rather than the card. */
@media (max-width: 1080px) {
  .spotlight-rail > .card {
    flex-basis: calc((100% - var(--s-5)) / 2);
  }
}
@media (max-width: 760px) {
  .spotlight-rail > .card {
    /* One whole card, with the edge of the next visible as the scroll
       affordance rather than a clipped second card. */
    flex-basis: calc(100% - var(--s-8));
    min-width: 0;
  }
}

/* ---- BELOW WIDE: hide the contextual column ------------------ */
@media (max-width: 1199px) {
  .with-aside > aside { display: none; }
}

/* ---- LAPTOP / SMALL DESKTOP --------------------------------- */
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
}

/* ---- TABLET -------------------------------------------------- */
@media (max-width: 900px) {
  :root { --page-max: 100%; }

  /* One or two cards depending on the space actually available. */
  .match-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }

  /* The search field collapses to its icon; the label and shortcut
     hint are the first things that can go. */
  .search-trigger { min-width: 0; width: var(--tap); padding: 0; justify-content: center; }
  .search-trigger .st-label, .search-trigger .kbd { display: none; }

  /* Primary nav still fits here, but not alongside all eight
     tools. Favourites and profile are the two with a destination
     elsewhere, so they go first rather than the display modes. */
  .header-tools [data-act="favourites"],
  .header-tools [data-act="profile"] { display: none; }

  .lineups { grid-template-columns: 1fr; gap: var(--s-5); }
  .expand-cols { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* ---- MOBILE -------------------------------------------------- */
@media (max-width: 720px) {
  :root {
    --header-h: 56px;
    --s-5: 16px;
  }

  .page { padding-inline: var(--s-4); }

  /* Desktop nav moves into the bottom bar. */
  .primary-nav { display: none; }
  .bottom-nav { display: block; }
  body { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); }

  /* Eight header controls do not fit a 375px viewport and were
     pushing the page sideways. Search, favourites and profile are
     already in the bottom bar, so they come out of the header
     rather than being duplicated — the remaining controls are the
     display modes, which have no other home. */
  .header-tools .search-trigger,
  .header-tools [data-act="favourites"],
  .header-tools [data-act="profile"] { display: none; }
  .header-tools { gap: 0; }

  /* One card per row, with the score kept large. */
  .match-grid { grid-template-columns: 1fr; gap: var(--s-4); }

  .spotlight-rail > * { flex: 0 0 88%; }
  .spotlight { padding-block: var(--s-6) var(--s-7); }

  /* Four stacked rows of sticky controls consumed a quarter of the
     viewport. The date and status rows sit side by side, and the
     timezone note drops out — it is already stated in the footer. */
  .controls-inner { gap: var(--s-2); padding-block: var(--s-2); }
  .controls-meta { display: none; }
  .seg { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
  .seg button { flex: 1 0 auto; padding-inline: var(--s-3); }

  /* The picker collapses to its icon; the native dialog carries
     the rest. */
  .date-jump { flex: none; padding-inline: var(--s-2); }
  .date-jump input {
    width: 24px;
    opacity: 0;          /* the control stays operable, just unlabelled */
    position: absolute;
    inset: 0;
    cursor: pointer;
  }
  .date-jump { position: relative; }

  .card-top { padding: var(--s-4) var(--s-4) var(--s-2); }
  .card-body { padding: var(--s-2) var(--s-4) var(--s-4); }
  .card-foot { padding: var(--s-2) var(--s-4); }
  .competitor .crest { width: 32px; height: 32px; }

  .brief-item { grid-template-columns: 1fr; gap: var(--s-3); }
  .brief-item .chev { display: none; }

  .mc-overlay { align-items: stretch; }
  .mc-panel { max-height: 100vh; border-radius: 0; }
  .mc-head { padding: var(--s-4); }
  .mc-score {
    grid-template-columns: minmax(0, 1fr) minmax(88px, auto) minmax(0, 1fr);
    gap: 6px;
    padding: 10px;
  }
  .mc-side { min-height: 96px; padding: 6px; }
  .mc-side .crest { width: 42px; height: 42px; }
  .mc-side .name { font-size: 1rem; }
  .mc-mid { min-width: 88px; padding: 8px 6px; }
  .mc-mid .nums { font-size: clamp(2.25rem, 11vw, 3rem); }
  .mc-mid .sport-module {
    max-width: 104px;
    justify-content: center;
    gap: 4px 7px;
    font-size: 10px;
  }
  .mc-mid .mod-item { gap: 3px; }

  .search-overlay { padding: 0; }
  .search-panel { max-height: 100vh; height: 100vh; border-radius: 0; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); }

  /* The demo console sits above the bottom nav on mobile. */
  .demo-fab { inset-block-end: calc(var(--bottomnav-h) + var(--s-4) + env(safe-area-inset-bottom)); }
  .demo-panel { inset-block-end: calc(var(--bottomnav-h) + var(--s-4) + 64px + env(safe-area-inset-bottom)); }
}

@media (max-width: 420px) {
  .h2h-row { grid-template-columns: 68px 1fr auto; }
  .tl-row { grid-template-columns: 36px 20px 1fr; gap: var(--s-3); }
  .timeline::before { inset-inline-start: 44px; }
}

/* ============================================================
   RTL
   ------------------------------------------------------------
   Layout, icons, navigation and timelines mirror. Scores do NOT:
   a 2–1 stays 2–1, and the home side keeps its position relative
   to its own name, because reversing a scoreline changes what it
   says. Logical properties handle most of this automatically;
   what follows are the cases that need an explicit decision.
   ============================================================ */

[dir="rtl"] .brand-word { letter-spacing: 0; }

/* Directional glyphs point the other way. */
[dir="rtl"] .chev,
[dir="rtl"] .spotlight-nav svg,
[dir="rtl"] .mc-tabs .chev { transform: scaleX(-1); }

/* The scoreline itself must not be mirrored. */
[dir="rtl"] .mc-mid .nums,
[dir="rtl"] .score-value,
[dir="rtl"] .share-teams .s,
[dir="rtl"] .clock,
[dir="rtl"] .stat-value {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Score column stays adjacent to its own team row. */
[dir="rtl"] .scores { text-align: start; justify-items: start; }
[dir="rtl"] .score-value { text-align: start; }

/* Timeline rail flips to the other edge. */
[dir="rtl"] .timeline::before { inset-inline-start: auto; inset-inline-end: 52px; }
[dir="rtl"] .tl-row .tl-min { text-align: start; }

/* Statistic bars fill from the reader's start edge. */
[dir="rtl"] .stat-bar { flex-direction: row-reverse; }

/* The reveal trace runs in the reading direction. */
[dir="rtl"] .reveal-trace { animation-name: traceRunRtl; }
@keyframes traceRunRtl {
  from { transform: translateX(110%);  opacity: 0; }
  30%  { opacity: 1; }
  to   { transform: translateX(-320%); opacity: 0; }
}

/* Arabic needs a slightly larger body size to match Latin
   x-height legibility at the same nominal px value. */
[lang="ar"] { --t-body: 1.0625rem; --t-meta: .9375rem; }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3 { letter-spacing: 0; }

/* ---- PRINT --------------------------------------------------- */
@media print {
  .site-header, .sports-bar, .controls-bar, .bottom-nav,
  .demo-fab, .demo-panel, .spotlight-nav, .site-footer { display: none !important; }
  body { background: #fff; }
  .card { break-inside: avoid; box-shadow: none; border-color: #999; }
}