/*
 * Studio Spreekwoord — Kluis single-page layout (reconstructie 2026-05-12)
 *
 * Scope: lay-out + positionering voor single-kluis-page.php template.
 * Conditioneel geladen via ss_is_kluis_context() in inc/assets.php.
 *
 * Afhankelijkheden:
 *   - tokens.css      — design-tokens (kleuren, spaties, typografie)
 *   - main.css        — sitewide typografie, focus-ring-tokens
 *   - kluis.css       — input/feedback/animatie-basis
 *   - premium-kluis.css — KRAAK-button + confetti + pogingen (NIET AANRAKEN)
 *
 * HTML-contract (Webby — single-kluis-page.php):
 *   .ss-kluis-page                     — page-wrapper (premium-kluis.css)
 *   .ss-kluis-page__interactive        — flex-wrapper: kluis-illustratie + action-col
 *     .ss-vault-illustration           — positional container voor SVG + input-overlay
 *       .ss-vault-svg                  — inline SVG (Webby)
 *       .ss-vault-illustration__input-overlay — absolute HTML-input-layer OP SVG
 *         #ss-vault-input              — code-input (kluis.css)
 *     .ss-kluis-page__action           — KRAAK-button + attempts + feedback
 *   .ss-kluis-page__route-section      — grid: route-info + Leaflet kaart
 *     .ss-kluis-page__route-info       — tekst + secondary-CTA
 *     .ss-route-map                    — Leaflet container (iter-1; zie ook .ss-premium-nl-map iter-2)
 *     .ss-premium-nl-map               — NL-routes-overzicht Leaflet (iter-2, vervangt .ss-route-map markup)
 *
 * Preservatie-garanies (P-01..P-12):
 *   - KRAAK-button: premium-kluis.css-selectors ONAANGEROERD (P-01..P-03, P-10)
 *   - Input styling: kluis.css #ss-vault-input ONAANGEROERD (P-04..P-06)
 *   - Error-feedback: kluis.css #ss-vault-feedback ONAANGEROERD (P-07..P-08)
 *   - Attempts: premium-kluis.css .ss-kluis-page__attempts ONAANGEROERD (P-09)
 *   - Footer: main.css .ss-footer__link + .ss-footer__social ONAANGEROERD (P-12)
 *   - .ss-route-map CSS ONAANGEROERD — dood-code, Terry cleanup later
 *
 * Regression-element mapping (N-01..N-14 toevoegingen):
 *   N-01 .ss-vault-illustration            — §1 container
 *   N-02 .ss-vault-svg[role="img"]         — §1 SVG
 *   N-03 .ss-vault-svg__plaque text        — SVG-inhoud (Webby)
 *   N-04 .ss-vault-svg__display-frame      — SVG-inhoud (Webby)
 *   N-05 .ss-vault-illustration__input-overlay — §2 overlay + input (AC-R-02, iter-2 coords)
 *   N-06 .ss-vault-svg__dial               — SVG-inhoud (Webby)
 *   N-07 .ss-vault-svg__handle             — SVG-inhoud (Webby)
 *   N-08 .ss-vault-svg__hinges             — SVG-inhoud (Webby)
 *   N-09 .ss-route-map[data-route-lat]     — §3 container (iter-1, dood-code)
 *   N-10 .ss-route-map.is-loaded           — §3 state-class (JS, iter-1, dood-code)
 *   N-11 .leaflet-control-attribution      — Leaflet-injected (Webby)
 *   N-12 .ss-kluis-page__route-info h2     — §4 tekst
 *   N-13 .ss-kluis-page__route-info .ss-btn--secondary — §4 CTA
 *   N-14 .ss-route-map noscript            — §3 fallback (Webby, iter-1, dood-code)
 *   N-15 .ss-premium-nl-map               — §7b NL-routes Leaflet (iter-2, §10)
 *
 * @since 2026-05-12 — Iggy, Pixel-spec yvette-kluis-illustratie-reconstructie-spec-2026-05-12.md
 * @updated 2026-05-13 — Iggy, iter-2: viewBox 320×400, overlay-coords, anti-zwart-bug, .ss-premium-nl-map
 * @updated 2026-05-13 — Iggy, fix-ronde 6: map z-index fix, KRAAK-stack 1-col, hero-sub perkament-card
 * @updated 2026-05-13 — Iggy, iter-3: grid 2-col desktop + 4 wit-cards + tips-card + smaak-card + hero-sub → wit
 */

/* =========================================================================
   § 0 — HERO SECTIE (iter-3 — 2026-05-13)
   .ss-kluis-page__hero-sub = Card B in iter-3 grid.
   Benjamin koos iter-3: wit (#FFFFFF) i.p.v. perkament (afwijzing iter-2 P1).
   Styling beheerd via .ss-kluis-page__intro-card in § 12 (card-basis).
   color-override hier (body-text op wit-card: #595f6b = 6.414:1 WCAG AA).
   ========================================================================= */

