/*
  inspiratie-thema.css - de acht inspiratie-onderwerppagina's.
  Sjabloon: page-inspiratie-thema.php
  Ontwerp:  ruw/uve inspiratiepagina template/export-inspiratie/_plat/
            inspiratie-onderwerp.html

  De maatvoering, kleur en beweging staan als inline stijl in het sjabloon,
  letterlijk zoals het ontwerp ze schrijft. Dit bestand bevat alleen wat niet
  inline kan: keyframes, media queries, hover-toestanden, en de naden.

  Alles is gescoped onder .it. De klassen s2rij, s3band en dc-hover-N heten in
  elk Claude Design-ontwerp hetzelfde en betekenen elke keer iets anders; zonder
  scope lekken ze naar andere sjablonen.

  Afhankelijkheden: home.css (sitebreed), tokens-erika.css (variabelen).
  --dienst-s2 bestaat niet in de tokens; het ontwerp schrijft overal
  var(--dienst-s2, #f4ece6). Hij staat hieronder op .it gezet, zodat de waarde
  op één plek staat en de fallback nergens uiteen kan lopen.

  DRIE DINGEN DIE HET ONTWERP NIET OPLOST en hier wel staan:

  1. De naden. Het ontwerp zet de secties onder elkaar op één canvas; op de site
     komt er een voet onder en worden de grenzen zichtbaar. Zie de werkwijze,
     hoofdstuk "De naden tussen de secties". Elke sectie dooft over de laatste
     120px uit naar de kale grondkleur van de golf ernaast, met de laatste 22%
     vlak.
  2. De golven staan in dit ontwerp aan de ONDERkant van de bovenste band, niet
     aan de bovenkant van de onderste. Dat is andersom dan bij dienst.css. De
     uitdoving aan de bovenkant van de onderste band is daarom hier geen
     uitzondering maar de regel: elke band die op een golf volgt heeft er een.
  3. footer::before krijgt de eindkleur van de slotband (#24463f).
*/

.it{
  --dienst-s2:#f4ece6;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink-soft);
}
.it a{color:var(--aubergine);text-decoration-color:rgba(74,52,97,.3);text-underline-offset:3px}
.it a:hover{color:var(--aubergine-deep);text-decoration-color:var(--aubergine)}
.it :focus-visible{outline:2px solid var(--aubergine);outline-offset:3px;border-radius:6px}

/* ---------- de FAQ-accordeon ---------- */
.it details > summary{list-style:none}
.it details > summary::-webkit-details-marker{display:none}
.it details[open] .erika-plus{transform:rotate(45deg)}

/* ---------- sectie 1: hero ---------- */
/* Het ontwerp laat de foto onder de tekst zakken op smal scherm. */
@media (max-width:880px){
  .it [data-hero-foto]{order:2 !important}
  .it [data-hero-tekst]{order:1 !important}
}

/* De hero-stapel. Het ontwerp zet hier één foto neer; dat is één beeld op een
   pagina die er vijftien heeft. Nu liggen ze op elkaar en steekt de volgende
   rechtsonder uit: zonder dat uitsteken weet niemand dat er iets te vegen valt.

   De hoogte stond inline in het sjabloon en staat nu hier: de stapel is de
   maatgever geworden, niet de losse foto. De maat zelf is die van het ontwerp.

   touch-action:pan-y is de scheiding tussen de twee bewegingen. Verticaal
   scrollen blijft van de pagina; horizontaal slepen is van de stapel. Zonder
   die regel doet een veeg op een telefoon allebei of geen van beide. */
.it .it-stapel{--it-uitsteek:7;position:relative;height:clamp(300px,34vw,430px);
  touch-action:pan-y;cursor:grab;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none}
