/* ==========================================================================
   SurfCheck.nz — / (homepage)

   Sections, top to bottom:
     1. Hero — tagline + "Right now" widget + secondary CTAs
     2. This weekend — banner + 4 chips
     3. Explore by region — grid of region tiles
     4. Surf with us — soft commercial (lessons + beginner + flagship)
     5. Surf smarter — article cards from the Learn library
   ========================================================================== */

body.home-page { background: var(--bg); }

/* ── Shared section header pattern ───────────────────────────────────────── */
.section-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-3);
  flex-wrap: wrap;
  margin-bottom: var(--gap-4);
}
.section-h2 {
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.015em;
}
.section-sub {
  margin: 0;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.55;
}
.section-link {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.section-link .arr { display: inline-block; transition: transform 0.15s; }
.section-link:hover .arr { transform: translateX(3px); }

/* ── 1. Hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  background:
    radial-gradient(1400px 700px at 50% -10%, rgba(77,222,255,0.10) 0%, transparent 60%),
    radial-gradient(1200px 600px at 100% 30%, rgba(34,197,173,0.06) 0%, transparent 55%);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(var(--gap-7), 6vw, var(--gap-8)) var(--gap-5) var(--gap-7);
  text-align: center;
}
.hero-title {
  margin: 0 auto var(--gap-3);
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  max-width: 900px;
  background: linear-gradient(135deg, var(--text) 0%, var(--epic) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-sub {
  max-width: 640px;
  margin: 0 auto var(--gap-6);
  font-size: clamp(15px, 1.8vw, 19px);
  color: var(--text-2);
  line-height: 1.55;
}

/* "Right now" widget — the killer hero element.
   Sits over the .hero photo so it needs a solid backdrop to stay
   readable. Frosted-glass dark surface = the photo still tints through
   subtly without competing with the content. */
.now-widget {
  max-width: 720px;
  margin: 0 auto var(--gap-6);
  background: rgba(11, 27, 46, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(77,222,255,0.28);
  border-radius: var(--r-3);
  overflow: hidden;
  text-align: left;
  box-shadow: 0 10px 30px rgba(0,0,0,0.30);
}
.now-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);
  padding: var(--gap-3) var(--gap-4);
  background: rgba(77,222,255,0.04);
  border-bottom: 1px solid rgba(77,222,255,0.15);
}
.now-widget-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--epic);
}
.now-scope-toggle {
  display: inline-flex;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.now-scope-btn {
  background: transparent;
  border: 0;
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: color 0.15s, background 0.15s;
}
.now-scope-btn:hover { color: #fff; }
.now-scope-btn.active {
  background: var(--accent);
  color: #04101c;
}

.now-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.now-loading,
.now-error {
  padding: var(--gap-5);
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.now-error { color: var(--poor); }
.now-row {
  border-bottom: 1px solid var(--border);
}
.now-row:last-child { border-bottom: 0; }
.now-row-link {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--gap-3);
  align-items: center;
  padding: var(--gap-3) var(--gap-4);
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s;
}
.now-row-link:hover { background: rgba(255,255,255,0.04); }
.now-rank {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.now-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.now-name {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.now-region {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.now-meta {
  font-size: 12.5px;
  color: var(--text-2);
}
.now-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-variant-numeric: tabular-nums;
}
.now-num  { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.now-tier { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.now-score.epic .now-num, .now-score.epic .now-tier { color: var(--epic); }
.now-score.good .now-num, .now-score.good .now-tier { color: var(--good); }
.now-score.mint .now-num, .now-score.mint .now-tier { color: var(--mint); }
.now-score.grim .now-num, .now-score.grim .now-tier { color: var(--grim); }
.now-score.fair .now-num, .now-score.fair .now-tier { color: var(--fair); }
.now-score.poor .now-num, .now-score.poor .now-tier { color: var(--poor); }
.now-score.flat .now-num, .now-score.flat .now-tier { color: var(--text-muted); }

.now-all-link {
  display: block;
  padding: var(--gap-3) var(--gap-4);
  background: rgba(0,0,0,0.18);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  border-top: 1px solid var(--border);
}
.now-all-link:hover { background: rgba(95,183,255,0.06); color: var(--accent-2); }
.now-all-link .arr { display: inline-block; transition: transform 0.15s; }
.now-all-link:hover .arr { transform: translateX(3px); }

/* Hero secondary CTAs */
.hero-ctas {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-3);
}
.hero-ctas .cta-btn { min-width: 200px; }

/* ── 2. This weekend ─────────────────────────────────────────────────────── */
.home-weekend {
  border-bottom: 1px solid var(--border);
  background: rgba(95,183,255,0.03);
}
.home-weekend-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--gap-7) var(--gap-5);
}
/* Re-uses .weekend-banner styles via the forecast page CSS — except we want
   the homepage banner to look a little tighter. Override here. */
.home-weekend .weekend-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-4);
  padding: var(--gap-4) var(--gap-5);
  background: linear-gradient(135deg, rgba(77,222,255,0.12) 0%, rgba(95,183,255,0.06) 100%);
  border: 1px solid rgba(77,222,255,0.35);
  border-radius: var(--r-3);
  color: var(--text);
  text-decoration: none;
  margin-bottom: var(--gap-4);
  transition: background 0.15s, border-color 0.15s;
}
.home-weekend .weekend-banner:hover {
  background: linear-gradient(135deg, rgba(77,222,255,0.18) 0%, rgba(95,183,255,0.1) 100%);
  border-color: rgba(77,222,255,0.55);
}
.home-weekend .weekend-banner-loading,
.home-weekend .weekend-banner-empty {
  font-size: 14px; color: var(--text-2);
}
.home-weekend .weekend-banner-text { flex: 1; min-width: 0; }
.home-weekend .weekend-banner-line1 {
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 600;
  line-height: 1.4;
}
.home-weekend .weekend-banner-line1 strong { color: var(--epic); font-weight: 800; }
.home-weekend .weekend-banner-line2 {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  font-size: 13px;
  color: var(--text-2);
}
.home-weekend .weekend-banner-rating {
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid;
}
.home-weekend .weekend-banner-rating.epic { color: var(--epic); border-color: color-mix(in srgb, var(--epic) 45%, transparent); background: color-mix(in srgb, var(--epic) 10%, transparent); }
.home-weekend .weekend-banner-rating.good { color: var(--good); border-color: color-mix(in srgb, var(--good) 50%, transparent); background: color-mix(in srgb, var(--good) 10%, transparent); }
.home-weekend .weekend-banner-rating.mint { color: var(--mint); border-color: color-mix(in srgb, var(--mint) 50%, transparent); background: color-mix(in srgb, var(--mint) 10%, transparent); }
.home-weekend .weekend-banner-rating.grim { color: var(--grim); border-color: color-mix(in srgb, var(--grim) 50%, transparent); background: color-mix(in srgb, var(--grim) 10%, transparent); }
.home-weekend .weekend-banner-rating.fair { color: var(--fair); border-color: color-mix(in srgb, var(--fair) 45%, transparent); background: color-mix(in srgb, var(--fair) 10%, transparent); }
.home-weekend .weekend-banner-rating.poor { color: var(--poor); border-color: color-mix(in srgb, var(--poor) 45%, transparent); background: color-mix(in srgb, var(--poor) 10%, transparent); }
.home-weekend .weekend-banner-arrow {
  font-size: 26px;
  color: var(--accent);
  flex-shrink: 0;
}
/* Conditions sub-line on the weekend banner — "1.4m · 11s · 12km/h SE · light offshore" */
.home-weekend .weekend-banner-conditions {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-2);
}

