/* spuitgiet/pagina.css — aanvulling op ../css/showcase.css voor de groepspagina "Kunststof spuitgietwerk".
   Mobiel eerst (iPhone 14 Pro Max = 430 px), tokens uit ../assets/dsd-tokens.css; rood alleen voor zegels en nummers. */

/* ---------- kop ---------- */
.terug{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--lijn-goud);text-decoration:none;
  font:500 var(--fs-xs)/1 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--inkt);white-space:nowrap}
.terug:hover{background:var(--goudlicht);border-color:var(--dgoud)}
@media (max-width:420px){.merk-naam small{display:none}}

/* ---------- held ---------- */
/* Mobiel: 匠心 horizontaal 36 px boven de kicker (zegel rechts ernaast), daaronder titel; het beeld eerst, randloos.
   Desktop (≥ 1000 px): tekst links met 匠心 verticaal in de tekstkolom, beeld rechts.
   Het beeld is een transparante render in multiply óp het vel (canon #13): geen kader, geen schaduwbox; daarachter een
   CSS-maanschijf (lichtpunt linksboven), grondwas en twee berglagen (canon #14); de randen lossen op via mask-image. */
.sg-held{position:relative;overflow:hidden;padding:0 0 40px;
  background:radial-gradient(60% 50% at 85% 10%,var(--goudwas),transparent),radial-gradient(50% 40% at 10% 90%,var(--inktwas),transparent)}