/* Hoeveel de volgende foto uitsteekt, in procent van de kaartbreedte. Het
   script leest deze waarde uit; hij moet daarom een kaal getal blijven en geen
   clamp(). Een custom property rekent uit tot zijn eigen tekst, dus van
   "clamp(7,2vw,11)" maakt parseFloat NaN en staat de stapel stil.

   Op een telefoon is de kaart smaller en dus 7% ook: dat werd 7px en dat ziet
   niemand. Gemeten op 390px: 7% gaf 7px uitsteek, 11% geeft er 20. */
@media (max-width:600px){.it .it-stapel{--it-uitsteek:11}}
.it .it-stapel:active{cursor:grabbing}
.it .it-dia{position:absolute;inset:0;will-change:transform,opacity}
/* Op de kistenpagina's zijn alle beelden vrijstaand: dan hebben de bovenste
   kaart en die erachter allebei de papierkleur, en is het uitsteken wel te
   meten maar niet te zien. Vandaar een haarlijn langs de vorm en een echte
   slagschaduw onder de bovenste kaart; die twee tekenen de rand van beide
   kaarten, ook zonder kleurverschil. Ze moeten !important zijn: de schaduw
   staat als inline stijl in het sjabloon, letterlijk uit het ontwerp. */
.it .it-dia .s2beeld{box-shadow:rgba(74,52,97,.4) 0 40px 80px -50px, 0 0 0 1px rgba(74,52,97,.28) !important}
.it .it-dia[aria-hidden="false"] .s2beeld{box-shadow:rgba(74,52,97,.42) 0 26px 54px -30px, 0 0 0 1px rgba(74,52,97,.16) !important}
/* De foto zelf vangt geen sleep- of klikgebeurtenis af: die horen bij de dia.
   Anders begint een muis in Firefox een afbeelding te verslepen. */
.it .it-dia img{pointer-events:none}
.it .it-stapel-balk{display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-top:20px}
.it .it-stapel-teller{margin:0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-size:11.5px;letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--ink-soft);opacity:.72}
/* De tekst staat in de CSS en niet in het sjabloon: op een telefoon veeg je,
   met een muis sleep je, en het is één zin die van het apparaat afhangt. De
   span staat op aria-hidden; een schermlezer heeft de pijlen al. */
.it .it-stapel-hint::after{content:"Sleep voor meer foto's"}
@media (hover:none){.it .it-stapel-hint::after{content:"Veeg voor meer foto's"}}
/* De naam op de foto zelf, sinds 2026-09-09. De beelden van Erika hebben een
   eigen naam ("Grijs wax", "Massief populieren met verlengde grepen"); die stond
   alleen in de vergroting, dus je moest klikken om te weten wat je zag.

   WAAROM EEN GECENTREERD PLAATJE EN GEEN STROOK LANGS DE ONDERRAND. De kaart is
   een ellips en verandert 24 seconden lang van vorm (it-s2morph). Een strook
   over de volle breedte valt aan de zijkanten buiten de vorm en loopt met de
   morph mee in en uit beeld. Vandaar een chip: eigen achtergrond, eigen
   haarlijn, en hij ligt op elke vorm even goed.

   bottom in procent en niet in pixels: op 15% van de hoogte is de ellips nog
   ruim breder dan de chip, onderaan is hij dat niet. Gemeten op 1280 en op 390.

   pointer-events:none, anders vangt de chip de veeg af die van de stapel is. */
.it .it-stapel-naam{position:absolute;left:50%;bottom:15%;transform:translateX(-50%);
  z-index:4;margin:0;max-width:min(74%,300px);pointer-events:none;
  padding:8px 17px;border-radius:999px;
  background:rgba(250,245,236,.94);border:1px solid var(--hairline);
  box-shadow:0 12px 28px -20px rgba(74,52,97,.6);
  font-size:13px;line-height:1.35;color:var(--aubergine);
  text-align:center;text-wrap:balance}
.it .it-stapel-naam:empty{display:none}
@media (max-width:600px){
  .it .it-stapel-naam{font-size:12px;padding:7px 14px;max-width:80%}
}
.it .it-stapel-knoppen{display:flex;gap:10px}
.it .it-rond{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:999px;border:1px solid var(--hairline);
  background:rgba(255,255,255,.5);color:var(--aubergine);font-size:16px;cursor:pointer;
  transition:background var(--dur-color) var(--ease-soft),border-color var(--dur-color) var(--ease-soft)}