/* 4 chips below the banner */
.home-weekend-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-2);
}
/* Weekend grouped by day: a Saturday group + a Sunday group, each with a small
   day header (name + date) and its two session chips. Makes the day obvious
   without repeating it on every chip. */
.home-weekend-days {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-4);
}
.hw-day-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--gap-2);
}
.hw-day-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text);
}
.hw-day-date { font-size: 12px; color: var(--text-muted); }
.hw-day-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.hw-day-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-2);
}
.home-weekend-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--gap-3);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.home-weekend-chip:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--border-2);
}
.home-weekend-chip:active { transform: translateY(1px); }
.hwc-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}
.hwc-date {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
}
.hwc-spot {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
}
.hwc-score {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.hwc-tier {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 4px;
}
.home-weekend-chip.epic .hwc-score strong, .home-weekend-chip.epic .hwc-tier { color: var(--epic); }
.home-weekend-chip.good .hwc-score strong, .home-weekend-chip.good .hwc-tier { color: var(--good); }
.home-weekend-chip.mint .hwc-score strong, .home-weekend-chip.mint .hwc-tier { color: var(--mint); }
.home-weekend-chip.grim .hwc-score strong, .home-weekend-chip.grim .hwc-tier { color: var(--grim); }
.home-weekend-chip.fair .hwc-score strong, .home-weekend-chip.fair .hwc-tier { color: var(--fair); }
.home-weekend-chip.poor .hwc-score strong, .home-weekend-chip.poor .hwc-tier { color: var(--poor); }
.home-weekend-chip.flat .hwc-score strong, .home-weekend-chip.flat .hwc-tier { color: var(--text-muted); }
.hwc-conditions {
  font-size: 11.5px;
  color: var(--text-2);
  line-height: 1.4;
  margin-top: 4px;
}
.hwc-conditions:empty { display: none; }

/* ── 3. Regions ──────────────────────────────────────────────────────────── */
.home-regions { border-bottom: 1px solid var(--border); }
.home-regions-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--gap-7) var(--gap-5);
}
.region-grid {
  display: grid;
  /* Lowered the minmax floor from 180px → 140px so two tiles always fit
     side-by-side on phones (320px+ viewport gives ~150px per tile after
     padding/gap). Desktop auto-fit still produces 3–6 columns at wider
     widths because tiles can stretch beyond 140px. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--gap-3);
}
/* Belt-and-braces: pin to exactly 2 columns under 600px so very narrow
   phones never collapse to 1 column, and a 360–480px phone gets the
   compact 2-up layout from the spec. */
@media (max-width: 600px) {
  .region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Mobile audit P1: 18 tiles ate ~2.5 screens of scroll. Show the first 6,
     expand on demand. Desktop unaffected (toggle hidden below). */
  .region-grid:not(.expanded) .region-tile:nth-of-type(n+7) { display: none; }
  /* Collapsed view shows only NI tiles, so hide the SI header until expanded */
  .region-grid:not(.expanded) .region-island-head.si { display: none; }
  .region-grid .region-grid-toggle {
    display: block;
    grid-column: 1 / -1;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }
}
.region-grid-toggle { display: none; }
.region-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--gap-5);
  color: var(--text-muted);
}
/* Island group headers (north-to-south order keeps neighbours adjacent) */
.region-island-head {
  grid-column: 1 / -1;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: var(--gap-3);
}
.region-island-head.ni { margin-top: 0; }

