/*
 * gm-blokken.css - gedeelde basis voor alle blocks.
 *
 * Core laadt dit bestand zelf (Integrations\Assets, wp_enqueue_scripts
 * prioriteit 5), dus elke site heeft het en niemand kopieert het meer naar zijn
 * child theme. Het is de basislaag: de stylesheet van core en die van het child
 * theme laden erna en winnen dus.
 *
 * Bewust plain CSS (geen @apply): het werkt in elke build, ongeacht de Tailwind-
 * configuratie van de klant.
 *
 * Inhoud:
 *   1. Sectie-achtergronden (wit / grijs / donker) en ruimte (normaal / compact)
 *   2. Kaarten op een donkere sectie
 *   3. Foto-placeholder voor voertuigen zonder beeld, en de merklogo's uit core
 *   4. Scroll-reveal animaties (+ stagger), count-up, marquee, parallax
 *   5. Scroll-strips (horizontale sliders met scroll-snap)
 *   6. Premium laag: tokens, koppen, eyebrows, kaarten, beeld, badges, getallen, knoppen
 */

/* ---------------------------------------------------------------------------
 * 1. Secties
 * ------------------------------------------------------------------------- */

:root {
    /* Lichte kleuren bewaren zodat een kaart op een donkere sectie ze terug kan zetten */
    --gm-licht-body-active: var(--color-body-active);
    --gm-licht-body: var(--color-body);
    --gm-licht-body-secondary: var(--color-body-secondary);
    --gm-licht-border-primary: var(--color-border-primary);
    --gm-licht-bg-secondary: var(--color-bg-secondary);

    --gm-reveal-afstand: 18px;
    --gm-reveal-duur: 650ms;
    --gm-reveal-stap: 90ms;

    /* Premium laag (sectie 6). Een child theme overschrijft deze vier regels
     * en de hele library volgt: radius, schaduw, accent en curve. */
    --gm-radius-s: 0.625rem;
    --gm-radius: 1rem;
    --gm-radius-l: 1.5rem;
    --gm-radius-xl: 2rem;
    --gm-schaduw-s: 0 1px 2px rgba(10, 20, 40, 0.05), 0 8px 24px -16px rgba(10, 20, 40, 0.18);
    --gm-schaduw: 0 2px 4px rgba(10, 20, 40, 0.04), 0 24px 48px -24px rgba(10, 20, 40, 0.28);
    --gm-schaduw-l: 0 40px 80px -32px rgba(10, 20, 40, 0.4);
    --gm-accent: var(--color-primary);
    /* Accent zoals het op de huidige ondergrond mag staan. Op donkere secties
       is --gm-accent zelf te donker voor tekst en haarlijntjes. */
    --gm-accent-op: var(--gm-accent);
    --gm-lijn: var(--color-border-primary);
    --gm-curve: cubic-bezier(0.22, 1, 0.36, 1);
    --gm-glas-bg: rgba(255, 255, 255, 0.72);
    --gm-glas-rand: rgba(255, 255, 255, 0.55);
}

.gm-sectie--grijs {
    background: var(--color-bg-secondary);
    margin-top: var(--sectionPadding);
    padding-bottom: var(--sectionPadding);
}

.gm-sectie--donker {
    --gm-accent-op: color-mix(in srgb, var(--gm-accent) 42%, #ffffff);
    /* Niet var(--color-body-active): die wordt hieronder in dezelfde regel wit. */
    background-color: var(--gm-licht-body-active);
    background-image: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--gm-accent) 22%, transparent), transparent 60%);
    color: #fff;
    margin-top: var(--sectionPadding);
    padding-bottom: var(--sectionPadding);

    /* Alles wat de design-tokens gebruikt wordt automatisch licht */
    --color-body-active: #ffffff;
    --color-body: rgba(255, 255, 255, 0.78);
    --color-body-secondary: rgba(255, 255, 255, 0.55);
    --color-border-primary: rgba(255, 255, 255, 0.16);
    --color-bg-secondary: rgba(255, 255, 255, 0.06);
}

