/* beslag/css/beslag.css — pagina "Poort- & hekwerkbeslag" bovenop ../css/showcase.css (zelfde tokens en podium).
   Mobiel eerst (iPhone 14 Pro Max = 430 px). Rood alleen voor zegels en nummers; inkt nooit als groot vlak. */

.b-held{padding-bottom:40px}
.b-held .rubriek{grid-column:1;margin-bottom:2px}
.b-held h1{grid-column:1}
/* held-beeld: zelfde kader als het 3D-podium en de stillevens — dubbele goudlijn, 回-hoeken, papierschaduw en een rood
   龍-zegel op de kaderrand (zoals bij het totaalblok op de offerte) */
.b-held-beeld{position:relative;margin:0;background:var(--rijst) url(../../assets/orn/rijstpapier-tegel.jpg?v=766948a5) repeat;background-size:42% auto;
  border:1px solid var(--lijn-goud);box-shadow:none}
.b-held-beeld::after{content:"";position:absolute;inset:5px;border:1px solid var(--lijn-goud-zacht);pointer-events:none;z-index:6}
.b-held-beeld picture{display:block}
.b-held-zegel{position:absolute;left:22px;bottom:-15px;z-index:8;display:grid;place-items:center;width:34px;height:34px;
  background:var(--rood);color:var(--zegeltekst);font:700 19px/1 var(--f-zh);border-radius:var(--straal-s);
  box-shadow:var(--schaduw-zegel),0 3px 8px rgba(26,26,26,.18);transform:rotate(-4deg);pointer-events:none}
.b-held-beeld img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,#000 92%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,#000 92%,transparent);mask-composite:intersect}
@media (min-width:641px){.b-held-beeld img{aspect-ratio:3/2}}

/* productkaarten: horizontaal scrollen op de telefoon, raster op desktop */
.b-producten{padding:40px 0 8px;border-top:1px solid var(--lijn-goud-zacht)}
.b-producten h2,.b-stillevens h2{margin:8px 0 18px;font:400 var(--fs-xl)/var(--lh-kop) var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--inkt)}
.b-kaarten{list-style:none;margin:0 calc(var(--gutter) * -1);padding:4px var(--gutter) 18px;display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(150px,42%);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.b-kaarten li{scroll-snap-align:start}
.b-kaart{position:relative;display:flex;flex-direction:column;gap:8px;width:100%;min-height:44px;padding:0 0 12px;margin:0;cursor:pointer;text-align:left;
  background:rgba(var(--rijst-rgb),.9);border:1px solid var(--lijn-goud-zacht);box-shadow:var(--schaduw-kaart);color:var(--inkt);
  transition:border-color var(--duur) var(--ease),transform var(--duur) var(--ease)}
.b-kaart img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:var(--rijst2)}
.b-kaart b{padding:0 12px;font:500 .8rem/1.3 var(--f-kop);letter-spacing:.12em;text-transform:uppercase}
.b-kaart b small{display:block;margin-top:3px;font:italic 500 .86rem/1.2 var(--f-serif);letter-spacing:0;text-transform:none;color:var(--grijs1)}
.b-kaart-teken{position:absolute;right:10px;top:6px;font:400 34px/1 var(--f-kalli);color:var(--inkt);opacity:.86;pointer-events:none}
.b-kaart-nr{position:absolute;left:10px;top:10px;display:inline-grid;place-items:center;width:26px;height:26px;background:var(--rood);
  color:var(--zegeltekst);font:700 14px/1 var(--f-zh);border-radius:var(--straal-s);box-shadow:var(--schaduw-zegel)}
.b-kaart:hover{border-color:var(--dgoud);transform:translateY(-2px)}
.b-kaart[aria-pressed=true]{border-color:var(--dgoud);box-shadow:0 0 0 1px var(--dgoud),var(--schaduw-kaart);background:var(--goudlicht)}
.b-kaart[aria-pressed=true] b::after{content:"";display:block;width:40px;height:1px;margin-top:8px;background:var(--dgoud)}
@media (min-width:900px){
  .b-kaarten{grid-auto-flow:row;grid-template-columns:repeat(5,1fr);overflow:visible;margin:0;padding:4px 0 8px}
}

