/* ============================================================================
   Young Energy Canvas — section brand layer (blocks.css)
   The theme owns container width, vertical rhythm, and per-section backgrounds
   (the engine wrapper CSS is dequeued). Skin/card internals come from the engine.
   ========================================================================== */

/* --------------------------------------------------------- Container + rhythm */
.sv-container { width: 100%; max-width: var(--sv-container, 1240px); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.sv-section { padding-block: clamp(3.5rem, 7vw, 6.5rem); position: relative; }
.sv-section--hero { padding-block: 0; }

/* Section heads */
.sv-section__head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.sv-section__title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin: 0 0 .75rem; }
.sv-section__intro { font-size: 1.125rem; color: var(--sv-color-muted, #6b6b6b); margin: 0; line-height: 1.6; }

/* ------------------------------------------------------------------- Buttons */
/* base .sv-btn is styled by the engine skin; here are the brand context variants */
/* Match the header .btn radius (10px) — the engine skin ships pill-round (999px); we want a consistent
   rounded-rect on every button site-wide. */
.sv-btn { border-radius: 10px; }
/* Without this, the global `a:hover` colour rule (style.css) outranks .sv-btn--primary on
   specificity and turns the button text amber-on-amber (unreadable) on hover. */
.sv-btn--primary:hover { background: var(--sv-color-orange, #F8A233); border-color: var(--sv-color-orange, #F8A233); color: var(--sv-color-primary-fg, #1A1B1B); }
.sv-btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.45); }
.sv-btn--ghost:hover { border-color: var(--sv-color-primary, #F9B40B); color: var(--sv-color-primary, #F9B40B); background: rgba(249,180,11,.08); }
.sv-btn--invert { background: var(--sv-color-dark, #1A1B1B); color: #fff; border: 2px solid var(--sv-color-dark, #1A1B1B); }
.sv-btn--invert:hover { background: #000; border-color: #000; color: #fff; }

/* =============================================================== HERO (dark) */
.sv-section--hero {
	background: radial-gradient(120% 100% at 15% 0%, #2a2418 0%, #1A1B1B 55%) , #1A1B1B;
	color: #fff; overflow: hidden;
}
/* Full-bleed photo behind the hero — the figure is absolutely positioned and the
   text sits above a dark scrim so any brand photo stays legible. */
.sv-hero__figure { position: absolute; inset: 0; z-index: 0; display: block; margin: 0; }
/* Hero container goes full-bleed (photo edge-to-edge); text is re-constrained on the body. */
.sv-section--hero .sv-container { max-width: none; padding: 0; }
.sv-hero { position: relative; display: flex; align-items: center; min-height: clamp(600px, 90vh, 920px); padding-top: 140px; padding-bottom: 90px; }
.sv-hero__figure { position: absolute; inset: 0; z-index: 0; margin: 0; }
.sv-hero__figure img, .sv-hero__media { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 1.2s cubic-bezier(.4,0,.2,1); }
/* Scrim ON the figure so the photo is darkened but the text (higher z) stays crisp. */
.sv-hero__figure::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(18,18,18,.92) 0%, rgba(18,18,18,.72) 45%, rgba(18,18,18,.35) 100%),
		linear-gradient(0deg, rgba(18,18,18,.80) 0%, transparent 42%),
		radial-gradient(60% 55% at 90% 18%, rgba(249,180,11,.14), transparent 70%);
}
/* Signature brand swoosh in the hero's top-right — above the photo/scrim (z0), below text (z2) */
.sv-section--hero::after {
	content: ""; position: absolute; top: 0; right: 0; z-index: 1; pointer-events: none;
	width: min(36%, 480px); aspect-ratio: 1339 / 887;
	background: url('../img/ye-top-corner.svg') top right / contain no-repeat;
	transition: opacity 1s ease .2s;
}
/* z-index 6 keeps the hero text + CTAs above the decorative wires figure (features::before, z4) at
 * any viewport where the two overlap; the light-switch (z10) still sits above the content. */
.sv-hero__body { position: relative; z-index: 6; width: 100%; max-width: var(--sv-container, 1240px); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.sv-hero__body > * { max-width: 750px; }
.sv-hero .sv-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; font-weight: 600; color: var(--sv-color-primary, #F9B40B); margin-bottom: 1.25rem; transition: color 1s ease; }
.sv-hero__title { color: #fff; font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 1.04; margin: 0 0 1.5rem; overflow-wrap: break-word; transition: color 1.1s ease; }
.sv-hero__intro { color: rgba(255,255,255,.95); font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 640px; margin: 0 0 2.25rem; text-shadow: 0 1px 14px rgba(0,0,0,.5); transition: color 1.1s ease; }
.sv-hero .sv-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- Power-on: the front page lands "off", JS adds .ye-lit after load (no-JS stays lit). ---- */
.ye-preload:not(.ye-lit) .sv-hero__figure img,
.ye-preload:not(.ye-lit) .sv-hero__media { filter: brightness(.2) grayscale(.8) contrast(.92); }
.ye-preload:not(.ye-lit) .sv-section--hero::after { opacity: 0; }
.ye-preload:not(.ye-lit) .sv-hero .sv-eyebrow { color: #555; }
.ye-preload:not(.ye-lit) .sv-hero__title { color: #454545; }
.ye-preload:not(.ye-lit) .sv-hero__intro { color: #4d4d4d; }
.ye-preload:not(.ye-lit) .sv-hero .sv-btn--primary { background: #2b2b2b; border-color: #2b2b2b; color: #777; box-shadow: none; }
.ye-preload:not(.ye-lit) .sv-hero .sv-btn--ghost { color: #666; border-color: #3a3a3a; }
/* Fluorescent warm-up flicker as the lights come on */
.ye-lit .sv-hero__title { animation: ye-flicker 1.25s both; }
.ye-lit .sv-hero .sv-eyebrow { animation: ye-flicker 1.1s both; }
@keyframes ye-flicker { 0%{opacity:.15} 6%{opacity:1} 11%{opacity:.3} 15%{opacity:1} 22%{opacity:.5} 27%{opacity:1} 55%{opacity:.9} 60%{opacity:1} 100%{opacity:1} }
@media (prefers-reduced-motion: reduce) { .ye-lit .sv-hero__title, .ye-lit .sv-hero .sv-eyebrow { animation: none; } }

/* ---- The light switch (front page hero) — flip it to toggle the lights ---- */
.ye-switch {
	position: absolute; z-index: 10; right: clamp(1rem, 4vw, 3rem); bottom: clamp(1.5rem, 6vh, 3rem);
	width: 74px; height: 118px; border-radius: 14px; cursor: pointer; border: 0; padding: 10px;
	background: linear-gradient(#33322f, #232220);
	box-shadow: 0 14px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.ye-switch::after { content: "OFF"; position: absolute; bottom: 7px; left: 0; right: 0; text-align: center; font-size: .55rem; letter-spacing: .14em; font-weight: 700; color: #6a6a6a; }
.ye-lit .ye-switch::after { content: "ON"; color: var(--sv-color-primary, #F9B40B); }
.ye-switch__rocker {
	position: absolute; left: 10px; right: 10px; height: 52px; border-radius: 10px; top: 54px;
	background: linear-gradient(#4a4844, #33322f);
	box-shadow: inset 0 -3px 8px rgba(0,0,0,.5), inset 0 2px 2px rgba(255,255,255,.12);
	transition: top .16s cubic-bezier(.4,1.5,.5,1), background .3s, box-shadow .3s;
}
.ye-lit .ye-switch__rocker { top: 10px; background: linear-gradient(#f7c14a, #f2a327); box-shadow: 0 0 18px rgba(249,180,11,.6); }
@media (max-width: 600px) { .ye-switch { width: 60px; height: 96px; right: 1rem; bottom: 1.25rem; } .ye-switch__rocker { height: 42px; top: 44px; } .ye-lit .ye-switch__rocker { top: 10px; } }

/* Inner-page heroes are a compact page-header; the full-height hero is home only. */
body:not(.home) .sv-hero { min-height: clamp(340px, 50vh, 600px); padding-top: 128px; padding-bottom: 56px; }
body:not(.home) .sv-hero__title { font-size: clamp(1.85rem, 4.6vw, 3.4rem); }

/* =========================================================== FEATURES: cards */
.sv-section--features { background: #fff; }

/* Brand wave line-figure straddling the hero → "Dit doen we" seam, anchored left.
   Top half overlaps the dark hero, bottom half the white section (maroon reads on both). */
.home .sv-section--hero + .sv-section--features::before {
	content: ""; position: absolute; top: 0;
	/* Fluid: scales smoothly with viewport (≈430px on a 1440 screen → 645px cap ~2150px+);
	   the left bleed grows in step so the extra size flows off-screen, not toward the CTA. */
	width: clamp(280px, 30vw, 645px); aspect-ratio: 297 / 253;
	left: clamp(-300px, -13vw, -90px);
	transform: translateY(-50%);
	background: url('../img/line-figure-01.svg') left center / contain no-repeat;
	pointer-events: none; z-index: 4;
	transition: filter 1.1s ease, opacity 1.1s ease;
}
/* the wave figure lands unlit with the rest of the hero, then gains its colour */
.ye-preload:not(.ye-lit) .sv-section--hero + .sv-section--features::before { filter: grayscale(.8) brightness(.5); opacity: .4; }
@media (max-width: 700px) { .home .sv-section--hero + .sv-section--features::before { display: none; } }
.sv-grid { display: grid; gap: 1.5rem; }
.sv-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .sv-grid--3 { grid-template-columns: 1fr; } }

.sv-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sv-color-border, #e7e4de); border-radius: 16px; padding: 2rem 1.85rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.sv-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(26,27,27,.10); border-color: rgba(249,180,11,.55); }
.sv-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: rgba(249,180,11,.14); color: var(--sv-color-dark, #1A1B1B); margin-bottom: 1.25rem; }
.sv-card__icon svg { width: 26px; height: 26px; }
.sv-card__title { font-size: 1.3rem; margin: 0 0 .6rem; }
.sv-card__body { color: var(--sv-color-fg, #444); margin: 0 0 1.1rem; font-size: .985rem; line-height: 1.62; }
/* Cards share a row height (grid stretch); pin the link to the bottom so it lines up
   across cards regardless of how much body text precedes it. */
.sv-card__link { margin-top: auto; align-self: flex-start; font-weight: 600; color: var(--sv-color-dark, #1A1B1B); border-bottom: 2px solid var(--sv-color-primary, #F9B40B); padding-bottom: 2px; }
.sv-card__link:hover { color: var(--sv-color-primary, #F9B40B); }

/* =========================================== FEATURES: tiles → dark contrast band */
.sv-section--features:has(.sv-features--tiles) { background: linear-gradient(160deg, #1A1B1B 0%, #221d16 100%); color: #fff; }
/* Dark card treatment — SHARED by the tiles band and the `dark` background scheme below. */
.sv-section--features:has(.sv-features--tiles) .sv-section__title,
.sv-bg-dark .sv-section__title { color: #fff; }
.sv-section--features:has(.sv-features--tiles) .sv-card,
.sv-bg-dark .sv-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
.sv-section--features:has(.sv-features--tiles) .sv-card:hover,
.sv-bg-dark .sv-card:hover { border-color: var(--sv-color-primary, #F9B40B); box-shadow: none; }
.sv-section--features:has(.sv-features--tiles) .sv-card__title,
.sv-bg-dark .sv-card__title { color: #fff; }
.sv-section--features:has(.sv-features--tiles) .sv-card__body,
.sv-bg-dark .sv-card__body { color: rgba(255,255,255,.72); }
.sv-section--features:has(.sv-features--tiles) .sv-card__icon,
.sv-bg-dark .sv-card__icon { background: rgba(249,180,11,.18); color: var(--sv-color-primary, #F9B40B); }
.sv-bg-dark .sv-card__link { color: #fff; }

/* ============================== SECTION BACKGROUND SCHEMES (the client bg-preset picker)
   The theme dequeues the engine's wrapper layer (functions.php), so it OWNS .sv-bg-* here.
   `.sv-section` scoping (0,2,0) lets an explicit pick override any single-class per-type
   background (.sv-section--features{#fff}, --cta{amber}, …). `default` is intentionally NOT
   defined — each section keeps its designed look until the client picks a scheme. `dark`
   reuses the card treatment above; on `muted` the cards go white via engine sections.css. */
.sv-section.sv-bg-muted   { background: var(--sv-color-surface, #f5f4f2); color: var(--sv-color-fg, #333); }
.sv-section.sv-bg-primary { background: var(--sv-color-primary, #F9B40B); color: var(--sv-color-primary-fg, #1A1B1B); }
.sv-section.sv-bg-dark    { background: linear-gradient(160deg, #1A1B1B 0%, #221d16 100%); color: #fff; }
.sv-bg-primary .sv-section__title { color: inherit; }

/* ================================================= MEDIA + TEXT (branded panel) */
.sv-section--media_text { background: #fff; }
.sv-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
/* Flip is handled by the engine (sections-layout.css: `.sv-split--flip .sv-split__text { order: 2; }`) —
   don't re-implement it here. A `direction: rtl` rule used to live on `.sv-split--flip` too, which
   cancelled the engine's `order` swap out and made flip a no-op. */
@media (max-width: 900px) { .sv-split { grid-template-columns: 1fr; } }
.sv-split__text .sv-section__title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 1.25rem; }
.sv-prose { color: var(--sv-color-fg, #444); line-height: 1.7; font-size: 1.02rem; }
.sv-prose p { margin: 0 0 1.1rem; }
/* Sits in an unclassed wrapper right after .sv-prose, so this margin collapses with the
   last paragraph's own margin-bottom (1.1rem) — it has to exceed that to read as a gap. */
.sv-split__text .sv-btn { margin-top: 2rem; }
.sv-split__figure, .sv-split__placeholder { border-radius: 20px; overflow: hidden; min-height: 380px; }
/* No photo yet → a branded charcoal panel with the amber beeldmerk watermark */
.sv-split__placeholder {
	background:
		radial-gradient(70% 60% at 70% 30%, rgba(249,180,11,.14), transparent 70%),
		linear-gradient(150deg, #1A1B1B, #2a1d11);
	position: relative;
}
.sv-split__placeholder::after {
	content: ""; position: absolute; inset: 0;
	background: url('../img/beeldmerk.svg') center/44% no-repeat;
	opacity: .9;
}

/* ================================================================ BANNER (dark) */
.sv-section--banner { background: linear-gradient(150deg, #1A1B1B 0%, #201c17 55%, #2c1d10 100%); color: #fff; }
.sv-banner { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; border-left: 4px solid var(--sv-color-primary, #F9B40B); padding-left: clamp(1.25rem, 3vw, 2.5rem); }
@media (max-width: 800px) { .sv-banner { grid-template-columns: 1fr; } }
.sv-banner__title { color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0 0 .75rem; }
.sv-banner__text, .sv-banner__intro { color: rgba(255,255,255,.78); margin: 0; max-width: 640px; line-height: 1.65; }
.sv-banner__action .sv-btn--invert { background: var(--sv-color-primary, #F9B40B); color: var(--sv-color-dark, #1A1B1B); border-color: var(--sv-color-primary, #F9B40B); }
.sv-banner__action .sv-btn--invert:hover { background: #fff; border-color: #fff; }

/* ================================================================= CTA (amber) */
.sv-section--cta { background: linear-gradient(135deg, var(--sv-color-primary, #F9B40B) 0%, var(--sv-color-orange, #F8A233) 100%); color: var(--sv-color-dark, #1A1B1B); text-align: center; }
.sv-cta { max-width: 720px; margin-inline: auto; }
.sv-cta__title { color: var(--sv-color-dark, #1A1B1B); font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 1rem; }
.sv-cta__intro { color: rgba(26,27,27,.82); font-size: 1.15rem; margin: 0 0 2rem; }
.sv-actions--center { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.sv-section--cta .sv-btn--invert { background: var(--sv-color-dark, #1A1B1B); color: #fff; border-color: var(--sv-color-dark, #1A1B1B); }
.sv-section--cta .sv-btn--invert:hover { background: #000; border-color: #000; transform: translateY(-2px); }