/* Accent-sectie: het merk als vlak, voor een cta of een strook die moet opvallen */
.gm-sectie--accent {
    background-color: var(--gm-accent);
    background-image: radial-gradient(80% 80% at 100% 100%, rgba(255, 255, 255, 0.14), transparent 60%);
    color: #fff;
    margin-top: var(--sectionPadding);
    padding-bottom: var(--sectionPadding);

    --color-primary: #ffffff;
    --color-body-active: #ffffff;
    --color-body: rgba(255, 255, 255, 0.82);
    --color-body-secondary: rgba(255, 255, 255, 0.6);
    --color-border-primary: rgba(255, 255, 255, 0.22);
    --color-bg-secondary: rgba(255, 255, 255, 0.1);

    /* Op het accentvlak zelf is het accent onzichtbaar; wit is hier het accent. */
    --gm-accent-op: #ffffff;
}

/* Twee gekleurde secties direct na elkaar: geen dubbele marge */
.gm-sectie--grijs + .gm-sectie--grijs,
.gm-sectie--donker + .gm-sectie--donker,
.gm-sectie--accent + .gm-sectie--accent,
.gm-sectie--grijs + .gm-sectie--donker,
.gm-sectie--donker + .gm-sectie--grijs,
.gm-sectie--grijs + .gm-sectie--accent,
.gm-sectie--accent + .gm-sectie--grijs,
.gm-sectie--donker + .gm-sectie--accent,
.gm-sectie--accent + .gm-sectie--donker {
    margin-top: 0;
}

.gm-sectie--compact {
    padding-top: calc(var(--sectionPadding) / 2);
}

.gm-sectie--compact.gm-sectie--grijs,
.gm-sectie--compact.gm-sectie--donker,
.gm-sectie--compact.gm-sectie--accent {
    padding-bottom: calc(var(--sectionPadding) / 2);
}

/* ---------------------------------------------------------------------------
 * 2. Kaarten
 * ------------------------------------------------------------------------- */

.gm-kaart {
    background: #fff;
}

.gm-sectie--donker .gm-kaart,
.gm-sectie--accent .gm-kaart {
    --color-primary: var(--gm-accent);
    --color-body-active: var(--gm-licht-body-active);
    --color-body: var(--gm-licht-body);
    --color-body-secondary: var(--gm-licht-body-secondary);
    --color-border-primary: var(--gm-licht-border-primary);
    --color-bg-secondary: var(--gm-licht-bg-secondary);
    color: var(--gm-licht-body);
}

/* Een donkere kaart (bv. cijfers op wit) gebruikt dezelfde truc andersom */
.gm-kaart--donker {
    --gm-accent-op: color-mix(in srgb, var(--gm-accent) 42%, #ffffff);
    background: var(--gm-licht-body-active);
    color: #fff;
    --color-body-active: #ffffff;
    --color-body: rgba(255, 255, 255, 0.78);
    --color-body-secondary: rgba(255, 255, 255, 0.55);
    --color-border-primary: rgba(255, 255, 255, 0.16);
    --color-bg-secondary: rgba(255, 255, 255, 0.06);
}

/* ---------------------------------------------------------------------------
 * 3. Foto-placeholder en merklogo's
 * ------------------------------------------------------------------------- */

.gm-foto-placeholder {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-align: center;
    background-color: var(--color-bg-secondary);
    background-image: repeating-linear-gradient(
            135deg,
            var(--color-border-primary) 0,
            var(--color-border-primary) 1px,
            transparent 1px,
            transparent 14px
    );
}

.gm-foto-placeholder__merk {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-body-active);
}

.gm-foto-placeholder__tekst {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-body-secondary);
}

/*
 * Merklogo's die core meelevert (resources/merken/, Support\Merklogos).
 * De verhoudingen lopen ver uiteen - Peugeot is een brede regel van 480x42,
 * Volvo een vierkant - dus krijgt elk logo hetzelfde vak en schaalt het daarin
 * mee. Zo blijven de tegels even hoog en wordt geen logo uitgerekt.
 *
 * Staat hier en niet in Tailwind-classes op het block: dan werkt het ook in een
 * child theme dat blocks-library niet meescant bij het bouwen van zijn CSS.
 */
