/**
 * ESG Cards
 *
 * Responsive mozaiek van uitklapbare kaarten. Vervangt de losse HTML-snippets
 * met per-widget custom CSS op de ESG-pagina.
 *
 * Layout: CSS Grid met een vaste rijhoogte, zodat een kaart die 2 rijen spant
 * exact even hoog is als twee kaarten van 1 rij plus de gap. Daarmee zijn de
 * vaste pixelhoogtes (450 / 400 / 890px) niet meer nodig.
 *
 * Uitklappen: desktop schuift het beeld opzij of omhoog en vervangt de
 * vrijgekomen ruimte door het tekstpaneel. Vanaf de tablet-breakpoint klapt
 * elke kaart als accordeon naar beneden open, zodat tekst nooit afgekapt wordt.
 */

.esg-cards {
    --esg-cols: 4;
    --esg-gap: var(--gap-24, 24px);
    --esg-row-h: clamp(460px, 32vw, 470px);
    --esg-media-ratio: 16 / 10;

    /*
     * Vaste witruimte naast of onder het beeld, waar de pijl in staat. Bewust
     * een absolute maat en geen percentage: anders is die strook op elke kaart
     * een andere fysieke breedte, terwijl de pijl er altijd even groot in staat.
     */
    --esg-gutter: 4.5rem;
    --esg-media-expanded: 30%;
    /* Op tablet is elke kaart 1x1, dus geldt daar één dekking voor alle
       kaarten in plaats van de per-kaart waarde van het mozaiek. */
    --esg-media-expanded-responsive: 30%;

    --esg-card-bg: #ffffff;
    --esg-card-radius: var(--corner-16, 16px);

    /*
     * Hoeveel de vorm voorbij de rand van het beeld doorloopt. Precies op 0
     * blijft er door subpixel-afronding een haarlijn beeld tussen de vorm en
     * de witte strook staan. Geldt op beide assen: langs de rand die hij
     * volgt en langs de rand waar zijn dikke kant tegenaan komt.
     */
    --esg-sweep-bleed: 2px;

    --esg-title-color: #ffffff;
    --esg-panel-title-color: var(--color-primary, #086675);
    --esg-text-color: var(--color-primary, #086675);

    --esg-arrow-color: var(--color-primary, #086675);
    --esg-arrow-bg: #ffffff;
    --esg-arrow-size: 41px;
    --esg-arrow-inset: 24px;
    --esg-arrow-reserve: calc(var(--esg-arrow-inset) + var(--esg-arrow-size) + 8px);
    --esg-panel-padding: 24px;

    --esg-duration: 400ms;
    --esg-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

.esg-cards__grid {
    display: grid;
    grid-template-columns: repeat(var(--esg-cols), minmax(0, 1fr));
    grid-auto-rows: var(--esg-row-h);
    gap: var(--esg-gap);
}

.esg-cards--dense .esg-cards__grid {
    grid-auto-flow: row dense;
}

/* --------------------------------------------------------------------------
   Kaart
   -------------------------------------------------------------------------- */

.esg-card {
    grid-column: span var(--esg-col-span, 1);
    grid-row: span var(--esg-row-span, 1);
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--esg-card-radius);
    background-color: var(--esg-card-bg);
    /*
     * Tekst schaalt mee met de kaart, niet met de viewport. Een kaart van 1
     * kolom is op desktop nog geen 300px breed; op viewport-eenheden zou de
     * titel daar buiten het beeld lopen.
     */
    container-type: inline-size;
}

/* --------------------------------------------------------------------------
   Beeld
   -------------------------------------------------------------------------- */

.esg-card__media {
    position: absolute;
    top: 0;
    bottom: 0;
    /*
     * Breedte en hoogte lopen via variabelen op de kaart. Anders moet elke
     * responsive override de specificiteit van de richtingsregels overtreffen,
     * en een percentage-hoogte die blijft staan levert in een grid-rij een gat
     * op: de rij rekent met de auto-hoogte terwijl het beeld op het percentage
     * gaat staan.
     */
    left: var(--esg-media-l, auto);
    right: var(--esg-media-r, auto);
    width: var(--esg-media-w, auto);
    height: var(--esg-media-h, auto);
    /* Houdt het beeld binnen zijn eigen vak terwijl dat krimpt bij uitklappen. */
    overflow: hidden;
    transition: width var(--esg-duration) var(--esg-ease),
                height var(--esg-duration) var(--esg-ease);
}

/*
 * De verhoogde specificiteit is nodig: Elementor zet `.elementor img
 * { height: auto }` (0,1,1), wat een enkele class zou verslaan en het beeld
 * op zijn natuurlijke hoogte laat staan in plaats van de kaart te vullen.
 */
.esg-cards .esg-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--esg-image-position, center);
}

/* Donkere sluier over het beeld, zodat de witte titel leesbaar blijft. */
.esg-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background-color: #000;
    opacity: var(--esg-image-overlay, 0.15);
    pointer-events: none;
}