/* ---------- de vergroting ---------- */
/* Eén overlay voor de hele pagina; de hero-stapel en de beeldband openen hem
   allebei. Hij hangt in main.it, waar geen enkele voorouder een transform of
   filter heeft; anders zou position:fixed daaraan gaan hangen in plaats van
   aan het venster. */
.it .it-licht{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;
  justify-content:center;padding:clamp(14px,3.5vw,44px);
  background:rgba(30,21,36,.93);opacity:0;transition:opacity .24s var(--ease-soft)}
.it .it-licht[data-open]{opacity:1}
.it .it-licht[hidden]{display:none}
/* De figure krimpt om de foto heen; dat moet, want het bijschrift staat
   linksonder OP de foto en niet linksonder in het venster. */
.it .it-licht-doek{position:relative;margin:0;display:flex;
  max-width:min(1180px,100%);max-height:calc(100vh - 130px);max-height:calc(100dvh - 130px)}
.it .it-licht-doek img{display:block;width:auto;height:auto;max-width:100%;
  max-height:calc(100vh - 130px);max-height:calc(100dvh - 130px);
  border-radius:14px;box-shadow:0 40px 90px -40px rgba(0,0,0,.65)}
/* Een vrijstaand beeld (kist op zwart, doorzichtig gemaakt) krijgt papier
   onder zich, net als in de kaarten op de pagina; op het donkere scherm zweeft
   het hout anders in het niets. */
/* Onderaan meer papier dan aan de andere kanten: daar staat de naam, en op een
   vrijstaand beeld is er geen donker verloop om hem op te zetten. Zo ligt het
   bijschrift naast de foto in plaats van erover. */
.it .it-licht-doek[data-vrij]{background:var(--paper-warm);border-radius:18px;
  padding:clamp(10px,1.8vw,22px) clamp(10px,1.8vw,22px) 46px}
.it .it-licht-doek[data-vrij] img{border-radius:8px}
.it .it-licht-naam{position:absolute;left:0;right:0;bottom:0;display:flex;
  align-items:flex-end;justify-content:space-between;gap:18px;
  padding:38px 18px 15px;border-radius:0 0 14px 14px;color:#fff;
  font-size:14px;line-height:1.45;text-align:left;
  background:linear-gradient(to top,rgba(18,12,22,.78) 0%,rgba(18,12,22,.5) 45%,rgba(18,12,22,0) 100%)}
.it .it-licht-doek[data-vrij] .it-licht-naam{color:var(--ink);background:none;
  padding:0 20px 15px;align-items:center}
.it .it-licht-teller{flex:0 0 auto;font-size:11.5px;letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;opacity:.75;padding-bottom:2px}
.it .it-licht-knop{position:absolute;display:inline-flex;align-items:center;
  justify-content:center;width:48px;height:48px;border-radius:999px;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;
  font-size:18px;line-height:1;cursor:pointer;
  transition:background var(--dur-color) var(--ease-soft),border-color var(--dur-color) var(--ease-soft)}
.it .it-licht-knop:hover{background:rgba(255,255,255,.22);border-color:#fff;color:#fff}
.it .it-licht-sluit{top:clamp(12px,2.4vw,26px);right:clamp(12px,2.4vw,26px);font-size:24px}
.it .it-licht-vorige{left:clamp(8px,2vw,26px);top:50%;transform:translateY(-50%)}
.it .it-licht-volgende{right:clamp(8px,2vw,26px);top:50%;transform:translateY(-50%)}
/* Op een telefoon staan de pijlen niet naast maar onder de foto: naast de foto
   is daar geen ruimte en dan liggen ze op het beeld zelf. */
@media (max-width:600px){
  .it .it-licht{padding:14px 14px 84px}
  .it .it-licht-doek,
  .it .it-licht-doek img{max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px)}
  .it .it-licht-vorige{left:50%;top:auto;bottom:18px;transform:translateX(-58px)}
  .it .it-licht-volgende{right:auto;left:50%;top:auto;bottom:18px;transform:translateX(10px)}
  .it .it-licht-naam{font-size:13px;padding:32px 14px 12px}
}