.gm-merklogo {
    display: flex;
    height: 3rem;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.gm-merklogo img {
    width: auto;
    max-width: min(150px, 100%);
    max-height: 100%;
    object-fit: contain;
}

/* ---------------------------------------------------------------------------
 * 4. Scroll-reveal
 *
 * Gebruik:
 *   <section data-gm-reveal>                 sectie schuift zacht omhoog in beeld
 *   <div data-gm-reveal="links|rechts|zoom|fade">   variant
 *   <div class="grid" data-gm-stagger>       kinderen komen één voor één (90 ms) in beeld
 *   <span data-gm-tellen>1.250</span>        telt op van 0 naar de waarde
 *   <div data-gm-marquee>                    kinderen schuiven oneindig door (logo-strip)
 *   <div data-gm-parallax="0.15">            achtergrond beweegt langzamer dan de pagina
 *
 * gm-blokken.js zet <html class="gm-js">; zonder JS blijft alles gewoon zichtbaar.
 * Bij prefers-reduced-motion worden alle bewegingen uitgezet.
 * ------------------------------------------------------------------------- */

.gm-js [data-gm-reveal],
.gm-js [data-gm-stagger] > * {
    opacity: 0;
    transform: translateY(var(--gm-reveal-afstand));
    transition: opacity var(--gm-reveal-duur) cubic-bezier(0.22, 1, 0.36, 1),
                transform var(--gm-reveal-duur) cubic-bezier(0.22, 1, 0.36, 1),
                filter var(--gm-reveal-duur) cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--gm-i, 0) * var(--gm-reveal-stap));
    will-change: opacity, transform;
}

/* Grotere afstand: voor koppen en hero-inhoud */
.gm-js [data-gm-reveal="omhoog"] {
    transform: translateY(calc(var(--gm-reveal-afstand) * 2.4));
}

/* Uit een waas: voor grote foto's en donkere secties */
.gm-js [data-gm-reveal="blur"] {
    filter: blur(14px);
    transform: translateY(var(--gm-reveal-afstand)) scale(1.02);
}

/* Tempo van een stagger-groep */
.gm-js [data-gm-stagger="snel"] { --gm-reveal-stap: 45ms; }
.gm-js [data-gm-stagger="traag"] { --gm-reveal-stap: 140ms; }

.gm-js [data-gm-reveal="links"] {
    transform: translateX(calc(var(--gm-reveal-afstand) * -1.5));
}

.gm-js [data-gm-reveal="rechts"] {
    transform: translateX(calc(var(--gm-reveal-afstand) * 1.5));
}

.gm-js [data-gm-reveal="zoom"] {
    transform: scale(0.96);
}

.gm-js [data-gm-reveal="fade"] {
    transform: none;
}

.gm-js [data-gm-reveal].is-zichtbaar,
.gm-js [data-gm-stagger].is-zichtbaar > * {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Een sectie met reveal én een stagger-grid erin: de sectie zelf niet ook nog eens laten schuiven */
.gm-js [data-gm-reveal="geen"] {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Parallax-laag */
[data-gm-parallax] {
    will-change: transform;
}

/* Marquee */
[data-gm-marquee] {
    display: flex;
    gap: var(--gm-marquee-gap, 3rem);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

[data-gm-marquee] > * {
    flex-shrink: 0;
}

.gm-js [data-gm-marquee].is-actief > * {
    animation: gm-marquee var(--gm-marquee-duur, 30s) linear infinite;
}

[data-gm-marquee]:hover > * {
    animation-play-state: paused;
}

@keyframes gm-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100% - var(--gm-marquee-gap, 3rem))); }
}

/* Zachte hover voor kaarten en tegels */
.gm-hover-lift {
    transition: transform 320ms var(--gm-curve), border-color 220ms ease, box-shadow 320ms var(--gm-curve);
}

