/**
 * MTB de Zeeleeuw — hero & features
 *
 * The contour-line motif is the site's signature element, carried over
 * directly from the app's ContourLines shape on its dark hero headers —
 * the same visual device on both, so the site reads as a continuation of
 * the app rather than a separate thing wearing the same logo.
 */
.hero {
  position: relative;
  /* v2.1.24: was a flat top-to-bottom linear-gradient — a radial glow
     anchored top-left (2026 mockup direction) gives the same dark-navy
     hero more depth without introducing a new color, just repositioning
     the existing navy-soft/navy pair around a light source instead of a
     straight fade. */
  background: radial-gradient(120% 140% at 12% -10%, var(--z-navy-soft) 0%, var(--z-navy) 55%, #020D19 100%);
  color: #fff;
  overflow: hidden;
  padding-block: var(--space-24) var(--space-16);
}

.hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 220px;
  background: url("../images/contour-lines.svg") repeat-x bottom / 1200px 220px;
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 1;
  max-width: 700px;
  text-align: center;
  margin-inline: auto;
}

.hero .eyebrow {
  color: rgba(255, 255, 255, 0.7);
}

.hero h1 {
  color: #fff;
  margin-bottom: var(--space-6);
}

.hero p {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--step-lg);
  max-width: 46ch;
  margin-inline: auto;
}

.hero .hero-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

/* v2.1.24: hero-panel — a floating glass card for the hero's second
   column (an "Eigen HTML" block dropped next to the heading column, see
   NOTES.md). Introduced for the 2026 redesign direction: three terrains
   (duin/weg/strand), one club — this panel lists the club's training
   groups side by side with the headline instead of only stating it in
   text, so the breadth is visible on first paint, not just claimed.
   Works on any dark/.hero-style background; not hero-specific markup. */
.hero-panel {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6) var(--space-4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  text-align: left;
}

.hero-panel .hp-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-1);
}

.hero-panel .hp-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-lg);
  color: #fff;
}

.hero-panel .hp-tag {
  font-size: var(--step-xs);
  padding: 3px var(--space-3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  letter-spacing: 0.03em;
}

.hp-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hp-row:first-of-type {
  border-top: none;
  padding-top: var(--space-4);
}

.hp-row .hp-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.hp-row .hp-icon svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
}

.hp-row.duin .hp-icon { background: rgba(255, 255, 255, 0.15); }
.hp-row.weg .hp-icon { background: rgba(226, 62, 130, 0.22); }
.hp-row.weg .hp-icon svg { stroke: #F398C0; }
.hp-row.strand .hp-icon { background: rgba(246, 217, 73, 0.2); }
.hp-row.strand .hp-icon svg { stroke: var(--z-gold); }

.hp-row .hp-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hp-row .hp-text b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-sm);
  color: #fff;
}

.hp-row .hp-text span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.58);
}

/* Feature strip — three cards, deliberately matching the app's own core
   sections (Trainingen / Clubhuis / Getijde) rather than generic
   "feature 1/2/3" filler, so a returning app user recognizes the site
   immediately. */