/* ---------- sectie 2: uitleg ---------- */
/* Het organische beeldvlak ademt; de lagen wisselen bij hover of tik. */
@keyframes it-s2morph{
  0%,100%{border-radius:62% 38% 54% 46%/50% 56% 44% 50%}
  50%{border-radius:48% 52% 40% 60%/56% 44% 56% 44%}
}
.it .s2beeld{animation:it-s2morph 24s ease-in-out infinite}
.it .s2laag{transition:opacity .9s cubic-bezier(.22,.61,.36,1)}
.it .s2rij{transition:color var(--dur-color) var(--ease-soft),opacity var(--dur-color) var(--ease-soft)}
@media (max-width:900px){
  .it .s2grid{grid-template-columns:1fr !important;gap:26px !important}
  .it .s2beeldwrap{order:-1;height:min(74vw,340px) !important}
}

/* ---------- sectie 3: de schuivende beeldband ---------- */
/* 3,2 kaarten in beeld: de vierde loopt de maskering in en vloeit uit.
   De maatvoering is die van het ontwerp; het schuiven zelf niet.

   Het ontwerp doet dat met een keyframe die van -1 naar -2 kaarten loopt en dan
   terugspringt. Dat werkt alleen als iets de lijst elke ronde doorschuift, en
   dat deed de runtime van Claude Design. Zonder die runtime springt de band elke
   negen seconden zichtbaar terug, en de pijlen lopen de band uiteindelijk leeg.

   Daarom staat het schuiven nu in JavaScript, in het sjabloon: één positie, en
   de kaart die links uit beeld loopt gaat achteraan de rij. Daardoor is de band
   oneindig, in beide richtingen, en kan hij niet leeg raken. Snelheid en gedrag
   zijn die van het ontwerp: negen seconden per foto, stil bij aanwijzen. */
.it .s3band{
  --s3gap:clamp(16px,2.2vw,26px);
  --s3kaart:calc((100% - 3*var(--s3gap))/3.2);
  --s3rand:calc(var(--s3kaart)*0.2 + var(--s3gap));
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - var(--s3rand)),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - var(--s3rand)),transparent 100%);
}
/* width:100% en niet max-content. De kaartbreedte is een percentage van deze
   rij; met max-content hangt de rij op zijn beurt van de kaarten af en lossen
   browsers dat op met absurde maten. De kaarten staan op flex:none, dus ze
   krimpen niet en de rij loopt gewoon buiten beeld door. Zo doet het ontwerp
   het ook. */
.it .s3spoor{display:flex;gap:var(--s3gap);align-items:center;width:100%;
  will-change:transform}
.it .s3kaart{flex:none;position:relative;overflow:hidden;border-radius:22px;
  background:var(--lila-light);box-shadow:var(--shadow-soft);
  width:var(--s3kaart);aspect-ratio:1/1}
.it .s3kaart img{width:100%;height:100%;object-fit:cover;display:block}
/* Een kaart opent de vergroting. De cursor zegt dat, en de lichte lift bij
   aanwijzen bevestigt dat er iets te klikken valt. */
.it .s3kaart[data-lb]{cursor:zoom-in;transition:transform var(--dur-color) var(--ease-soft),box-shadow var(--dur-color) var(--ease-soft)}
.it .s3kaart[data-lb]:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift,0 24px 50px -30px rgba(74,52,97,.5))}
/* Een vrijstaande catalogusfoto (kist op zwart, doorzichtig gemaakt) krijgt
   papier onder zich in plaats van de getinte ontwerpkleur; anders schijnt het
   lila door het hout heen. Zie inc/inspiratie-vrijstaand.php. */
