/* Starter-thema: de gedeelde opmaak. Alleen rollen (`var(--…)`), geen kleur
   of letter van zichzelf; die komen uit `stemmingen/*.css`, samen met het
   kenmerk van elke stemming. Alles hangt onder `.starter`, zodat hetzelfde
   bestand een hele site opmaakt (de class staat op `<body>`) én een voorbeeld
   in een blok op een andere pagina, zoals straks de configurator op
   kroonenzoon.nl.

   Markup: `KroonenzoonWeb.Thema` (de secties) en
   `KroonenzoonWeb.Thema.Pagina` (kop, voet, stemmingenbalk). Alle eigen
   classes beginnen met `st-`; `.button` is de knop, één keer gedefinieerd.

   Een band kan de rollen voor zichzelf omdraaien (warm en stoer doen dat): de
   band zet dan `--inkt`, `--accent` enzovoort opnieuw, en alles erin volgt. */

.starter {
  --accent-tekst: var(--accent);
  background-color: var(--ondergrond);
  color: var(--inkt);
  font-family: var(--letter-tekst);
  font-size: 1.125rem;
  line-height: 1.6;
}

.starter :is(h1, h2, h3) {
  font-family: var(--letter-kop);
  font-weight: var(--kop-gewicht);
  font-stretch: var(--kop-breedte, 100%);
  text-transform: var(--kop-hoofdletters);
  letter-spacing: var(--kop-spatie);
  line-height: 1;
  margin: 0;
  text-wrap: balance;
}

.starter h1 {
  font-size: calc(clamp(3rem, 7vw, 6rem) * var(--kop-schaal));
  line-height: 0.95;
}

.starter h2 {
  font-size: calc(clamp(2.25rem, 4.5vw, 3.5rem) * var(--kop-schaal));
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.starter h3 {
  font-size: calc(1.375rem * var(--kop-schaal));
  margin-bottom: 1rem;
}

/* `:where` houdt dit op de sterkte van een kale `p`, zodat een eigen class
   (`.st-slogan`, `.st-knoppen`) zijn marge wel kan zetten. */
:where(.starter) p {
  line-height: inherit;
  margin: 0 0 1rem;
}

.starter a:focus-visible,
.starter button:focus-visible {
  outline: 0.1875rem solid var(--accent);
  outline-offset: 0.1875rem;
}

.st-breed {
  width: min(100% - 2.5rem, 74rem);
  margin-inline: auto;
}

/* ----------------------------------------------------------- knop */

.starter .button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.9375rem 1.625rem;
  border: 0;
  border-radius: min(var(--hoek), 2rem);
  background-color: var(--accent);
  color: var(--accent-inkt);
  font-family: var(--letter-tekst);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.starter .button:hover {
  background-color: color-mix(in srgb, var(--accent) 80%, var(--inkt));
}

.st-tekstlink {
  color: var(--inkt);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.125rem;
  text-underline-offset: 0.3em;
}

.st-tekstlink:hover {
  color: var(--accent-tekst);
}

/* ----------------------------------------------------------- kop */

.st-kop {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: color-mix(in srgb, var(--ondergrond) 92%, transparent);
  backdrop-filter: blur(0.5rem);
  border-bottom: 0.0625rem solid var(--lijn);
}

.st-kop-binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
  padding-block: 0.875rem;
}

/* De naam neemt de ruimte die over is en loopt desnoods over twee regels,
   zodat de knop ernaast blijft staan. */
.st-logo {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--letter-kop);
  font-weight: var(--kop-gewicht);
  font-stretch: var(--kop-breedte, 100%);
  text-transform: var(--kop-hoofdletters);
  letter-spacing: var(--kop-spatie);
  font-size: calc(1.375rem * var(--kop-schaal));
  line-height: 1.1;
  margin-right: auto;
}

.st-menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}

.st-menu a {
  color: var(--inkt);
  font-weight: 500;
}

.st-menu a:hover {
  color: var(--accent-tekst);
}

.st-kop .button {
  padding: 0.625rem 1.125rem;
}

/* Smal: naam en knop op één regel, het menu eronder over de hele breedte. De
   kop blijft dan niet staan: met een lange naam is hij drie regels hoog. */
