/*
 Theme Name:   Mowgli Creative Studio
 Theme URI:    https://mowglicreativestudio.be/
 Description:  Thema voor Mowgli Creative Studio
 Author:       Studio Studio
 Author URI:   https://studiostudio.be/
 Template:     blankslate
 Version:      1.1.0
*/

/* RESET CSS */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer,
header, hgroup, menu, nav, output, ruby, section,
summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

body {
    line-height: 1
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

blockquote:before, blockquote:after, q:before, q:after {
    content: ''
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

*, *::before, *::after {
    box-sizing: border-box
}

/* GLOBAL */
@font-face {
    font-family: 'Menlo';
    src: url('/wp-content/themes/mowglicreativestudio/fonts/Menlo-Regular.woff2') format('woff2'),
    url('/wp-content/themes/mowglicreativestudio/fonts/Menlo-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GRAD';
    src: url('/wp-content/themes/mowglicreativestudio/fonts/GRAD.woff2') format('woff2'),
    url('/wp-content/themes/mowglicreativestudio/fonts/GRAD.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ============= MAATSYSTEEM =============
   1 cel = --cell. Op 1600px ontwerpbreedte is dat 40px.
   ALLE maten (header, logo, teksten, formulier, footer) zijn veelvouden
   of vaste fracties van --cell, zodat alles in hetzelfde tempo meeschaalt
   met het venster. */
:root {
    --cell: 2.5vw;                        /* schaaleenheid: 40px @ 1600px breed */
    --edge: calc(var(--cell) * 0.5);      /* marge rond het logo: boven = links */
    --logo-h: calc(var(--cell) * 1.25);   /* zichtbare logohoogte */
    --header-h: calc(var(--logo-h) + var(--edge) * 2); /* header sluit om het logo */
    /* Zichtbare viewporthoogte: trekt de WP-adminbalk eraf voor ingelogde
       gebruikers, zodat modules ook dan volledig in beeld passen */
    --vh: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}

html, body {
    height: 100%;
    overflow: hidden;
    user-select: text;
    /* Eigen cursor over de hele site (.cur voor Chrome/Firefox, PNG-fallback
       voor Safari); hotspot 17,0 = de vingertop */
    cursor: url('/wp-content/themes/mowglicreativestudio/assets/cursor.cur') 17 0,
            url('/wp-content/themes/mowglicreativestudio/assets/cursor.png') 17 0,
            auto;
}

body {
    font-family: 'Menlo', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: calc(var(--cell) * 0.4); /* 16px @ 1600px, schaalt mee */
    background-color: #fff;
    /* Witte tekst met fijne zwarte contour, leesbaar op elke achtergrondfoto */
    color: #fff;
    -webkit-text-stroke: 1.25px #000;
    paint-order: stroke fill; /* contour achter de letter, zodat het wit vol blijft */
}

a {
    color: inherit;
    text-decoration: none
}

/* Interactieve elementen: echte kleurinversie van cursor.cur bij hover
   (PNG, 32×32 — werkt in alle browsers) */
img.site-logo:hover, a:hover, button:hover,
input[type="button"]:hover, input[type="submit"]:hover,
[role="button"]:hover, .modules-menu a:hover,
.module-gallery:hover {
    cursor: url('/wp-content/themes/mowglicreativestudio/assets/cursor-inverted.png') 17 0, auto !important;
}

/* HEADER (fixed, laat scroll door behalve op links/buttons) */
#header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    width: 100vw;
    height: var(--header-h);
    pointer-events: none;
    align-items: flex-end;
}

#header a, #header button {
    pointer-events: auto
}

#logo {
    display: flex;
    align-items: flex-end;
    height: 100%;
}

#logo a {
    display: block;
    height: var(--header-h);                          /* logo + gelijke marge boven en onder */
    padding: var(--edge) 0 var(--edge) var(--edge);
    box-sizing: border-box;
}

/* Eén PNG, twee keer over elkaar: links het woordmerk 'MOWGLI.', rechts
   'creative studio', elk met een eigen contourdikte. De knip ligt in de
   lege kolom tussen de punt en de 'c' (gemeten: ~49,9% van de breedte). */
.site-logo-stack {
    position: relative;
    display: block;
    height: 100%;
}

.site-logo {
    display: block;
    width: auto;
    height: 100%;
}

/* Woordmerk: wit met contour zoals de titels (2px-stroke achter de letter
   = 1px zichtbaar). brightness(0) invert(1) maakt alle zichtbare pixels
   van de transparante PNG wit; de drop-shadows tekenen de zwarte rand. */
.site-logo--mark {
    clip-path: inset(0 50.1% 0 0);
    filter: brightness(0) invert(1)
            drop-shadow(1.25px 0 0 #000) drop-shadow(-1.25px 0 0 #000)
            drop-shadow(0 1.25px 0 #000) drop-shadow(0 -1.25px 0 #000);
}

/* 'creative studio': dunne letters, dus halve contour */
.site-logo--text {
    position: absolute;
    top: 0;
    left: 0;
    clip-path: inset(0 0 0 49.9%);
    filter: brightness(0) invert(1)
            drop-shadow(0.75px 0 0 #000) drop-shadow(-0.75px 0 0 #000)
            drop-shadow(0 0.75px 0 #000) drop-shadow(0 -0.75px 0 #000);
}

nav.modules-menu {
    display: flex;
    align-items: flex-end;
    width: 100%;
    justify-content: flex-start;
    /* iets lager dan de logomarge: compenseert de tekst-descent zodat de
       menuregel op dezelfde lijn staat als 'creative studio' in het logo */
    padding-bottom: calc(var(--edge) - var(--cell) * 0.06);
}

nav.modules-menu ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: calc(var(--cell) * 0.45); /* 18px @ 1600px, zelfde schaal als de rest */
    text-transform: lowercase;
}

/* Actieve module-link onderlijnd in het modules-menu */
nav.modules-menu a {
    text-decoration: none;
}

/* Onderlijning als gradient-achtergrond: wit lijntje met zwarte contour
   erboven en eronder, zelfde stijl als de letters zelf */
nav.modules-menu a.is-active {
    background-image: linear-gradient(to bottom,
        #000 0, #000 1.75px,
        #fff 1.75px, #fff calc(1.75px + 0.08em),
        #000 calc(1.75px + 0.08em), #000 calc(3.5px + 0.08em));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% calc(0.08em + 3.5px);
}

nav.modules-menu a.is-active:hover {
    /* geïnverteerd, net als de tekst: zwart lijntje met witte contour */
    background-image: linear-gradient(to bottom,
        #fff 0, #fff 1.75px,
        #000 1.75px, #000 calc(1.75px + 0.08em),
        #fff calc(1.75px + 0.08em), #fff calc(3.5px + 0.08em));
}

nav.modules-menu ul a {
    /* wit met zwarte contour, zwaarder dan de gewone headertekst */
    color: #fff;
    -webkit-text-stroke: 1.75px #000;
    paint-order: stroke fill;
}

nav.modules-menu ul a:hover {
    /* geïnverteerd: zwart met witte contour */
    color: #000;
    -webkit-text-stroke: 1.75px #fff;
}

/* Komma's via CSS + dubbelepunt vooraan */
.modules-menu li::after {
    content: ",\00a0"
}

.modules-menu li:last-child::after {
    content: ""
}

.modules-menu li:first-child::before {
    content: ":\00a0"
}

/* VASTE ACHTERGRONDFOTO (header.php): vult het venster, blijft staan;
   alle content schuift eroverheen */
.site-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: #fff;
}

.site-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.site-bg img:not([src]) {
    display: none; /* leeg img-element tot het script een beeld kiest */
}

/* ENIGE SCROLLER (X + Y) */
.scroll-wrapper {
    position: relative;
    z-index: 1; /* boven .site-bg */
    width: 100%;
    height: 100%;
    overflow: auto; /* beide assen */
    scroll-behavior: auto; /* JS regelt easing */
    /* Geen scroll-padding: main.js scrollt naar module-offsets; de header-
       compensatie zit al in de padding-top van de module zelf. */
    /* Scrollbalken verbergen: klassieke (Windows-)scrollbalken snoepen
       anders van 100vw/100vh af en breken de exacte celmaat. */
    scrollbar-width: none;
}

.scroll-wrapper::-webkit-scrollbar {
    display: none;
}

/* GRID: exact 3 kolommen per rij; rijen stapelen verticaal */
.module-wrapper {
    display: grid;
    grid-template-columns:repeat(3, 100vw);
    /* Rijen zijn minstens één scherm en groeien mee met hoge inhoud */
    grid-auto-rows: minmax(var(--vh), auto);
    width: calc(3 * 100vw); /* breedte van één rij */
    min-width: calc(3 * 100vw);
}

/* MODULES */
.module {
    width: 100vw; /* = exact 40 cellen, dus kolommen sluiten naadloos aan */
    /* auto + min: een module met veel inhoud (contactformulier) groeit mee
       in plaats van onder de footer uit te steken */
    height: auto;
    min-height: var(--vh);
    padding: var(--header-h) var(--edge) 0; /* zijmarge = logomarge: titels op één lijn met het logo */
    box-sizing: border-box;
    /* Flex-kolom: het titelblok groeit mee met lange tekst en de gallery
       neemt de resterende hoogte in (krimpt dus mee) */
    display: flex;
    flex-direction: column;
    /* Transparant: de vaste achtergrondfoto (.site-bg) schijnt erdoorheen */
}

/* Een module mét gallery past altijd exact in één venster: het titelblok
   groeit met de tekst en de gallery krimpt zover als nodig */
.module:has(.module-gallery) {
    height: var(--vh);
}

#module-header {
    /* Titel links; rechts ernaast het infoblok (.module-info) */
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--cell);
    align-items: start;
    /* minstens 3 cellen (gallery start bij korte tekst op de vaste
       rasterlijn), maar groeit mee met langere tekst */
    min-height: calc(var(--cell) * 3);
    flex: 0 0 auto;
}

/* Infoblok: subtitel, omschrijving (+ Read more), submenu onder elkaar met
   één lege regel ertussen — los van de hoogte van de titel ernaast */
.module-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--cell) * 0.5);
    min-width: 0;
}

