/* Sky Sports Golf media site.
 *
 * NOT A PALETTE SWAP. The first version redefined four brand tokens on top of
 * `site.css` and left everything else alone — which produced the KPMG page in
 * Sky colours: a dark hero, white-on-navy type, a gold-shaped rule tinted red.
 * The packs it links to look nothing like that. They are LIGHT EDITORIAL, and
 * a reader who clicks through went from one design language to another.
 *
 * So this matches `theme_sky.py`, which is the pack. Its decisions, restated
 * here for a site rather than a document:
 *
 *   - a WHITE cover, because "the supplied marks have no reversed variant, so
 *     the cover comes to them" — the same reason applies to a page header
 *   - ONE loud element: a 4px Sky-red rule, full-bleed from the left, fading
 *     out. Everything else is quiet
 *   - marks rendered exactly as supplied, sized by height, never recoloured
 *   - washes in Sky navy and TFG blue at 5-6% — present, not decorative
 *
 * `site.css` still owns layout, spacing and the type scale. This owns the
 * surface. Where a rule here fights one there it is because the house theme
 * assumes a dark ground, and each of those is marked.
 */

:root {
  /* theme_sky.py: SKY_NAVY / SKY_RED / TFG_BLUE. One place to change Sky's blue. */
  --sky-navy: #002a91;
  --sky-red: #f80605;
  --tfg-blue: #006bed;

  --navy: #002a91;
  --kblue: #002a91;
  --ksky: #006bed;
  --kgold: #f80605;
  --kgold-h: #f80605;

  /* The pack's cover palette, verbatim. */
  --cover: #ffffff;
  --cover-wash: #eceef5;
  --cover-rule: #d7dcea;
  --plate: #f4f6fb;

  /* LIGHT GROUND. `site.css` sets --text and --muted to translucent WHITE for
     a dark page; on white they vanish. Restated as ink. */
  --text: #0b1020;
  --muted: #5a6480;
  --muted2: #8790a8;
  --surface-card: #ffffff;
  --surface-border: #dfe4f0;
}

/* ── Ground ───────────────────────────────────────────────────────────────
   The house body is navy with a dot-grid overlay. Sky's is paper with two
   faint washes, matching `theme_sky`'s `header.pack-header`. */
body {
  background: #ffffff;
  background-image:
    radial-gradient(
      1100px 620px at 88% -6%,
      rgba(0, 42, 145, 0.06) 0%,
      transparent 56%
    ),
    radial-gradient(
      820px 560px at 4% 100%,
      rgba(0, 107, 237, 0.05) 0%,
      transparent 55%
    );
  color: var(--text);
}
/* The dot grid is a dark-page device; on paper it reads as dirt. */
body::before,
body::after {
  background-image: none;
}

/* ── Layout ───────────────────────────────────────────────────────────────
   Three house rules are built for the KPMG page and are wrong here. Each is
   restated rather than nudged, because each was a visible defect:

   1. `.site-header` is `align-items: center; text-align: center`, so the
      masthead shrank to its content and floated in the middle of a 1040px
      page while the sections below sat hard left. Two alignments, no
      relationship. The pack cover is left-aligned editorial; so is this.

   2. `.brand-rule` is 44px wide — a centred hairline dash. Setting only its
      height and gradient, as the first pass did, left a 44px red stub. The
      pack's rule is FULL-BLEED FROM THE LEFT and is the one loud element on
      the page; at 44px it is a speck.

   3. `.content` is a two-column grid, because the KPMG home page has two
      sections side by side (packs and live). Neither Sky page has a second
      section, so the single one rendered at half width and the right-hand
      half of every page was empty. */
.site-header {
  align-items: stretch;
  text-align: left;
}
.content {
  grid-template-columns: minmax(0, 1fr);
}
.brand-rule {
  width: 100%;
}
/* The footer rule is the same centred 32px dash; make it agree with the page. */
.footer-rule {
  width: 100%;
  margin: 0 0 14px;
}
.site-footer {
  text-align: left;
}

/* ── Masthead ─────────────────────────────────────────────────────────────
   Marks as supplied, sized by height so two different aspect ratios sit
   optically level — the same rule the pack lockup uses. */
.site-header {
  padding: clamp(28px, 5vh, 52px) 0 0;
}
.sky-lockup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: nowrap;
  min-width: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--cover-rule);
}
/* The pack's own numbers, not new ones. theme_sky sizes these two 46/44 and
   records that as the pair that optically matches — the Sky lockup is 6.4:1
   and the TFG mark 1.75:1, so equal heights look nothing alike and these do. */
