/* Mobiele aanvullingen op de pagina's van de hoofdsite:
   een hamburgermenu en garanties dat er niets buiten beeld valt. */

/* ------------------------------------------------ niets buiten beeld */

html, body { max-width: 100%; overflow-x: hidden; }
body img, body svg, body video, body canvas, body iframe { max-width: 100%; }
body table { max-width: 100%; display: block; overflow-x: auto; }

@media (max-width: 940px) {
  /* kolomindelingen die voor een breed scherm bedoeld zijn, onder elkaar */
  body [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* Rijen die anders doorlopen tot buiten het scherm mogen afbreken.
     Alleen rijen: bij een kolom betekent wrappen dat de inhoud in kolommen
     naast elkaar komt te staan, en dan valt de halve pagina buiten beeld. */
  body [style*="display:flex"]:not([style*="flex-direction:column"]) { flex-wrap: wrap; }
  body [style*="flex-direction:column"] { flex-wrap: nowrap; }
  /* vaste breedtes en niet-afbrekende regels zijn op een telefoon te breed */
  body [style*="min-width"] { min-width: 0 !important; }
  body [style*="white-space:nowrap"] { white-space: normal !important; }
  /* decoratieve vormen die naast de inhoud zweven */
  body [style*="position:absolute"] { max-width: 100vw; }
}

@media (max-width: 620px) {
  body [style*="padding:0 5vw"], body [style*="padding:18px 5vw"] { padding-left: 20px !important; padding-right: 20px !important; }
  /* alleen afbreken waar het echt moet, en zonder afbreekstreepje in de tekst */
  body h1, body h2 { overflow-wrap: break-word; hyphens: manual; }
  /* Een knop met een lang label blijft binnen het scherm. border-box telt de
     binnenmarge mee, anders duwt die de knop alsnog over de rand. */
  body .btnfx { max-width: 100%; box-sizing: border-box; }

  /* De witruimte tussen secties is gemaakt voor een breed scherm: 110 tot
     130px boven en onder. Op een telefoon zijn dat halve schermen leegte,
     dus daar wordt het 78px. De koppen bovenaan houden genoeg ruimte om
     onder de vaste balk uit te komen. */
  body [style*="padding:110px"], body [style*="padding:120px"],
  body [style*="padding:130px"] {
    padding-top: 78px !important; padding-bottom: 78px !important;
  }
  body header[style*="padding:180px"], body header[style*="padding:184px"],
  body header[style*="padding:190px"] { padding-top: 124px !important; }
}

/* ------------------------------------------- comfortabel aan te tikken */

@media (max-width: 940px) {
  /* Losse links krijgen een tikvlak van 44px hoog. Links midden in een
     lopende zin blijven zoals ze zijn: die horen bij de tekst en een
     minimumhoogte doet daar niets, want ze zijn inline. */
  footer a[href], nav a[href] { min-height: 44px; display: flex; align-items: center; }
  footer a[href] > img, nav a[href] > img { flex: 0 0 auto; }
  a[href^="tel:"], a[href^="mailto:"] { min-height: 44px; align-items: center; }
  /* contactregels midden in een tekstblok blijven staan waar ze staan,
     maar krijgen wel wat meer ruimte om aan te tikken */
  a[href^="tel:"]:not([style]), a[href^="mailto:"]:not([style]) {
    padding-top: 7px; padding-bottom: 7px;
  }
  /* een losse tekstlink onder een blok, zoals "Bekijk alle projecten" */
  .reveal > a[href] { padding-top: 12px; padding-bottom: 12px; }
  /* de uitklappers en plaatslinks onder aan de pagina */
  .fdrop summary { min-height: 52px; display: flex; align-items: center; padding-right: 46px; }
  .fdrop__body .ftr-link a { padding: 11px 14px; }
}

/* ------------------------------------------------- lege plekken opruimen */

@media (max-width: 900px) {
  /* De scroll-animatie naast de stappen op "Website laten maken" staat op een
     telefoon uit. Zonder die animatie bleef er een lege cirkel van 400px over,
     dus die illustratie gaat op een klein scherm helemaal weg. */
  .lfloat { display: none !important; }
}

/* ------------------------------------------------------- hero op mobiel */

@media (max-width: 980px) {
  header#home { padding-top: 118px !important; padding-bottom: 48px !important; }
  header#home h1 { font-size: clamp(30px, 8.2vw, 44px) !important; max-width: 16ch !important; }
  header#home p { font-size: 17px !important; margin-top: 22px !important; }
  header#home .btnfx { width: 100%; justify-content: center; text-align: center; }
  /* de vervaging onderaan de hero mag de strook niet wegdrukken */
  header#home > div[style*="height:240px"] { height: 120px !important; }

  /* Het micro-label boven de kop blijft naast zijn stip staan. De tekst zelf
     mag afbreken, de regel niet: anders staat de stip alleen op een regel. */
  body header [style*="align-items:center"][style*="gap:12px"],
  body header [style*="align-items:center"][style*="gap:14px"] { flex-wrap: nowrap; }
  body header [style*="align-items:center"][style*="gap:12px"] > *,
  body header [style*="align-items:center"][style*="gap:14px"] > * { min-width: 0; }
}

/* De cijferrij onder de hero. Drie cijfers naast elkaar wordt op een telefoon
   een propje, dus worden het drie regels: cijfer links, wat het betekent
   rechts, met de bestaande streepjes als scheidingslijn ertussen.
   De opmaak staat in het element zelf, vandaar !important. */
@media (max-width: 700px) {
  body header [style*="align-items:stretch"][style*="flex-wrap:wrap"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0;
  }
  body header [style*="align-items:stretch"][style*="flex-wrap:wrap"] > div {
    flex-direction: row !important;
    align-items: baseline;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 0 !important;
  }
  body header [style*="align-items:stretch"][style*="flex-wrap:wrap"] > div[style*="width:1px"] {
    width: auto !important; height: 1px; margin: 14px 0;
  }
}

/* strook met websites, gebouwd uit de zwevende kaarten van de desktopversie */
.lwd-mheld { display: none; }

@media (max-width: 980px) {
  .lwd-mheld {
    display: block; position: relative; z-index: 3;
    margin: 38px -5vw 0; padding: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .lwd-mheld__track {
    display: flex; gap: 14px; width: max-content; padding: 0 14px;
    animation: lwd-schuif 34s linear infinite;
  }
  .lwd-mheld:active .lwd-mheld__track { animation-play-state: paused; }
  .lwd-mheld__card {
    position: relative; margin: 0; flex: 0 0 auto;
    width: min(268px, 68vw); aspect-ratio: 4/3;
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 18px 44px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .lwd-mheld__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .lwd-mheld__card figcaption {
    position: absolute; left: 12px; top: 12px;
    background: linear-gradient(120deg, #FF6A3D, #F1502F); color: #fff;
    font-family: 'Satoshi', sans-serif; font-size: 12px; font-weight: 700;
    letter-spacing: 0.04em; padding: 5px 12px; border-radius: 999px;
  }
}

@keyframes lwd-schuif {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .lwd-mheld__track { animation: none; }
  .lwd-mheld { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ------------------------------------------------------- hamburgermenu */

.lwd-burger { display: none; }

@media (max-width: 940px) {
  nav .nav-links,
  nav [data-desktop-nav] { display: none !important; }
  nav a[href^="tel:"],
  nav > a.btnfx { display: none !important; }
  nav { gap: 12px !important; padding-left: 20px !important; padding-right: 20px !important; }
  nav img { height: 42px !important; width: auto; }

  .lwd-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; padding: 0 11px; margin-left: auto;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
    border-radius: 13px; cursor: pointer; flex: 0 0 auto;
    -webkit-appearance: none; appearance: none;
  }
  .lwd-burger span {
    display: block; height: 2px; width: 100%; border-radius: 2px;
    background: #EDF1F7;
    transition: transform 0.32s cubic-bezier(0.16,1,0.3,1), opacity 0.2s ease;
  }
  .lwd-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .lwd-burger.is-open span:nth-child(2) { opacity: 0; }
  .lwd-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

.lwd-mnu {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-start; justify-content: stretch;
  padding: 92px 22px 30px;
  background: rgba(10,18,32,0.94);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.32s ease, visibility 0.32s ease;
  overflow-y: auto;
}
.lwd-mnu.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.lwd-mnu__in { width: 100%; display: flex; flex-direction: column; gap: 4px; }

.lwd-mnu__link {
  display: block; padding: 17px 4px;
  font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: clamp(23px, 6vw, 30px); letter-spacing: -0.01em;
  color: #EDF1F7 !important; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transform: translateY(14px); opacity: 0;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.5s ease, color 0.25s;
}
.lwd-mnu__link:hover, .lwd-mnu__link:focus { color: #F1502F !important; }
.lwd-mnu.is-open .lwd-mnu__link { transform: none; opacity: 1; }
.lwd-mnu.is-open .lwd-mnu__link:nth-child(1) { transition-delay: 0.05s; }
.lwd-mnu.is-open .lwd-mnu__link:nth-child(2) { transition-delay: 0.10s; }
.lwd-mnu.is-open .lwd-mnu__link:nth-child(3) { transition-delay: 0.15s; }
.lwd-mnu.is-open .lwd-mnu__link:nth-child(4) { transition-delay: 0.20s; }
.lwd-mnu.is-open .lwd-mnu__link:nth-child(5) { transition-delay: 0.25s; }
.lwd-mnu.is-open .lwd-mnu__link:nth-child(6) { transition-delay: 0.30s; }

.lwd-mnu__bel {
  margin-top: 26px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 16px 30px; border-radius: 999px;
  background: linear-gradient(120deg, #FF6A3D, #F1502F);
  color: #fff !important; text-decoration: none;
  font-family: 'Satoshi', sans-serif; font-weight: 700; font-size: 16px;
  box-shadow: 0 14px 38px rgba(241,80,47,0.42);
  opacity: 0; transform: translateY(14px);
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1) 0.34s, opacity 0.5s ease 0.34s;
}
.lwd-mnu.is-open .lwd-mnu__bel { opacity: 1; transform: none; }

html.lwd-mnu-open { overflow: hidden; }
html.lwd-mnu-open body { overflow: hidden; }
/* De knop moet boven het paneel blijven, anders kun je het menu niet sluiten.
   Op pagina's met een kale kopbalk staat de nav niet vast op het scherm; daar
   doet een z-index op de nav niets, dus tilt de knop zichzelf omhoog. */
html.lwd-mnu-open nav { z-index: 61 !important; }
html.lwd-mnu-open .lwd-burger { position: relative; z-index: 62; }

@media (prefers-reduced-motion: reduce) {
  .lwd-mnu, .lwd-mnu__link, .lwd-mnu__bel, .lwd-burger span { transition: none !important; }
}