.gm-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--gm-schaduw);
}

@media (prefers-reduced-motion: reduce) {
    .gm-js [data-gm-reveal],
    .gm-js [data-gm-stagger] > * {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }

    .gm-js [data-gm-marquee].is-actief > * {
        animation: none;
    }

    [data-gm-parallax] {
        transform: none !important;
    }

    .gm-hover-lift,
    .gm-hover-lift:hover {
        transition: none;
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
 * 5. Scroll-strips
 *
 *   <div data-gm-strip>
 *     <button data-gm-strip-prev>…</button> <button data-gm-strip-next>…</button>
 *     <div data-gm-strip-track class="flex gap-6 overflow-x-auto snap-x snap-mandatory">…</div>
 *   </div>
 * ------------------------------------------------------------------------- */

[data-gm-strip-track] {
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

[data-gm-strip-track]::-webkit-scrollbar {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-gm-strip-track] {
        scroll-behavior: auto;
    }
}

/* ---------------------------------------------------------------------------
 * 6. Premium laag
 *
 * Plain CSS dat elke site krijgt, zodat een library-block er zonder eigen
 * stylesheet al goed uitziet. Alles hangt aan de tokens bovenaan dit bestand
 * en aan de kleur-tokens van het thema, dus een child theme stuurt de hele
 * laag met een handvol variabelen.
 *
 *   .gm-kop / .gm-kop__tekst / .gm-kop__acties   kop van een sectie
 *   .gm-eyebrow                                  label boven een kop, met accentstreep
 *   .gm-intro                                    introtekst onder een kop
 *   .gm-kaart--glas                              glazen kaart op een foto
 *   .gm-beeld (+ --sfeer)                        beeldkader met zachte zoom
 *   .gm-overlay (+ --links, --vlak)              verloop over een foto
 *   .gm-badge (+ --accent, --donker, --glas)     kleine labels
 *   .gm-dot (+ --open, --dicht)                  statusstip
 *   .gm-getal (+ --l, --xl)                      grote cijfers
 *   .gm-link / .gm-pijl                          tekstlink met meelopende pijl
 *   .gm-lijst-check                              vinklijst
 *   .gm-glans                                    lichtveeg over een kaart bij hover
 *   .gm-watermerk                                groot cijfer of woord als achtergrond
 *   .gm-plak                                     sticky kolom
 *   .gm-raster                                   raster dat zichzelf verdeelt
 * ------------------------------------------------------------------------- */

/* Koppen: strak, in balans, iets dichter op elkaar */
.gm-sectie h1,
.gm-sectie h2,
.gm-sectie h3 {
    text-wrap: balance;
}

.gm-sectie h1,
.gm-sectie h2 {
    letter-spacing: -0.02em;
}

.gm-kop {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.gm-kop--lijn {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--gm-lijn);
}

.gm-kop--smal {
    margin-bottom: 1.5rem;
}

.gm-kop__tekst {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 44rem;
}

.gm-kop__tekst > h1,
.gm-kop__tekst > h2,
.gm-kop__tekst > h3 {
    margin: 0;
}

.gm-kop__acties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .gm-kop {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 2rem;
    }

    .gm-kop--midden {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.gm-kop--midden .gm-kop__tekst {
    align-items: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.gm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--color-body-secondary);
}

.gm-eyebrow::before {
    content: "";
    display: inline-block;
    width: 1.75rem;
    height: 2px;
    border-radius: 2px;
    background: var(--gm-accent-op);
    flex-shrink: 0;
}

.gm-eyebrow--accent {
    color: var(--gm-accent-op);
}

.gm-eyebrow--zonder::before {
    display: none;
}

.gm-kop--midden .gm-eyebrow::after {
    content: "";
    display: inline-block;
    width: 1.75rem;
    height: 2px;
    border-radius: 2px;
    background: var(--gm-accent-op);
}

.gm-intro {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--color-body);
    max-width: 60ch;
}

@media (min-width: 768px) {
    .gm-intro {
        font-size: 1.125rem;
    }
}

/* Kaarten: één radius, één rand, één schaduw voor de hele library */
.gm-kaart {
    border-radius: var(--gm-radius);
    border: 1px solid var(--gm-lijn);
    box-shadow: var(--gm-schaduw-s);
}

.gm-kaart--vlak {
    box-shadow: none;
}

.gm-kaart--glas {
    background: var(--gm-glas-bg);
    border-color: var(--gm-glas-rand);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
}

.gm-kaart--glas-donker {
    background: rgba(10, 14, 22, 0.55);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    --color-body-active: #ffffff;
    --color-body: rgba(255, 255, 255, 0.8);
    --color-body-secondary: rgba(255, 255, 255, 0.58);
    --color-border-primary: rgba(255, 255, 255, 0.18);
    --color-bg-secondary: rgba(255, 255, 255, 0.08);
}

/* Beeldkader: vaste radius, zachte zoom bij hover of binnen een .group */
.gm-beeld {
    position: relative;
    overflow: hidden;
    border-radius: var(--gm-radius-l);
    background: var(--color-bg-secondary);
    transform: translateZ(0);
}

.gm-beeld--s {
    border-radius: var(--gm-radius);
}

.gm-beeld > img,
.gm-beeld > picture > img,
.gm-beeld > a > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1100ms var(--gm-curve);
}

