/**
 * De pagina Over ons.
 *
 * Een verhalende pagina, dus smallere tekstkolommen dan elders: een regel van
 * honderd tekens leest niemand uit. Bouwt verder op rix-home.css.
 */

.rix-home--over-ons .rix-home__hero-body h1 {
  max-width: 20ch;
}

/* --- De feitenstrook ------------------------------------------------------ */

.rix-over__feiten-sectie {
  background: var(--rix-surface);
  padding-block: var(--rix-section-y-sm);
}

.rix-over__feiten {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 24px;
}

.rix-over__feit-waarde {
  font-family: var(--rix-font-display, var(--rix-font-ui));
  font-size: var(--rix-size-h3);
  font-weight: var(--rix-weight-display);
  color: var(--rix-heading);
}

.rix-over__feit-label {
  margin-block-start: 6px;
  font-size: var(--rix-size-small);
  color: var(--rix-ink-soft);
  max-width: 34ch;
}

/* --- Foto naast tekst ----------------------------------------------------- */

.rix-over__split {
  display: grid;
  gap: 32px;
  align-items: start;
}

.rix-over__foto {
  margin: 0;
  border-radius: var(--rix-radius-card);
  overflow: hidden;
  box-shadow: var(--rix-shadow-card);
}

.rix-over__foto img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.rix-over__tekst > p {
  margin-block-start: 14px;
  max-width: 62ch;
}

/* --- Het citaat ----------------------------------------------------------- */

/* Eén zin, uitgelicht omdat hij de kern van het hele verhaal is: waarom er
   vanaf dag één een factuur werd gestuurd. De streep links markeert dat het
   iemands eigen woorden zijn en geen kop. */
.rix-over__citaat {
  margin: 24px 0 0;
  padding: 4px 0 4px 20px;
  border-inline-start: 3px solid var(--rix-orange);
}

.rix-over__citaat p {
  font-size: var(--rix-size-h3);
  line-height: var(--rix-leading-h2);
  color: var(--rix-heading);
  max-width: 24ch;
}

.rix-over__citaat footer {
  margin-block-start: 10px;
  font-family: var(--rix-font-ui);
  font-size: var(--rix-size-kicker);
  color: var(--rix-ink-soft);
}

/* De brug van toen naar nu; rustiger dan de rest, want het is een terzijde. */
.rix-over__nu {
  margin-block-start: 24px;
  padding: 18px 20px;
  border-radius: var(--rix-radius-card);
  background: var(--rix-blue-tint);
  font-size: var(--rix-size-small);
}

/* --- Lopende tekst in twee kolommen --------------------------------------- */

.rix-over__kolommen {
  margin-block-start: 20px;
  display: grid;
  gap: 8px 40px;
}

.rix-over__kolommen p {
  margin-block-start: 12px;
  max-width: 62ch;
}

.rix-over__franchise {
  background: var(--rix-surface-soft);
}

.rix-over__verder {
  margin-block-start: 24px;
  font-family: var(--rix-font-ui);
}

.rix-over__verder a {
  color: var(--rix-blue-dark);
}

.rix-over__verder--careers {
  margin-block-start: 12px;
  font-size: var(--rix-size-small);
}

/* --- Kernwaarden ---------------------------------------------------------- */

.rix-over__waarden {
  margin-block-start: 28px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 24px;
}

.rix-over__waarden li {
  background: var(--rix-white);
  border: 1px solid var(--rix-line);
  border-radius: var(--rix-radius-card);
  box-shadow: var(--rix-shadow-card);
  padding: 24px;
}

.rix-over__waarden h3 {
  margin-block-end: 8px;
}

.rix-over__waarden p {
  font-size: var(--rix-size-small);
  color: var(--rix-text);
}

@media (min-width: 700px) {
  .rix-over__feiten { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .rix-over__kolommen { grid-template-columns: repeat(2, 1fr); }
  .rix-over__waarden { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  /* De foto krijgt de kleinste helft: het verhaal is de hoofdzaak. */
  .rix-over__split { grid-template-columns: 5fr 7fr; gap: 48px; }
}

@media (min-width: 1025px) {
  /* Vijf waarden in drie kolommen: de laatste rij loopt bewust niet vol,
     wat prettiger leest dan vijf smalle kaarten naast elkaar. */
  .rix-over__waarden { grid-template-columns: repeat(3, 1fr); }
}

/* De afsluitende zin over het jubileum leest als de alinea's erboven: zelfde
   grootte, zelfde kleur, zelfde regelbreedte. Hij hoort bij het verhaal en is
   geen voetnoot. */
.rix-over__film-link {
  margin-block-start: 12px;
  max-width: 62ch;
}

.rix-over__film-link a { color: var(--rix-blue-dark); }