.ss-kluis-page__hero-sub {
    margin: 0;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: clamp(1rem, 1.2vw + 0.5rem, 1.125rem);   /* 16–18px responsive */
    line-height: 1.6;
    color: #595f6b;     /* contrast 6.414:1 op wit (WCAG AA) */
}

/* =========================================================================
   § 1 — KLUIS-ILLUSTRATIE CONTAINER
   .ss-vault-illustration: relative-anker voor absolute input-overlay.
   Gebruikt aspect-ratio 320/400 (= viewBox iter-2 — AC-I2-05, Webby 2026-05-13).
   iter-1 was 320/360 — viewBox vergroot naar 320×400 voor meer adempauze onder dial.
   ========================================================================= */

.ss-vault-illustration {
    position: relative;
    width: 100%;
    max-width: 320px;      /* mobile-first: past binnen 375px viewport */
    margin: 0 auto;
    aspect-ratio: 320 / 400;
}

@media (min-width: 768px) {
    .ss-vault-illustration {
        max-width: 400px;
    }
}

@media (min-width: 1024px) {
    .ss-vault-illustration {
        max-width: 440px;
        flex: 0 0 440px;   /* desktop flex-child in .ss-kluis-page__interactive */
    }
}

/* SVG vult container volledig — schaalt mee met aspect-ratio */
.ss-vault-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* =========================================================================
   § 2 — INPUT-OVERLAY (AC-R-02, iter-2 coords — AC-I2-05)
   Absolute-layer die exacte display-frame-coördinaten van de SVG volgt.
   iter-1: viewBox 320×360 → x=40,y=70,w=240,h=60 → 12.5% / 19.4% / 75% / 16.7%
   iter-2: viewBox 320×400 → display-window verschoven → 15% / 23% / 70% / 18%
     (Pixel-spec AC-I2-05: nieuwe SVG-coords door groter canvas)
   pointer-events: none op wrapper zodat SVG-klikken passeren; input vangt zelf.
   background: transparent !important — anti zwart-overlay-bug (AC-I2-05).
   ========================================================================= */

.ss-vault-illustration__input-overlay {
    position: absolute;
    left: 15%;             /* iter-2: display-window links in 320px viewBox */
    top: 23%;              /* iter-2: display-window top in 400px viewBox */
    width: 70%;            /* iter-2: display-window breedte */
    height: 18%;           /* iter-2: display-window hoogte */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;  /* SVG-events passeren, input ontvangt zelf */
    background: transparent !important; /* anti zwart-overlay-bug (AC-I2-05) */
}

/* Input binnen overlay — erft layout van container via flex.
   Plugin ss-vault/assets/css/style.css gebruikt hogere specificiteit:
     input[type="text"]#ss-vault-input { border: 6px solid #000; width: unset;
       position: relative; top: 40px; left: 40px; }
   Override via element-selector toevoeging + !important op critische props.
   Specificiteit: .overlay > input[type="text"]#ss-vault-input = (0,1,2,1) > plugin (0,1,1,1). */
.ss-vault-illustration__input-overlay > input[type="text"]#ss-vault-input,
.ss-vault-illustration__input-overlay > #ss-vault-input {
    pointer-events: auto;
    width: 100% !important;       /* plugin zet width: unset */
    height: 100%;
    position: static !important;  /* plugin zet position: relative + top/left */
    top: auto !important;         /* plugin zet top: 40px */
    left: auto !important;        /* plugin zet left: 40px */
    /* min-height via kluis.css --min-touch (44px) — P-04 PRESERVE */
    /* box-shadow inset via kluis.css — P-05 PRESERVE */
    /* focus-ring via kluis.css + main.css tokens — P-06 PRESERVE */
    background: transparent !important; /* anti zwart-overlay-bug (AC-I2-05) */
    border: 0 !important;         /* plugin zet border: 6px solid #000 */
    border-radius: 0 !important;  /* plugin zet border-radius: 5px */
    padding: 8px 4px !important;  /* plugin zet padding: unset !important */
    color: var(--color-primary);
    font-family: var(--font-mono);
    font-size: clamp(20px, 6vw, 28px) !important; /* plugin zet font-size: 32px */
    font-weight: 700;
    letter-spacing: 0.4em;
    text-align: center;
    caret-color: var(--color-verfstreep);
    /* P-05 affordance-shadow: inset gold-underline (AC-10 polish-v2 PRESERVE) */
    box-shadow: inset 0 -2px 0 0 rgba(212, 168, 67, 0.45);
    transition: box-shadow var(--transition-base);
}