.gm-beeld:hover > img,
.gm-beeld:hover > picture > img,
.gm-beeld:hover > a > img,
.group:hover .gm-beeld > img,
a:hover .gm-beeld > img {
    transform: scale(1.045);
}

.gm-beeld--sfeer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5, 8, 14, 0) 45%, rgba(5, 8, 14, 0.6) 100%);
}

/* Verloop over een foto, voor tekst die erop staat. --gm-overlay (0 tot 1) is de sterkte. */
.gm-overlay {
    --gm-overlay: 0.5;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(5, 8, 14, calc(var(--gm-overlay) * 0.6)) 0%,
        rgba(5, 8, 14, calc(var(--gm-overlay) * 0.75)) 45%,
        rgba(5, 8, 14, min(1, calc(var(--gm-overlay) * 1.5))) 100%);
}

.gm-overlay--links {
    background: linear-gradient(100deg,
        rgba(5, 8, 14, min(1, calc(var(--gm-overlay) * 1.7))) 0%,
        rgba(5, 8, 14, min(1, calc(var(--gm-overlay) * 1.25))) 45%,
        rgba(5, 8, 14, calc(var(--gm-overlay) * 0.4)) 100%);
}

/* Tekst op een foto: zachte schaduw voor leesbaarheid, ook op lichte plekken */
.gm-op-foto,
.gm-op-foto h1,
.gm-op-foto h2,
.gm-op-foto p {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 10px 30px rgba(0, 0, 0, 0.35);
}

.gm-overlay--vlak {
    background: rgba(5, 8, 14, var(--gm-overlay));
}

/* Tweede laag voor een tekstblok dat onderaan een foto staat: de richtings-
   overlay hierboven verloopt zijwaarts en dekt de voet niet af. */
.gm-overlay--voet {
    background: linear-gradient(0deg,
        rgba(5, 8, 14, min(1, calc(var(--gm-overlay) * 1.4))) 0%,
        rgba(5, 8, 14, calc(var(--gm-overlay) * 0.55)) 34%,
        rgba(5, 8, 14, 0) 66%);
}

/* Badges */
.gm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    background: #fff;
    color: var(--gm-licht-body-active);
    border: 1px solid var(--gm-licht-border-primary);
}

.gm-badge--accent {
    background: var(--gm-accent);
    color: #fff;
    border-color: transparent;
}

.gm-badge--donker {
    background: var(--gm-licht-body-active);
    color: #fff;
    border-color: transparent;
}

.gm-badge--glas {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.32);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.gm-badge--hoek {
    border-radius: var(--gm-radius-s);
}

/* Statusstip */
.gm-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: currentColor;
    flex-shrink: 0;
}