.region-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--gap-4);
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
/* Tier colour-coding: same palette as rating chips site-wide, so the grid
   reads as a heat map of where it's good right now. */
.region-tile.epic { border-color: color-mix(in srgb, var(--epic) 35%, transparent);  background: color-mix(in srgb, var(--epic) 7%, transparent); }
.region-tile.good { border-color: color-mix(in srgb, var(--good) 35%, transparent);  background: color-mix(in srgb, var(--good) 8%, transparent); }
.region-tile.mint { border-color: color-mix(in srgb, var(--mint) 35%, transparent);  background: color-mix(in srgb, var(--mint) 8%, transparent); }
.region-tile.grim { border-color: color-mix(in srgb, var(--grim) 35%, transparent);  background: color-mix(in srgb, var(--grim) 8%, transparent); }
.region-tile.fair { border-color: color-mix(in srgb, var(--fair) 30%, transparent);  background: color-mix(in srgb, var(--fair) 7%, transparent); }
.region-tile.poor { border-color: color-mix(in srgb, var(--poor) 28%, transparent); background: color-mix(in srgb, var(--poor) 7%, transparent); }
.region-tile:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--border-2);
  transform: translateY(-2px);
}
.region-tile-name {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  /* Reserve exactly 2 lines of vertical space so the spot name + score
     below always start at the same baseline, even when the region name
     is short ("CANTERBURY") vs long ("WEST COAST SOUTH ISLAND"). Without
     this, single-line tiles render shorter and the rating row jumps. */
  line-height: 1.3;
  min-height: calc(10.5px * 1.3 * 2);   /* 2 lines = ~27.3px */
  display: flex;
  align-items: flex-start;
}
.region-tile-spot {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.region-tile-score {
  font-size: 13.5px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.region-tile-score strong { font-size: 20px; font-weight: 800; }
.region-tile-empty {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 6px;
}
.region-tile.epic { border-color: color-mix(in srgb, var(--epic) 30%, transparent); background: color-mix(in srgb, var(--epic) 6%, transparent); }
.region-tile.good { border-color: color-mix(in srgb, var(--good) 28%, transparent); background: color-mix(in srgb, var(--good) 5%, transparent); }
.region-tile.mint { border-color: color-mix(in srgb, var(--mint) 28%, transparent); background: color-mix(in srgb, var(--mint) 5%, transparent); }
.region-tile.grim { border-color: color-mix(in srgb, var(--grim) 28%, transparent); background: color-mix(in srgb, var(--grim) 5%, transparent); }
.region-tile.fair { border-color: color-mix(in srgb, var(--fair) 25%, transparent); background: color-mix(in srgb, var(--fair) 5%, transparent); }
.region-tile.poor { border-color: color-mix(in srgb, var(--poor) 22%, transparent); background: color-mix(in srgb, var(--poor) 5%, transparent); }
.region-tile.epic .region-tile-score strong { color: var(--epic); }
.region-tile.good .region-tile-score strong { color: var(--good); }
.region-tile.mint .region-tile-score strong { color: var(--mint); }
.region-tile.grim .region-tile-score strong { color: var(--grim); }
.region-tile.fair .region-tile-score strong { color: var(--fair); }
.region-tile.poor .region-tile-score strong { color: var(--poor); }

/* ── 4. Surf with us (soft commercial) ───────────────────────────────────── */
.home-aotearoa {
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.015);
}
.home-aotearoa-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--gap-7) var(--gap-5);
}
.home-aotearoa .section-h2 { margin-bottom: var(--gap-2); }
.home-aotearoa .section-sub { margin-bottom: var(--gap-5); }
.aotearoa-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-4);
}
.aotearoa-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  padding: var(--gap-5);
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.aotearoa-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.aotearoa-card-headliner {
  background: linear-gradient(135deg, rgba(77,222,255,0.08) 0%, rgba(95,183,255,0.03) 100%);
  border-color: rgba(77,222,255,0.30);
}
.aotearoa-card-headliner:hover {
  background: linear-gradient(135deg, rgba(77,222,255,0.14) 0%, rgba(95,183,255,0.07) 100%);
  border-color: rgba(77,222,255,0.55);
}
.aotearoa-card-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.aotearoa-card-headliner .aotearoa-card-eyebrow { color: var(--epic); }
.aotearoa-card-name {
  margin: 0;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.aotearoa-card-desc {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.55;
  flex: 1;
}
.aotearoa-card-cta {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent);
  padding-top: var(--gap-2);
  border-top: 1px solid var(--border);
  margin-top: var(--gap-2);
}
.aotearoa-card-cta .arr { display: inline-block; transition: transform 0.15s; }
.aotearoa-card:hover .aotearoa-card-cta .arr { transform: translateX(3px); }