.ss-vault-illustration__input-overlay > #ss-vault-input::placeholder {
    color: var(--color-primary);
    opacity: 0.35;
    letter-spacing: 0.4em;
}

/* Focus-state — P-06 PRESERVE via sitewide tokens */
.ss-vault-illustration__input-overlay > #ss-vault-input:focus,
.ss-vault-illustration__input-overlay > #ss-vault-input:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    /* AC-10 full gold onderlijn bij focus */
    box-shadow: inset 0 -2px 0 0 var(--color-accent-gold);
}

/* =========================================================================
   § 3 — INTERACTIVE WRAPPER (AC-R-06)
   Altijd 1-kolom flex-stack op ALLE viewports: kluis BOVEN, KRAAK ONDER.
   Fix-ronde 6 (2026-05-13): desktop 2-col rule VERWIJDERD — Benjamin wil
   KRAAK altijd onder kluis stacked (Pixel-spec keuze A pre-akkoord).
   .ss-kluis-page__route-section MAG wel 2-col op ≥1024px — zie §5.
   ========================================================================= */

.ss-kluis-page__interactive {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

/* =========================================================================
   § 4 — ACTION-COLUMN (KRAAK-button wrapper)
   Centreert KRAAK-button + attempts + feedback onder de kluis op ALLE viewports.
   Fix-ronde 6: desktop flex-child rule VERWIJDERD (was voor 2-col, nu 1-col altijd).
   KRAAK-button styling ZELF zit in premium-kluis.css — NIET hier.
   ========================================================================= */

.ss-kluis-page__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 480px;
    margin-inline: auto; /* S2-fix 2026-06-02: centreert het knoppenblok onder de kluis-card */
}

/* =========================================================================
   § 5 — ROUTE-SECTION (AC-R-05, AC-R-04)
   Grid: 1 kolom op mobile, 2 kolommen op ≥1024px.
   Linkerkolom = route-info tekst + CTA; rechterkolom = Leaflet kaart.
   ========================================================================= */

.ss-kluis-page__route-section {
    margin-top: var(--space-xl);
    padding: var(--space-lg) 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 1024px) {
    .ss-kluis-page__route-section {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

/* =========================================================================
   § 6 — ROUTE-INFO BLOK (AC-R-05)
   Koptekst + alinea + secondary-CTA "Ontdek de andere routes".
   .ss-btn--secondary bestaat al in woocommerce.css — GEEN nieuw blok nodig.
   ========================================================================= */

.ss-kluis-page__route-info h2 {
    font-family: var(--font-heading);  /* --font-display bestaat niet, gebruik --font-heading */
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: var(--color-primary);       /* #013440 — contrast 16.05:1 op wit (AC-R-09 PASS) */
    margin-bottom: var(--space-md);
    line-height: var(--line-height-heading);
}

.ss-kluis-page__route-info p {
    line-height: 1.6;
    color: var(--color-text);
    margin-bottom: var(--space-md);
}

/* Inline links BINNEN alinea (NIET de CTA-button) */
.ss-kluis-page__route-info a:not(.ss-btn) {
    color: var(--color-verfstreep-dark); /* #A85829 — contrast 5.131:1 op wit (AC-R-09 PASS) */
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}

.ss-kluis-page__route-info a:not(.ss-btn):hover,
.ss-kluis-page__route-info a:not(.ss-btn):focus-visible {
    color: var(--color-primary);
    text-decoration-thickness: 2px;
}

/* =========================================================================
   § 7 — LEAFLET ROUTE-MAP CONTAINER (AC-R-04)
   Container-aspect: 16:10 mobile / 16:9 desktop.
   min-height als veiligheidsnet bij JS-fail of aspect-ratio missing.
   border + radius matchen perkament-card-stijl.
   ========================================================================= */

.ss-route-map {
    width: 100%;
    aspect-ratio: 16 / 10;     /* mobile: iets taller voor scroll-comfort */
    min-height: 220px;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-perkament); /* cream-placeholder tot Leaflet init */
    position: relative;
}

@media (min-width: 1024px) {
    .ss-route-map {
        aspect-ratio: 16 / 9;  /* desktop: standaard 16:9 */
        min-height: 280px;
    }
}

/* State: kaart geladen (Leaflet voegt toe) */
.ss-route-map.is-loaded {
    background: transparent;   /* Leaflet-tiles nemen over */
}

/* State: kaart fout (JS-fail of geen lat/lng) */
.ss-route-map.has-error {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-perkament);
}

/* Error-bericht binnen container */
.ss-route-map__error {
    padding: var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    text-align: center;
    line-height: var(--line-height-base);
}

