/* Ontwerp rustig: een kolom salie links, kalkwit rechts, diepgroen, Jost.

   Opnieuw opgezet op 12 november 2026, naar de opbouw van een eigen
   KK-site (Zusjes van Dijk), in andere kleuren en letter. Het oude rustig had
   alleen een foto tot de rand naast een smalle tekstkolom.

   Kenmerk: de kolom. Over de hele hoogte van de pagina loopt links een vlak in
   salie; daarin staan de naam en de sectiekoppen, rechts uitgelijnd, in
   hoofdletters. Rechts ervan de inhoud, op kalkwit. Geen banden, geen
   wisselende vlakken: de kolom houdt de pagina bij elkaar. Op een smal scherm
   valt de kolom weg en wordt alleen de opening salie.

   Dit ontwerp is ook de standaard (`.starter` zonder `data-stemming`). De
   rollen staan uitgelegd in docs/starter-thema.md; contrast van inkt op
   ondergrond en accent-inkt op accent is minstens 4,5 : 1, ook diepgroen op
   salie (6,9 : 1). */

.starter,
.starter[data-stemming="rustig"] {
  --ondergrond: #fbfbf8;
  --vlak: #fbfbf8;
  --inkt: #1f2925;
  --inkt-zacht: #56625c;
  --accent: #23413a;
  --accent-inkt: #f4f6f1;
  --lijn: #c9d0c6;
  --letter-kop: "Jost", system-ui, sans-serif;
  --letter-tekst: "Jost", system-ui, sans-serif;
  --kop-gewicht: 500;
  --kop-hoofdletters: uppercase;
  --kop-spatie: 0.01em;
  --kop-schaal: 1;
  --hoek: 0;
  --ruimte: clamp(4rem, 8vw, 7rem);
  --hero-kolommen: var(--kolom) minmax(0, 1fr);
  --hero-verhouding: auto;
  --letterbreedte: 0.68;
  /* De kolom: hoe breed, welke kleur, en de ruimte aan weerszijden van de
     naad tussen kolom en inhoud. */
  --kolom: 38%;
  --kolomkleur: #c5d1bd;
  --naad: clamp(2rem, 4vw, 4.5rem);
  --rand: 1.25rem;
}

/* Alleen op rustig zelf: met de ontwerpenbalk staan alle ontwerpen op één
   pagina, en de rollen hierboven zijn de basis voor elk ervan. */
.starter[data-stemming="rustig"] {
  background-image: linear-gradient(
    to right,
    var(--kolomkleur) var(--kolom),
    var(--ondergrond) var(--kolom)
  );
}

/* Geen wisselende banden: de kolom loopt door. */
.starter[data-stemming="rustig"] .st-home > .st-band:nth-child(even) {
  background-color: transparent;
}

.starter[data-stemming="rustig"] :is(h1, h2) {
  color: var(--accent);
}

.starter[data-stemming="rustig"] h3 {
  font-size: 1.1875rem;
  letter-spacing: 0.06em;
}

/* ----- kop: dezelfde naad als de pagina */

.starter[data-stemming="rustig"] .st-kop {
  background: linear-gradient(
    to right,
    var(--kolomkleur) var(--kolom),
    var(--ondergrond) var(--kolom)
  );
  border-bottom: 0;
}

.starter[data-stemming="rustig"] .st-logo {
  font-size: 1.25rem;
  color: var(--accent);
}

/* ----- de secties: kop in de kolom, de rest ernaast */

.starter[data-stemming="rustig"] .st-band:not(.st-hero) > .st-breed {
  display: grid;
  grid-template-columns: var(--kolom) minmax(0, 1fr);
  row-gap: 0;
  column-gap: 0;
  align-items: start;
  width: 100%;
}

/* De kop beslaat de hele hoogte van de kolom, zodat een kop van drie regels
   geen gat tussen de alinea's ernaast trekt. Lege rijen zijn nul hoog. */
.starter[data-stemming="rustig"] .st-band:not(.st-hero) > .st-breed > h2,
.starter[data-stemming="rustig"] .st-over .st-twee > div > h2 {
  grid-column: 1;
  grid-row: 1 / span 30;
  margin: 0;
  padding: 0 var(--naad) 0 var(--rand);
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.02;
  text-align: right;
  overflow-wrap: break-word;
  hyphens: auto;
}