/* ── 5. Surf smarter (content) ───────────────────────────────────────────── */
.home-content-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--gap-7) var(--gap-5);
}
.home-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-4);
}
.home-content-card {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.home-content-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--border-2);
  transform: translateY(-2px);
}
.home-content-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-3);
  overflow: hidden;
}
.home-content-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-content-img.no-img::before {
  content: "🌊";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; opacity: 0.3;
}
.home-content-badge {
  position: absolute;
  top: 10px; left: 10px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(6,18,31,0.85);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  color: var(--text);
}
.home-content-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  padding: var(--gap-4);
  flex: 1;
}
.home-content-name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.home-content-desc {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 5. Surf better (coaching videos) ────────────────────────────────────── */
.home-videos {
  border-bottom: 1px solid var(--border);
}
.home-videos-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--gap-7) var(--gap-5);
}
.home-videos .section-h2 { margin-bottom: var(--gap-2); }
.home-videos .section-sub { margin-bottom: var(--gap-5); }
.home-videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-4);
}
.home-video-card {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.home-video-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--border-2);
  transform: translateY(-2px);
}
.home-video-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-3);
  overflow: hidden;
}
.home-video-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.home-video-img.no-img::before {
  content: "▶";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; opacity: 0.3;
}
.home-video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  border: 2px solid rgba(255,255,255,0.85);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  padding-left: 4px;       /* visual centre — play triangle is right-heavy */
  transition: background 0.15s, transform 0.05s;
  pointer-events: none;
}
.home-video-card:hover .home-video-play {
  background: var(--accent);
  border-color: var(--accent);
  color: #04101c;
}
.home-video-badge {
  position: absolute;
  bottom: 10px; left: 10px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: rgba(6,18,31,0.85);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  color: var(--text);
}
.home-video-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--gap-3) var(--gap-4) var(--gap-4);
  flex: 1;
}
.home-video-level {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.home-video-title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Save-star — Option A placement on video + article cards. */
.home-video-img .save-star,
.home-content-img .save-star {
  top: 10px; right: 10px;
  width: 34px; height: 34px;
  font-size: 14px;
  background: rgba(0,0,0,0.55);
  border-color: rgba(255,255,255,0.25);
}
.home-video-img .save-star.saved,
.home-content-img .save-star.saved {
  background: rgba(232,184,75,0.28);
}

/* Video modal (same pattern as /learn/). Sits above everything. */
.video-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.86);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gap-4);
}
.video-modal.open { display: flex; }
.video-modal-frame {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: 0 20px 80px rgba(0,0,0,0.6);
}
.video-modal-frame iframe {
  width: 100%; height: 100%;
  border: 0;
}
.video-modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: 18px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.video-modal-close:hover { background: rgba(0,0,0,0.9); }

/* ── Mobile tweaks ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .home-weekend-chips { grid-template-columns: 1fr 1fr; }
  .home-weekend-days { grid-template-columns: 1fr; }
  .hero-ctas .cta-btn { min-width: 0; flex: 1 1 100%; }
  .now-widget-head { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .now-row-link { grid-template-columns: 28px 1fr auto; padding: var(--gap-3); }
  .now-name { font-size: 15.5px; }
  .now-num  { font-size: 18px; }
}

/* ── New section sub text + weekend toggle position ────────────────────── */
/* Subs sit between the section heading row and the section content. */
.home-weekend .section-sub,
.home-regions .section-sub {
  margin: 0 0 var(--gap-4);
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.55;
  max-width: 720px;
}

/* The second copy of the scope toggle on Best this weekend. Same pill
   shape as the hero version, just nudged into the section header context. */
.home-weekend-toggle {
  margin: 0 0 var(--gap-4);
}