/* ============================================================
   MODU-WALL — site-brede aanvullingen (mobiel + kleine correcties)
   ------------------------------------------------------------
   Deze stylesheet vervangt de oude <style id="mw-mobile"> noodpatches
   die in iedere pagina stonden. Die patches zetten op telefoons álle
   grid-posities terug naar "auto", waardoor kaarten met een subgrid
   (bijv. "Het 4-kader systeem" op de homepage) hun teksten over elkaar
   heen tekenden.

   De pagina's gebruiken inline styles; waar een mobiele regel nodig is
   heeft het betreffende element een class gekregen (mw-...). Regels
   hieronder gebruiken daarom !important om de inline waarde te winnen.
   Breekpunt: 760px (telefoons en kleine tablets staand).
   ============================================================ */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video { max-width: 100%; }

/* Foto's die vergroot kunnen worden (zie mw-lightbox.js) */
image-slot[data-mw-lb] { cursor: zoom-in; }

/* --- Leesbaarheid: goud als tekstkleur ------------------------------------
   gold-500/600/700 halen op wit geen 4,5:1 (kleine tekst) en gold-600 zelfs
   geen 3:1 (grote tekst). Kleine goudkleurige tekst gebruikt gold-900,
   het gouden woord in grote koppen gold-800. Vlakken en lijnen blijven goud. */
:root { --text-accent: var(--gold-900); }
.mw-overline { color: var(--gold-900); }

/* --- Toetsenbord: zichtbare focus op alle knoppen en links ------------- */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
}

/* "Naar de inhoud"-link: alleen zichtbaar zolang hij met de Tab-toets focus heeft.
   De link heeft ook een inline style (left: -9999px), zodat hij nooit zichtbaar wordt
   wanneer een browser nog een oude versie van deze stylesheet in de cache heeft. */
.mw-skip {
  position: absolute; left: -9999px; top: 8px; z-index: 1000;
  background: var(--navy-700); color: #fff; padding: 10px 14px; border-radius: 6px;
  font: 700 15px 'Montserrat', sans-serif; text-decoration: none;
}
.mw-skip:focus-visible { left: 8px !important; outline: 3px solid var(--gold-500); outline-offset: 2px; }

/* --- Knoppen als echte links -------------------------------------------
   Was: <a href><x-import Button/></a> (een <button> in een <a>: ongeldige HTML,
   twee tabstops). Nu: <a class="mw-btn mw-btn-{variant} mw-btn-{size}">, met
   dezelfde maten en kleuren als de Button uit het design system. */
.mw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; box-sizing: border-box;
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-weight: var(--fw-semibold, 600); font-size: var(--fs-body, 16px);
  letter-spacing: var(--ls-wide, 0.02em); line-height: 1; white-space: nowrap;
  border-radius: var(--radius-md, 6px); cursor: pointer;
  text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mw-btn-sm { height: 36px; padding: 0 14px; font-size: var(--fs-sm, 14px); }
