/* Opmaak die alleen op over-ons.html staat. Stond eerder inline in die pagina. */

/* Lopende tekst begint links, de blokken zelf blijven midden op de pagina staan.
   Koppen blijven gecentreerd. */
/* 580px, gelijk aan het roots-blok, zodat beide op dezelfde x beginnen.
   De ondermarge moet er expliciet bij: style.css zet hier "margin: 0 auto",
   en dat maakt de ruimte tussen alinea's nul. */
.page-hero p { text-align: left; max-width: 580px; margin: 0 auto 1.15em; }

/* De openingsbelofte. Groter en cursief, hetzelfde gebaar als "More is the mood"
   op de homepage, zodat de bezoeker weet waar het verhaal begint. */
.about-lead {
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  line-height: 1.45;
  font-style: italic;
  color: var(--ink);
  margin-top: 30px;
  margin-bottom: 1.4em;
}
/* De slotregel waar de hero op landt. Donkerder en zwaarder dan de lopende
   tekst, zodat het als belofte leest en niet als nog een alinea. */
.about-closing {
  font-weight: 500;
  color: var(--ink);
  margin-top: 26px;
}
/* Accent binnen een alinea. Spaarzaam: hoe vaker, hoe minder het doet. */
main p em { font-style: italic; color: var(--ink); }
main p strong { font-weight: 600; color: var(--ink); }

/* De korte zin die na het citaat landt. Geen extra ruimte, die geeft het
   citaat al; alleen wat meer gewicht zodat hij niet wegvalt. */
.roots-landing { font-weight: 500; color: var(--ink); }

/* Liggend kader. De foto met de drie vrouwen naast elkaar verliest in het
   standaard 4:5 kader de helft van haar breedte, en daarmee twee van de drie.
   Selector moet .split ervoor hebben, anders wint .split .frame op specificiteit. */
.split .frame--liggend { aspect-ratio: 3 / 2; }

/* Het roots-verhaal als genummerd tijdschriftartikel: elke stap krijgt een
   nummer en een labelregel, met beeld dat om en om meeloopt. Mobiel staat
   alles onder elkaar, vanaf 860px komt de tweede kolom ernaast. */
.roots { padding-block: clamp(10px, 3vw, 26px) 0; }
.roots-title {
  font-size: clamp(2.3rem, 6.5vw, 3.9rem);
  line-height: 1.03;
  margin: 8px 0 clamp(30px, 5vw, 56px);
  text-wrap: balance;
}
.roots-step {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
/* Het volgnummer blijft achtergrondinformatie: zelfde ritme, minder gewicht. */
.roots-num { color: var(--ink-soft); opacity: 0.7; letter-spacing: 0.1em; }
.roots-col p:last-child { margin-bottom: 0; }

.roots-row {
  display: grid;
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
  margin-bottom: clamp(38px, 6vw, 74px);
}
/* Zelfde kader als elders op de site, zodat het beeld hier niet losstaat. */
.roots-figure {
  border: 10px solid var(--white);
  border-radius: 26px;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--bg-alt);
  box-shadow: 0 0 0 1px rgba(18, 17, 16, 0.06), 0 34px 70px -34px rgba(30, 25, 20, 0.2);
}
.roots-figure img { width: 100%; height: 100%; object-fit: cover; }
/* Bij de naam-sectie is het beeld een rustig vlak naast de tekst, geen hoofdrol. */
.roots-figure--soft { aspect-ratio: 1/1; box-shadow: none; border-width: 8px; }

/* Het kantelpunt krijgt een eigen vlak, zodat het citaat het verhaal breekt. */
.roots-band {
  background: var(--bg-alt);
  border-radius: 26px;
  padding: clamp(26px, 4vw, 48px);
  display: grid;
  gap: clamp(24px, 3.5vw, 46px);
  align-items: center;
  margin-bottom: clamp(38px, 6vw, 74px);
}
.roots-quote {
  margin: 0;
  padding-left: clamp(16px, 2vw, 24px);
  border-left: 1px solid var(--line-strong);
  font-size: clamp(1.35rem, 3.4vw, 2.05rem);
  line-height: 1.28;
  font-style: italic;
  color: var(--ink);
  /* Voorkomt dat er op smal scherm een enkel woord op de laatste regel valt */
  text-wrap: balance;
  /* Echte aanhalingstekens, want het is een citaat. Het openingsteken hangt
     buiten de kantlijn zodat de I eronder recht uitlijnt met de tweede regel. */
  quotes: '\201C' '\201D';
  text-indent: -0.42em;
}
.roots-quote::before { content: open-quote; }
.roots-quote::after { content: close-quote; }
/* De korte zin die na het citaat landt. Alleen wat meer gewicht, geen extra ruimte. */
.roots-landing { font-weight: 500; color: var(--ink); }

/* Blok 03 is een merkstatement van twee zinnen naast een staand beeld. Als
   lopende tekst vulde het 83px naast een foto van 711px, dus bijna niets.
   De tekst krijgt statement-formaat, het beeld wordt vierkant, en beide
   staan verticaal gecentreerd zodat de rest van de ruimte gelijk verdeelt. */
.roots-row--flip .roots-col p:not(.roots-step) {
  font-size: clamp(1.35rem, 2.7vw, 2rem);
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 0;
}
.roots-row--flip .roots-col p strong { font-weight: 500; }

.roots-stands { border-top: 1px solid var(--line); padding-top: 20px; }
.roots-stands-title { font-weight: 500; color: var(--ink); margin: 0 0 14px; }
.roots-stands ul { list-style: none; margin: 0; padding: 0; }
.roots-stands li {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-soft);
}
.roots-stands li:last-child { border-bottom: 0; }

@media (min-width: 860px) {
  .roots-row { grid-template-columns: 1fr 1fr; }
  .roots-band { grid-template-columns: 1fr 1fr; }
  /* Blok 03: beeld vierkant en iets smaller, statement ernaast op ooghoogte. */
  .roots-row--flip { grid-template-columns: 0.9fr 1.1fr; align-items: center; }
  .roots-row--flip .roots-figure { aspect-ratio: 1 / 1; }
  /* Beeld smal, verhaal breed, en de belofte als smalle kolom ernaast. */
  .roots-row--name { grid-template-columns: 0.62fr 1.5fr 0.88fr; align-items: start; }
  .roots-stands { border-top: 0; border-left: 1px solid var(--line); padding: 4px 0 4px 30px; }
}