.module-info > .module-description,
.module-info > .module-submenu {
    align-self: stretch; /* volle restbreedte */
}

/* Subtitel en submenu: zelfde Menlo-tekst als de omschrijving */
.module-subtitle,
.module-submenu {
    font-size: max(12px, calc(var(--cell) * 0.3));
    line-height: calc(var(--cell) * 0.5);
}

.module-submenu {
    position: relative; /* ankerpunt voor de thumbnail-preview */
}

.module-submenu ul {
    display: flex;
    flex-wrap: wrap;
}

/* Namen op één regel, gescheiden door " / " */
.module-submenu li::after {
    content: "\00a0/\00a0";
}

.module-submenu li:last-child::after {
    content: "";
}

.submenu-item {
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    color: #fff;
    -webkit-text-stroke: 1.25px #000;
    paint-order: stroke fill;
    cursor: pointer;
}

/* Geen onderlijning: hover en actief subonderdeel zijn geïnverteerd
   (zwart met witte contour), zoals de menulinks bij hover */
.submenu-item:hover,
.submenu-item.is-active {
    color: #000;
    -webkit-text-stroke: 1.25px #fff;
}

/* Thumbnail bij hover: klein, net boven het item, witte rand zoals de
   bijschriften. Vast t.o.v. het venster en boven het vaste #header (10),
   zodat hij altijd bovenop alles ligt; positie via main.js */