.gm-dot--open {
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
    animation: gm-puls 2.2s ease-out infinite;
}

.gm-dot--dicht {
    background: #ef4444;
}

.gm-dot--accent {
    background: var(--gm-accent-op);
}

@keyframes gm-puls {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    70%  { box-shadow: 0 0 0 0.55rem rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Grote cijfers */
.gm-getal {
    font-family: var(--font-display, inherit);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--color-body-active);
}

.gm-getal--m {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.gm-getal--l {
    font-size: clamp(2.5rem, 5vw, 3.75rem);
}

.gm-getal--xl {
    font-size: clamp(3rem, 7vw, 5.5rem);
}

/* Tekstlink met pijl */
.gm-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--gm-accent-op);
    text-decoration: none;
}

.gm-pijl {
    display: inline-block;
    transition: transform 320ms var(--gm-curve);
}

.gm-link:hover .gm-pijl,
.group:hover .gm-pijl,
.bttn:hover .gm-pijl {
    transform: translateX(0.3rem);
}

.gm-link--lijn {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    padding-bottom: 2px;
    transition: background-size 320ms var(--gm-curve);
}

.gm-link--lijn:hover {
    background-size: 100% 1px;
}

/* Vinklijst */
.gm-lijst-check {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gm-lijst-check > li {
    position: relative;
    padding-left: 2.1rem;
}

.gm-lijst-check > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.05em;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background-color: var(--gm-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 0.7rem;
    background-position: center;
    background-repeat: no-repeat;
}

.gm-lijst-check--licht > li::before {
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a1428' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Lichtveeg over een kaart */
.gm-glans {
    position: relative;
    overflow: hidden;
}

.gm-glans::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.28) 50%, transparent 68%);
    transform: translateX(-130%);
    transition: transform 1000ms var(--gm-curve);
}

.gm-glans:hover::after {
    transform: translateX(130%);
}

/* Groot cijfer of woord als achtergrond van een kaart */
.gm-watermerk {
    position: absolute;
    right: -0.1em;
    top: -0.28em;
    font-family: var(--font-display, inherit);
    font-weight: 700;
    font-size: 6.5rem;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--color-body-active);
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
}

/* Sticky kolom */
.gm-plak {
    position: sticky;
    top: 6rem;
}

/* Raster dat zichzelf verdeelt: --gm-kolom is de minimale kolombreedte */
.gm-raster {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--gm-kolom, 18rem)), 1fr));
}

/* Dunne scheiding en accentkader */
.gm-scheiding {
    height: 1px;
    border: 0;
    margin: 0;
    background: var(--gm-lijn);
}

.gm-kader-accent {
    border-left: 3px solid var(--gm-accent-op);
    padding-left: 1.25rem;
}

/* Knoppen: licht opveren, zachte gloed in de merkkleur. Dubbele class wint van .bttn in app.css. */
.bttn.bttn {
    transition: transform 260ms var(--gm-curve), box-shadow 260ms var(--gm-curve),
                background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.bttn.bttn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--gm-accent) 70%, transparent);
}

.bttn.bttn:active {
    transform: translateY(0);
    box-shadow: none;
}

.bttn--outline.bttn--outline:hover {
    box-shadow: 0 14px 28px -16px rgba(10, 20, 40, 0.35);
}

/* Zichtbare focus voor toetsenbordgebruikers */
.gm-sectie a:focus-visible,
.gm-sectie button:focus-visible,
.gm-sectie input:focus-visible,
.gm-sectie select:focus-visible,
.gm-sectie textarea:focus-visible {
    outline: 2px solid var(--gm-accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .gm-dot--open {
        animation: none;
    }

    .gm-beeld > img,
    .gm-beeld > picture > img,
    .gm-beeld > a > img,
    .gm-glans::after,
    .gm-pijl,
    .gm-link--lijn,
    .bttn.bttn {
        transition: none;
    }

    .gm-beeld:hover > img,
    .group:hover .gm-beeld > img,
    .bttn.bttn:hover {
        transform: none;
    }
}