.sky-lockup img.sky-mark {
  height: 46px;
  width: auto;
}
.sky-lockup img.tfg-mark {
  height: 44px;
  width: auto;
}

/* NARROW SCREENS — the same fix, for the same reason, as theme_sky's.
   At a fixed 46px the Sky lockup is ~295px wide, which on its own exceeds a
   phone column once the gutters come off, and `nowrap` then pushes the TFG mark
   off the right edge. Below 720px size both by VIEWPORT WIDTH at 58:16: the
   aspects are 6.42 and 1.75, and 58/16 = 3.63 = 6.42/1.75, so they still land
   at matching heights. Together they take 74vw, leaving the gap room at any
   width. Copied deliberately — a responsive header that breaks only on the
   site and not in the pack is the drift this whole file exists to avoid. */
@media (max-width: 720px) {
  .sky-lockup {
    gap: 12px;
    padding-bottom: 14px;
  }
  .sky-lockup img.sky-mark {
    height: auto;
    width: min(58vw, 300px);
  }
  .sky-lockup img.tfg-mark {
    height: auto;
    width: min(16vw, 84px);
  }
}

/* THE ONE LOUD ELEMENT. `theme_sky` gives the pack cover a 4px red rule,
   full-bleed left, fading to nothing. The landing gets the same gesture, which
   is what makes the two read as one product. Replaces the house `.brand-rule`,
   a centred gold gradient that says KPMG. */
.brand-rule {
  height: 4px;
  /* Closes the masthead, as `header.pack-header::after` does. It sat between
     the lockup and the title in the first pass, which put two horizontal rules
     38px apart with nothing between them — it reads as a mistake, and it is
     not where the pack puts it. */
  margin: 22px 0 0;
  background: linear-gradient(
    90deg,
    var(--sky-red) 0%,
    var(--sky-red) 22%,
    rgba(248, 6, 5, 0) 100%
  );
}

/* Sky navy, matching `header.pack-header h1`. Ink-black would be a third
   colour that appears on neither the cover nor the section heads. */
.site-title {
  color: var(--sky-navy);
}
.site-title span {
  color: var(--muted);
}

/* A live pill in Sky red rather than the house green, and only where an event
   is actually live. */
.live-pill {
  border: 1px solid rgba(248, 6, 5, 0.28);
  background: rgba(248, 6, 5, 0.06);
  color: var(--sky-red);
}
.live-pill .live-dot {
  background: var(--sky-red);
}

/* ── Sections ─────────────────────────────────────────────────────────── */
.section-title {
  color: var(--text);
}
.section-sub {
  color: var(--muted2);
}
.section-rule {
  background: var(--cover-rule);
}

/* ── Cards ────────────────────────────────────────────────────────────────
   The house card is a translucent white wash for a dark ground. On paper that
   is invisible, so these are plates with a hairline — `--plate` from the pack. */
.pack-card,
.pack-featured,
.tournament-card {
  background: var(--plate);
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  color: var(--text);
  box-shadow: none;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
}
.pack-card:hover,
.pack-featured:hover,
.tournament-card:hover,
.tournament-card:focus-visible {
  border-color: var(--sky-red);
  transform: translateY(-1px);
}
/* A red spine on the featured pack — the cover rule, at card scale. */
.pack-featured {
  border-left: 4px solid var(--sky-red);
  background: #ffffff;
}

.pack-card__title,
.pack-featured__title {
  color: var(--text);
}
.pack-card__meta,
.pack-featured__meta,
.pack-card__headline {
  color: var(--muted);
}
.pack-featured__eyebrow,
.pack-card__eyebrow {
  color: var(--sky-red);
}
/* `.chip`, not `.pack-chip` — the pack-type pill landing.js emits is
   `<span class="chip">`. The first pass styled a class that appears nowhere in
   the rendered DOM, so it was dead CSS and the chips kept the house treatment. */
.chip {
  border-color: var(--surface-border);
  background: #ffffff;
  color: var(--sky-navy);
}

/* ── The call to action ───────────────────────────────────────────────────
   The house CTA is `linear-gradient(135deg, #8a6e3a, var(--kgold), …)` with
   `color: #000d1a`. `--kgold` is Sky red here, so that resolved to a
   brown-to-red gradient carrying black text — the one element on the page
   that looked like a rendering fault. Sky red, flat, white type. */
