/* Slice 3's pieces on the subpages (visual-pass.md §14 and §15, D-265): the markup is src/pagina/secties.mjs's, the pens
   core/secties.js's. Every class a piece adds carries sx-; only the pages that carry a piece load this file. The lab's original is
   mockups/stroom-v4-lab/secties/secties-in.css. */

/* ---------- the two pens: the quiet line of the heads (D-248) and the red grease pencil (D-257) ---------- */
.sx-lijn { --sx-rood-t: var(--rood-tekst); color: var(--fg); }
:is([data-world=grafiet], [data-world=nacht]) .sx-lijn { --sx-rood-t: #FF5C61; }
.sx-svg {
  display: block; width: 100%; height: auto; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  color: color-mix(in srgb, var(--fg) 52%, transparent);
}
.sx-svg .f { color: color-mix(in srgb, var(--fg) 32%, transparent); stroke-width: 1.2; }
.sx-svg .h { color: var(--fg); }
.sx-svg .v { stroke-dasharray: 5 6; }
.sx-svg .vul { fill: currentColor; stroke: none; }
.sx-svg .zacht { fill: currentColor; fill-opacity: .16; stroke: none; }
.sx-svg .rood { fill: var(--rood); stroke: none; }
.sx-svg text { fill: currentColor; stroke: none; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; }
.sx-svg .naam { font-family: var(--f); font-size: 16px; font-weight: 580; letter-spacing: -.01em; }
.sx-svg .sx-prijs { font-family: var(--f); font-size: 22px; font-weight: 640; letter-spacing: -.015em; }
.sx-svg .eenheid { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .06em; }
/* the pencil: red, a little heavier than the line; its words in the site's type, in the red that reads on the section's ground */
.sx-svg .potlood, .sx-svg.potlood { stroke: var(--rood); stroke-width: 2.4; }
.sx-svg text.schrift { fill: var(--sx-rood-t); font-family: var(--f); font-size: 21px; font-weight: 650; letter-spacing: -.01em; }
/* what the pen has not reached yet (set by the script only) */
.sx-wacht { visibility: hidden; }
.sx-bijschrift { margin: 14px 0 0; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--fg2); }
.sx-bijschrift a { margin-left: 12px; color: var(--fg); text-underline-offset: 3px; }