/* Zijwaarts uitklappen: beeld links of rechts, paneel aan de andere kant. */
:where(.esg-card--side) {
    --esg-media-w: calc(100% - var(--esg-gutter));
}

:where(.esg-card--side.is-expanded) {
    --esg-media-w: var(--esg-media-expanded);
}

:where(.esg-card--side.esg-card--media-left) {
    --esg-media-l: 0;
}

:where(.esg-card--side.esg-card--media-right) {
    --esg-media-r: 0;
}

/* Naar beneden uitklappen: beeld bovenaan, paneel eronder. */
:where(.esg-card--bottom) {
    --esg-media-h: calc(100% - var(--esg-gutter));
}

:where(.esg-card--bottom.is-expanded) {
    --esg-media-h: var(--esg-media-expanded);
}

:where(.esg-card--bottom) {
    --esg-media-l: 0;
    --esg-media-r: 0;
}

.esg-card--bottom .esg-card__media {
    bottom: auto;
}

/* --------------------------------------------------------------------------
   Notch: witte vorm over het beeld
   Ligt bewust bóven de donkere sluier (z-index 2 vs 1). Anders wordt het wit
   van de vorm meegedimd en sluit hij niet naadloos aan op de witte strook
   ernaast. Onder de titel (z-index 3) blijft hij wel.
   -------------------------------------------------------------------------- */

.esg-card__sweep {
    position: absolute;
    z-index: 2;
    display: block;
    /* De vorm moet exact dezelfde kleur hebben als de kaart, anders is de
       overgang naar de strook zichtbaar als een randje. */
    color: var(--esg-card-bg);
    transform: var(--esg-sweep-flip, none);
    pointer-events: none;
}

/*
 * De vorm loopt over de volle rand van de afbeelding: horizontaal over de
 * breedte, verticaal over de hoogte. Eén as staat op 100%, de andere op auto,
 * zodat de SVG via zijn eigen viewBox-verhouding (319:43) uniform meeschaalt.
 * Daarmee blijft de kromming op elke kaart identiek en verschilt alleen de
 * dikte, die uit de lengte van de rand volgt. Uitrekken op één as zou de
 * kromming juist per kaart anders maken.
 *
 * De overflow: hidden op het beeldvak klipt de overlap weg (zie
 * --esg-sweep-bleed), en klipt ook het uiteinde als de rand korter is dan de
 * vorm.
 *
 * De rand-varianten staan in :where() op nul specificiteit, zodat de accordeon
 * verderop alles op de onderrand kan zetten zonder de specificiteit te hoeven
 * opkloppen. Het spiegelen loopt via een variabele op de kaart, om dezelfde
 * reden.
 */
:where(.esg-card--sweep-bottom) .esg-card__sweep {
    bottom: calc(var(--esg-sweep-bleed) * -1);
    width: calc(100% + var(--esg-sweep-bleed) * 2);
    height: auto;
}

:where(.esg-card--sweep-left, .esg-card--sweep-right) .esg-card__sweep {
    width: auto;
    height: calc(100% + var(--esg-sweep-bleed) * 2);
}

:where(.esg-card--sweep-left) .esg-card__sweep {
    left: calc(var(--esg-sweep-bleed) * -1);
}

:where(.esg-card--sweep-right) .esg-card__sweep {
    right: calc(var(--esg-sweep-bleed) * -1);
}

/* Anker aan de dikke kant: ook daar voorbij de rand doorlopen. */
:where(.esg-card--sweep-bottom.esg-card--sweep-end-l) .esg-card__sweep {
    left: calc(var(--esg-sweep-bleed) * -1);
}