.submenu-preview {
    position: fixed;
    left: 0;
    bottom: 100%;
    z-index: 20;
    width: calc(var(--cell) * 3);
    height: auto;
    display: block;
    background: #fff;
    border: 2px solid #000;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease, visibility 0s linear 120ms;
}

.submenu-preview.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 120ms ease;
}

.module-title {
    font-family: 'GRAD';
    font-size: calc(var(--cell) * 1.2); /* 48px @ 1600px */
    line-height: 1;
    -webkit-text-stroke: 2.5px #000; /* zwaardere contour voor de grote titel */
}

.module-description {
    /* volle breedte onder de titel. Geen max-height in CSS: lange tekst
       klapt in via main.js (Read more). */
    font-size: max(12px, calc(var(--cell) * 0.3)); /* 12px @ 1600px, nooit kleiner dan 12px */
    line-height: calc(var(--cell) * 0.5); /* regels op het halve-cel-ritme */
}

/* 'Lees meer' bij lange tekst (knop en klap-status gezet in main.js) */
.module-description.is-clamped {
    overflow: hidden;
}

.module-description.is-expanded {
    overflow-y: auto;
    scrollbar-width: thin;
}

.desc-toggle {
    /* direct onder de omschrijving (main.js plaatst hem daar) */
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    font-size: max(12px, calc(var(--cell) * 0.3));
    text-transform: lowercase;
    color: #fff;
    -webkit-text-stroke: 1.25px #000;
    paint-order: stroke fill;
    cursor: pointer;
}