.ss-route-map__error a {
    color: var(--color-primary-light);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* noscript-bericht binnen container (zichtbaar zonder JS) */
.ss-route-map__noscript {
    padding: var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    text-align: center;
    line-height: var(--line-height-base);
    margin: 0;
}

.ss-route-map__noscript a {
    color: var(--color-primary-light);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* =========================================================================
   § 10 — NL-ROUTES OVERZICHT KAART (iter-2 — AC-I2-06)
   .ss-premium-nl-map vervangt .ss-route-map in markup (Webby iter-2).
   Toont multi-marker Leaflet kaart met alle NL-routes (i.p.v. single-location).
   .ss-route-map CSS BLIJFT staan als dood-code — Terry cleanup later.

   Fix-ronde 6 (2026-05-13): Leaflet injecteert .leaflet-pane met z-index:400,
   waardoor kaart BOVEN sticky nav (z-index:100) verscheen bij scrollen.
   isolation:isolate maakt nieuwe stacking-context → Leaflet's interne z-index
   escaleren NOOIT buiten de kaartcontainer. z-index:1 op container is extra
   veiligheid onder nav (--z-sticky: 100).
   ========================================================================= */

.ss-premium-nl-map {
    width: 100%;
    aspect-ratio: 16 / 10;         /* mobile: iets taller voor scroll-comfort */
    min-height: 280px;              /* veiligheidsnet bij aspect-ratio missing */
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-md);
    overflow: hidden;               /* Leaflet markers binnen bounds houden */
    background: var(--color-bg-perkament); /* cream-placeholder tot Leaflet init */
    position: relative;
    z-index: 1;                     /* Fix-ronde 6: onder sticky nav (--z-sticky:100) */
    isolation: isolate;             /* Fix-ronde 6: isoleert Leaflet z-index-stack */
}

@media (min-width: 1024px) {
    .ss-premium-nl-map {
        aspect-ratio: 16 / 9;      /* desktop: standaard 16:9 */
        min-height: 340px;
    }
}

/* State: kaart geladen (Leaflet JS voegt toe) */
.ss-premium-nl-map.is-loaded {
    background: transparent;        /* Leaflet-tiles nemen over */
}

/* State: kaart fout (JS-fail, tiles blocked, of geen route-data) */
.ss-premium-nl-map.has-error {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-perkament);
}

/* WCAG 2.5.5 — .custom-marker hitbox 44×44px (Leaflet DivIcon, iconSize 28×40)
   Optie A: ::after pseudo-element verlengt click-target zonder visuele wijziging.
   inset: -8px links/rechts (28+16=44), -2px top/bottom (40+4=44). */
.custom-marker {
    position: relative;
}
.custom-marker::after {
    content: '';
    position: absolute;
    inset: -2px -8px;
}

/* =========================================================================
   § 8 — REDUCED-MOTION (AC-R-10)
   Input/button transitions gerespecteerd via bestaande reduced-motion-rules.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    /* Input-overlay transitions — kluis.css #ss-vault-input transition:none
       vangt dit al op bij prefers-reduced-motion. Extra zekerheid: */
    .ss-vault-illustration__input-overlay > #ss-vault-input {
        transition: none !important;
    }
}

/* =========================================================================
   § 8a — DIAL-NEEDLE ANIMATIES (v4 — AC-R-07 + stap-rotatie + spin)

   Target: .ss-vault-svg__dial-needle (<g> in SVG viewBox 0 0 320 400)
   Needle rect: x=158 y=226 w=4 h=46 — wijst van y=226 (top) naar y=272 (bottom)
   Dial-center: cx=160 cy=270 (viewBox-coords)
   Transform-origin: 160px 270px — exact het dial-center in SVG userspace.
     Reden: needle-bottom y=272 ≈ dial cy=270 (2px verschil); rotatie om dial-
     center geeft meest realistisch draai-effect (naald draait rond as).
     SVG-<g> heeft geen box-model → transform-origin in absolute px (niet %).

   Class-naming (gesynced met Webby):
     .is-typing-1   — 1e digit ingevoerd → −36° (stap 1/10 cirkel)
     .is-typing-2   — 2e digit ingevoerd → −72° (stap 2/10)
     .is-typing-3   — 3e digit ingevoerd → −108° (stap 3/10)
     .is-spinning   — submit bezig → 360° loop
     (geen class) → idle-breathe altijd actief als geen andere state

   Keyframe-hergebruik: ss-dial-spin is een nieuwe naam (scope: alleen dial-needle).
     De bestaande ss-kluis-spin in kluis.css/.premium-kluis.css blijft onaangeroerd.
   ========================================================================= */

/* --- 1. Idle-breathe (altijd actief tenzij andere state) --- */

@keyframes ss-dial-needle-breathe {
    0%, 100% { transform: rotate(-2deg); }
    50%      { transform: rotate(2deg);  }
}