.mw-btn-md { height: 44px; padding: 0 20px; font-size: var(--fs-body, 16px); }
.mw-btn-lg { height: 54px; padding: 0 28px; font-size: var(--fs-h5, 18px); }
.mw-btn-primary { background: var(--navy-700); color: #fff !important; border: 2px solid var(--navy-700); }
.mw-btn-primary:hover { background: var(--navy-800); border-color: var(--navy-800); }
.mw-btn-accent { background: var(--gold-500); color: var(--navy-800) !important; border: 2px solid var(--gold-500); }
.mw-btn-accent:hover { background: var(--gold-600); border-color: var(--gold-600); }
.mw-btn-secondary { background: transparent; color: var(--navy-700) !important; border: 2px solid var(--navy-700); }
.mw-btn-secondary:hover { background: var(--navy-50); }
.mw-btn-ghost { background: transparent; color: var(--navy-700) !important; border: 2px solid transparent; }
.mw-btn-ghost:hover { background: var(--navy-50); }
.mw-btn:active { transform: translateY(1px); }

/* --- Homepage: video ---------------------------------------------------- */
.mw-video-pause {
  position: absolute; right: 12px; bottom: 12px; z-index: 5;
  width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(16, 18, 51, 0.65); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mw-video-pause:hover { background: rgba(16, 18, 51, 0.85); }

/* Carrousel-bolletjes: visueel 4 px hoog, maar een tikvlak van 24 px. */
.mw-carousel-dot { box-sizing: content-box !important; height: 4px !important; padding: 10px 0 !important; background-clip: content-box !important; }

/* Brede tabellen (isolatievarianten) schuiven zijwaarts in een eigen kader. */
.mw-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Minder beweging: geen automatische animaties/overgangen. De pagina's zelf
   zetten bij deze voorkeur ook autoplay en automatisch doorbladeren uit. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

@media (max-width: 760px) {
  /* Veiligheidsnet tegen horizontaal scrollen van de hele pagina.
     `clip` maakt geen scroll-container (sticky header blijft werken). */
  html { overflow-x: hidden; overflow-x: clip; }

  /* --- Algemeen ------------------------------------------------ */

  /* Blokken die in een auto-fit grid twee kolommen beslaan
     (footer-intro, "Hoe MODU-WALL is ontstaan", FAQ-antwoorden).
     Op één kolom maakt "span 2" een onzichtbare extra kolom + gap,
     wat de pagina breder maakt dan het scherm. */
  .mw-span2 { grid-column: auto !important; }

  /* Kaarten die op desktop een subgrid gebruiken om hun regels uit te
     lijnen met de buurkaarten. Op één kolom is dat niet nodig; een
     gewone kolom is robuuster (en werkt ook in oudere browsers). */
  .mw-subgrid-card {
    display: flex !important;
    flex-direction: column;
    grid-row: auto !important;
    grid-template-rows: none !important;
  }
  /* (align-self: start op de lijst was bedoeld voor het grid; in een kolom
     zou de lijst anders smaller worden dan de kaart.) */
  .mw-subgrid-card > * { min-width: 0; align-self: stretch !important; }

  /* Knoppenrijen die op desktop rechts uitlijnen: op mobiel links,
     onder de tekst. */
  .mw-cta-actions { justify-content: flex-start !important; }

  /* Design-system knoppen (x-import Button) hebben white-space: nowrap en een
     vaste hoogte. Lange labels ("Vul het aanvraagformulier in") passen dan niet
     in een smal kader en steken buiten het scherm. Op mobiel mag de tekst over
     twee regels lopen; de knop groeit mee in hoogte. */
  .mw-button, .mw-btn {
    max-width: 100%;
    white-space: normal !important;
    height: auto !important;
    min-height: 48px;
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    line-height: 1.2 !important;
    text-align: center;
  }
  .mw-btn-sm { min-height: 40px; padding-top: 9px !important; padding-bottom: 9px !important; }

  /* Brede tabel: hint dat er zijwaarts geschoven kan worden. */
  .mw-table-scroll::after { content: 'Schuif opzij voor alle kolommen \2192'; display: block; padding: 6px 0 0; font-size: 12px; color: var(--grey-600); }

  /* --- Homepage: fotocarrousel ---------------------------------- */
  /* Op desktop 3 foto's naast elkaar (40% breed); op mobiel één grote
     foto. De breedte/positie van de dia's rekent de pagina zelf uit
     (state.mobile in index.html); hier alleen de hoogte van het vlak. */
  .mw-carousel { aspect-ratio: 4 / 3 !important; min-height: 0 !important; }
  /* Bedieningsrij onder de carrousel: 8 bolletjes van 28px + 2 knoppen van
     40px passen niet in 335px; de knoppen werden dan platgedrukt. */
  .mw-carousel-nav { gap: 12px !important; }
  .mw-carousel-nav > button { flex-shrink: 0; }
  .mw-carousel-dot { width: 16px !important; }

  /* --- Het systeem: tabs "Zo is de wand opgebouwd" --------------- */
  /* Tabs horizontaal scrollbaar in plaats van 3 regels knoppen. */
  [role="tablist"] {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    margin: 0 -20px;
    padding: 2px 20px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [role="tablist"]::-webkit-scrollbar { display: none; }
  [role="tablist"] button { flex-shrink: 0; white-space: nowrap; }

  /* Linkerkolom van het paneel: geen vaste minimale hoogte meer. */
  .mw-sys-list { min-height: 0 !important; }

  /* Rechterkolom (foto's): compactere padding en kleinere tab-knoppen. */
  .mw-sys-right { padding: 14px 14px 12px !important; }
  .mw-sys-right > div:first-child button { font-size: 13px !important; padding: 0 10px !important; }

  /* Twee detailfoto's naast elkaar worden onder elkaar gezet;
     een lege "tweede" foto (de smalle 40px-strook) verdwijnt. */
  .mw-sys-detail[data-cols="two"] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }
  .mw-sys-detail[data-cols="plus"] { grid-template-columns: minmax(0, 1fr) !important; }
  .mw-sys-detail[data-cols="plus"] > :last-child { display: none; }

  /* --- Montagehandleiding ---------------------------------------- */
  /* Stapfoto's: niet smaller dan het scherm forceren. */
  .mw-step-photo { flex: 1 1 100% !important; min-width: 0 !important; }
}

/* --- Het systeem: hero ------------------------------------------------ */
/* Desktop: tekst links (kolom 1) en foto rechts (kolom 2, 3 rijen hoog).
   Twee kolommen van 420 px passen pas vanaf ~1000 px; daaronder zou de foto in
   een smalle restkolom terechtkomen. Dus tot 1000 px (ook tablets staand):
   alles onder elkaar, foto direct onder de kop. */
@media (max-width: 1000px) {
  .mw-sys-hero { display: flex !important; flex-direction: column; gap: 18px !important; }
  .mw-sys-hero > * { grid-column: auto !important; grid-row: auto !important; min-width: 0; }
  .mw-sys-hero > .mw-sys-hero-img {
    order: 1;
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
    max-height: 480px;
    align-self: stretch;
  }
  .mw-sys-hero > p,
  .mw-sys-hero > .mw-sys-hero-actions { order: 2; }
}