.it .s3kaart.it-vrijstaand,
.it .s2beeld.it-vrijstaand{background:var(--paper-warm)}

/* De naam op de kaart, sinds 2026-09-09. De band schuift uit zichzelf door en
   de naam stond alleen in de vergroting: je moest dus eerst klikken om te weten
   welke kist of welke locatie je zag.

   Hier kan het wél een strook over de volle breedte zijn: de kaart is een
   vierkant met overflow:hidden, dus het verloop wordt netjes op de ronde hoeken
   afgesneden. Dat is dezelfde opzet als het bijschrift in de vergroting.

   Twee uitvoeringen, om dezelfde reden als daar. Een gewone foto is donker
   genoeg voor witte letters op een verloop; een vrijstaande catalogusfoto staat
   op papier, en daar zou datzelfde verloop een zwarte balk onder een lichte kist
   zijn. Die krijgt dus inkt op papier.

   pointer-events:none: de klik is van de kaart, die opent de vergroting. */
.it .s3naam{position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  padding:38px 15px 13px;font-size:12.5px;line-height:1.35;color:#fff;
  background:linear-gradient(to top,rgba(18,12,22,.8) 0%,rgba(18,12,22,.5) 48%,rgba(18,12,22,0) 100%)}
.it .s3kaart.it-vrijstaand .s3naam{color:var(--aubergine);
  background:linear-gradient(to top,rgba(247,241,232,.97) 0%,rgba(247,241,232,.85) 48%,rgba(247,241,232,0) 100%)}
.it .s3naam:empty{display:none}
@media (max-width:520px){.it .s3naam{font-size:12px;padding:32px 13px 11px}}
@media (max-width:760px){.it .s3band{--s3kaart:calc((100% - 2*var(--s3gap))/2.2)}}
@media (max-width:520px){.it .s3band{--s3kaart:calc((100% - var(--s3gap))/1.2)}}

/* ---------- smalle schermen ---------- */
@media (max-width:600px){
  .it section{padding-left:22px !important;padding-right:22px !important}
  .it .s2rij{padding-top:16px !important;padding-bottom:16px !important}
  .it .s2rij h3{font-size:20px !important}
  .it .s2rij p{font-size:15px !important;line-height:1.7 !important}
  .it .s2beeldwrap{height:min(80vw,320px) !important}
  .it [data-hero-tekst] p{font-size:16.5px !important}
  .it .it-verwant p{font-size:26px !important;line-height:1.2 !important}
  .it .it-verwant a{font-size:13.5px !important;padding:10px 15px !important;min-height:42px !important}
  .it .it-verwant > div > div{gap:8px !important}
  .it .s3vraag{font-size:22px !important;text-align:center;line-height:1.35 !important}
}
/* De beeldband heeft geen zijmarge; de sectie-padding hierboven mag hem niet
   raken, anders loopt de maskering niet meer tot de rand. */
@media (max-width:600px){
  .it .it-band{padding-left:0 !important;padding-right:0 !important}
  .it .it-band .s3band{margin-left:22px;margin-right:22px}
}

/* ---------- het binnenkomen van de secties ---------- */
.it [data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity 1.1s cubic-bezier(.22,.61,.36,1),transform 1.1s cubic-bezier(.22,.61,.36,1)}
.it [data-reveal][data-in]{opacity:1;transform:none}

/* ---------- hover, uit style-hover van het ontwerp ---------- */
/* platslaan.cjs zet de style-hover-attributen om in deze klassen. Ze staan
   hier gescoped onder .it; in een ander ontwerp betekent dc-hover-1 iets
   anders. De nummers volgen het platte bestand. */