.ss-vault-svg__dial-needle {
    transform-origin: 160px 270px; /* dial-center in SVG viewBox-coords */
    animation: ss-dial-needle-breathe 4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .ss-vault-svg__dial-needle {
        animation: none;
    }
}

/* --- 2. Stap-rotatie classes (per digit-input, Webby zet class via JS) --- */
/* Absolute rotaties — is-typing-3 = altijd −108° ongeacht eerdere state.
   Cumulatieve rotatie via JS custom-property is complexer en onnodig.
   animation: none stopt idle-breathe zodra een typing-class actief is.   */

.ss-vault-svg__dial-needle.is-typing-1 {
    transform: rotate(-36deg);
    animation: none; /* idle-breathe stoppen */
    transition: transform 200ms ease-out;
}

.ss-vault-svg__dial-needle.is-typing-2 {
    transform: rotate(-72deg);
    animation: none;
    transition: transform 200ms ease-out;
}

.ss-vault-svg__dial-needle.is-typing-3 {
    transform: rotate(-108deg);
    animation: none;
    transition: transform 200ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    /* Positie behouden (functionele feedback), maar geen smooth overgang */
    .ss-vault-svg__dial-needle.is-typing-1,
    .ss-vault-svg__dial-needle.is-typing-2,
    .ss-vault-svg__dial-needle.is-typing-3 {
        transition: none;
    }
}

/* --- 3. Spin-loop tijdens submit --- */
/* Eigen keyframe ss-dial-spin (scope: dial-needle) — NIET ss-kluis-spin
   (die staat op kluis.css/.ss-vault-button en blijft ongewijzigd).        */

@keyframes ss-dial-spin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

.ss-vault-svg__dial-needle.is-spinning {
    animation: ss-dial-spin 800ms linear infinite;
    /* transition: none impliciet door animation override — geen 'sticky' rotatie */
}

@media (prefers-reduced-motion: reduce) {
    .ss-vault-svg__dial-needle.is-spinning {
        animation: none;
        /* Alternatief feedback: opacity-pulse als reduced-motion alternatief */
        opacity: 0.5;
    }
}

/* =========================================================================
   § 9 — FORCED-COLORS (Windows hi-contrast, a11y-mode)
   ========================================================================= */

@media (forced-colors: active) {
    .ss-vault-illustration {
        border: 1px solid CanvasText;
    }

    .ss-route-map {
        border: 2px solid CanvasText;
    }

    .ss-premium-nl-map {
        border: 2px solid CanvasText;
    }

    .ss-vault-illustration__input-overlay > #ss-vault-input {
        border: 2px solid CanvasText;
        box-shadow: none;
    }
}

/* =========================================================================
   § 10 — A11Y COLOR-CONTRAST OVERRIDE
   .ss-kluis-page__attempts gebruikt --color-text-muted (#6B7280 = ratio 4.48:1)
   — net onder WCAG AA 4.5:1. Override naar #595f6b (ratio ~5.0:1) enkel hier.
   Geen token-aanpassing: andere elementen mogen op --color-text-muted blijven.
   Lighthouse audit: Acc 90 → 93 doelstelling (fix-ronde 6, 2026-05-13).
   ========================================================================= */

.ss-kluis-page__attempts {
    color: #595f6b; /* muted-darker: WCAG AA ~5.0:1 op #FFFFFF / perkament */
}

/* Override .ss-kluis-page__all-link — premium-kluis.css gebruikt --color-text-muted
   (#6B7280, ratio 4.48:1) wat WCAG AA faalt. Geladen ná premium-kluis.css (assets.php
   regel 123-125), dus cascade-volgorde + .ss-kluis-page parent-specificity volstaat.
   !important als veiligheidsnet tegen toekomstige premiums-kluis-wijzigingen. */
.ss-kluis-page .ss-kluis-page__all-link {
    color: #595f6b !important; /* muted-darker: WCAG AA ~5.0:1 op #FFFFFF / perkament */
}

/* =========================================================================
   § 11 — ITER-3 GRID-LAYOUT (2026-05-13)
   Benjamin afwijzing iter-2 P2: wil desktop 2-col layout.
   .ss-kluis-page__main  = grid-parent voor left (kluis + form) + right (intro + map)
   .ss-kluis-page__bottom = grid-parent voor smaak-card + tips-card
   Mobile: 1-col gestapeld. Desktop ≥1024px: 2-col naast elkaar.

   Breakpoint 1024px:
     - Onder 1024: cards naast elkaar te smal (≤512px elk, krap voor 320px kluis-SVG)
     - Boven 1024: 2-col geeft adem + vermindert verticaal scrollen
   ========================================================================= */