:where(.esg-card--sweep-bottom.esg-card--sweep-end-r) .esg-card__sweep {
    right: calc(var(--esg-sweep-bleed) * -1);
}

:where(.esg-card--sweep-end-t) .esg-card__sweep {
    top: calc(var(--esg-sweep-bleed) * -1);
}

:where(.esg-card--sweep-end-b) .esg-card__sweep {
    bottom: calc(var(--esg-sweep-bleed) * -1);
}

/*
 * Basisvorm horizontaal: vlak onder, dik links. Verticaal (in de SVG al een
 * kwartslag gedraaid): vlak rechts, dik onder. Spiegelen waar dat afwijkt.
 */
:where(.esg-card--sweep-bottom.esg-card--sweep-end-r) {
    --esg-sweep-flip: scaleX(-1);
}

:where(.esg-card--sweep-right.esg-card--sweep-end-t) {
    --esg-sweep-flip: scaleY(-1);
}

:where(.esg-card--sweep-left.esg-card--sweep-end-b) {
    --esg-sweep-flip: scaleX(-1);
}

:where(.esg-card--sweep-left.esg-card--sweep-end-t) {
    --esg-sweep-flip: scale(-1, -1);
}

/*
 * De vorm wordt in beide oriëntaties gerenderd, omdat de rand waar hij op ligt
 * per breakpoint verschilt: op desktop volgt hij de strook van de kaart zelf, op
 * tablet altijd de rechterrand en op mobiel altijd de onderrand. Een SVG kan
 * niet met CSS alleen een kwartslag mee, dus staat hier per situatie één van de
 * twee aan.
 */
.esg-card__sweep {
    display: none;
}

:where(.esg-card--sweep-bottom) .esg-card__sweep--h {
    display: block;
}

:where(.esg-card--sweep-left, .esg-card--sweep-right) .esg-card__sweep--v {
    display: block;
}

/* --------------------------------------------------------------------------
   Titel over het beeld
   -------------------------------------------------------------------------- */

.esg-card__overlay-title {
    position: absolute;
    top: clamp(16px, 5cqi, 32px);
    left: var(--esg-title-l, auto);
    right: var(--esg-title-r, auto);
    z-index: 3;
    max-width: min(62%, 22ch);
    margin: 0;
    color: var(--esg-title-color);
    font-size: clamp(22px, 5.5cqi, 32px);
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
    transition: opacity var(--esg-duration) var(--esg-ease);
}

/*
 * Aan welke kant de titel staat, loopt via variabelen zodat de responsive
 * blokken hem kunnen omzetten. Op desktop volgt hij de kant van het beeld; op
 * tablet en mobiel staat het beeld altijd links, dus de titel ook.
 */
:where(.esg-card--media-right) {
    --esg-title-r: clamp(16px, 5cqi, 32px);
}

:where(.esg-card--media-left, .esg-card--bottom) {
    --esg-title-l: clamp(16px, 5cqi, 32px);
}

.esg-card.is-expanded .esg-card__overlay-title {
    opacity: 0;
}

/* --------------------------------------------------------------------------
   Tekstpaneel
   -------------------------------------------------------------------------- */

.esg-card__panel {
    position: absolute;
    overflow: hidden;
    background-color: var(--esg-card-bg);
    opacity: 0;
    visibility: hidden;
    transform: var(--esg-panel-shift, none);
    transition: opacity var(--esg-duration) var(--esg-ease),
                transform var(--esg-duration) var(--esg-ease),
                visibility 0s linear var(--esg-duration);
}

.esg-card--side .esg-card__panel {
    top: 0;
    bottom: 0;
    width: calc(100% - var(--esg-media-expanded));
}

.esg-card--side.esg-card--media-left .esg-card__panel {
    right: 0;
}

.esg-card--side.esg-card--media-right .esg-card__panel {
    left: 0;
}

.esg-card--bottom .esg-card__panel {
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100% - var(--esg-media-expanded));
}

/*
 * De richting waaruit het paneel inschuift loopt via een variabele in plaats
 * van via losse transform-declaraties. Anders moet elke override (uitgeklapt,
 * accordeon) de specificiteit van de richtingsregels overtreffen; met :where()
 * op nul specificiteit beslist enkel nog de volgorde hieronder.
 */
