/**
 * Doen Makelaars - Single property detail styling
 *
 * Wordt geladen op single property pages voor alle 3 CPTs (woning, bog, nieuwbouw).
 * Override de generic .nwpa-el-* styles met Doen-paars/oranje branding.
 *
 * Disable per-site via:
 *   add_filter('nwpa_load_doen_styling', '__return_false');
 *
 * Design tokens geverifieerd 2026-04-26 via Chrome DevTools op:
 *   https://sdcreativeagency.nl/websites/doen/index.php/voorbeeld-pagina/
 * Bron: Elementor global colors (--e-global-color-*) en computed body styles.
 */

:root {
    --doen-paars: var(--nwpa-brand, #762296);
    --doen-paars-dark: var(--nwpa-brand-dark, #311140);
    --doen-oranje: var(--nwpa-brand-accent, #ED7235);
    --doen-oranje-hover: var(--nwpa-brand-accent-hover, #C95E29);
    --doen-text: var(--nwpa-brand-text, #000000);
    --doen-text-muted: var(--nwpa-brand-text-muted, #666666);
    --doen-grijs: var(--nwpa-brand-surface, #F5F5F5);
    --doen-border: var(--nwpa-brand-border, #E5E5E5);
    --doen-radius: var(--nwpa-brand-radius, 0px);
    --doen-radius-sm: var(--nwpa-brand-radius-sm, 0px);
    --doen-font-body: var(--nwpa-body-font, "DM Sans", sans-serif);
    --doen-font-heading: var(--nwpa-heading-font, "Kurdis Wide Bold", sans-serif);
}

/* ─── Tabs — Figma spec (v2.20.1, fixed) ─── */
/* Folder-card look: 4 losse kaartjes naast elkaar met afgeronde top-hoeken
 * die "samensmelten" met het paneel daaronder.
 *
 * Figma-spec correctie: "background: #762296" in de tekst-tokens betekent text
 * FILL, niet box-background. Dus:
 *   Active tab:     WITTE bg + PAARSE tekst #762296 DM Sans SemiBold 16/39px.
 *                   min-width 132, height 40, padding 0 1px, radius 2px 2px 0 0.
 *   Non-active:     lichtgrijze card-bg + donker tekst Regular 16/22px.
 *                   min-width 106, height 40, padding 9px 16px, radius 2px 2px 0 0.
 *   Hover non-act:  tekst-kleur iets donkerder (#333333), bg blijft licht.
 *
 * De actieve tab "smelt" samen met het paneel: panel-bg = wit, actieve-tab bg
 * = wit, dus de naadlijn tussen tab en paneel verdwijnt. We trekken de actieve
 * tab 1px omlaag (margin-bottom: -1px) zodat hij de panel-border overlapt. */
.nwpa-el-tabs__bar {
    display: flex;
    gap: 6px;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    align-items: flex-end;
}

/* Default (non-active) state — lichtgrijze card. Aggressive reset omdat
 * Doen-theme <button> styled op :focus. */
.nwpa-el-tabs__tab,
.nwpa-el-tabs__tab:focus,
.nwpa-el-tabs__tab:focus-visible,
.nwpa-el-tabs__tab:active {
    background: #F3F3F3 !important;
    background-color: #F3F3F3 !important;
    background-image: none !important;
    color: #151515 !important;
    border: 1px solid var(--doen-border) !important;
    border-bottom: none !important;
    border-radius: 2px 2px 0 0 !important;
    box-shadow: none !important;
    outline: none !important;
    min-width: 106px !important;
    height: 40px !important;
    padding: 9px 16px !important;
    margin: 0 !important;
    font-family: var(--doen-font-body) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-shadow: none;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    position: relative;
    text-align: center;
}

/* Hover non-active: bg blijft licht, tekst iets donkerder. */
.nwpa-el-tabs__tab:hover {
    background: #FAFAFA !important;
    background-color: #FAFAFA !important;
    color: #333333 !important;
}

/* Active tab: WITTE bg + PAARSE tekst #762296, DM Sans SemiBold 16/39.
 * margin-bottom: -1px laat de tab over de panel-border kruipen zodat hij
 * naadloos samenkomt met het paneel. */
.nwpa-el-tabs__tab--active,
.nwpa-el-tabs__tab--active:hover,
.nwpa-el-tabs__tab--active:focus,
.nwpa-el-tabs__tab--active:focus-visible,
.nwpa-el-tabs__tab--active:active {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: var(--doen-paars) !important;
    border: 1px solid var(--doen-border) !important;
    border-bottom: 1px solid #FFFFFF !important;
    border-radius: 2px 2px 0 0 !important;
    min-width: 132px !important;
    height: 40px !important;
    padding: 0 1px !important;
    font-family: var(--doen-font-body) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 39px !important;
    margin-bottom: -1px !important;
    z-index: 2;
}

.nwpa-el-tabs__panel {
    background: #fff;
    border: 1px solid var(--doen-border);
    padding: 32px;
    border-radius: 0;
    margin-top: 0;
    position: relative;
    z-index: 1;
}

/* ─── Omschrijving — Doen styling voor koppen, lijst, CTA ─── */
.nwpa-el-omschrijving {
    font-family: var(--doen-font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--doen-text);
}

.nwpa-el-omschrijving__title {
    color: var(--doen-paars) !important;
    font-family: var(--doen-font-heading) !important;
    font-weight: 700 !important;
    font-size: 36px !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    border: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
}

/* Sub-headings in Omschrijving ("INDELING", "LIGGING", etc.)
 * Figma h5-token: Kurdis 13/21.45 ls 1.3 UPPERCASE paars. */
.nwpa-el-omschrijving__heading {
    color: var(--doen-paars) !important;
    font-family: var(--doen-font-heading) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    margin: 28px 0 12px !important;
    padding: 0 !important;
    border: none !important;
    text-transform: uppercase !important;
    letter-spacing: 1.3px !important;
    line-height: 21.45px !important;
}

.nwpa-el-omschrijving__heading:first-child {
    margin-top: 0 !important;
}

.nwpa-el-omschrijving__list {
    margin: 0 0 18px !important;
    padding-left: 22px !important;
    list-style: disc !important;
}

.nwpa-el-omschrijving__list li {
    margin: 0 0 6px !important;
    line-height: 1.6 !important;
    color: var(--doen-text);
    font-family: var(--doen-font-body);
}

.nwpa-el-omschrijving__list li::marker {
    color: var(--doen-paars);
}

.nwpa-el-omschrijving__cta {
    margin: 24px 0 0 !important;
    padding: 18px 22px !important;
    background: rgba(118, 34, 150, 0.08) !important;
    border-left: 3px solid var(--doen-paars) !important;
    border-radius: 0 !important;
    font-family: var(--doen-font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--doen-text);
}

/* ─── Kenmerken-grid (Doen Figma KenmerkenWaardes)
 * Figma h2-token voor hoofdtitel: Kurdis 40/46 ls -0.4 imperial plum.
 * Figma h4-token voor sectie-koppen (sentence-case): Kurdis 22/29.7 imperial plum. */
.nwpa-el-kenmerken__title {
    color: var(--doen-paars-dark);
    font-family: var(--doen-font-heading);
    font-weight: 700;
    font-size: 40px;
    line-height: 46px;
    margin: 0 0 24px;
    letter-spacing: -0.4px;
    text-transform: none;
    grid-column: 1 / -1;
}

/* Section headings — overrule elementor-single.css base (uppercase + border) */
.nwpa-el-kenmerken__heading {
    color: var(--doen-paars-dark) !important;
    font-family: var(--doen-font-heading);
    font-weight: 700 !important;
    font-size: 22px !important;
    line-height: 29.7px !important;
    margin: 0 0 8px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* dt/dd rows — overrule zebra + right-alignment uit elementor-single.css */
.nwpa-el-kenmerken__list dt,
.nwpa-el-kenmerken__list dd {
    background: transparent !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--doen-border, #E5E5E5);
    font-size: 14px;
    line-height: 1.5;
}

.nwpa-el-kenmerken__list dt {
    font-weight: 700 !important;
    color: #000 !important;
    font-family: var(--doen-font-body);
}

.nwpa-el-kenmerken__list dd {
    font-weight: 400 !important;
    color: #000 !important;
    text-align: left !important;
    font-family: var(--doen-font-body);
    margin-left: 0 !important;
}

.nwpa-el-kenmerken__section {
    margin-bottom: 32px;
}

@media (max-width: 768px) {
    .nwpa-el-kenmerken {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .nwpa-el-kenmerken__title {
        font-size: 28px;
    }
}

/* ─── Specs bar (4 hoofdkenmerken) — match Figma Kenmerken.html ─── */
.nwpa-el-specs {
    display: flex;
    gap: 48px;
    align-items: center;
    flex-wrap: wrap;
}

.nwpa-el-specs__item {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.nwpa-el-specs__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--doen-paars);
    line-height: 0;
}

.nwpa-el-specs__icon svg {
    display: block;
    width: auto;
    height: auto;
}

.nwpa-el-specs__value {
    color: #000;
    font-family: var(--doen-font-heading);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.65;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.nwpa-el-specs__label {
    display: none;
}

@media (max-width: 768px) {
    .nwpa-el-specs {
        gap: 24px;
    }
    .nwpa-el-specs__item {
        gap: 10px;
    }
    .nwpa-el-specs__value {
        font-size: 12px;
        letter-spacing: 1px;
    }
}

/* ─── Doen Photo Gallery — match Figma photogalary.html ─── */
.nwpa-doen-gallery {
    position: relative;
    width: 100%;
    aspect-ratio: 843 / 520;
    background: #ffffff;
    overflow: visible;
}

/* Punt 2: op desktop vult de gallery de volledige hoogte van zijn Elementor-
 * kolom, zodat hij even hoog is als het makelaars-blok ernaast; de foto zoomt
 * mee via object-fit:cover. Op mobiel (gestackt, ≤767px) geldt de aspect-ratio.
 * Live geverifieerd: vult 671px = makelaars-kolom. */
@media (min-width: 768px) {
    .elementor-widget-shortcode:has(.nwpa-doen-gallery) {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
    }
    .elementor-widget-shortcode:has(.nwpa-doen-gallery) > .elementor-shortcode {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        width: 100%;
    }
    .nwpa-doen-gallery {
        aspect-ratio: auto;
        height: auto;
        min-height: 520px;
        flex: 1 1 auto;
        align-self: stretch;
    }
}

.nwpa-doen-gallery__image {
    position: absolute !important;
    top: 0 !important;
    left: 8px !important;
    width: calc(100% - 8px) !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Status ribbon — sticks to left edge of wrapper, image starts at 8px */
.nwpa-doen-gallery__ribbon {
    position: absolute;
    top: 17px;
    left: 0;
    height: 32px;
    min-width: 139px;
    background: var(--doen-oranje);
    color: white;
    font-family: var(--doen-font-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    line-height: 32px;
    padding: 0 18px 0 20px;
    z-index: 10;
    white-space: nowrap;
    box-sizing: border-box;
}

.nwpa-doen-gallery__ribbon-text {
    display: inline-block;
    vertical-align: middle;
}

/* Fold-shadow corner: 8x8 dark triangle below the orange bar, left-aligned.
 * Match Figma path M8 8 L0 0 H8 V8 Z (upper-right triangle in 8x8 box). */
.nwpa-doen-gallery__ribbon::after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: 0;
    height: 0;
    border-top: 8px solid #D64C3C;
    border-left: 8px solid transparent;
}

/* Status modifiers — match filter-card status colors; ::after gets a darker fold */
.nwpa-doen-gallery__ribbon--onder_bod        { background: #ea580c; }
.nwpa-doen-gallery__ribbon--onder_bod::after { border-top-color: #a13d08; }

.nwpa-doen-gallery__ribbon--onder_optie        { background: #ca8a04; }
.nwpa-doen-gallery__ribbon--onder_optie::after { border-top-color: #8a5f03; }

.nwpa-doen-gallery__ribbon--onder_voorbehoud        { background: #7c3aed; }
.nwpa-doen-gallery__ribbon--onder_voorbehoud::after { border-top-color: #5621a8; }

.nwpa-doen-gallery__ribbon--verkocht        { background: #dc2626; }
.nwpa-doen-gallery__ribbon--verkocht::after { border-top-color: #991b1b; }

.nwpa-doen-gallery__ribbon--verhuurd        { background: #4f46e5; }
.nwpa-doen-gallery__ribbon--verhuurd::after { border-top-color: #3730a3; }

.nwpa-doen-gallery__ribbon--ingetrokken        { background: #4b5563; }
.nwpa-doen-gallery__ribbon--ingetrokken::after { border-top-color: #333b47; }

/* Prev/Next chevron arrows — white SVG, no background, drop-shadow only.
 * Aggressive reset because Doen theme styles <button> with paars background. */
.nwpa-doen-gallery__nav,
.nwpa-doen-gallery__nav:hover,
.nwpa-doen-gallery__nav:focus,
.nwpa-doen-gallery__nav:active,
.nwpa-doen-gallery__nav:visited {
    position: absolute;
    top: 50%;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 8px;
    margin: 0;
    cursor: pointer;
    z-index: 5;
    line-height: 0;
    color: inherit;
    text-shadow: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
    appearance: none;
    -webkit-appearance: none;
}

/* Punt 3: transform + transition met !important over álle states vergrendeld.
 * Het Doen-thema forceert op elke <button> een `transition: transform` + een
 * hover-transform → dát veroorzaakte de "bewegende" hover op de pijlen. Door de
 * transform hard op translateY(-50%) te pinnen en de transform-transitie te
 * doden blijft de pijl exact staan. (Live geverifieerd: transform → none-shift,
 * transition → opacity.) */
.nwpa-doen-gallery__nav,
.nwpa-doen-gallery__nav:hover,
.nwpa-doen-gallery__nav:focus,
.nwpa-doen-gallery__nav:active,
.nwpa-doen-gallery__nav:focus-visible {
    transform: translateY(-50%) !important;
    transition: opacity 0.15s ease !important;
}

/* Subtiel: alleen lichte opacity-shift, géén scale/verplaatsing. */
.nwpa-doen-gallery__nav:hover { opacity: 0.85; }

.nwpa-doen-gallery__nav--prev { left: 24px; }
.nwpa-doen-gallery__nav--next { right: 24px; }

.nwpa-doen-gallery__nav svg {
    display: block;
    pointer-events: none;
}

/* Mobile: smaller arrows, ribbon a bit smaller */
@media (max-width: 768px) {
    .nwpa-doen-gallery__nav svg {
        width: 18px;
        height: auto;
    }
    .nwpa-doen-gallery__ribbon {
        font-size: 10px;
        height: 28px;
        line-height: 28px;
        padding: 0 14px 0 16px;
    }
}

/* Subtiele bottom-scrim over de hele hero zodat de witte knop op ELKE foto
 * leesbaar blijft (zet pas in de onderste ~38% in, max ~45% zwart). Volle
 * breedte zoals Funda; blijft rechthoekig. pointer-events:none → blokkeert
 * geen klikken. Onder de knop (z6), boven de foto. */
.nwpa-doen-gallery::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 0;
    bottom: 0;
    height: 38%;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.22) 32%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
    z-index: 5;
}

/* ─── "Bekijk alle foto's" knop — rechtsonder in hero.
 * Figma-token (identiek aan vergelijkbaar-link): Kurdis Wide Bold 700
 * 12/122% ls 20% (=2.4px) uppercase WIT + oranje pijl #ED7235, gap 15px.
 * Transparante bg; text/drop-shadow als tweede leesbaarheidslaag bovenop de
 * scrim. Aggressieve reset want Doen-theme styled <button> met paarse bg. */
.nwpa-doen-gallery__allfotos,
.nwpa-doen-gallery__allfotos:hover,
.nwpa-doen-gallery__allfotos:focus,
.nwpa-doen-gallery__allfotos:active,
.nwpa-doen-gallery__allfotos:visited {
    position: absolute;
    right: 24px;
    bottom: 18px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 6px 2px;
    margin: 0;
    cursor: pointer;
    line-height: 0;
    appearance: none;
    -webkit-appearance: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
    /* Punt 3: géén beweging op hover — transform hard vergrendeld + transform-
     * transitie gedood (Doen-thema gaf elke <button> een hover-transform). */
    transform: none !important;
    transition: opacity 0.15s ease !important;
}

/* Toetsenbord-focus zichtbaar (WCAG) — :focus-visible raakt muis-klik niet. */
.nwpa-doen-gallery__allfotos:focus-visible {
    outline: 2px solid var(--doen-oranje) !important;
    outline-offset: 3px !important;
}

.nwpa-doen-gallery__allfotos-text {
    color: #ffffff !important;
    font-family: var(--doen-font-heading);
    font-weight: 700;
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Pijl-bbox = exact tekst-cap-height. viewBox is getight tot alleen het
 * zichtbare pijl-pad (geen padding rondom), zodat width/height van de
 * <svg> 1:1 de visuele pijl-grootte zijn. */
.nwpa-doen-gallery__allfotos-arrow {
    display: inline-flex;
    line-height: 0;
}

.nwpa-doen-gallery__allfotos-arrow svg {
    display: block;
    width: 0.75em;   /* ≈ cap-height van 13px Kurdis Wide Bold uppercase */
    height: 0.75em;
}

@media (max-width: 768px) {
    .nwpa-doen-gallery__allfotos,
    .nwpa-doen-gallery__allfotos:hover,
    .nwpa-doen-gallery__allfotos:focus,
    .nwpa-doen-gallery__allfotos:active {
        right: 16px;
        bottom: 12px;
        gap: 6px;
    }
    .nwpa-doen-gallery__allfotos-text { font-size: 12px; line-height: 15px; letter-spacing: 2px; }
}

/* ─── Lightbox: "alle foto's" — Funda-style mozaïek-grid in een
 * fullscreen overlay. Klik op een tegel → single-photo viewer. ─── */
/* Body-scroll-lock + scrollbar-shift compensatie (voorkomt content-sprong
 * op desktop wanneer de scrollbar verdwijnt). --nwpa-sbw wordt door JS gezet. */
body.nwpa-doen-lightbox-open {
    overflow: hidden;
    padding-right: var(--nwpa-sbw, 0px);
}

/* Container: fade-in i.p.v. instant display, via opacity+visibility zodat de
 * fade-out kan afspelen voor het element verdwijnt. */
.nwpa-doen-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #ffffff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.22s;
}

.nwpa-doen-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s;
}

.nwpa-doen-lightbox__bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 24px;
    background: #ffffff;
    border-bottom: 1px solid var(--doen-border);
}

/* Adres links (heading-font, primair), plaats secundair in DM Sans. */
.nwpa-doen-lightbox__bar-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.nwpa-doen-lightbox__address {
    color: var(--doen-paars-dark);
    font-family: var(--doen-font-heading);
    font-weight: 700;
    font-size: 14px;
    line-height: 122%;
    letter-spacing: 0.2px;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nwpa-doen-lightbox__place {
    flex: 0 0 auto;
    color: #6b6b6b;
    font-family: var(--doen-font-body);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Teller in paars i.p.v. paars-dark → typografisch onderscheid van adres. */
.nwpa-doen-lightbox__count {
    flex: 0 0 auto;
    color: var(--doen-paars);
    font-family: var(--doen-font-heading);
    font-weight: 700;
    font-size: 12px;
    line-height: 122%;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.nwpa-doen-lightbox__close,
.nwpa-doen-lightbox__close:hover,
.nwpa-doen-lightbox__close:focus,
.nwpa-doen-lightbox__close:active {
    flex: 0 0 auto;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 6px;
    margin: 0;
    cursor: pointer;
    line-height: 0;
    color: var(--doen-paars-dark) !important;
    appearance: none;
    -webkit-appearance: none;
    transition: opacity 0.15s ease;
}

/* Subtiel: lichte fade i.p.v. 40%-fade. */
.nwpa-doen-lightbox__close:hover { opacity: 0.75; }
.nwpa-doen-lightbox__close svg { display: block; }

/* Grid stijgt licht op bij openen. */
.nwpa-doen-lightbox__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px;
    max-width: 1100px;
    margin: 0 auto;
    transform: translateY(8px);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.nwpa-doen-lightbox.is-open .nwpa-doen-lightbox__grid {
    transform: translateY(0);
    opacity: 1;
}

.nwpa-doen-lightbox__grid-item,
.nwpa-doen-lightbox__grid-item:hover,
.nwpa-doen-lightbox__grid-item:focus,
.nwpa-doen-lightbox__grid-item:active {
    position: relative;
    background: var(--doen-grijs) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0;
    cursor: pointer;
    overflow: hidden;
    appearance: none;
    -webkit-appearance: none;
    aspect-ratio: 3 / 2;
}

.nwpa-doen-lightbox__grid-item > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* Hover/focus: subtiele paarse overlay + lichte zoom = duidelijker klikbaar. */
.nwpa-doen-lightbox__grid-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(49, 17, 64, 0);
    transition: background 0.2s ease;
    pointer-events: none;
}

/* Subtiel: minimale donker-overlay, geen zoom. */
.nwpa-doen-lightbox__grid-item:hover::after,
.nwpa-doen-lightbox__grid-item:focus-visible::after { background: rgba(49, 17, 64, 0.06); }

.nwpa-doen-lightbox__grid-item:focus-visible {
    outline: 2px solid var(--doen-oranje) !important;
    outline-offset: 2px !important;
    z-index: 1;
}

/* Eerste tegel groot (panoramisch). Uniforme paren erna; bij een EVEN aantal
 * foto's blijft de laatste tegel anders alleen over → die maken we vol-breed
 * (.is-last-full, gezet vanuit PHP). Voorspelbaar, geen losse "orphan". */
.nwpa-doen-lightbox__grid-item:first-child,
.nwpa-doen-lightbox__grid-item.is-last-full {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
}

@media (max-width: 768px) {
    .nwpa-doen-lightbox__bar { padding: 12px 16px; gap: 12px; }
    .nwpa-doen-lightbox__place,
    .nwpa-doen-lightbox__count { display: none; }
    .nwpa-doen-lightbox__address { font-size: 13px; }
    .nwpa-doen-lightbox__grid { grid-template-columns: 1fr; }
    .nwpa-doen-lightbox__grid-item,
    .nwpa-doen-lightbox__grid-item:first-child,
    .nwpa-doen-lightbox__grid-item.is-last-full {
        grid-column: 1 / -1;
        aspect-ratio: 3 / 2;
    }
}

/* ─── Single-photo viewer (na klik op een tegel) ─── */
.nwpa-doen-lightbox__viewer {
    position: fixed;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.95);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.nwpa-doen-lightbox__viewer.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s;
}

/* Dunne top-scrim zodat teller/kruis leesbaar blijven op lichte foto-randen. */
.nwpa-doen-lightbox__viewer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 84px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 3;
}

.nwpa-doen-lightbox__viewer-image {
    max-width: 92vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transform: scale(0.985);
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.nwpa-doen-lightbox__viewer.is-open .nwpa-doen-lightbox__viewer-image { transform: scale(1); }

.nwpa-doen-lightbox__viewer-count {
    position: absolute;
    top: 22px;
    left: 24px;
    color: #ffffff;
    font-family: var(--doen-font-heading);
    font-weight: 700;
    font-size: 12px;
    line-height: 122%;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    z-index: 4;
}

.nwpa-doen-lightbox__viewer-close,
.nwpa-doen-lightbox__viewer-close:hover,
.nwpa-doen-lightbox__viewer-close:focus,
.nwpa-doen-lightbox__viewer-close:active,
.nwpa-doen-lightbox__viewer-nav,
.nwpa-doen-lightbox__viewer-nav:hover,
.nwpa-doen-lightbox__viewer-nav:focus,
.nwpa-doen-lightbox__viewer-nav:active {
    position: absolute;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 8px;
    margin: 0;
    cursor: pointer;
    line-height: 0;
    color: inherit;
    text-shadow: none;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
    appearance: none;
    -webkit-appearance: none;
    z-index: 4;
}

.nwpa-doen-lightbox__viewer-close { top: 18px; right: 24px; transition: opacity 0.15s ease; }
/* Subtiel: kleine fade. */
.nwpa-doen-lightbox__viewer-close:hover { opacity: 0.8; }
.nwpa-doen-lightbox__viewer-close svg { display: block; }

.nwpa-doen-lightbox__viewer-nav { top: 50%; transform: translateY(-50%); transition: opacity 0.15s ease; }
/* Subtiel: alleen lichte opacity-shift, geen scale. */
.nwpa-doen-lightbox__viewer-nav:hover { opacity: 0.85; }
.nwpa-doen-lightbox__viewer-nav--prev { left: 24px; }
.nwpa-doen-lightbox__viewer-nav--next { right: 24px; }
.nwpa-doen-lightbox__viewer-nav svg { display: block; pointer-events: none; }

/* Toetsenbord-focus zichtbaar op alle lightbox-knoppen (WCAG). */
.nwpa-doen-lightbox__close:focus-visible,
.nwpa-doen-lightbox__viewer-close:focus-visible,
.nwpa-doen-lightbox__viewer-nav:focus-visible {
    outline: 2px solid var(--doen-oranje) !important;
    outline-offset: 2px !important;
}

@media (max-width: 768px) {
    .nwpa-doen-lightbox__viewer-nav svg { width: 18px; height: auto; }
    .nwpa-doen-lightbox__viewer-nav--prev { left: 10px; }
    .nwpa-doen-lightbox__viewer-nav--next { right: 10px; }
}

/* ─── Hover-lock (v2.24.1): GÉÉN beweging op hover — definitieve fix.
 * Geschiedenis: v2.22.5 probeerde een "subtiele scale(1.03)", maar dát is óók
 * beweging → user: "het blijft er maar in zitten, los dit nu echt goed op".
 * Daarom nu: transform hard vergrendeld (chevrons translateY(-50%), allfotos
 * none) op ÁLLE states inclusief :hover, transform-transitie vervangen door
 * opacity. Zo kan noch een scale, noch een Doen-theme/Elementor button-hover-
 * transform (translateX) door de override heen lekken. Enige feedback =
 * subtiele opacity. !important nodig want Doen reset.css + Elementor-kit
 * forceren transform/transition op elke <button>. ─── */
.nwpa-doen-gallery__nav,
.nwpa-doen-gallery__nav:focus,
.nwpa-doen-gallery__nav:active,
.nwpa-doen-gallery__nav:hover,
.nwpa-doen-lightbox__viewer-nav,
.nwpa-doen-lightbox__viewer-nav:focus,
.nwpa-doen-lightbox__viewer-nav:active,
.nwpa-doen-lightbox__viewer-nav:hover {
    transform: translateY(-50%) !important;    /* geen scale, geen verplaatsing */
    transform-origin: center center !important;
    transition: opacity 0.15s ease !important; /* geen transform-transitie → niks beweegt */
    animation: none !important;
}

.nwpa-doen-gallery__nav:hover,
.nwpa-doen-lightbox__viewer-nav:hover {
    opacity: 0.85 !important;                   /* enige hover-feedback, geen beweging */
}

/* "Bekijk alle foto's"-knop = GÉÉN beweging op hover (transform none, ook op
 * :hover hard vergrendeld). Close-X-knoppen mogen wél een minimale scale.
 * Defensief transform-origin + animation-none zodat geen translateX van de
 * Doen-theme button-hover doorlekt. */
.nwpa-doen-gallery__allfotos,
.nwpa-doen-gallery__allfotos:focus,
.nwpa-doen-gallery__allfotos:active,
.nwpa-doen-lightbox__close,
.nwpa-doen-lightbox__close:focus,
.nwpa-doen-lightbox__close:active,
.nwpa-doen-lightbox__viewer-close,
.nwpa-doen-lightbox__viewer-close:focus,
.nwpa-doen-lightbox__viewer-close:active {
    transform: none !important;
    transform-origin: center center !important;
    transition: transform 0.2s ease !important;
    animation: none !important;
    opacity: 1 !important;
}

.nwpa-doen-gallery__allfotos:hover {
    transform: none !important;   /* geen scale, geen verplaatsing */
    opacity: 0.85 !important;     /* enige hover-feedback */
}

/* Punt 3 (v2.24.3) — DE ECHTE oorzaak van de "bewegende" hover: PADDING.
 * Het Doen-thema/Elementor zet op elke <button> een grote default-padding
 * (17px 34px) in RUST; onze kleinere padding won pas op :hover → de knop
 * KROMP + verschoof bij hover (chevron 92→40px, "Bekijk alle foto's"
 * 284→223px = 61px sprong). Vorige fixes mikten op transform/scale, maar dát
 * was het niet. Hier de padding hard vergrendeld met !important op ALLE states
 * zodat rust === hover → geen krimp, geen verschuiving. (Live geverifieerd:
 * chevron 40→40 statisch, allfotos-sprong 61px → ~0.) */
.nwpa-doen-gallery__nav,
.nwpa-doen-gallery__nav:hover,
.nwpa-doen-gallery__nav:focus,
.nwpa-doen-gallery__nav:active,
.nwpa-doen-lightbox__viewer-nav,
.nwpa-doen-lightbox__viewer-nav:hover,
.nwpa-doen-lightbox__viewer-nav:focus,
.nwpa-doen-lightbox__viewer-nav:active {
    padding: 8px !important;
}

.nwpa-doen-gallery__allfotos,
.nwpa-doen-gallery__allfotos:hover,
.nwpa-doen-gallery__allfotos:focus,
.nwpa-doen-gallery__allfotos:active {
    padding: 6px 2px !important;
    /* Tweede oorzaak van de allfotos-sprong: het thema zet display block (rust)
     * → flex (hover); block vs flex rendert de inline-content ~3px anders en de
     * rechts-verankerde knop schoof mee. Display hard op inline-flex vergrendeld
     * → rust === hover. (Live geverifieerd: allfotos 223→223 statisch.) */
    display: inline-flex !important;
}

/* X-iconen zijn klein → mogen iets duidelijker schalen. */
.nwpa-doen-lightbox__close:hover,
.nwpa-doen-lightbox__viewer-close:hover {
    transform: scale(1.06) !important;
    opacity: 1 !important;
}

/* Grid-tegels: heel subtiel om buren niet te overlappen, z-index boven
 * tijdens hover zodat de scaled tegel netjes erbovenop staat. */
.nwpa-doen-lightbox__grid-item,
.nwpa-doen-lightbox__grid-item:focus,
.nwpa-doen-lightbox__grid-item:active {
    transform: none !important;
    transition: transform 0.2s ease !important;
    opacity: 1 !important;
}

.nwpa-doen-lightbox__grid-item:hover {
    transform: scale(1.02) !important;
    z-index: 2;
    opacity: 1 !important;
}

/* Reduced-motion: geen rise/zoom, fade vrijwel instant. */
@media (prefers-reduced-motion: reduce) {
    .nwpa-doen-lightbox,
    .nwpa-doen-lightbox__viewer {
        transition: opacity 0.001s linear, visibility 0s;
    }
    .nwpa-doen-lightbox__grid,
    .nwpa-doen-lightbox.is-open .nwpa-doen-lightbox__grid {
        transform: none;
        transition: opacity 0.001s linear;
    }
    .nwpa-doen-lightbox__viewer-image,
    .nwpa-doen-lightbox__viewer.is-open .nwpa-doen-lightbox__viewer-image {
        transform: none;
        transition: none;
    }
    .nwpa-doen-lightbox__grid-item::after { transition: none; }
}

/* ─── Vergelijkbare woningen — Figma spec (v2.20.1)
 * Titel:  Kurdis Wide Bold 700 40/115% ls -1% (= -0.4px) #311140, center.
 * Link:   Kurdis Wide Bold 700 12/122% ls 20% (= 2.4px) uppercase #762296,
 *         staat rechts naast de titel op dezelfde hoogte (boven de cards). */
.single-nwpa_woning .nwpa-el-vergelijkbaar__header,
.single-nwpa_bog .nwpa-el-vergelijkbaar__header,
.single-nwpa_nieuwbouw .nwpa-el-vergelijkbaar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.single-nwpa_woning .nwpa-el-vergelijkbaar__title,
.single-nwpa_bog .nwpa-el-vergelijkbaar__title,
.single-nwpa_nieuwbouw .nwpa-el-vergelijkbaar__title {
    color: var(--doen-paars-dark);
    font-family: var(--doen-font-heading);
    font-size: 40px;
    line-height: 115%;
    font-weight: 700;
    letter-spacing: -0.4px;
    margin: 0;
    text-transform: none;
    text-align: center;
    flex: 1 1 auto;
}

.single-nwpa_woning .nwpa-el-vergelijkbaar__link,
.single-nwpa_bog .nwpa-el-vergelijkbaar__link,
.single-nwpa_nieuwbouw .nwpa-el-vergelijkbaar__link {
    color: var(--doen-paars);
    font-family: var(--doen-font-heading);
    font-size: 12px;
    line-height: 122%;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Card NIEUW-badge fold-corner — Figma terracotta rouge (#D64C3C). Geldt ook
 * voor de vergelijkbare-cards op de detail-pagina. */
.single-nwpa_woning .nwpa-card__badge::after,
.single-nwpa_bog .nwpa-card__badge::after,
.single-nwpa_nieuwbouw .nwpa-card__badge::after {
    border-color: transparent #D64C3C transparent transparent !important;
}

.single-nwpa_woning .nwpa-el-vergelijkbaar__link:hover,
.single-nwpa_bog .nwpa-el-vergelijkbaar__link:hover,
.single-nwpa_nieuwbouw .nwpa-el-vergelijkbaar__link:hover {
    color: var(--doen-paars-dark);
}

/* ─── Downloads list ─── */
.single-nwpa_woning .nwpa-el-downloads__link,
.single-nwpa_bog .nwpa-el-downloads__link,
.single-nwpa_nieuwbouw .nwpa-el-downloads__link {
    color: var(--doen-paars);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--doen-border);
    border-radius: var(--doen-radius-sm);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.single-nwpa_woning .nwpa-el-downloads__link:hover,
.single-nwpa_bog .nwpa-el-downloads__link:hover,
.single-nwpa_nieuwbouw .nwpa-el-downloads__link:hover {
    border-color: var(--doen-paars);
    background: var(--doen-grijs);
}

/* ─── Plattegronden (Realworks PLATTEGROND-media als afbeeldingen) ─── */
.single-nwpa_woning .nwpa-el-plattegronden,
.single-nwpa_bog .nwpa-el-plattegronden,
.single-nwpa_nieuwbouw .nwpa-el-plattegronden {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.single-nwpa_woning .nwpa-el-plattegronden__item,
.single-nwpa_bog .nwpa-el-plattegronden__item,
.single-nwpa_nieuwbouw .nwpa-el-plattegronden__item {
    display: block;
    padding: 0;
    margin: 0;
    border: 1px solid var(--doen-border);
    background: #ffffff;
    line-height: 0;
    cursor: pointer;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.single-nwpa_woning .nwpa-el-plattegronden__item:hover,
.single-nwpa_bog .nwpa-el-plattegronden__item:hover,
.single-nwpa_nieuwbouw .nwpa-el-plattegronden__item:hover {
    border-color: var(--doen-paars);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14);
}

.single-nwpa_woning .nwpa-el-plattegronden__item img,
.single-nwpa_bog .nwpa-el-plattegronden__item img,
.single-nwpa_nieuwbouw .nwpa-el-plattegronden__item img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: contain;
    background: #ffffff;
}

/* PDF/overig-bestand tegel (geen afbeelding) */
.single-nwpa_woning .nwpa-el-plattegronden__item--file,
.single-nwpa_bog .nwpa-el-plattegronden__item--file,
.single-nwpa_nieuwbouw .nwpa-el-plattegronden__item--file {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    line-height: normal;
    cursor: default;
    color: var(--doen-paars);
    text-decoration: none;
}

.single-nwpa_woning .nwpa-el-plattegronden__file-icon,
.single-nwpa_bog .nwpa-el-plattegronden__file-icon,
.single-nwpa_nieuwbouw .nwpa-el-plattegronden__file-icon {
    display: inline-flex;
    color: var(--doen-paars);
}

.single-nwpa_woning .nwpa-el-plattegronden__file-label,
.single-nwpa_bog .nwpa-el-plattegronden__file-label,
.single-nwpa_nieuwbouw .nwpa-el-plattegronden__file-label {
    font-family: var(--doen-font-body);
    font-size: 15px;
    font-weight: 600;
}

/* ─── Buurtinfo placeholder (binnenkort) ─── */
.single-nwpa_woning .nwpa-el-buurtinfo__placeholder,
.single-nwpa_bog .nwpa-el-buurtinfo__placeholder,
.single-nwpa_nieuwbouw .nwpa-el-buurtinfo__placeholder {
    background: var(--doen-grijs);
    border: 1px dashed var(--doen-border);
    border-radius: var(--doen-radius);
    padding: 24px;
    text-align: center;
    color: var(--doen-text-muted);
}

.single-nwpa_woning .nwpa-el-buurtinfo__placeholder h4,
.single-nwpa_bog .nwpa-el-buurtinfo__placeholder h4,
.single-nwpa_nieuwbouw .nwpa-el-buurtinfo__placeholder h4 {
    color: var(--doen-paars);
    margin-top: 0;
}

/* ─── Mobile responsive ─── */
@media (max-width: 768px) {
    .single-nwpa_woning .nwpa-el-specs,
    .single-nwpa_bog .nwpa-el-specs,
    .single-nwpa_nieuwbouw .nwpa-el-specs {
        flex-wrap: wrap;
        gap: 16px;
    }

    .single-nwpa_woning .nwpa-el-tabs__tab,
    .single-nwpa_bog .nwpa-el-tabs__tab,
    .single-nwpa_nieuwbouw .nwpa-el-tabs__tab {
        padding: 8px 12px;
        font-size: 14px;
    }

    .single-nwpa_woning .nwpa-el-tabs__panel,
    .single-nwpa_bog .nwpa-el-tabs__panel,
    .single-nwpa_nieuwbouw .nwpa-el-tabs__panel {
        padding: 16px;
    }
}

/* Buurtinformatie tab — hidden until content is ready (markup blijft bestaan) */
.nwpa-el-tabs__tab[data-tab="buurtinformatie"],
#nwpa-el-tab-buurtinformatie {
    display: none !important;
}

/* ──────────────────────────────────────────────────────────────────
 * VIDEO SLIDES (v2.23.0)
 * Facade-pattern: thumbnail + play-button bij eerste paint, iframe
 * pas geïnjecteerd na klik. Tokens hergebruikt uit Doen-stijlset.
 * ────────────────────────────────────────────────────────────────── */

/* Hero facade-button — neemt dezelfde plek in als .nwpa-doen-gallery__image */
.nwpa-doen-gallery__video-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background: #000 center / cover no-repeat;
    overflow: hidden;
}

.nwpa-doen-gallery__video-facade--youtube,
.nwpa-doen-gallery__video-facade--vimeo,
.nwpa-doen-gallery__video-facade--external {
    /* fallback-tint als thumb ontbreekt of laadt */
}
.nwpa-doen-gallery__video-facade--vimeo:not([style*="background-image"]) {
    background-color: #1ab7ea;
}
.nwpa-doen-gallery__video-facade--external:not([style*="background-image"]) {
    background-color: #311140; /* imperial plum */
}

/* Play-knop overlay (groot, gecentreerd) */
.nwpa-doen-gallery__video-facade::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 88px;
    height: 88px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #D64C3C;
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>");
    background-repeat: no-repeat;
    background-position: 54% center;
    background-size: 50% 50%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease;
}
.nwpa-doen-gallery__video-facade:hover::after,
.nwpa-doen-gallery__video-facade:focus-visible::after {
    transform: translate(-50%, -50%) scale(1.04);
}

/* "Video" labeltje rechtsboven */
.nwpa-doen-gallery__video-label {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font: 600 12px/1 "DM Sans", system-ui, sans-serif;
    letter-spacing: 0.1em;
    padding: 6px 10px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Iframe vult dezelfde 16:9-positie als de hero-image */
.nwpa-doen-gallery__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

/* ── Lightbox grid-tile voor video ── */
.nwpa-doen-lightbox__grid-item--video {
    position: relative;
    background-color: #000;
}
.nwpa-doen-lightbox__grid-item--video::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #D64C3C;
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>");
    background-repeat: no-repeat;
    background-position: 54% center;
    background-size: 50% 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}
.nwpa-doen-lightbox__grid-item--vimeo:not(:has(img)) {
    background-color: #1ab7ea;
}
.nwpa-doen-lightbox__grid-item--external:not(:has(img)) {
    background-color: #311140;
}

/* ── Lightbox viewer — facade overlay over .nwpa-doen-lightbox__viewer-image positie ── */
.nwpa-doen-lightbox__viewer-facade {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(90vw, 1280px);
    aspect-ratio: 16 / 9;
    border: 0;
    cursor: pointer;
    background: #000 center / cover no-repeat;
    overflow: hidden;
}
.nwpa-doen-lightbox__viewer-facade--vimeo:not([style*="background-image"]) {
    background-color: #1ab7ea;
}
.nwpa-doen-lightbox__viewer-facade--external {
    background-color: #311140;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nwpa-doen-lightbox__viewer-facade-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 96px;
    height: 96px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #D64C3C;
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>");
    background-repeat: no-repeat;
    background-position: 54% center;
    background-size: 50% 50%;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}
.nwpa-doen-lightbox__viewer-facade-label {
    font: 600 16px/1 "DM Sans", system-ui, sans-serif;
    letter-spacing: 0.05em;
}

/* Iframe in viewer */
.nwpa-doen-lightbox__viewer-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(90vw, 1280px);
    aspect-ratio: 16 / 9;
    border: 0;
    background: #000;
}