.desc-toggle:hover {
    color: #000;
    -webkit-text-stroke: 1.25px #fff;
}

/* ABOUT-module: grotere tekst */
.module[id^="about"] .module-description {
    font-size: max(18px, calc(var(--cell) * 0.45)); /* 1,5× de gewone omschrijving */
    line-height: 1.3;
}

/* GALLERY */
.module-gallery {
    position: relative;
    max-width: 100%;
    /* Resterende hoogte onder het titelblok (bij korte tekst identiek aan
       vroeger: schermhoogte − header − 3c titelblok − 1c marge eronder).
       Bij lange tekst krimpt de gallery zover als nodig: de module blijft
       altijd binnen één venster. */
    flex: 1 1 0;
    min-height: 0;
    margin-top: calc(var(--cell) * 0.5); /* ademruimte tussen tekst en gallery */
    margin-bottom: var(--cell);
    overflow: hidden;
}

.module-gallery .slides {
    position: relative;
    width: 100%;
    height: 100%
}

.module-gallery .slide {
    position: absolute;
    inset: 0;
    display: flex;
    /* kolom: beeld bovenaan, caption-box eronder; zonder caption
       krijgt het beeld gewoon de volledige hoogte */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--cell) * 0.5);
    opacity: 0;
    transition: opacity 250ms ease;
}

.module-gallery .slide.is-active {
    opacity: 1
}

.module-gallery img {
    /* neemt de hoogte die overblijft naast de caption-box */
    flex: 1 1 0;
    min-height: 0;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain
}

.module:focus {
    outline: none;
}

/* Caption: witte box met zwarte rand onder het beeld, zelfde stijl als
   de formuliervelden */
.module-gallery figcaption {
    flex: 0 0 auto;
    align-self: center;
    max-width: 80%;
    text-align: center;
    font-size: calc(var(--cell) * 0.3); /* zelfde maat als de omschrijving */
    color: #000;
    -webkit-text-stroke: 0; /* staat al op een wit vlak */
    background: #fff;
    border: 2px solid #000;
    padding: calc(var(--cell) * 0.35) calc(var(--cell) * 0.6);
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff; /* vult de svg-pijl (currentColor) */
    cursor: pointer;
    z-index: 2;
    user-select: none;
}

.module-gallery button {
    outline: 0;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--cell) * 2.5);
    height: calc(var(--cell) * 2.5);
    background: none;
    cursor: pointer;
}

/* Blokjespijl: wit met fijne zwarte contour, zoals de rest van de site */
.gallery-nav svg {
    width: calc(var(--cell) * 1.75);
    height: calc(var(--cell) * 1.75);
    filter: drop-shadow(0.75px 0 0 #000) drop-shadow(-0.75px 0 0 #000)
            drop-shadow(0 0.75px 0 #000) drop-shadow(0 -0.75px 0 #000);
    transition: transform 150ms ease;
    pointer-events: none; /* klik gaat altijd naar de knop */
}

/* Linkerpijl = gespiegeld */
.gallery-nav.prev svg {
    transform: scaleX(-1);
}

/* Pijl groeit bij hover op de knop zelf én bij hover over de bijhorende
   gallery-helft (klassen gezet in main.js) */
.gallery-nav.next:hover svg,
.module-gallery.hover-next .gallery-nav.next svg {
    transform: scale(1.35);
}

.gallery-nav.prev:hover svg,
.module-gallery.hover-prev .gallery-nav.prev svg {
    transform: scale(-1.35, 1.35);
}

.gallery-nav.prev {
    left: 0;
}

.gallery-nav.next {
    right: 0;
}

/* Toetsenbord focus zichtbaar */
a:focus-visible, button:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px
}

/* CONTACT */
/* Twee kolommen: formulier links, contactgegevens (ACF-veld) rechts */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--cell);
    align-items: start;
}