:where(.esg-card--side.esg-card--media-left) {
    --esg-panel-shift: translateX(24px);
}

:where(.esg-card--side.esg-card--media-right) {
    --esg-panel-shift: translateX(-24px);
}

:where(.esg-card--bottom) {
    --esg-panel-shift: translateY(24px);
}

:where(.esg-card.is-expanded) {
    --esg-panel-shift: none;
}

.esg-card.is-expanded .esg-card__panel {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.esg-card__panel-inner {
    box-sizing: border-box;
    margin-top: var(--esg-panel-offset, 0);
    max-height: var(--esg-panel-max, 100%);
    overflow-y: auto;
    padding: var(--esg-panel-padding);
}

/*
 * Houd ruimte vrij waar de pijl over het tekstpaneel valt. Dat moet met de
 * hoogte van de scroll-container en niet met padding: overflow klipt op de
 * padding-box, dus bij tekst die niet past zou die er dwars door scrollen.
 * Alleen de combinaties waarbij de pijl daadwerkelijk boven het paneel eindigt,
 * zodat er nergens onnodig wit ontstaat.
 */
/*
 * Via variabelen met :where() op nul specificiteit, zodat de accordeon verderop
 * de reservering kan opheffen zonder de specificiteit te hoeven opkloppen.
 */
:where(.esg-card--side.esg-card--media-left.esg-card--arrow-tr),
:where(.esg-card--side.esg-card--media-right.esg-card--arrow-tl) {
    --esg-panel-offset: var(--esg-arrow-reserve);
    --esg-panel-max: calc(100% - var(--esg-arrow-reserve));
}

:where(.esg-card--side.esg-card--media-left.esg-card--arrow-br),
:where(.esg-card--side.esg-card--media-right.esg-card--arrow-bl),
:where(.esg-card--bottom.esg-card--arrow-bl),
:where(.esg-card--bottom.esg-card--arrow-br) {
    --esg-panel-max: calc(100% - var(--esg-arrow-reserve));
}

.esg-card__title {
    margin: 0 0 clamp(10px, 2.5cqi, 20px);
    color: var(--esg-panel-title-color);
    font-size: clamp(20px, 5cqi, 32px);
    font-weight: 600;
    line-height: 1.3;
}

.esg-card__text {
    color: var(--esg-text-color);
    /* Vaste 16px: kleiner dan dat wordt de tekst in de smalle kaarten
       onleesbaar, dus hier bewust geen container-query-schaling. */
    font-size: 16px;
    line-height: 1.4;
}

.esg-card__text > :last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Uitklap-knop
   -------------------------------------------------------------------------- */

/*
 * Ook hier een extra class nodig. De Elementor-kit stijlt élke <button> op de
 * site als gevulde pil via `.elementor-kit-21 button` (0,1,1): turquoise
 * achtergrond, border-radius 32px en padding 12.5px 52px. Die padding drukt de
 * SVG tot nul breedte, waardoor de pijl volledig verdwijnt.
 */
.esg-cards .esg-card__toggle {
    position: absolute;
    z-index: 3;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: var(--esg-arrow-size);
    height: var(--esg-arrow-size);
    /* Geen padding: de SVG moet de volle --esg-arrow-size vullen (41x41).
       De pijl heeft zelf al marge binnen zijn viewBox. */
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--esg-arrow-bg);
    color: var(--esg-arrow-color);
    font-size: inherit;
    line-height: 0;
    cursor: pointer;
    transition: background-color var(--esg-duration) var(--esg-ease);
}

.esg-card--arrow-tl .esg-card__toggle {
    top: var(--esg-arrow-inset);
    left: var(--esg-arrow-inset);
}

.esg-card--arrow-tr .esg-card__toggle {
    top: var(--esg-arrow-inset);
    right: var(--esg-arrow-inset);
}

.esg-card--arrow-bl .esg-card__toggle {
    bottom: var(--esg-arrow-inset);
    left: var(--esg-arrow-inset);
}

.esg-card--arrow-br .esg-card__toggle {
    bottom: var(--esg-arrow-inset);
    right: var(--esg-arrow-inset);
}

