/**
 * MTB de Zeeleeuw — layout builder output styling
 *
 * Styles for what LayoutRenderer.php actually outputs on the live site —
 * distinct from css/layoutbuilder-admin.css, which only styles the
 * drag-and-drop *editor* itself in the Template Style admin screen.
 */

/* The site's signature element — the contour-line/wave motif, matching
   the app's own ContourLines shape on its dark hero headers. Any row set
   to "navy-contour" gets the `contour-top` class from LayoutRenderer.php;
   this is what actually paints the waves. Sits at the row's top edge —
   whatever comes before it (typically a lighter section) visually
   "washes into" the navy row underneath. */
.contour-top {
  position: relative;
  overflow: hidden;
}

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

.lb-row--bg-none {
  background: transparent;
}

/* v2.1.15 refresh: was flat var(--z-void) (puur zwart) with links in
   var(--z-accent) (#003466) — a *dark* navy that's barely legible as
   text on a near-black background; it's tuned for text on light paper,
   not for use as a link color on a dark surface. Two changes: the fill
   becomes a genuine brand-navy gradient instead of generic black (reads
   as "the club's navy", not just "dark"), and links switch to
   --z-accent-on-dark — same blue family, lightened enough to actually
   read as a link against this background. */
.lb-row--bg-navy,
.lb-row--bg-navy-contour {
  background: linear-gradient(160deg, var(--z-navy) 0%, #061529 100%);
  color: #C3CBD6;
}

.lb-row--bg-navy a,
.lb-row--bg-navy-contour a {
  color: var(--z-accent-on-dark);
}

.lb-row--bg-navy h1, .lb-row--bg-navy h2, .lb-row--bg-navy h3, .lb-row--bg-navy h4,
.lb-row--bg-navy-contour h1, .lb-row--bg-navy-contour h2, .lb-row--bg-navy-contour h3, .lb-row--bg-navy-contour h4 {
  color: #fff;
}

.lb-row--bg-paper {
  background: var(--z-paper);
}

/* Grassveld-preset: dezelfde reden als .section-dark in hero.css — een
   pure zwarte/navy bouwer-rij en de blauw/geel/roze contourlijnen-golven
   passen niet bij deze lichte, groene richting. De rij zelf wordt een
   zachte donkergroene gradient; de golf-SVG (in kust-merkkleuren) wordt
   hier uitgezet in plaats van vertaald, want een letterlijk grasveld-
   patroon zou een heel nieuw beeldbestand vergen — dat is bewust buiten
   scope van deze CSS-only stijlpreset gelaten (zie NOTES.md). */
body.theme-grassfeld .lb-row--bg-navy,
body.theme-grassfeld .lb-row--bg-navy-contour {
  background: linear-gradient(160deg, #163A28 0%, #0E2A1C 100%);
}

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

.lb-row--space-sm .lb-row-inner { padding-block: var(--space-6); }
.lb-row--space-md .lb-row-inner { padding-block: var(--space-16); }
.lb-row--space-lg .lb-row-inner { padding-block: var(--space-24); }

.lb-row-inner {
  position: relative;
  z-index: 1;
}

.lb-row-inner.container {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.lb-row-inner:not(.container) {
  padding-inline: var(--space-6);
}

.lb-columns {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-8);
}

.lb-column {
  grid-column: span var(--lb-col-span, 12);
  min-width: 0;
  overflow-x: auto;
}

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

  .lb-column {
    grid-column: span 1;
  }
}

.lb-column > *:last-child {
  margin-bottom: 0;
}

.lb-html {
  max-width: 60ch;
}

.lb-copyright {
  font-size: var(--step-xs);
  opacity: 0.7;
  margin: 0;
}

.lb-spacer--sm { height: var(--space-6); }
.lb-spacer--md { height: var(--space-12); }
.lb-spacer--lg { height: var(--space-24); }