.contact-form input,
.contact-form textarea {
    width: 100%; /* vult de linkerkolom (was 50% van de volle breedte) */
}

.contact-details {
    padding-top: calc(var(--cell) * 0.5); /* op één lijn met het eerste label */
    line-height: 1.4;
}

.contact-details p,
.contact-details ul,
.contact-details h1, .contact-details h2, .contact-details h3 {
    margin-bottom: calc(var(--cell) * 0.5);
}

.contact-details a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.module form {
    margin-bottom: var(--cell); /* lucht tussen formulier en footerband */
}

label {
    font-size: calc(var(--cell) * 0.45);
}

input, textarea {
    border: 2px solid #000;
    color: #000;           /* in het witte veld weer gewoon zwart */
    -webkit-text-stroke: 0;
    height: var(--cell);
    width: 50%; /* content is 38 cellen breed, dus 50% = 19 cellen: op het raster */
    margin: calc(var(--cell) * 0.5) 0 var(--cell);
    font-size: calc(var(--cell) * 0.6);
    font-family: inherit;
    display: inline-block;
}

textarea {
    height: calc(var(--cell) * 5);
}

footer {
    display: flex;
    justify-content: space-between;
}

input[type="submit"] {
    width: calc(var(--cell) * 6);
    /* wit met zwarte rand, zoals de velden; inverteert bij hover */
    background-color: #fff;
    color: #000;
    -webkit-text-stroke: 0;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #000;
    color: #fff;
}

/* PDF-knop onder de contactgegevens: wit met zwarte rand zoals de velden,
   geïnverteerd bij hover */
.contact-pdf {
    margin-top: calc(var(--cell) * 0.5);
}

.pdf-button {
    display: inline-block;
    border: 2px solid #000;
    background: #fff;
    color: #000;
    -webkit-text-stroke: 0;
    font-size: max(12px, calc(var(--cell) * 0.3));
    line-height: calc(var(--cell) - 4px);
    padding: 0 calc(var(--cell) * 0.5);
    text-decoration: none;
    cursor: pointer;
}

.pdf-button:hover {
    background: #000;
    color: #fff;
}

/* Pop-upvenster met de pdf-viewer van de browser */
.pdf-modal {
    border: 0;
    padding: 0;
    background: transparent;
    width: min(92vw, calc(var(--cell) * 32));
    height: calc(var(--vh) * 0.9);
    max-width: none;
    max-height: none;
    color: #000;
    -webkit-text-stroke: 0;
}

.pdf-modal::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.pdf-modal__frame {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #fff;
    border: 2px solid #000;
}

.pdf-modal__bar {
    display: flex;
    align-items: center;
    gap: calc(var(--cell) * 0.5);
    height: var(--cell);
    padding: 0 0 0 calc(var(--cell) * 0.5);
    border-bottom: 2px solid #000;
    font-size: max(12px, calc(var(--cell) * 0.3));
}