.it .dc-hover-3:hover,
.it .dc-hover-4:hover{background:#fff;border-color:var(--aubergine)}
.it .dc-hover-5:hover,
.it .dc-hover-6:hover,
.it .dc-hover-7:hover,
.it .dc-hover-8:hover,
.it .dc-hover-9:hover,
.it .dc-hover-10:hover,
.it .dc-hover-11:hover{background:#fff;border-color:var(--aubergine);transform:translateY(-2px)}
.it .dc-hover-12:hover{color:var(--aubergine-deep);text-decoration-color:var(--aubergine)}
.it .dc-hover-13:hover{border-color:#fff;color:#eaf3ef}
.it .dc-hover-14:hover{transform:translateY(-2px);background:#eaf3ef}
/* dc-hover-15 stond hier tot 2026-09-09: de groene WhatsApp-toestand van de
   belband. Met die knop is ook deze regel vervallen; nagemeten, geen sjabloon
   gebruikt de klasse nog. */

/* wp-block-library zet border-style:solid op alles met border-color in het
   style-attribuut, ook als dat alleen in de transition staat. Het grote
   telefoonnummer noemt border-color in zijn transition en zet alleen
   border-bottom; zonder deze regel tekent WordPress er een kader omheen.
   Zie de werkwijze, hoofdstuk "Het kader dat WordPress er zelf omheen tekent". */
.it .it-tel-xl{border-top-style:none;border-right-style:none;border-left-style:none}

/* ---------- de naden ---------- */
/* Onder 2 is strak. Elke uitdoving eindigt in de vulkleur van de golf ernaast
   en houdt de laatste 22% vlak; loopt het verloop door tot op de rand, dan
   blijft er een sprong van een paar eenheden staan. */
.it .it-uitdoof{position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;pointer-events:none}
.it .it-uitdoof-boven{position:absolute;left:0;right:0;top:0;height:120px;z-index:1;pointer-events:none}
.it .it-uitdoof-paper{background:linear-gradient(to bottom,rgba(250,245,236,0) 0%,rgba(250,245,236,1) 78%,rgba(250,245,236,1) 100%)}
.it .it-uitdoof-boven-paper{background:linear-gradient(to top,rgba(250,245,236,0) 0%,rgba(250,245,236,1) 78%,rgba(250,245,236,1) 100%)}
.it .it-uitdoof-boven-s2{background:linear-gradient(to top,rgba(244,236,230,0) 0%,rgba(244,236,230,1) 78%,rgba(244,236,230,1) 100%)}
.it .it-uitdoof-teal{background:linear-gradient(to bottom,rgba(36,70,63,0) 0%,rgba(36,70,63,1) 78%,rgba(36,70,63,1) 100%)}

/* De haarlijn onder de band met verwante pagina's. Het ontwerp zet die als
   border-bottom op de sectie. Dan is de haarlijn de laatste beeldrij van de
   band en meet naadscore.py daar een sprong van 94: het gereedschap kan een
   bedoelde streep niet van een naadfout onderscheiden, en dan is de meting op
   deze acht pagina's niets meer waard.

   Daarom staat de lijn hier 3px van de onderrand. Dat is buiten het venster van
   2px waarin naadscore.py naar de sterkste sprong zoekt. Drie pixels op een
   band met 40 tot 58px ruimte eronder ziet niemand; het is de enige maatvoering
   in dit sjabloon die van het ontwerp afwijkt, en dit is de reden. */
.it .it-hairline{position:absolute;left:0;right:0;bottom:3px;height:1px;background:var(--hairline);z-index:2;pointer-events:none}

/* De inhoud staat op z-index 1 of lager en zou anders onder de uitdoving
   verdwijnen. De golven staan al op z-index 2 en 3 en blijven daarboven. */
.it .it-sec > [data-reveal],
.it .it-sec > .it-inner{position:relative;z-index:3}

/* De voetgolf van het thema krijgt de eindkleur van de slotband. Deze regel
   mag kaal: dit stylesheet laadt alleen op deze acht pagina's. */
footer::before{background:#24463f}

@media (prefers-reduced-motion:reduce){
  .it *{animation:none !important;transition:none !important}
  .it [data-reveal]{opacity:1;transform:none}
}