/* Laag: framework. De rangorde staat in skeleton/templates/page.php:
 *   @layer framework, site, theme, type, item;
 * Alles wat het framework meestuurt zit in de onderste laag, zodat site-CSS en CMS-opmaak
 * ervan winnen zonder specificiteits-trucs. `tests/Framework/CodeStyle/ModuleCssIsLayeredTest.php`
 * bewaakt dat. */
@layer framework {
/* Overlay-popup (layer_popup). Gedrag: popup.js. Branding: via CMS-design/site-CSS.
   Neutraal gehouden — kleuren/typografie erven van de pagina of de design-class. */

.popup {
    position: fixed;
    inset: 0;
    /* Boven elke sticky/header-chrome (site-eigen headers gaan soms tot ~1100), maar
       onder de cookiebanner (11000) -- toestemming moet altijd bedienbaar blijven. */
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup[hidden] {
    display: none;
}

.popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: opacity .3s ease;
}

.popup.is-open .popup__backdrop {
    opacity: 1;
}

.popup__panel {
    position: relative;
    /* Zonder expliciete width mag een flex-item met `overflow:auto` krimpen tot bijna
       niets (overflow != visible zet de automatische min-width op 0) -- vandaar 100%
       hier, `max-width` blijft de echte grens. */
    width: 100%;
    /* 600px was krap voor een foto+tekst-layout (Ronny, 29-09-2026: iets breder op desktop).
       Mobiel blijft ongemoeid (zie de losse @media (max-width:600px) hieronder). */
    max-width: min(600px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: #fff;
    color: inherit;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
}

.popup.is-open .popup__panel {
    opacity: 1;
    transform: none;
}

/* Begin-transform per effect; .is-open zet 'm naar `none` (zie hierboven). */
/* De reveal-on-scroll van shell.css (elke .layer krijgt opacity:0 + translateY(28px) tot
   motion.js 'm "gezien" heeft) raakt ook deze laag-wrapper -- en die transform breekt
   `position:fixed` op .popup hierboven (een voorouder met transform maakt een nieuw
   containing block, dus .popup positioneert zich dan t.o.v. .layer--popup i.p.v. de
   viewport). Deze laag toont zichzelf al via z'n eigen trigger, niet via scroll-reveal,
   dus sluit 'm daar expliciet van uit. */
.has-motion .layer--popup {
    opacity: 1;
    transform: none;
    transition: none;
}

/* shell.css se reveal-regel raakt niet alleen de laag-wrapper hierboven maar ook, dieper
   genest, `.layer__inner` zelf (`.has-motion .layer > .layer__sc > .layer__inner{opacity:0;
   transform:translateY(28px)}`), pas opgeheven zodra motion.js `data-revealed="true"` zet via
   een IntersectionObserver. Een popup-laag staat tot popup.js 'm toont op `display:none`
   (`.popup[hidden]`) -- een display:none-element heeft geen bounding box en kan dus NOOIT
   intersecten, dus `data-revealed` wordt nooit true. Gevolg: popup.js zet keurig hidden=false
   + is-open + lockScroll(), maar `.layer__inner` bleef op opacity:0 staan -- de body raakt
   vergrendeld terwijl er niets zichtbaar wordt (Ronny, incognito-test, 29-09-2026, na de
   eerste live content in deze popup). Zelfde uitsluiting als hierboven, nu op de laag die
   shell.css daadwerkelijk verbergt. */
.has-motion .layer--popup > .layer__sc > .layer__inner {
    opacity: 1;
    transform: none;
    transition: none;
}

.popup__panel[data-effect="slide_in_from_bottom"] { transform: translateY(40px); }
.popup__panel[data-effect="slide_in_from_top"]    { transform: translateY(-40px); }
.popup__panel[data-effect="slide_in_from_left"]   { transform: translateX(-40px); }
.popup__panel[data-effect="slide_in_from_right"]  { transform: translateX(40px); }
.popup__panel[data-effect="zoom_in_from_center"]  { transform: scale(.85); }

.popup__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}

.popup__content {
    padding: 24px;
}

/* Sticky open-knop (trigger_type = click/both). */
.popup__sticky {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    background: #222;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

.popup__sticky img {
    display: block;
}

@media (max-width: 600px) {
    .popup__panel {
        width: calc(100vw - 24px);
        max-width: none;
    }

    /* Een tekst+media-laag (bv. de last-minute-content) stapelt op mobiel naar één kolom --
       de foto neemt dan de volle breedte op z'n natuurlijke (vaak portrait) formaat, wat in
       een popup meteen de helft van het scherm vult (Ronny, 29-09-2026: "400x600 is mega
       groot op mobiel"). Scoped op .popup zodat een gewone text_image-laag elders op de site
       gewoon z'n foto houdt -- dit is puur een popup-op-klein-scherm-keuze.
       De tekst mag zelf de volle breedte pakken (geen `text-image__text`-grid-column meer). */
    .popup .text-image__media {
        display: none;
    }
}

@media (min-width: 768px) {
    .popup__panel {
        max-width: min(820px, calc(100vw - 64px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .popup__backdrop,
    .popup__panel {
        transition: none;
    }
}
}