@media (max-width: 48rem) {
  .st-kop {
    position: static;
  }

  .st-kop-binnen {
    column-gap: 1rem;
    padding-block: 0.625rem;
  }

  .st-menu {
    order: 3;
    flex-basis: 100%;
  }

  .st-menu ul {
    column-gap: 1.125rem;
    font-size: 0.9375rem;
  }

  .st-kop .button {
    padding: 0.5rem 0.875rem;
  }
}

/* ----------------------------------------------------------- banden */

/* Elke sectie is een band over de hele breedte; om en om op het vlak. */
.st-band {
  padding-block: var(--ruimte);
  scroll-margin-top: 4.5rem;
  color: var(--inkt);
}

.st-home > .st-band:nth-child(even) {
  background-color: var(--vlak);
}

.st-twee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

@media (max-width: 48rem) {
  .st-twee {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ----------------------------------------------------------- foto */

.st-foto {
  margin: 0;
  overflow: hidden;
  border-radius: var(--hoek);
}

.st-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Zolang er geen foto is: een vlak met wat er komt te staan, zodat de
   verhoudingen van de pagina kloppen. */
.st-foto.leeg {
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 0.75rem,
      color-mix(in srgb, var(--inkt) 4%, transparent) 0.75rem 1.5rem
    ),
    color-mix(in srgb, var(--inkt) 7%, var(--vlak));
  color: var(--inkt-zacht);
  font-size: 0.875rem;
  text-align: center;
}

/* ----------------------------------------------------------- opening */

.st-hero-binnen {
  display: grid;
  grid-template-columns: var(--hero-kolommen);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.st-hero-beelden {
  position: relative;
}

/* De naam zo groot als de stemming wil (`--naam-maat`), maar nooit breder dan
   zijn kolom: het langste woord (`--langste`, in tekens, gezet door de
   component) maal de gemiddelde breedte van een letter in die stemming
   (`--letterbreedte`, in em) moet erin passen. "Kapsalon" past overal,
   "Fietsenmakerij" niet zonder dit. `cqi` is de breedte van de tekstkolom,
   of van de hele opening als die kolom wegvalt (stoer). */
.st-hero-binnen,
.st-hero-tekst {
  container-type: inline-size;
}

.starter .st-hero h1 {
  font-size: min(
    var(--naam-maat, calc(clamp(3rem, 7vw, 6rem) * var(--kop-schaal))),
    calc(100cqi / (var(--langste, 8) * var(--letterbreedte, 0.55)))
  );
  overflow-wrap: break-word;
}

.st-hero-foto {
  aspect-ratio: var(--hero-verhouding);
}

/* Tweede foto, sticker en lopende band zijn er voor de stemmingen die ze
   gebruiken; standaard uit. */
.st-hero-foto-2,
.st-sticker,
.st-lopend {
  display: none;
}

.st-slogan {
  font-size: clamp(1.1875rem, 2vw, 1.4375rem);
  color: var(--inkt-zacht);
  max-width: 32rem;
  margin-top: 1.5rem;
}

.st-knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2.25rem;
}

@media (max-width: 48rem) {
  .st-hero-binnen {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-hero-foto {
    aspect-ratio: 4 / 5;
  }
}

/* ----------------------------------------------------------- over */

.st-over .st-foto {
  aspect-ratio: 4 / 3;
}

.st-over p {
  max-width: 34rem;
}

/* ----------------------------------------------------------- prijzen */

.st-prijsgroepen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 2.5rem clamp(2rem, 6vw, 6rem);
}

/* Een prijslijst zoals op een bord in de zaak: naam, stippels, prijs. */
.st-prijzen li {
  display: grid;
  grid-template-columns: auto minmax(1.5rem, 1fr) auto;
  align-items: baseline;
  column-gap: 0.625rem;
  padding-block: 0.75rem;
}

.st-stip {
  border-bottom: 0.125rem dotted var(--lijn);
  translate: 0 -0.3em;
}

.st-prijs {
  color: var(--accent-tekst);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.st-toelichting {
  grid-column: 1 / -1;
  color: var(--inkt-zacht);
  font-size: 0.9375rem;
}

.st-voetnoot {
  margin-top: 2.5rem;
  color: var(--inkt-zacht);
  font-size: 0.9375rem;
}

/* ----------------------------------------------------------- foto's */

/* De eerste foto groot, de rest eromheen, zonder gat: het raster volgt het
   aantal (`data-aantal`, 1 tot 6; 6 staat voor "meer dan vijf"). Vijf vult
   het precies; bij minder rekken de laatste foto's op, bij meer valt de grote
   foto weg en vult de onderste rij zich. */
.st-fotos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(9rem, 17vw, 15rem);
  gap: 0.75rem;
}

.st-fotos li:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.st-fotos[data-aantal="1"] li:first-child {
  grid-column: 1 / -1;
}

.st-fotos[data-aantal="2"] li {
  grid-column: span 2;
  grid-row: span 2;
}

.st-fotos[data-aantal="3"] li:not(:first-child),
.st-fotos[data-aantal="4"] li:last-child {
  grid-column: span 2;
}

.st-fotos[data-aantal="6"] {
  display: flex;
  flex-wrap: wrap;
}

.st-fotos[data-aantal="6"] li {
  flex: 1 1 14rem;
  height: clamp(9rem, 17vw, 15rem);
}

.st-fotos .st-foto {
  height: 100%;
}

@media (max-width: 48rem) {
  .st-fotos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 40vw;
    gap: 0.5rem;
  }

  .st-fotos[data-aantal="3"] li:not(:first-child) {
    grid-column: auto;
  }

  .st-fotos[data-aantal="6"] li {
    flex-basis: 40%;
    height: 40vw;
  }
}