/* Card-tokens (scope: kluis-page) — optionele tokens naast bestaande token-set */
:root {
    --ss-card-bg:              #FFFFFF;
    --ss-card-shadow:          0 2px 12px rgba(1, 52, 64, 0.08);
    --ss-card-shadow-hover:    0 4px 18px rgba(1, 52, 64, 0.12);
    --ss-card-radius:          var(--radius-md, 12px);
    --ss-card-padding:         clamp(1.25rem, 3vw, 2rem);
    --ss-card-gap:             clamp(1rem, 2.5vw, 2rem);
}

/* Main grid: kluis-left + context-right */
.ss-kluis-page__main {
    display: grid;
    grid-template-columns: 1fr;                      /* mobile: 1-col */
    gap: var(--ss-card-gap, clamp(1rem, 2.5vw, 2rem));
    margin: 0 auto;
    max-width: 1200px;
    padding: clamp(1rem, 3vw, 2.5rem);
}

/* Bottom grid: smaak-card + tips-card */
.ss-kluis-page__bottom {
    display: grid;
    grid-template-columns: 1fr;                      /* mobile: 1-col */
    gap: var(--ss-card-gap, clamp(1rem, 2.5vw, 2rem));
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 clamp(1rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4rem);
}

@media (min-width: 1024px) {
    .ss-kluis-page__main {
        /* S3-REWORK 2026-06-01 (Webby): de kluis (linkerkolom) is de échte
           interactie en moet visueel dominant zijn. Voorheen 1fr/1fr waardoor
           de NL-overzichtskaart (rechts) de breedte + verticale ruimte domineerde
           terwijl de kluis in een smallere kolom zat (Scorrie-diagnose §1.4).
           Nu krijgt links meer breedte zodat de kluis-SVG groter staat. */
        grid-template-columns: 1.35fr 1fr;           /* desktop: kluis dominant */
        align-items: start;                          /* cards groeien met content */
    }

    .ss-kluis-page__bottom {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

/* S3-REWORK: NL-overzichtskaart secundair maken op de kluis-page (alleen hier
   gescoped — homepage-kaart blijft groot). Lagere hoogte = de kaart domineert
   het rechterveld niet meer; de kluis-SVG (links) is het zwaartepunt. */
@media (min-width: 1024px) {
    .ss-kluis-page__map-card .ss-premium-nl-map {
        aspect-ratio: 4 / 3;
        min-height: 260px;
        max-height: 320px;
    }
}

/* .left + .right: semantische wrappers — geen visuele border, alleen flex-stack */
.ss-kluis-page__left,
.ss-kluis-page__right {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
}

/* =========================================================================
   § 12 — 4 WIT-CARDS (iter-3 — AC-I3-01)
   Benjamin koos P1: witte cards i.p.v. perkament.
   Basis-class via grouped-selector (DRY — Pixel-spec §3.3).
   4 actieve cards: kluis, intro, map, smaak, tips.
   Reward-card NIET gestyled (Benjamin koos geen reward-card op kluis-page).

   Card-token-discipline:
     bg:      --ss-card-bg     (#FFFFFF)
     shadow:  --ss-card-shadow (rgba(1,52,64,0.08) — primary-tint, niet pure-black)
     radius:  --ss-card-radius (var(--radius-md, 12px))
     padding: --ss-card-padding (clamp(1.25rem, 3vw, 2rem))
   ========================================================================= */

/* Card-basis: gedeelde visuele regels — mobile padding.
   (Card E / .ss-kluis-page__antwoorden-card verwijderd in rework 2026-06-01.) */
.ss-kluis-page__kluis-card,
.ss-kluis-page__intro-card,
.ss-kluis-page__map-card,
.ss-kluis-page__smaak-card,
.ss-kluis-page__tips-card {
    background: var(--ss-card-bg, #FFFFFF);
    border-radius: var(--ss-card-radius, 12px);
    box-shadow: var(--ss-card-shadow, 0 2px 12px rgba(1, 52, 64, 0.08));
    padding: var(--ss-card-padding, clamp(1.25rem, 3vw, 2rem));
}

/* Card A — kluis-card: centreert kluis-illustratie SVG */
.ss-kluis-page__kluis-card {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Extra padding zodat SVG niet kust met card-rand */
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

/* Kluis-illustratie max-width binnen card A (iter-2 PRESERVE) */
.ss-kluis-page__kluis-card .ss-vault-illustration {
    width: 100%;
    max-width: 320px;   /* mobile */
}

@media (min-width: 400px) {
    .ss-kluis-page__kluis-card .ss-vault-illustration {
        max-width: 360px;
    }
}

@media (min-width: 1024px) {
    .ss-kluis-page__kluis-card .ss-vault-illustration {
        max-width: 400px;
    }
}

/* Card C — smaak-card: iets meer padding voor visueel-zwaarder content */
.ss-kluis-page__smaak-card {
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
}

/* Map-card: isolation voor Leaflet z-index (aanvullend op .ss-premium-nl-map) */
.ss-kluis-page__map-card {
    overflow: visible;    /* Leaflet-popup mag buiten card-rand groeien */
    isolation: isolate;   /* eigen stacking-context voor Leaflet */
}

/* =========================================================================
   § 13 — TIPS-CARD SPECIFIEKE STYLING (Card D — iter-3, AC-I3-06)
   Bulb-icoon in gouden cirkel + heading + body-tekst + reward-block.
   Anti-AI: gold-tint achtergrond + border-left op reward (geen emoji).
   ========================================================================= */

/* Tips-card: flex-column voor goede verticale stapeling */
.ss-kluis-page__tips-card {
    display: flex;
    flex-direction: column;
    gap: 0;   /* ruimte via margin-bottom op paragrafen */
}

/* Heading met bulb-icoon inline */
.ss-kluis-page__tips-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(1.125rem, 1.4vw + 0.5rem, 1.375rem);   /* 18–22px */
    font-weight: 600;
    color: #013440;      /* contrast 13.406:1 op wit (AC-I3-11 PASS) */
    margin: 0 0 clamp(0.5rem, 1.2vw, 1rem);
    line-height: 1.3;
}

/* Bulb-icoon cirkel: zachte gouden achtergrond */
.ss-kluis-page__tips-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(212, 168, 67, 0.18);  /* zachte gouden cirkel — anti-AI */
    border-radius: 50%;
    flex-shrink: 0;
}

.ss-kluis-page__tips-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

/* Body-tekst in tips-card */
.ss-kluis-page__tips-card p {
    font-family: var(--font-body);
    font-size: clamp(0.9375rem, 1vw + 0.4rem, 1.0625rem);
    line-height: 1.6;
    color: #595f6b;      /* contrast 6.414:1 op wit (AC-I3-11 PASS) */
    margin: 0 0 0.875rem;
}

.ss-kluis-page__tips-card p:last-child {
    margin-bottom: 0;
}

/* Reward-block: subtiele gold-tint achtergrond + gouden border-left (anti-AI) */
.ss-kluis-page__tips-reward {
    background: rgba(212, 168, 67, 0.10);     /* subtle gold tint */
    border-left: 3px solid #D4A843;            /* gouden accent-lijn */
    padding: clamp(0.75rem, 1.5vw, 1rem);
    border-radius: 4px;
    font-size: clamp(0.875rem, 0.95vw + 0.4rem, 1rem);
    color: #013440 !important;                 /* override grey body — 13.4:1 op wit (AC-I3-11) */
    margin: 0;                                 /* :last-child reset */
}

.ss-kluis-page__tips-reward strong {
    color: #013440;
    font-weight: 700;
}

/* =========================================================================
   § 14 — MAP-CARD HEADING TYPOGRAFIE (iter-3)
   .ss-kluis-page__map-heading in Card (map-card, rechterkolom desktop).
   Font, grootte en kleur conform Pixel-spec §3.4 map-card.
   ========================================================================= */

.ss-kluis-page__map-heading {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem);   /* 18–24px */
    font-weight: 600;
    color: #013440;      /* contrast 13.406:1 op wit (AC-I3-11 PASS) */
    margin: 0 0 clamp(0.75rem, 1.5vw, 1.25rem);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* =========================================================================
   § 15 — SMAAK-CARD HEADING + CTA (Card C — iter-3, AC-I3-05)
   .ss-kluis-page__smaak-heading: Cormorant Garamond, primary-kleur op wit.
   .ss-kluis-page__smaak-cta: verfstreep-dark CTA-button (polish-v2 P-02 preserve).
   Reduced-motion: CTA-transition none (AC-I3-13).
   ========================================================================= */

/* Smaak-heading: display-grootte — zwaarder dan map/tips (pagina-anchoring) */
.ss-kluis-page__smaak-heading {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);          /* 24–32px */
    font-weight: 600;
    color: #013440;      /* contrast 13.406:1 op wit (AC-I3-11 PASS) */
    margin: 0 0 clamp(0.75rem, 1.5vw, 1.25rem);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* Smaak-card body-tekst */
.ss-kluis-page__smaak-card p {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw + 0.5rem, 1.125rem);
    line-height: 1.6;
    color: #595f6b;      /* contrast 6.414:1 op wit (AC-I3-11 PASS) */
    margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
}

/* Smaak-CTA: verfstreep-dark button (P-02 kleur preserve, AC-I3-12 tap-target) */
.ss-kluis-page__smaak-cta {
    display: inline-block;
    background: #A85829;         /* verfstreep-dark — contrast 5.131:1 wit-tekst (AC-I3-11 PASS) */
    color: #FFFFFF;
    padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.25rem, 2.5vw, 1.75rem);
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1vw + 0.5rem, 1.0625rem);
    transition: background 200ms ease, transform 200ms ease;
    min-height: 44px;            /* WCAG 2.5.5 tap-target (AC-I3-12 PASS) */
    line-height: 1.4;
}