/* studio */
.b-studio{scroll-margin-top:var(--kop-hoogte)}
.b-kenmerken{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px;max-width:var(--max-tekst)}
.b-kenmerken li{position:relative;padding-left:20px;font-size:var(--fs-s);color:var(--inkt2)}
.b-kenmerken li::before{content:"◆";position:absolute;left:0;top:.1em;color:var(--goud);font-size:.75em}
.b-onder{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:10px}
.b-onder .bijschrift{margin:0;flex:1 1 240px;align-self:center}
.bs-beweeg{flex:0 0 auto;white-space:nowrap}
.bs-beweeg svg{width:18px;height:18px;stroke:var(--dgoud);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.knop.bs-beweeg[hidden]{display:none}
.bs-beweeg[aria-pressed=true]{background:var(--goudlicht);border-color:var(--dgoud)}
.podium.actief .podium-mist{opacity:.35}   /* live-3D: de mist eet het staal niet op (gelijk aan de poster) */
.b-studio .knoppen.camera .knop[data-bewaar]{margin-left:auto}
@media (max-width:640px){.b-studio .knoppen.camera .knop[data-bewaar]{margin-left:0}}
.b-studio .kalli{right:0}

/* stillevens */
.b-stillevens{padding:56px 0;border-top:1px solid var(--lijn-goud-zacht);
  background:linear-gradient(rgba(var(--goud-rgb),.05),rgba(var(--goud-rgb),0) 60%)}
.b-stillevens .lead{margin-bottom:22px}
.b-galerij{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.b-galerij figure,.b-varianten figure{margin:0}
/* render op het papier (B01): geen kader of schaduwbox; de beeldrand lost op in het papier */
.b-galerij a{display:block;border:0;box-shadow:none}
.b-galerij img,.b-varianten img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,#000 88%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,#000 88%,transparent);mask-composite:intersect}
.b-poster-tip{margin-left:auto;padding-left:10px;font:500 11px/1 var(--f-kop);letter-spacing:.2em;color:var(--dgoud)}
.b-poster-tip::after{content:" \2197"}
.b-galerij figcaption,.b-varianten figcaption{display:flex;align-items:center;gap:10px;margin-top:10px;
  font:500 var(--fs-xs)/1.4 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--grijs1)}
@media (min-width:641px){.b-galerij img{aspect-ratio:3/2;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,#000 90%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,#000 90%,transparent);mask-composite:intersect}.b-galerij{grid-template-columns:repeat(2,minmax(0,1fr))}.b-galerij figure:first-child{grid-column:1/-1}}
.b-sub{margin:40px 0 14px;font:500 var(--fs-xs)/1.2 var(--f-kop);letter-spacing:var(--sp-kapitaal);text-transform:uppercase;color:var(--dgoud)}
.b-varianten{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.b-varianten figcaption{letter-spacing:.12em}
@media (min-width:900px){.b-varianten{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* beeld nooit leeg: wazige 24-px-placeholder (inline data-URI, gezet door tools/lqip.py) tot het echte beeld er is */
img[data-lqip]{background-color:var(--rijst2);background-size:cover;background-position:center;background-repeat:no-repeat}

/* podium-hint en Sluit-knop: onderin, in de grond/mist en BINNEN de vier hoeken (26 px), elk op een papierchip met een
   goudrand (leesbaar zonder tekstschaduw, T19); nooit over paal of spijlen bovenin. De hint verdwijnt 1,5 s na de eerste
   interactie en bij een detailcamera. */
.b-studio .podium-knop.sluit{top:auto;bottom:34px;right:34px;min-height:44px;background:rgba(var(--rijst-rgb),.94);box-shadow:none}
.podium-hint{left:36px;top:auto;bottom:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 190px);
  padding:7px 10px 6px;background:rgba(var(--rijst-rgb),.92);border:1px solid var(--lijn-goud-zacht);color:var(--grijs1)}
.podium-hint .kort{display:none}
.podium.actief .podium-hint.weg{opacity:0}
@media (max-width:640px){
  .b-studio .podium-knop.sluit{bottom:32px;right:32px}
  .podium-hint{left:34px;bottom:38px;max-width:calc(100% - 170px);letter-spacing:.16em}
  .podium-hint .lang{display:none}
  .podium-hint .kort{display:inline}
}

/* podium: alleen de GROND loopt weg (zijkanten en onderrand); de bovenrand is een harde uitsnede, zodat paal en spijlen
   scherp tot aan de lijst doorlopen in plaats van in de mist op te lossen */
.b-studio .podium-beeld img,.b-studio .podium-doek canvas{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(180deg,#000 0,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(180deg,#000 0,#000 88%,transparent 100%);
  mask-composite:intersect}

/* onder de viewer: rond detail-medaillon (tik = detailcamera), bijschrift, beweging; daaronder de camera's */
.b-onder{flex-wrap:nowrap;justify-content:flex-start}
/* ringen inkt -> papier -> goud met een zachte schaduw (B07) */
.b-inzet{position:relative;flex:0 0 auto;width:72px;height:72px;margin:8px 12px 8px 8px;padding:0;border:0;border-radius:50%;cursor:pointer;background:var(--rijst2);
  box-shadow:0 0 0 1px var(--inkt),0 0 0 4px var(--rijst),0 0 0 6.5px var(--goud),0 3px 10px rgba(26,26,26,.22);overflow:visible}
.b-inzet img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.b-inzet::after{content:"视";position:absolute;left:-6px;top:-6px;display:grid;place-items:center;width:20px;height:20px;
  background:var(--rood);color:var(--zegeltekst);font:700 11px/1 var(--f-zh);border-radius:var(--straal-s);box-shadow:var(--schaduw-zegel)}
.b-inzet:hover,.b-inzet[aria-pressed=true]{box-shadow:0 0 0 1px var(--inkt),0 0 0 4px var(--rijst),0 0 0 7px var(--dgoud),0 5px 14px rgba(26,26,26,.26)}
.b-onder .bs-beweeg{margin-left:auto}
.groep-podium .knoppen.camera{margin-top:12px}
@media (max-width:640px){
  .b-onder{flex-wrap:wrap}
  .b-onder .bijschrift{flex:1 1 200px}
  .b-onder .bs-beweeg{margin-left:0}
}

/* telefoon: het beeld direct onder de kop (vóór de intro), zodat de scharnier boven de vouw staat */
@media (max-width:640px){
  .b-held{padding-top:16px;padding-bottom:28px}
  .b-held .held-raster{grid-template-columns:minmax(0,1fr) auto;gap:10px 14px}
  .b-held .held-tekst{display:contents}
  .b-held .held-tekst>.rubriek{grid-column:1/-1;order:1}
  .b-held h1{grid-column:1;order:2;margin-top:2px;font-size:44px;line-height:1.02}
  .b-held h1 span{font-size:15px;margin-top:.55em}
  .b-held .kalli-kolom{grid-column:2;grid-row:auto;order:3;align-self:start}
  .b-held .kalli-kolom .teken{font-size:48px}
  .b-held .b-held-beeld{grid-column:1/-1;order:4;margin-top:6px}
  .b-held .vleugel{order:5}
  .b-held .lead{order:6;margin-top:0}
  .b-held .held-feiten{order:7}
}

/* desktop: het 3D-podium krijgt de ruimte (± 760 px of meer), zodat 'Draai in 3D' geen kleiner beeld geeft dan de poster */
@media (min-width:1100px){
  .b-studio .groep-raster{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:36px}
}
/* 门 staat verticaal tegen de titel aan (zoals 报价单 op de offertecover) */
@media (min-width:641px){
  .b-held .kalli-kolom{align-self:start;margin-top:6px}
}

/* ---------- ronde 2: kopregels, titelkolom, bijschrift, telefoonvolgorde, lichtbak ---------- */

/* 3D-podium: geen schaduwbox om het kader */
.b-studio .podium{box-shadow:none}

/* hero-kop gebroken op betekenis: "Poort- & hekwerk-" / "beslag", elke regel heel */
.b-held h1 .r{display:block;font-size:1em;letter-spacing:inherit;color:inherit;margin:0;white-space:nowrap}
.b-held h1 .sub{display:block}
.b-held h1{font-size:clamp(1.9rem,.5rem + 2.9vw,3.2rem)}
/* telefoon: de langste regel ("Poort- & hekwerk-") past altijd naast het 门-teken, ook op 375 px */
@media (max-width:640px){.b-held h1{font-size:min(34px,calc((100vw - 96px) / 10.5))}}
/* desktop: tekst en beeld half om half; de kop krijgt de hele tekstkolom, 门 staat verticaal naast de lead */
@media (min-width:900px){
  .b-held .held-raster{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
  .b-held h1{grid-column:1/-1}
  .b-held .kalli-kolom{grid-column:2;grid-row:3/span 4}
  .b-held .vleugel,.b-held .lead,.b-held .held-feiten{grid-column:1}
}

/* producttitel in een eigen kolom: het kalligrafische teken staat ernaast en raakt de kop nooit */
.b-studio .groep-kop{padding-right:0}
.b-titel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:4px 12px}
.b-titel h2{align-self:center;min-width:0}
.b-titel-nr{display:inline-grid;place-items:center;width:20px;height:20px;align-self:center;background:var(--rood);color:var(--zegeltekst);
  font:700 12px/1 var(--f-zh);border-radius:2px}
.b-studio .b-titel .kalli{position:static;font-size:clamp(52px,6vw,80px);line-height:.95;opacity:.88}

/* bijschrift: de Cormorant-cursieve stem; alleen de maten in Plex Mono (tabular) */
.b-onder .bijschrift{font:italic 500 1.06rem/1.4 var(--f-serif);color:var(--grijs1)}
.bijschrift .b-maat{font:500 .8em/1 var(--f-mono);font-style:normal;font-variant-numeric:tabular-nums;color:var(--inkt2);white-space:nowrap}
.bijschrift .b-staart{color:var(--grijs2);font-size:.9em}

/* telefoon en tablet (een kolom): eerst het beeld, dan titel, bijschrift en keuzes; de lange tekst daarna */
@media (max-width:899px){
  .b-studio .groep-raster{display:flex;flex-direction:column;gap:18px}
  .b-studio .groep-kop{display:contents}
  .b-studio .groep-kop>.rubriek{order:1}
  .b-studio .groep-podium{order:2;scroll-margin-top:calc(var(--kop-hoogte) + 8px)}
  .b-studio .b-titel{order:3}
  .b-studio .paneel{order:4}
  .b-studio #p-tekst{order:5}
  .b-studio .b-kenmerken{order:6}
}

/* lichtbak: de volledige poster (met kader, medaillon en titel) groot, met download */
.b-lichtbak{border:0;padding:0;margin:auto;background:transparent;width:min(94vw,1200px);max-width:none;max-height:94vh;overflow:auto}
.b-lichtbak::backdrop{background:rgba(26,26,26,.62)}
.b-lichtbak figure{margin:0;padding:10px;background:var(--rijst)}
.b-lichtbak img{display:block;width:100%;height:auto}
.b-lichtbak figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:10px}
.b-lichtbak-titel{margin-right:auto;font:400 var(--fs-s)/1.3 var(--f-kop);letter-spacing:.16em;text-transform:uppercase;color:var(--inkt)}

/* aanvraag: rubriekzegel boven de kop, gecentreerd */
.slot .rubriek{justify-content:center;margin-bottom:6px}