/* ----------------------------------------------------------- werk */

.st-werk-inleiding,
.st-reeks-tekst {
  max-width: 42rem;
}

.st-werk-inleiding {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* De ankers naar de reeksen, als een rij tabs. */
.st-reeksen ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.st-reeksen a {
  color: var(--inkt);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--lijn);
  text-decoration-thickness: 0.125rem;
  text-underline-offset: 0.35em;
}

.st-reeksen a:hover {
  color: var(--accent-tekst);
  text-decoration-color: var(--accent);
}

.st-reeks {
  scroll-margin-top: 5rem;
}

.st-reeks + .st-reeks {
  margin-top: clamp(3.5rem, 7vw, 6rem);
}

.st-jaren {
  margin-left: 0.5em;
  color: var(--inkt-zacht);
  font-family: var(--letter-tekst);
  font-size: 0.7em;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.st-reeks-tekst {
  margin-bottom: 1.5rem;
}

/* De wand: elk werk in zijn eigen verhouding (`--v`, breedte gedeeld door
   hoogte), in rijen van gelijke hoogte. Een werk groeit naar verhouding mee,
   dus de hoogte in een rij blijft gelijk; het lege blok achteraan houdt de
   laatste rij op zijn eigen hoogte als die niet vol is. Hooguit anderhalf
   keer de rijhoogte: anders wordt een breed werk dat alleen op een rij
   valt, schermvullend. */
.st-wand {
  --rij: clamp(10rem, 19vw, 17rem);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.5rem);
}

.st-wand::after {
  content: "";
  flex: 999 1 0;
}

.st-wand > li {
  flex: var(--v) 1 calc(var(--v) * var(--rij));
  min-width: 0;
  max-width: calc(var(--v) * var(--rij) * 1.5);
}

.st-wand figure {
  margin: 0;
}

.st-wand-knop {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--hoek);
  overflow: hidden;
  background: color-mix(in srgb, var(--inkt) 6%, var(--vlak));
  cursor: zoom-in;
}

.st-wand-knop img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--v);
  object-fit: cover;
  transition: opacity 0.2s ease;
}

.st-wand-knop:hover img {
  opacity: 0.88;
}

.st-wand figcaption,
.st-groot figcaption {
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.st-titel {
  display: block;
  font-weight: 600;
}

.st-gegevens {
  display: block;
  color: var(--inkt-zacht);
}

/* Groot: het werk over het hele scherm, op de ondergrond van het ontwerp.
   Een `popover`: Esc of een klik ernaast sluit hem ook. */
.st-groot {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(1rem, 4vw, 3rem);
  border: 0;
  background: var(--ondergrond);
  color: var(--inkt);
  overflow-y: auto;
}

.st-groot:popover-open {
  display: grid;
  place-items: center;
}

.st-groot figure {
  display: grid;
  justify-items: center;
  margin: 0;
  text-align: center;
}

.st-groot img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* Ruimte voor de rand, de knop en twee regels titel en gegevens. */
  max-height: calc(100svh - 14rem);
  object-fit: contain;
}