.ss-kluis-page__smaak-cta:hover {
    background: #8E4A23;         /* iets donkerder voor hover-feedback */
}

.ss-kluis-page__smaak-cta:focus-visible {
    outline: 3px solid #D4A843;  /* gouden focus-ring conform sitewide stijl */
    outline-offset: 2px;
}

/* Reduced-motion: CTA-transition none (AC-I3-13) */
@media (prefers-reduced-motion: reduce) {
    .ss-kluis-page__smaak-cta {
        transition: none !important;
    }
}

/* =========================================================================
   § 16 — INTRO-CARD CONTENT + ANTWOORDEN-LINK (REWORK 2026-06-01, Webby)

   Het eigen "Card E" (.ss-kluis-page__antwoorden-card) + altijd-zichtbare
   antwoorden-knop is VERWIJDERD. De antwoorden-link wordt nu geleverd door
   de plugin/theme-flow: kluis.js onthult [data-ss-answers-slot] na 3 foute
   pogingen. We stylen die link hier prominent on-brand (overschrijft de
   subtiele muted-link uit premium-kluis.css — single-kluis-page.css wordt
   NA premium-kluis.css ingeladen, zie inc/assets.php).

   In de intro-card (Card B) tonen we nu:
     - de optionele locatie-afbeelding (S4 — alleen bij een gekozen locatiefoto)
     - de instructie-subtekst (.ss-kluis-page__hero-sub)
     - Yvette's intro-copy (.ss-kluis-page__intro-copy, S2)
   ========================================================================= */