.pdf-modal__title {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pdf-modal__open {
    color: #000;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    white-space: nowrap;
}

.pdf-modal__close {
    flex: 0 0 auto;
    width: var(--cell);
    height: 100%;
    border: 0;
    border-left: 2px solid #000;
    background: #fff;
    color: #000;
    font: inherit;
    font-size: calc(var(--cell) * 0.6);
    line-height: 1;
    cursor: pointer;
}

.pdf-modal__close:hover {
    background: #000;
    color: #fff;
}

.pdf-modal__viewer {
    flex: 1 1 0;
    width: 100%;
    border: 0;
    background: #fff;
}

/* FOOTER: fijne smalle band (halve cel) ónder alle modules, in de flow;
   sticky op de horizontale as zodat hij in elke kolom in beeld is. */
.footer-module {
    position: sticky;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100vw;
    height: calc(var(--cell) * 0.5);
    padding: 0 var(--edge);
    font-size: calc(var(--cell) * 0.3);
    box-sizing: border-box;
}

footer a:hover {
    text-decoration: underline;
}

/* DEFAULT PAGE */
body.page-template-default {
    overflow: auto !important;
}

article {
    position: relative;
    z-index: 1; /* boven de vaste achtergrondfoto */
    padding: var(--header-h) var(--edge) calc(var(--cell) * 2);
    min-height: 100vh;
}

article h1 {
    font-size: calc(var(--cell) * 0.6);
    line-height: var(--cell);
}

article h2 {
    font-size: calc(var(--cell) * 0.4);
    line-height: var(--cell);
    padding-top: var(--cell);
}

article p {
    font-size: calc(var(--cell) * 0.35);
    line-height: calc(var(--cell) * 0.5);
}

article strong {
    font-weight: 700;
}

article li {
    list-style-position: outside;
    list-style-type: disc;
    margin-left: calc(var(--cell) * 0.5);
    line-height: calc(var(--cell) * 0.5);
}

/* ============= QUERIES ============= */
/* Mobile: zelfde systeem, grotere cel (20px @ 400px breed). De clamp
   voorkomt dat de cel — en dus de header — op tablets ontspoort. */
@media (max-width: 900px) {
    :root {
        --cell: clamp(16px, 5vw, 24px);
    }

    body {
        font-size: clamp(13px, calc(var(--cell) * 0.8), 18px); /* leesbare ondergrens */
    }

    #header {
        align-items: flex-start;
        padding-right: var(--cell);
    }

    nav.modules-menu {
        display: none;
    }

    .scroll-wrapper {
        overflow-x: hidden !important;
        touch-action: pan-y;
        overscroll-behavior-x: none;
    }

    /* Grid naar 1 kolom */
    .module-wrapper {
        grid-template-columns: 100vw;
        width: 100vw;
        min-width: 100vw;
        grid-auto-rows: auto;
    }

    .module,
    .module:has(.module-gallery) {
        width: 100vw;
        min-height: calc(var(--vh) - var(--header-h));
        height: auto; /* mobiel scrolt gewoon door, geen één-venster-regel */
        padding: var(--header-h) var(--edge) calc(var(--cell) * 2);
        border: 0;
    }


    /* Kop: alles onder elkaar in één kolom */
    #module-header {
        grid-template-columns: 1fr;
        row-gap: calc(var(--cell) * 0.75);
        height: auto;
    }

    .module-info {
        gap: calc(var(--cell) * 0.75);
    }

    .module-subtitle,
    .module-submenu {
        font-size: inherit;
        line-height: 1.35;
    }

    /* Geen hover op touch: thumbnail-preview uit */
    .submenu-preview {
        display: none;
    }

    .module-title {
        font-size: clamp(18px, calc(var(--cell) * 1.4), 30px);
        line-height: 1.2;
    }

    .module-description {
        max-height: none;
        font-size: inherit; /* mobiel: 0.3 cel zou onleesbaar klein zijn */
        line-height: 1.35;
    }

    /* Gallery fullscreen-breedte, iets lager dan scherm; vaste hoogte,
       dus buiten de flex-verdeling van desktop houden */
    .module-gallery {
        flex: 0 0 auto;
        height: 62vh;
        min-height: 0;
        margin-bottom: 0;
    }

    /* Beeld past altijd binnen het kader; staande foto's worden niet
       afgesneden maar geletterboxt. Hoogte via flex: caption-box eronder */
    .module-gallery img {
        width: 100%;
        flex: 1 1 0;
        min-height: 0;
        object-fit: contain;
    }

    /* Gallery controls verbergen op touch */
    .module-gallery button {
        display: none;
    }

    /* Footer in de flow: verticale scroll bereikt hem vanzelf */
    .footer-module {
        position: static;
        width: 100%;
        height: auto;
        flex-direction: column;
        align-items: center;
        padding: var(--cell);
        font-size: clamp(9px, calc(var(--cell) * 0.5), 12px);
        line-height: 2;
    }

    /* Contactgegevens onder het formulier */
    .contact-layout {
        grid-template-columns: 1fr;
        row-gap: var(--cell);
    }

    .contact-details {
        padding-top: 0;
    }

    /* Formulier: volle breedte + 16px voorkomt inzoomen op iOS */
    input, textarea, input[type="submit"] {
        width: 100%;
        font-size: 16px;
        height: calc(var(--cell) * 2);
    }

    textarea {
        height: calc(var(--cell) * 8);
    }
}