.starter[data-stemming="rustig"] .st-band:not(.st-hero) > .st-breed > :not(h2),
.starter[data-stemming="rustig"] .st-over .st-twee > div > :not(h2),
.starter[data-stemming="rustig"] .st-over .st-twee > .st-foto {
  grid-column: 2;
  width: auto;
  max-width: 50rem;
  margin-left: var(--naad);
  margin-right: var(--rand);
}

/* Over: tekst en foto onder elkaar naast de kop. */
.starter[data-stemming="rustig"] .st-over .st-twee > div {
  display: contents;
}

.starter[data-stemming="rustig"] .st-over p {
  max-width: 40rem;
}

.starter[data-stemming="rustig"] .st-over .st-twee > .st-foto {
  aspect-ratio: 4 / 3;
  margin-top: 2rem;
}

/* ----- opening: de naam groot in de kolom, de foto tot de rand */

.starter[data-stemming="rustig"] .st-hero {
  padding-block: 0;
}

.starter[data-stemming="rustig"] .st-hero-binnen {
  width: 100%;
  min-height: calc(100svh - 4rem);
  align-items: stretch;
  gap: 0;
}

.starter[data-stemming="rustig"] .st-hero-tekst {
  align-self: center;
  padding: 4rem var(--naad) 4rem var(--rand);
  text-align: right;
}

.starter[data-stemming="rustig"] .st-hero h1 {
  --naam-maat: clamp(3.25rem, 6.5vw, 6.5rem);
  line-height: 0.95;
}

.starter[data-stemming="rustig"] .st-slogan {
  margin-left: auto;
  max-width: 26rem;
  color: var(--inkt);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

.starter[data-stemming="rustig"] .st-knoppen {
  justify-content: flex-end;
}

/* De foto vult de hoogte van de opening, maar bepaalt die niet: anders
   duwt een staande foto de opening ver onder de vouw. */
.starter[data-stemming="rustig"] .st-hero-foto {
  position: relative;
  height: 100%;
}

.starter[data-stemming="rustig"] .st-hero-foto img {
  position: absolute;
  inset: 0;
}

/* ----- kleine dingen */

.starter[data-stemming="rustig"] .button {
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.875rem;
}

.starter[data-stemming="rustig"] .st-prijs {
  font-weight: 500;
}

.starter[data-stemming="rustig"] .st-stip {
  border-bottom-width: 0.0625rem;
}

.starter[data-stemming="rustig"] .st-voet {
  border-top: 0;
}

/* ----- smal: geen kolom; alleen de opening is salie */

@media (max-width: 48rem) {
  .starter[data-stemming="rustig"] {
    background-image: none;
  }

  .starter[data-stemming="rustig"] .st-kop {
    background: var(--kolomkleur);
  }

  .starter[data-stemming="rustig"] .st-band:not(.st-hero) > .st-breed {
    display: block;
    width: min(100% - 2.5rem, 74rem);
  }

  .starter[data-stemming="rustig"] .st-band:not(.st-hero) > .st-breed > h2,
  .starter[data-stemming="rustig"] .st-over .st-twee > div > h2 {
    padding: 0;
    margin-bottom: 1.75rem;
    text-align: left;
  }

  .starter[data-stemming="rustig"] .st-band:not(.st-hero) > .st-breed > :not(h2),
  .starter[data-stemming="rustig"] .st-over .st-twee > div > :not(h2),
  .starter[data-stemming="rustig"] .st-over .st-twee > .st-foto {
    margin-inline: 0;
  }

  .starter[data-stemming="rustig"] .st-hero-binnen {
    min-height: 0;
  }

  .starter[data-stemming="rustig"] .st-hero-tekst {
    padding: 3rem 1.25rem 2.5rem;
    background: var(--kolomkleur);
    text-align: left;
  }

  .starter[data-stemming="rustig"] .st-slogan {
    margin-left: 0;
  }

  .starter[data-stemming="rustig"] .st-knoppen {
    justify-content: flex-start;
  }

  .starter[data-stemming="rustig"] .st-hero-foto {
    height: auto;
    aspect-ratio: 4 / 5;
  }
}