.st-groot .button {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
}

@media (max-width: 48rem) {
  .st-wand {
    --rij: 10rem;
  }
}

/* ----------------------------------------------------------- ervaringen */

.st-recensies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 2.5rem clamp(2rem, 4vw, 3.5rem);
}

.st-recensies figure {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.st-recensies blockquote p {
  margin: 0;
  font-family: var(--letter-kop);
  font-stretch: var(--kop-breedte, 100%);
  font-size: 1.4375rem;
  line-height: 1.35;
  text-wrap: pretty;
}

.st-recensies blockquote p::before {
  content: "“";
}

.st-recensies blockquote p::after {
  content: "”";
}

.st-recensies figcaption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--inkt-zacht);
  font-size: 0.9375rem;
}

.st-recensies figcaption::before {
  content: "";
  width: 1.75rem;
  border-top: 0.125rem solid var(--accent);
}

/* ----------------------------------------------------------- langskomen */

.st-bezoek .st-twee {
  align-items: start;
}

.st-tijden {
  margin: 0;
}

.st-tijden div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
  border-bottom: 0.0625rem solid var(--lijn);
}

.st-tijden dt {
  font-weight: 500;
}

.st-tijden dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.st-tijden .vandaag {
  color: var(--accent-tekst);
}

.st-adres {
  font-style: normal;
  margin-bottom: 1.25rem;
}

/* Een lang mailadres breekt liever dan dat het buiten een smal scherm valt. */
.st-contact {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
  overflow-wrap: anywhere;
}

/* ----------------------------------------------------------- voet */

.st-voet {
  padding-block: 2.5rem;
  border-top: 0.0625rem solid var(--lijn);
  color: var(--inkt-zacht);
  font-size: 0.9375rem;
}

.st-voet-binnen {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}

.st-voet-beheer {
  display: flex;
  gap: 1.25rem;
}

.st-voet p {
  margin: 0;
}

.st-voet :is(a, button):hover {
  color: var(--accent-tekst);
}

/* ----------------------------------------------------------- meldingen */

/* "Je bent uitgelogd" en dergelijke, onder de kop. */
.st-meldingen {
  padding-top: 1.25rem;
}

.st-melding {
  margin: 0 0 0.5rem;
  padding: 0.75rem 1rem;
  border-left: 0.375rem solid var(--accent);
  background-color: var(--vlak);
}

.st-melding-fout {
  border-left-color: var(--inkt);
  font-weight: 600;
}

/* ----------------------------------------------------------- stemmingenbalk */

/* Alleen bij een demo of voorbeeld: wisselen van stemming. Hoort niet bij
   de site, dus bewust neutraal en buiten de rollen om. */
.st-kiezer {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 50;
  translate: -50% 0;
  display: flex;
  gap: 0.25rem;
  padding: 0.3125rem;
  border-radius: 2rem;
  background: #000;
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.25);
  font-family: system-ui, sans-serif;
}

.st-kiezer button {
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  color: #ddd;
  font-size: 0.875rem;
  font-family: inherit;
}

.st-kiezer button:hover {
  color: #fff;
}

.st-kiezer button[aria-pressed="true"] {
  background: #fff;
  color: #000;
}

.st-kiezer button:focus-visible {
  outline: 0.125rem solid #fff;
  outline-offset: 0.125rem;
}

.starter:has(.st-kiezer) .st-voet {
  padding-bottom: 5.5rem;
}

/* Smal: de knoppen lopen door op een tweede regel, in plaats van buiten het
   scherm. */
@media (max-width: 40rem) {
  .st-kiezer {
    flex-wrap: wrap;
    justify-content: center;
    width: max-content;
    max-width: calc(100% - 1rem);
    border-radius: 1.25rem;
  }

  .st-kiezer button {
    padding: 0.4375rem 0.75rem;
  }
}