.feature-strip {
  background: var(--z-paper);
  padding-block: var(--space-16);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

.feature-card {
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: transform var(--dur) var(--ease);
}

.feature-card:hover {
  transform: translateY(-4px);
}

.feature-card:nth-child(1) { background: linear-gradient(160deg, var(--z-blue-soft), #B9CFFB); }
.feature-card:nth-child(2) { background: linear-gradient(160deg, var(--z-pink-soft), #FBC7DC); }
.feature-card:nth-child(3) { background: linear-gradient(160deg, var(--z-gold-soft), #FCE8A6); }

/* v2.1.24: explicit terrain variants, for when a card's meaning is a
   terrain (duin/weg/strand) rather than just its position in the row —
   add class="feature-card terrain-duin" etc. in an Eigen HTML block.
   Same three-color logic as the auto-tinted nth-child rule above (blue =
   duin, the club's home terrain; pink = weg; gold = strand, the
   conditional bonus terrain), just addressable by meaning instead of
   position so the color always matches what the card is about. */
.feature-card.terrain-duin { background: linear-gradient(160deg, var(--z-blue-soft), #B9CFFB); }
.feature-card.terrain-weg { background: linear-gradient(160deg, var(--z-pink-soft), #FBC7DC); }
.feature-card.terrain-strand { background: linear-gradient(160deg, var(--z-gold-soft), #FCE8A6); }

.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
  background: rgba(255, 255, 255, 0.6);
}

.feature-card h3 {
  margin-bottom: var(--space-2);
}

.feature-card p {
  color: var(--z-ink-soft);
  margin-bottom: 0;
}

/* Any dark section (used for a secondary banner mid-page, etc.) can
   reuse the same contour treatment at its top edge instead of the
   bottom, by adding .contour-top. */
.section-dark {
  position: relative;
  background: var(--z-navy);
  color: #fff;
  overflow: hidden;
}

.section-dark.contour-top::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 220px;
  background: url("../images/contour-lines.svg") repeat-x top / 1200px 220px;
  transform: scaleY(-1);
  pointer-events: none;
}

/**
 * Grassveld-preset (v2.1.13) — geïnspireerd op grassfeld.com
 *
 * Grassfeld's hero is licht, niet donker: een zachte gradient (lichtblauw
 * naar wit) achter een grote, vriendelijke kop, met ronde witte kaarten
 * verderop op de pagina die "zweven" op een zachte schaduw i.p.v. harde
 * randen of contourlijnen. Hier vertaald met de club se eigen groen i.p.v.
 * Grassfeld's blauw — toepasselijk toevallig ook de letterlijke betekenis
 * van "grassveld" voor een mountainbike-club.
 *
 * De contourlijnen-golfmotief (dit template se eigen signature-element,
 * zie hierboven) hoort bij de donkere kust-esthetiek en botst met deze
 * lichte richting, dus deze preset vervangt 'm door twee zachte,
 * onscherpe kleurvlekken ("blobs") — hetzelfde soort rustige
 * achtergronddecoratie die Grassfeld zelf gebruikt achter z'n hero-tekst.
 */
body.theme-grassfeld .hero {
  background: radial-gradient(120% 100% at 15% 0%, var(--z-green-soft) 0%, var(--z-paper) 55%),
              radial-gradient(90% 80% at 100% 10%, var(--z-blue-soft) 0%, transparent 60%);
  color: var(--z-ink);
}

body.theme-grassfeld .hero::before {
  content: none;
}

body.theme-grassfeld .hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -30% auto;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--z-green) 0%, transparent 70%);
  opacity: 0.18;
  filter: blur(10px);
  pointer-events: none;
}

body.theme-grassfeld .hero .eyebrow {
  color: var(--z-accent);
}

body.theme-grassfeld .hero h1 {
  color: var(--z-ink);
}

body.theme-grassfeld .hero p {
  color: var(--z-ink-soft);
}

/* Grassfeld's own CTAs are soft pill buttons with a colored shadow that
   lifts on hover, not a hairline-bordered outline button on a dark
   photo background — .btn-outline (built for sitting on the old dark
   hero) is swapped here for the same treatment as .btn-secondary. */
body.theme-grassfeld .hero .btn-outline {
  background: #fff;
  border-color: var(--z-line);
  color: var(--z-ink);
  box-shadow: var(--shadow-soft-sm);
}

body.theme-grassfeld .hero .btn-outline:hover {
  background: #fff;
  border-color: var(--z-accent);
  color: var(--z-accent);
}

body.theme-grassfeld .btn-primary {
  box-shadow: var(--shadow-soft-sm);
}

/* Feature cards: Grassfeld's signature is a plain white rounded card
   lifted with a soft shadow, a colored circular icon badge, and no
   background tint on the card itself — replacing this template's
   coastal-palette gradient-tinted cards. */
body.theme-grassfeld .feature-card {
  background: #fff !important;
  box-shadow: var(--shadow-soft-sm);
}

body.theme-grassfeld .feature-card:hover {
  box-shadow: var(--shadow-soft);
}

body.theme-grassfeld .feature-icon {
  border-radius: 50%;
  background: var(--z-green-soft);
  color: var(--z-accent);
}

body.theme-grassfeld .feature-card:nth-child(2) .feature-icon { background: var(--z-blue-soft); color: var(--z-blue); }
body.theme-grassfeld .feature-card:nth-child(3) .feature-icon { background: var(--z-gold-soft); color: #8a6d00; }

/* A dark navy full-bleed section reads as the old kust-nacht aesthetic,
   not Grassfeld's light one — soften it to the same green-tinted
   gradient as the hero instead of swapping to solid black/navy. */
body.theme-grassfeld .section-dark {
  background: linear-gradient(160deg, #163A28 0%, #0E2A1C 100%);
}