/* Stemming stoer: beton, werkmansblauw en signaaloranje, Big Shoulders.

   Kenmerk: de naam. Hij staat in de opening zo breed als het scherm, met
   daaronder een foto in oranje duotoon en een lopende band met de diensten,
   als afzetlint. De prijzen staan op een blauw bord. Verder hoekig en vlak.

   De rollen staan uitgelegd in docs/starter-thema.md. Oranje is als tekst op
   beton te licht (2,3 : 1); daarom is `--accent-tekst` op lichte banden het
   blauw, en alleen op het blauwe bord oranje. */

.starter[data-stemming="stoer"] {
  --ondergrond: #e3e0d9;
  --vlak: #d4d0c7;
  --inkt: #14213d;
  --inkt-zacht: #4a5468;
  --accent: #ff5f1f;
  --accent-inkt: #14213d;
  --accent-tekst: #14213d;
  --lijn: color-mix(in srgb, #14213d 30%, transparent);
  --letter-kop: "Big Shoulders Display", Impact, sans-serif;
  --letter-tekst: "Jost", system-ui, sans-serif;
  --kop-gewicht: 800;
  --kop-hoofdletters: uppercase;
  --kop-spatie: 0;
  --kop-schaal: 1.45;
  --hoek: 0;
  --ruimte: clamp(3.5rem, 8vw, 7rem);
  --hero-kolommen: minmax(0, 1fr) minmax(0, 1.7fr);
  --hero-verhouding: 16 / 10;
  --letterbreedte: 0.5;
}

/* ----- opening: naam over de hele breedte, foto in duotoon */

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

/* De tekstkolom valt weg, zodat naam, slogan, knoppen en foto elk een eigen
   plek in het raster krijgen. */
.starter[data-stemming="stoer"] .st-hero-tekst {
  display: contents;
}

.starter[data-stemming="stoer"] .st-hero-binnen {
  grid-template-areas:
    "naam    naam"
    "slogan  beeld"
    "knoppen beeld";
  grid-template-rows: auto auto 1fr;
  align-items: start;
  row-gap: 0;
}

.starter[data-stemming="stoer"] .st-hero h1 {
  grid-area: naam;
  --naam-maat: clamp(4.5rem, 16.5vw, 17rem);
  line-height: 0.85;
  letter-spacing: -0.01em;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.starter[data-stemming="stoer"] .st-slogan {
  grid-area: slogan;
  margin-top: 0;
  color: var(--inkt);
}

.starter[data-stemming="stoer"] .st-knoppen {
  grid-area: knoppen;
  margin-top: 1.5rem;
}

.starter[data-stemming="stoer"] .st-hero-beelden {
  grid-area: beeld;
  background: var(--accent);
}

.starter[data-stemming="stoer"] .st-hero-foto img {
  filter: grayscale(1) contrast(1.25);
  mix-blend-mode: multiply;
  object-position: 50% 30%;
}

/* De lopende band, als afzetlint. Staat stil voor wie minder beweging wil. */
.starter[data-stemming="stoer"] .st-lopend {
  display: block;
  overflow: hidden;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-block: 0.875rem;
  background: var(--accent);
  color: var(--accent-inkt);
  font-family: var(--letter-kop);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.starter[data-stemming="stoer"] .st-lopend-rij {
  display: flex;
  width: max-content;
  animation: st-lopend 45s linear infinite;
}

.starter[data-stemming="stoer"] .st-lopend-rij span::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  aspect-ratio: 1;
  margin-inline: 1.25em;
  background: currentColor;
  vertical-align: 0.2em;
}

@keyframes st-lopend {
  to {
    translate: -50% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .starter[data-stemming="stoer"] .st-lopend-rij {
    animation: none;
  }
}

/* ----- prijzen: het blauwe bord */

.starter[data-stemming="stoer"] .st-diensten {
  --inkt: #e3e0d9;
  --inkt-zacht: #a9b0c0;
  --accent-tekst: #ff5f1f;
  --lijn: color-mix(in srgb, #e3e0d9 35%, transparent);
  background: #14213d;
}

.starter[data-stemming="stoer"] .st-prijzen li {
  font-family: var(--letter-kop);
  font-weight: 800;
  font-size: 1.875rem;
  text-transform: uppercase;
  line-height: 1.1;
}

.starter[data-stemming="stoer"] .st-toelichting {
  font-family: var(--letter-tekst);
  font-weight: 400;
  font-size: 0.9375rem;
  text-transform: none;
}

/* ----- foto's en over: zwart-wit */

.starter[data-stemming="stoer"] :is(.st-over, .st-fotos-band) img {
  filter: grayscale(1) contrast(1.15);
}

.starter[data-stemming="stoer"] .st-recensies blockquote p {
  font-family: var(--letter-tekst);
  font-size: 1.375rem;
  font-weight: 500;
}

@media (max-width: 48rem) {
  .starter[data-stemming="stoer"] .st-hero-binnen {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "naam" "slogan" "knoppen" "beeld";
    row-gap: 0;
  }

  .starter[data-stemming="stoer"] .st-hero-beelden {
    margin-top: 2.5rem;
  }

  .starter[data-stemming="stoer"] .st-hero-foto {
    aspect-ratio: 4 / 3;
  }

  .starter[data-stemming="stoer"] .st-prijzen li {
    font-size: 1.5rem;
  }

  .starter[data-stemming="stoer"] .st-logo {
    font-size: 1.5rem;
  }
}