/* ---- Intro-card: verticale stack met ruimte tussen afbeelding/tekst ---- */
.ss-kluis-page__intro-card {
    display: flex;
    flex-direction: column;
    gap: clamp(0.875rem, 1.8vw, 1.25rem);
}

/* Yvette's intro-copy — leesbaar, iets zachter dan de instructie-subtekst */
.ss-kluis-page__intro-copy {
    margin: 0;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: clamp(0.9375rem, 1vw + 0.4rem, 1.0625rem);   /* 15–17px */
    line-height: 1.65;
    color: #013440;    /* primary — contrast 13.4:1 op wit (WCAG AAA) */
}

/* Locatie-afbeelding wrapper — ronde hoeken, overflow hidden */
.ss-kluis-page__locatie-afb-wrap {
    width: 100%;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    line-height: 0;    /* verwijder whitespace-gap onder img */
}

/* Afbeelding zelf: volle breedte, respecteer aspect-ratio */
.ss-kluis-page__locatie-afb {
    display: block;
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: cover;
    object-position: center;
}

/* ---- Antwoorden-link (reveal-after-3-fails) — prominent on-brand ----
   Overschrijft .ss-kluis-page__answers-link uit premium-kluis.css (muted text-
   link) naar een duidelijk zichtbare button-stijl. De slot zelf blijft hidden
   tot kluis.js [hidden] verwijdert na de laatste foute poging.               */
.ss-kluis-page__answers-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    min-height: 52px;
    padding: 0.75rem 1.5rem;

    background: #013440;      /* primary — sterk contrast 13.4:1 op wit */
    color: #FFFFFF;
    border-radius: 8px;
    border: 2px solid rgba(212, 168, 67, 0.45);   /* subtiele goud-accent */

    text-decoration: none;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: clamp(0.9375rem, 1vw + 0.5rem, 1.0625rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.4;

    transition: background 200ms ease, border-color 200ms ease, transform 120ms ease;
}

.ss-kluis-page__answers-link:hover,
.ss-kluis-page__answers-link:focus-visible {
    background: #024a56;
    color: #FFFFFF;
    border-color: rgba(212, 168, 67, 0.80);
    text-decoration: none;
}

.ss-kluis-page__answers-link:active {
    transform: translateY(1px);
}

.ss-kluis-page__answers-link:focus-visible {
    outline: 3px solid #D4A843;
    outline-offset: 2px;
}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .ss-kluis-page__answers-link {
        transition: none !important;
    }
    .ss-kluis-page__answers-link:active {
        transform: none;
    }
}

/* Forced-colors */
@media (forced-colors: active) {
    .ss-kluis-page__answers-link {
        border: 2px solid ButtonText;
        background: ButtonFace;
        color: ButtonText;
    }
}

/* Desktop-override (≥1024px): link mag iets groter worden */
@media (min-width: 1024px) {
    .ss-kluis-page__answers-link {
        min-height: 56px;
        font-size: 1.0625rem;
    }
}