/* De kit heeft ook `button:hover/:focus` (0,2,1); die zou de pil terugzetten. */
.esg-cards .esg-card__toggle:hover,
.esg-cards .esg-card__toggle:focus {
    background-color: var(--esg-arrow-bg);
    color: var(--esg-arrow-color);
}

.esg-cards .esg-card__toggle:focus-visible {
    outline: 2px solid var(--esg-arrow-color);
    outline-offset: 2px;
}

.esg-card__arrow {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(var(--esg-arrow-rotate, 0deg));
    transition: transform var(--esg-duration) var(--esg-ease);
}

/*
 * Dicht wijst de pijl vanuit de witte strook het beeld in; open draait hij
 * 180 graden verder. Zo is de richting af te leiden uit de uitklaprichting en
 * zijn er geen losse arrow-left/up/right SVG's meer nodig.
 *
 * Ook hier :where(), zodat de accordeon-richting verderop deze regels kan
 * overschrijven zonder de specificiteit te hoeven opkloppen.
 */
:where(.esg-card--side.esg-card--media-left) {
    --esg-arrow-rotate: 180deg;
}

:where(.esg-card--side.esg-card--media-right) {
    --esg-arrow-rotate: 0deg;
}

:where(.esg-card--bottom) {
    --esg-arrow-rotate: -90deg;
}

:where(.esg-card--side.esg-card--media-left.is-expanded) {
    --esg-arrow-rotate: 360deg;
}

:where(.esg-card--side.esg-card--media-right.is-expanded) {
    --esg-arrow-rotate: 180deg;
}

:where(.esg-card--bottom.is-expanded) {
    --esg-arrow-rotate: 90deg;
}

/* --------------------------------------------------------------------------
   Tablet en smalle desktop: één kolom, paneel schuift over het beeld
   Elke kaart gedraagt zich hier als een zijwaartse kaart met het beeld links:
   het paneel komt van rechts over het beeld, passend bij de pijl naar links.
   De hoogte komt uit een beeldverhouding in plaats van uit de rijhoogte.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1199px) {
    /*
     * Doorloopt tot 1199px en niet tot de tablet-breakpoint van 1024px. In het
     * mozaiek is een kaart van 1 kolom bij 1100px nog maar 241px breed; daar is
     * geen instelling die werkt, want onder 28% beelddekking steekt de pijl
     * voorbij het beeld en vanaf 28% loopt de tekst over. Vanaf 1200px is de
     * kaart 266px en past 25% wel.
     *
     * De kolommen worden hier op het grid zelf gezet in plaats van via
     * --esg-cols: die variabele schrijft Elementor voor desktop, en die CSS
     * laadt na deze.
     */
    .esg-cards .esg-cards__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .esg-cards__grid {
        grid-auto-rows: auto;
        align-items: start;
    }

    .esg-card {
        grid-column: span 1;
        grid-row: span 1;
        aspect-ratio: var(--esg-media-ratio);

        /* Richting van pijl, inschuiven en vorm staan hier voor elke kaart
           gelijk; de per-kaart-instellingen gelden alleen op desktop. */
        --esg-arrow-rotate: 180deg;
        --esg-panel-shift: translateX(24px);
        --esg-panel-max: calc(100% - var(--esg-arrow-reserve));
        --esg-panel-offset: 0;
        --esg-sweep-flip: none;
    }

    .esg-card.is-expanded {
        --esg-arrow-rotate: 360deg;
        --esg-panel-shift: none;
    }

    /* Beeld links, krimpt bij uitklappen. */
    .esg-card {
        --esg-media-w: calc(100% - var(--esg-gutter));
        --esg-media-h: auto;
        --esg-media-l: 0;
        --esg-media-r: auto;
        --esg-title-l: clamp(16px, 5cqi, 32px);
        --esg-title-r: auto;
    }

    .esg-card.is-expanded {
        --esg-media-w: var(--esg-media-expanded-responsive, 30%);
    }

    .esg-cards .esg-card__media {
        top: 0;
        bottom: 0;
    }

    /* Paneel rechts, over het beeld. Zelfde dekking als het beeld hierboven,
       anders vallen beeldbreedte en paneelbreedte niet op elkaar. */
    .esg-cards .esg-card__panel {
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: calc(100% - var(--esg-media-expanded-responsive, 30%));
        height: auto;
    }

    /* Pijl rechtsonder, in de witte strook. */
    .esg-cards .esg-card__toggle {
        inset: auto var(--esg-arrow-inset) var(--esg-arrow-inset) auto;
    }

    /* Vorm op de rechterrand, dik onderaan: daar zit de strook. */
    .esg-cards .esg-card__sweep--h {
        display: none;
    }

    .esg-cards .esg-card__sweep--v {
        display: block;
    }

    .esg-cards .esg-card__sweep {
        top: auto;
        right: calc(var(--esg-sweep-bleed) * -1);
        bottom: calc(var(--esg-sweep-bleed) * -1);
        left: auto;
        width: auto;
        height: calc(100% + var(--esg-sweep-bleed) * 2);
    }
}