.pack-featured__cta {
  border-radius: 4px;
  background: var(--sky-red);
  color: #ffffff;
  box-shadow: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
}
.pack-featured__cta .pack-card__arrow {
  color: #ffffff;
}
.pack-card:hover .pack-featured__cta,
.pack-featured:hover .pack-featured__cta {
  background: #d40504;
}

/* The featured pack ran as a single left column, leaving the right half of a
   1040px card empty. Two columns on a wide viewport: the read on the left, the
   action on the right, which is also the order someone uses them in. */
@media (min-width: 900px) {
  .pack-featured {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 40px;
    row-gap: 8px;
    padding: 24px 28px;
  }
  .pack-featured > * {
    grid-column: 1;
  }
  .pack-featured .pack-featured__cta {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
  }
}
.pack-featured__headline {
  max-width: 62ch;
}

/* ── Tournament index ─────────────────────────────────────────────────── */
.tournament-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.tournament-card {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  text-decoration: none;
}
/* The event's own mark, from the pack's asset registry — a Solheim card that
   carries the Solheim logo is the difference between a link and a product. */
.tournament-card__logo {
  height: 52px;
  width: 52px;
  object-fit: contain;
  flex: 0 0 52px;
}
.tournament-card__body {
  min-width: 0;
}
.tournament-card__eyebrow {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky-red);
}
.tournament-card__title {
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1.05;
  margin: 6px 0 4px;
  color: var(--text);
}
.tournament-card__meta {
  font-size: 0.8rem;
  color: var(--muted);
}
/* Shown and marked, never hidden: a reader looking for an event should find it
   and learn its packs are not out. */
.tournament-card--empty {
  opacity: 0.6;
}
.tournament-card--empty:hover {
  border-color: var(--surface-border);
  transform: none;
}

/* ── States and footer ────────────────────────────────────────────────── */
.state {
  color: var(--muted);
}
.state__spinner {
  border-color: var(--surface-border);
  border-top-color: var(--sky-red);
}
.footer-rule {
  background: var(--cover-rule);
}
.site-footer,
.site-footer a {
  color: var(--muted);
}
.site-footer a:hover {
  color: var(--sky-red);
}

@media print {
  body {
    background: #ffffff;
  }
}

/* ── Event masthead ───────────────────────────────────────────────────────
   Mark, title, teams. Sized off the ARTWORK, not off `.hero-logo`: the Solheim
   mark is 850x1260, so the house clamp of 52-70px height rendered it ~40px
   wide — a speck no one could identify. No drop-shadow either; that is a
   dark-page device and on paper it reads as a smudge, the same reason the dot
   grid does. */
.event-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  padding: 26px 0 4px;
}
.event-mark {
  height: clamp(92px, 12vw, 132px);
  width: auto;
  filter: none;
}
.event-hero__eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sky-red);
  margin-bottom: 8px;
}
.event-hero__dek {
  max-width: 46ch;
  margin-top: 10px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--muted);
}

/* The two teams, as the scoreboard states them. Flags sized by HEIGHT — the
   supplied artwork is 3:2 and 1.9:1, so equal widths would set them at
   visibly different heights. */
.event-teams {
  display: flex;
  align-items: center;
  gap: 12px;
  /* The nowrap belongs on each team — where it stops a country name splitting
     across two lines — not on the row, which should be free to wrap. Measured
     at 320/360/390: the row does not currently overflow either way, so this is
     intent made explicit rather than a fix for anything observed. It is what
     keeps the row honest if a longer team name or a larger base font arrives. */
  flex-wrap: wrap;
}
.event-team {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sky-navy);
}
.event-team img {
  height: 22px;
  width: auto;
  border: 1px solid var(--cover-rule);
}
.event-teams__v {
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--muted2);
}

/* Below 880px the three columns will not fit. The teams drop under the title
   rather than being hidden — on a tournament page they are the subject. */
@media (max-width: 880px) {
  .event-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .event-teams {
    grid-column: 1 / -1;
    padding-top: 4px;
  }
}
/* On a phone even two columns are too many: the mark takes a fifth of the width
   and leaves the dek in a ~40-character gutter. One column, smaller mark. This
   is a legibility change, not an overflow fix — the two-column version fits. */
@media (max-width: 560px) {
  .event-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding-top: 20px;
  }
  .event-mark {
    height: 84px;
  }
}