.sg-held-raster{position:relative;display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.sg-held-raster>*{min-width:0}
.sg-held-beeld{order:-1;position:relative;margin:0 calc(50% - 50vw);aspect-ratio:1/1}
.sg-held-beeld picture,.sg-held-render{position:absolute;inset:0;width:100%;height:100%}
.sg-held-render{object-fit:contain;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(75% 72% at 50% 46%,#000 62%,transparent 100%);mask-image:radial-gradient(75% 72% at 50% 46%,#000 62%,transparent 100%)}
.sg-held-maan{position:absolute;left:58%;top:38%;width:62%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 36% 32%,rgba(246,230,182,.6),rgba(236,214,152,.42) 45%,rgba(236,214,152,.28) 82%,rgba(236,214,152,0) 100%)}
.sg-held-bergen{position:absolute;left:-4%;right:-4%;width:108%;max-width:none;bottom:12%;opacity:.3;mix-blend-mode:multiply;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.sg-held-grondwas{position:absolute;left:10%;right:8%;bottom:14%;height:20%;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(43,33,23,.13),rgba(43,33,23,.05) 60%,transparent)}
.sg-held-beeld .sg-tak{position:absolute;z-index:0;top:-10px;right:-14px;width:30%;max-width:300px;height:auto;opacity:.85;pointer-events:none}
.sg-held-tekst{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:8px 16px;align-content:start}
.sg-held h1{margin:2px 0 0;font:300 clamp(2.4rem,1.4rem + 2.6vw,3.4rem)/1.04 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;color:var(--inkt)}
.sg-held h1 span{display:block;font-size:.5em;letter-spacing:.3em;color:var(--grijs1);margin-top:.45em}
.sg-held .vleugel{height:12px;max-width:280px;margin:0;
  background:linear-gradient(90deg,transparent,var(--dgoud) 20%,var(--dgoud) 80%,transparent) center/100% 1px no-repeat}
.sg-held .held-feiten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:2px 0 0;padding:10px 0 0;list-style:none;
  border-top:1px solid var(--lijn-goud-zacht);font:500 14px/1.35 var(--f-kop);letter-spacing:.1em;text-transform:uppercase;color:var(--grijs1);text-align:center}
.sg-held .held-feiten li::before{content:"";display:block;width:7px;height:7px;margin:0 auto 6px;background:var(--goud);transform:rotate(45deg)}
.sg-cta{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0}
.sg-kort{display:none}
/* kit-kalligrafie als masker (inkt-token, 88 %) */
.sg-kalli{display:block;background:var(--inkt);opacity:.88;-webkit-mask:url(kit/jiangxin.svg?v=31d7f873) center/contain no-repeat;mask:url(kit/jiangxin.svg?v=31d7f873) center/contain no-repeat}
.sg-kalli-v{-webkit-mask-image:url(kit/jiangxin-v.svg?v=c313f4d8);mask-image:url(kit/jiangxin-v.svg?v=c313f4d8)}
.sg-kalli-kop{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.sg-kalli-kop .sg-kalli{width:112px;height:56px;-webkit-mask-image:url(kit/jiangxin.svg?v=31d7f873);mask-image:url(kit/jiangxin.svg?v=31d7f873)}
.sg-zegel-groot{width:24px;height:auto;rotate:-5deg;filter:drop-shadow(0 1px 1px rgba(120,30,20,.25))}
.sg-num{width:24px;height:24px;flex:none;filter:drop-shadow(0 1px 1px rgba(120,30,20,.2))}
.sg-tel{white-space:nowrap;font-family:var(--f-mono);letter-spacing:.04em;font-variant-numeric:tabular-nums}
@media (max-width:599px){
  .sg-lang{display:none}
  .sg-kort{display:inline}
  .sg-cta .knop{flex:1 1 auto;justify-content:center}
  /* mobiele held: lege mist onderin weggesneden, object hoog en groot in het eerste scherm */
  .sg-held-beeld{aspect-ratio:4/3}
  .sg-held-render{object-fit:cover;object-position:50% 22%}
  .sg-held-bergen{bottom:4%}
  .sg-held-grondwas{bottom:6%}
}
@media (min-width:600px){
  .sg-held{padding:24px 0 56px}
  .sg-held-beeld{order:0;margin:0;aspect-ratio:16/10}
  .sg-held .held-feiten{display:flex;flex-wrap:wrap;gap:8px 18px;border-top:0;padding:0;text-align:left;letter-spacing:.2em}
  .sg-held .held-feiten li::before{display:inline-block;margin:0 10px 0 0;width:6px;height:6px;vertical-align:.2em}
}
@media (min-width:1000px){
  .sg-held{padding:56px 0 24px}
  .sg-held-raster{grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:center;gap:40px}
  /* 匠心 verticaal rechts in de tekstkolom, bovenkant op de kaphoogte van de kicker; zegel 28 px eronder */
  .sg-held-tekst{grid-template-columns:minmax(0,1fr) 72px;column-gap:20px}
  .sg-held-tekst>*{grid-column:1}
  .sg-kalli-kop{grid-column:2;grid-row:1/span 4;flex-direction:column;align-items:center;gap:28px;margin:4px 0 0;align-self:start}
  .sg-kalli-kop .sg-kalli{width:72px;height:144px;-webkit-mask-image:url(kit/jiangxin-v.svg?v=c313f4d8);mask-image:url(kit/jiangxin-v.svg?v=c313f4d8)}
  .sg-held-beeld .sg-tak{top:-46px;right:-30px;width:24%}
  .sg-held+.groep{padding-top:72px}
}

/* ---------- atelier ---------- */
.sg-atelier{scroll-margin-top:calc(var(--kop-hoogte) + 8px)}
/* Sluit-knop vrij van het 回纹-hoekornament (26 px + 12 px) */
.sg-atelier .podium-knop.sluit{top:38px;right:38px}
/* zelfde raster als de rest van de pagina (x 162–1278 op 1440); podium breed, paneel rechts */
@media (min-width:1280px){.sg-atelier .groep-raster.sg-raster{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
/* hint 24 px naar binnen: vrij van het 回纹-hoekornament */
.sg-atelier .podium-hint{left:60px;top:20px}
@media (max-width:599px){.sg-atelier .podium-hint{left:44px;top:20px;letter-spacing:.18em;max-width:calc(100% - 164px);white-space:nowrap}}
.sg-kop{margin-bottom:22px}
.sg-kop .tekst b{font-weight:600}
.sg-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 18px}
.sg-tab{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:44px;padding:6px 4px 8px;cursor:pointer;
  border:1px solid var(--lijn-goud-zacht);background:rgba(var(--rijst-rgb),.7);color:var(--inkt);
  font:500 11px/1.2 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;transition:border-color var(--duur-kort),background var(--duur-kort)}
.sg-tab img{width:100%;max-width:96px;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;flex:none;
  box-shadow:0 0 0 2px var(--rijst),0 0 0 3px var(--lijn-goud)}
.sg-tab:hover{border-color:var(--dgoud)}
.sg-tab[aria-selected=true]{border-color:var(--dgoud);background:var(--goudlicht);box-shadow:inset 0 -2px 0 var(--dgoud)}
.sg-tab:focus-visible{outline:2px solid var(--dgoud);outline-offset:2px}
@media (min-width:700px){.sg-tab{flex-direction:row;justify-content:flex-start;gap:12px;padding:8px 12px;font-size:var(--fs-xs)}.sg-tab img{width:56px}}
.sg-raster{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
.sg-product h3{margin:0 0 6px;font:400 var(--fs-l)/1.2 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;color:var(--inkt)}
.sg-product p{margin:0;color:var(--inkt2);max-width:var(--max-tekst)}
.varianten .eenheid{color:var(--grijs2)}
.sg-microregel{margin:6px 0 0;font-style:italic;font-size:var(--fs-s);line-height:1.3;color:var(--grijs1)}
.sg-tab img{background:var(--rijst)}
@media (min-width:900px){
  .groep-raster.sg-raster{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"podium paneel";column-gap:44px;align-items:start}
  .sg-raster .groep-podium{grid-area:podium;position:sticky;top:96px;align-self:start}
  .sg-raster .paneel{grid-area:paneel}
}

/* ---------- proces: tijdlijn met gouden munten (canon I03) op een gouden stippellijn (canon L12) ---------- */
.sg-proces .groep-kop{padding-right:132px}
.kalli-proces{position:absolute;right:0;top:-4px;width:112px;height:56px;-webkit-mask-image:url(kit/chengxin.svg?v=c65b28c1);mask-image:url(kit/chengxin.svg?v=c65b28c1)}
.sg-stappen{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
.sg-stappen::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;border-left:2px dotted var(--dgoud);opacity:.8}
.sg-stappen li{position:relative;padding:0 0 0 64px}
.s-stapnr{position:absolute;left:4px;top:-2px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  font:600 15px/1 var(--f-kop);color:var(--inkt);font-variant-numeric:tabular-nums;
  background:radial-gradient(circle at 35% 30%,#F3DFA4,var(--goud) 45%,var(--dgoud));
  box-shadow:0 0 0 1.5px var(--inkt),0 0 0 5px var(--rijst),0 0 0 6px var(--lijn-goud-zacht),0 3px 8px rgba(26,26,26,.25)}
.sg-stappen h3{margin:4px 0 6px;font:500 var(--fs-s)/1.3 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--inkt)}
.sg-stappen p{margin:0;font-size:var(--fs-s);color:var(--inkt2);max-width:42ch}
@media (min-width:900px){
  .sg-stappen{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
  .sg-stappen::before{left:8%;right:8%;top:18px;bottom:auto;border-left:0;border-top:2px dotted var(--dgoud)}
  .sg-stappen li{padding:60px 0 0;text-align:center}
  .s-stapnr{left:50%;top:0;translate:-50% 0}
  .sg-stappen p{margin:0 auto}
}

/* ---------- medaillons ---------- */
.sg-medaillons{list-style:none;margin:0;padding:0;display:grid;gap:22px 14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.sg-medaillons li{text-align:center}
.sg-medaillons button{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:50%}
.sg-medaillons button:focus-visible{outline:2px solid var(--dgoud);outline-offset:4px}
.sg-medaillons img{width:100%;height:auto;transition:transform var(--duur) var(--ease)}
.sg-medaillons button:hover img{transform:scale(1.03)}
.sg-medaillons h3{margin:6px 0 4px;font:500 var(--fs-s)/1.3 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--inkt)}
.sg-medaillons p{margin:0 auto;max-width:30ch;font-size:var(--fs-s);color:var(--grijs1)}
@media (min-width:900px){.sg-medaillons{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}}

/* ---------- paneel: korte omschrijving + ruitbullets (canon #19), op mobiel achter "meer" ---------- */
.sg-punten{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;max-width:var(--max-tekst)}
.sg-punten li{position:relative;padding-left:20px;font-size:var(--fs-s);color:var(--inkt2);line-height:1.45}
.sg-punten li::before{content:"";position:absolute;left:3px;top:.55em;width:6px;height:6px;background:var(--goud);transform:rotate(45deg)}
.sg-meer{display:none}
@media (max-width:599px){
  .sg-punten{display:none}
  .sg-product.open .sg-punten{display:grid}
  .sg-meer{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:4px;padding:0;border:0;background:none;cursor:pointer;
    font:500 14px/1 var(--f-kop);letter-spacing:.18em;text-transform:uppercase;color:var(--dgoud)}
  .sg-meer::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:45deg;translate:0 -2px}
  .sg-product.open .sg-meer::after{rotate:225deg;translate:0 2px}
}
/* bijschrift = de stem: Cormorant cursief, getallen inline in Plex Mono (canon #8/#9) */
.sg-atelier .bijschrift{font:italic 400 var(--fs-m)/1.4 var(--f-serif);color:var(--grijs1);text-wrap:pretty}
.sg-atelier .bijschrift .g{font:500 .86em/1 var(--f-mono);font-style:normal;font-variant-numeric:tabular-nums;white-space:nowrap}
/* podium: mist alleen onderin (15 %), de sleep-hint verdwijnt na de eerste sleep */
.sg-atelier .podium-mist{height:15%;background:linear-gradient(rgba(244,239,228,0),rgba(244,239,228,.6) 60%,rgba(244,239,228,.9))}
.sg-atelier .podium.gesleept .podium-hint{opacity:0}
/* voet: bergen lossen aan alle vier de randen op (geen harde rechthoek) */
.voet .sg-voet-bergen{top:0;height:100%;object-fit:cover;object-position:50% 100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(transparent,#000 35%,#000 80%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(transparent,#000 35%,#000 80%,transparent);
  mask-composite:intersect}
/* sectieritme: iets compacter dan de showcase */
@media (min-width:900px){.sg-proces,.sg-details{padding:72px 0}}