/* --------------------------------------------------------------------------
   Mobiel: accordeon
   Een paneel naast het beeld laat hier te weinig tekstbreedte over, dus komt het
   paneel in de flow onder het beeld en groeit de kaart mee. Daardoor kan tekst
   nooit afgekapt worden en is er geen vaste hoogte nodig.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .esg-cards__grid {
        grid-auto-rows: auto;
        align-items: start;
    }

    .esg-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 0fr;
        grid-column: span 1;
        grid-row: span 1;
        height: auto;
        transition: grid-template-rows var(--esg-duration) var(--esg-ease);

        /* Paneel komt eronder, dus wijst de pijl omlaag en is er geen
           reservering nodig: de knop staat in de beeld-cel. */
        --esg-arrow-rotate: 90deg;
        --esg-panel-shift: none;
        --esg-panel-offset: 0;
        --esg-panel-max: none;
    }

    .esg-card.is-expanded {
        grid-template-rows: auto 1fr;
        --esg-arrow-rotate: 270deg;
    }

    .esg-card {
        --esg-media-w: 100%;
        --esg-media-h: auto;
        --esg-media-l: auto;
        --esg-media-r: auto;
        --esg-title-l: clamp(16px, 5cqi, 32px);
        --esg-title-r: auto;
    }

    .esg-cards .esg-card__media {
        position: relative;
        grid-area: 1 / 1;
        inset: auto;
        aspect-ratio: var(--esg-media-ratio);
    }

    .esg-cards .esg-card__panel {
        position: static;
        grid-area: 2 / 1;
        width: auto;
        height: auto;
        min-height: 0;
        opacity: 1;
        visibility: visible;
        transition: none;
    }

    .esg-card .esg-card__panel-inner {
        overflow-y: visible;
    }

    /* Het beeld is hier volle breedte, dus de titel mag ruimer staan. */
    .esg-card__overlay-title {
        max-width: 85%;
    }

    /* Vorm liggend op de onderrand: daar komt het paneel. */
    .esg-cards .esg-card__sweep--v {
        display: none;
    }

    .esg-cards .esg-card__sweep--h {
        display: block;
    }

    .esg-cards .esg-card__sweep {
        top: auto;
        right: auto;
        bottom: calc(var(--esg-sweep-bleed) * -1);
        left: auto;
        width: calc(100% + var(--esg-sweep-bleed) * 2);
        height: auto;
    }

    /*
     * Dikke kant altijd rechts, net als de pijl. De hoek die per kaart is
     * ingesteld gaat over de plek in de witte strook op desktop; hem hier
     * volgen zou de vorm op sommige kaarten juist tegenover de pijl zetten,
     * waardoor die er dun tot afwezig onder staat.
     */
    .esg-cards .esg-card__sweep {
        right: calc(var(--esg-sweep-bleed) * -1);
        --esg-sweep-flip: scaleX(-1);
    }

    /* De knop deelt de beeld-cel, zodat hij bij het beeld blijft staan in
       plaats van naar de onderkant van de uitgeklapte kaart te zakken. */
    .esg-cards .esg-card__toggle {
        position: relative;
        grid-area: 1 / 1;
        inset: auto;
        margin: var(--esg-arrow-inset);
        align-self: end;
        justify-self: end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .esg-cards :is(.esg-card, .esg-card__media, .esg-card__image, .esg-card__panel, .esg-card__overlay-title, .esg-card__toggle, .esg-card__arrow) {
        transition-duration: 1ms;
    }
}