/* ======================= /formules/ 02: the contract strip ======================= */
.fr .sx-strook { margin: 0 0 var(--kop-y); }
.fr .sx-strook .sx-strook-naast { display: none; }
/* the note under "36 maanden", centred on the 36 bars (x 170 to 1181 of 1200) and in that line's faded ink */
.fr .sx-voetnoot { margin: 10px 0 0; padding: 0 calc(19 / 1200 * 100%) 0 calc(170 / 1200 * 100%); text-align: center; font-size: var(--t-meta); line-height: 1.5; color: color-mix(in srgb, var(--fg) 52%, transparent); }
.fr .sx-strook-naast text { font-size: 15px; }
.fr .sx-strook-naast .sx-prijs { font-size: 24px; }
.fr .sx-strook-naast text.schrift { font-size: 23px; }
/* what is not in it: beloftes' grey pencil cross in place of the open cross, the rows as they are */
.fr .sx-kruis { position: relative; display: block; width: 30px; height: 30px; margin-top: -2px; }
.fr .sx-kruis .sx-svg { position: absolute; inset: 0; height: 100%; }
.fr .sx-kruis path { stroke: #A39D95; stroke-width: 2.3; }

/* ======================= /werkwijze/ 02: the year ======================= */
.sx-jaar-rand { margin-top: var(--kop-y); }
.sx-jaar { margin: 0; padding-top: var(--kop-y); border-top: 1px solid var(--lijn); }
.sx-jaar-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.sx-jaar-titel { margin: 0; font-size: var(--t-zin); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
/* the switch: three radio buttons drawn as the site's segmented control, so it works without script */
.sx-kiezer { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--lijn); }
.sx-kiezer label { position: relative; display: block; padding: 10px 18px; border-radius: 999px; color: var(--fg); font: 560 15px/1 var(--f); cursor: pointer; }
.sx-kiezer input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.sx-kiezer label:hover { background: rgba(20, 20, 20, .06); }
.sx-kiezer label:has(:checked) { background: var(--inkt); color: #fff; }
.sx-kiezer label:has(:focus-visible) { outline: 2px solid var(--rood); outline-offset: 2px; }
.sx-jaar-svg { display: none; }
.sx-jaar:has([value=zichtbaar]:checked) [data-f=zichtbaar], .sx-jaar:has([value=groei]:checked) [data-f=groei], .sx-jaar:has([value=volgas]:checked) [data-f=volgas] { display: block; }
.sx-jaar .teller { font-size: 13px; }

/* ======================= /websites/ and /webshops/ 02: the page tree, the product grid ======================= */
.wi .sx-boom, .wi .sx-raster { margin: 0; }
.sx-boom .naam { font-size: 15px; }
/* Groei's pages: the fine line, their names a step lighter but still above 4.5:1 */
.sx-boom .t2 .naam { font-size: 14px; color: color-mix(in srgb, var(--fg) 64%, transparent); }
.sx-raster .patroon { fill: none; stroke: currentColor; stroke-width: .9; }
.sx-raster .patroonvlak { fill: url(#sx-vak); stroke: none; }
.sx-raster .wereld { transform-origin: 360px 172px; }
.sx-raster .vak { transform-box: fill-box; transform-origin: center; }
.sx-raster .sx-kader { stroke: currentColor; }
/* the counts in place of the three cards: dim until the drawing reaches them (the script sets is-uit) */
.sx-tellers { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 28px 0 var(--kop-y); padding: 0; border-top: 1px solid var(--lijn); }
.sx-tellers li { padding: 18px 16px 0 0; transition: opacity .6s var(--e-uit); }
.sx-tellers li + li { padding-left: 20px; border-left: 1px solid var(--lijn); }
.sx-tellers li.is-uit { opacity: .25; }
.sx-tellers b { display: block; font-size: var(--t-kop2); font-weight: 640; line-height: 1; letter-spacing: -.03em; }
.sx-tellers span { display: block; margin-top: 8px; font-size: var(--t-meta); line-height: 1.3; color: var(--fg2); }

/* ======================= sector pages 02: the marked-up still ======================= */
/* the white mount of /ons-werk/: 5 px of white, radius 24 outside and 20 inside, the readout at its foot */
.sx-sb .sx-mount { margin: var(--kop-y) 0 0; padding: 5px; border-radius: 24px; background: #fff; color: var(--inkt); box-shadow: 0 1px 2px rgba(20, 20, 20, .05), 0 50px 100px -50px rgba(20, 20, 20, .42); }
.sx-sb .sx-raam { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 20px 20px 6px 6px; background: #ECE9E3; }
.sx-sb .sx-laag { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--e-uit); }
.sx-sb .sx-laag.is-aan { opacity: 1; }
/* toned to 60 %, as D-248 has it (Alex, 24-09) */
.sx-sb .sx-laag img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; filter: saturate(.6); }
.sx-sb .sx-laag .sx-svg { position: absolute; inset: 0; height: 100%; color: rgba(20, 20, 20, .62); --fg: var(--inkt); }
.sx-sb .sx-markering .potlood { stroke-width: 4.6; filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .9)); }
.sx-sb :is(.sx-markering, .sx-rol) text.schrift { font-size: 38px; fill: var(--rood-tekst); stroke: #fff; stroke-width: 8px; stroke-linejoin: round; paint-order: stroke; }
.sx-sb .sx-markering .band { fill: #fff; fill-opacity: .94; stroke: none; }
.sx-sb .sx-markering .bandtekst { fill: var(--inkt); font-size: 26px; letter-spacing: .08em; }
.sx-sb .sx-markering .bandtekst.klein { font-size: 22px; }
.sx-sb .sx-markering .bandlijn { stroke: rgba(20, 20, 20, .5); stroke-width: 2; }
.sx-sb .sx-markering .bandpunt { fill: var(--inkt); stroke: none; }
.sx-sb .sx-rol .papier { fill: #ECE9E3; stroke: none; }
.sx-sb .sx-rol .sx-tel { stroke: rgba(20, 20, 20, .55); stroke-width: 2.4; }
.sx-sb .sx-rol .sx-tel .naam { fill: var(--inkt); font-size: 26px; font-weight: 640; }
.sx-sb .sx-rol .potlood { stroke-width: 4.6; }
.sx-sb .sx-rol text.groot { font-size: 64px; }
.sx-sb .sx-voet { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 12px 14px 8px; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: #57534e; }
.sx-sb .sx-rec { white-space: nowrap; }
.sx-sb .sx-rec i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--rood); vertical-align: 1px; }
.sx-sb .sx-rec b { font-weight: 500; color: var(--inkt); }
.sx-sb .sx-mount-item { display: none; }
/* the heading scrolls away and the mount stays: the left column runs the list's height, the mount sticky in it, its middle on the
   reading line at 38 % of the screen that picks the finding (a sticky heading plus the mount is taller than a laptop's screen) */
@media (min-width: 761px) {
  .sx-sb .sb-kop { position: static; align-self: stretch; }
  .sx-sb .sb-kop .sx-mount { position: sticky; top: max(100px, calc(38vh - 200px)); }
  /* the finding whose still the mount shows: its number fills with the button red */
  .sx-sb .sb-n { transition: background-color .4s var(--e-uit), color .4s var(--e-uit), border-color .4s var(--e-uit); }
  .sx-sb .sx-actief .sb-n { background: var(--rood-knop); border-color: var(--rood-knop); color: #fff; }
}
/* the consequence, underlined by the pencil. The stroke scales with the stretched line (no non-scaling-stroke): with it, Chrome measures
   the pen's dash in screen pixels but pathLength in the path's own units, and the line stopped short of the text's end */
.sx-sb .sx-onder { position: relative; display: inline-block; }
.sx-sb .sx-onder .sx-svg { position: absolute; left: -2%; bottom: -8px; width: 104%; height: 12px; }
.sx-sb .sx-onder path { stroke: var(--rood); stroke-width: 2.2; }
[data-tier=stil] .sx-sb .sx-laag { transition: none; }

/* ======================= /contact/ and /over-ons/: the map ======================= */
/* the map at the left, Gent over Kontich at the right, their names a size down to fit the column */
.sx-kaart-rij { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--kolom-gap); align-items: center; margin-top: var(--kop-y); }
.sx-kaart { margin: 0; }
.sx-kaart-rij :is(.kantoren, .oo-kantoor-rij) { grid-template-columns: minmax(0, 1fr); margin: 0; }
.sx-kaart-rij :is(.kantoor, .oo-kantoor) { padding: 32px 0; }
.sx-kaart-rij .kantoor + .kantoor, .sx-kaart-rij .oo-kantoor + .oo-kantoor { padding-left: 0; border-left: 0; border-top: 1px solid var(--lijn); margin-top: 0; }
.sx-kaart-rij :is(.kantoor h3, .oo-kantoor h4) { font-size: clamp(48px, 5vw, 88px); }
.sx-kaart .land { stroke-width: 1.7; }
.sx-kaart .regio { font-size: 14px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.sx-kaart .kantoor-naam { font-family: var(--f); font-size: 26px; font-weight: 650; letter-spacing: -.02em; }
.sx-kaart .namen text { font-size: 12px; letter-spacing: .2em; }
.sx-kaart .namen .klein { letter-spacing: .06em; }
.sx-kaart .ringen { stroke-width: 2.2; }

/* ---------- the phone: the strip as its calendar and the year swiped; each finding carries its own still ---------- */
@media (max-width: 760px) {
  .fr .sx-strook .sx-strook-breed { display: none; }
  .fr .sx-strook .sx-strook-naast { display: block; }
  .fr .sx-voetnoot { padding: 0; text-align: left; }
  .sx-schuif { overflow-x: auto; }
  .sx-schuif .sx-svg { min-width: 640px; }
  .sx-kaart-rij { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sx-kaart-rij :is(.kantoren, .oo-kantoor-rij) { margin-top: var(--kop-y); border-top: 1px solid var(--lijn); }
  .sx-tellers { grid-template-columns: minmax(0, 1fr); }
  .sx-tellers li + li { padding-left: 0; border-left: 0; }
  .sx-sb .sb-kop .sx-mount { display: none; }
  .sx-sb .sx-mount-item { display: block; margin: 0 0 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-sb .sx-laag, .sx-tellers li { transition: none; }
}