/* ============================================================
   De vlakken: zes sjablonen voor een social post.

   Het mechanisme, en de reden dat dit werkt: elke maat binnen een
   vlak is een fractie van de BREEDTE van dat vlak (cqw), nooit een
   vast aantal pixels. Daardoor klopt hetzelfde sjabloon op een kaart
   van 260 pixels én op een vlak van 900 pixels, zonder één regel
   JavaScript en zonder tweede set maten.

   De kleuren komen uit --merk-1/2/3, die één keer op een omhullend
   element staan. In dit bestand staat dus GEEN enkele kleurwaarde
   van een merk — daar staat een toets op (scripts/toets.mjs).
   --merk-N-op is de bijbehorende tekstkleur, berekend uit de
   luminantie, zodat wit-op-lichtgeel niet kan gebeuren.
   ============================================================ */

/* De omhullers zijn de maatstaf voor alles daarbinnen. */
.kaart__beeld,
.wandvak__beeld,
.detail__beeld,
.concept__vlak {
  container-type: inline-size;
  width: 100%;
}

.v {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 7cqw;
  overflow: hidden;
  background: var(--merk-2);
  color: var(--merk-2-op);
  font-family: var(--font-body);
  line-height: 1.15;
  text-wrap: balance;
}

.v--story { aspect-ratio: 4 / 5; }

/* ---------- onderdelen die in meerdere sjablonen zitten ---------- */

.v__kop {
  margin: 0;
  font-weight: var(--merk-gewicht);
  letter-spacing: var(--merk-tracking);
  font-size: 7.6cqw;
  line-height: 1.08;
  overflow-wrap: break-word;
}

.v__sub {
  margin: 2.6cqw 0 0;
  font-size: 4.2cqw;
  font-weight: 400;
  line-height: 1.35;
}

.v__badge {
  align-self: flex-start;
  padding: 1.4cqw 3cqw;
  border: 0.4cqw solid currentColor;
  border-radius: 999px;
  font-size: 3cqw;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.v__voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3cqw;
  margin-top: auto;
  padding-top: 5cqw;
}

.v__cta {
  padding: 1.8cqw 4cqw;
  border: 0.5cqw solid currentColor;
  border-radius: 999px;
  font-size: 3.5cqw;
  font-weight: 500;
}

.v__merk {
  display: inline-flex;
  align-items: center;
  gap: 1.8cqw;
  font-size: 3.4cqw;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.v__mark {
  width: 4.4cqw;
  height: 4.4cqw;
  flex: none;
}

.v--kapitaal .v__merknaam,
.v--kapitaal .v__kicker { text-transform: uppercase; }

/* ---------- 1. tekstvlak ---------- */

.v--tekstvlak {
  background: var(--merk-1);
  color: var(--merk-1-op);
}

.v--tekstvlak .v__kop { margin-top: 5cqw; font-size: 8.4cqw; }

/* ---------- 2. quote ---------- */

.v--quote { justify-content: center; text-align: center; }

.v--quote .v__aanhaling {
  display: block;
  color: var(--merk-1);
  font-size: 26cqw;
  line-height: 0.7;
  font-weight: 700;
}

.v--quote .v__kop {
  margin-top: 2cqw;
  font-size: 7cqw;
  font-style: italic;
  line-height: 1.2;
}

.v--quote .v__bron {
  margin: 4cqw 0 0;
  font-size: 3.4cqw;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.v--quote .v__voet { justify-content: center; }

/* ---------- 3. beeldband ---------- */

.v--beeldband { padding: 0; }

.v__beeldvak {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--merk-2);
}

.v__beeld {
  display: block;
  width: 100%;
  height: 100%;
}

.v--beeldband .v__badge {
  position: absolute;
  top: 5cqw;
  left: 5cqw;
  background: var(--merk-2);
  color: var(--merk-2-op);
}

.v__band {
  flex: none;
  padding: 6cqw;
  background: var(--merk-1);
  color: var(--merk-1-op);
}

.v--beeldband .v__kop { font-size: 6.2cqw; }
.v--beeldband .v__voet { padding-top: 4cqw; }

/* ---------- 4. groot cijfer ---------- */

.v--cijfer .v__getal {
  margin: 3cqw 0 0;
  color: var(--merk-1);
  font-size: 36cqw;
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.03em;
}

.v--cijfer .v__kop { margin-top: 1cqw; font-size: 6.4cqw; }
.v--cijfer .v__sub { margin-top: 2cqw; font-size: 3.8cqw; }

/* ---------- 5. genummerde tips ---------- */

.v--tips {
  background: var(--merk-1);
  color: var(--merk-1-op);
}

.v--tips .v__kop { margin-top: 4cqw; font-size: 6.6cqw; }

.v__tips {
  margin: 4cqw 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2.6cqw;
}

.v__tip {
  display: flex;
  align-items: flex-start;
  gap: 2.8cqw;
  font-size: 3.9cqw;
  line-height: 1.3;
}

.v__tipnum {
  flex: none;
  display: grid;
  place-items: center;
  width: 7cqw;
  height: 7cqw;
  border-radius: 999px;
  background: var(--merk-2);
  color: var(--merk-2-op);
  font-size: 3.4cqw;
  font-weight: 700;
}

/* ---------- 6. editorial ---------- */

.v--editorial { justify-content: center; }

.v__kicker {
  align-self: flex-start;
  padding: 3cqw 0;
  border-top: 0.6cqw solid var(--merk-3);
  border-bottom: 0.6cqw solid var(--merk-3);
  font-size: 3.2cqw;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.v--editorial .v__kop { margin-top: 5cqw; font-size: 7.8cqw; }
.v--editorial .v__sub { font-size: 3.9cqw; }

/* ============================================================
   Vangnet: zonder container queries kan een vlak zijn maten niet
   uit zijn eigen breedte halen. Dan gelden vaste maten die kloppen
   op de kaartbreedte waarop het raster staat — minder mooi op de
   grote weergave, maar nooit stuk.
   ============================================================ */

@supports not (container-type: inline-size) {
  .v { padding: 24px; }
  .v__kop { font-size: 22px; }
  .v--tekstvlak .v__kop { font-size: 24px; margin-top: 16px; }
  .v__sub { font-size: 13px; margin-top: 8px; }
  .v__badge { font-size: 9px; padding: 4px 8px; border-width: 1px; }
  .v__voet { gap: 8px; padding-top: 16px; }
  .v__cta { font-size: 11px; padding: 4px 12px; border-width: 1px; }
  .v__merk { font-size: 10px; gap: 4px; }
  .v__mark { width: 13px; height: 13px; }
  .v--quote .v__aanhaling { font-size: 74px; }
  .v--quote .v__kop { font-size: 20px; }
  .v--quote .v__bron { font-size: 10px; margin-top: 12px; }
  .v--beeldband .v__badge { top: 16px; left: 16px; }
  .v__band { padding: 16px; }
  .v--beeldband .v__kop { font-size: 18px; }
  .v--cijfer .v__getal { font-size: 102px; }
  .v--cijfer .v__kop { font-size: 18px; }
  .v--cijfer .v__sub { font-size: 11px; }
  .v--tips .v__kop { font-size: 19px; }
  .v__tips { gap: 8px; margin-top: 12px; }
  .v__tip { font-size: 11px; gap: 8px; }
  .v__tipnum { width: 20px; height: 20px; font-size: 10px; }
  .v__kicker { font-size: 9px; padding: 8px 0; border-width: 2px; }
  .v--editorial .v__kop { font-size: 22px; }
  .v--editorial .v__sub { font-size: 11px; }
}