/* Rondleidingpagina: het portret op kalk, een fotostrook zonder voeg, de oprichter en de opbrengst als rustige lijst */

/* Tien leiders: kop en zin links, het portret groot rechts van de as tot de rand */
.rl-leiders {
  display: grid;
  grid-template-columns: var(--as) minmax(0, 1fr);
  grid-template-rows: auto auto;
  background: var(--color-kalk);
  color: var(--color-text-inverse);
  padding: var(--sectie-ruimte) 0 var(--sectie-ruimte) var(--marge);
  align-content: center;
}
.rl-leiders h2 { grid-column: 1; grid-row: 1; align-self: end; padding-right: 48px; }
.rl-leiders-zin { grid-column: 1; grid-row: 2; align-self: start; margin: 1.5rem 0 0; padding-right: 48px; }
.rl-portret { grid-column: 2; grid-row: 1 / span 2; }
.rl-portret img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 32%; }

/* Fotostrook: kop en zin op de as, daaronder vijf foto's op gelijke hoogte, tot de randen */
.rl-strook { display: grid; grid-template-columns: var(--as) minmax(0, 1fr); padding: var(--sectie-ruimte) 0 0; }
.rl-strook h2, .rl-strook-zin { grid-column: 2; padding-right: var(--marge); }
.rl-strook-zin { margin: 1.5rem 0 56px; }
.rl-film { grid-column: 1 / -1; display: flex; height: clamp(16rem, 30vw, 30rem); }
.rl-film figure { margin: 0; overflow: clip; min-width: 0; }
.rl-film img { height: 100%; width: 100%; object-fit: cover; }
.rl-f-staand { flex: 0 0 15%; }
.rl-f-breed { flex: 0 0 27.5%; }

/* De oprichter: foto links tot de as, tekst op de as */
.rl-gids { display: grid; grid-template-columns: var(--as) minmax(0, 1fr); padding: var(--sectie-ruimte) var(--marge); align-items: center; }
.rl-gids-beeld { margin: 0 48px 0 0; }
.rl-gids-beeld img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.rl-gids-tekst h2 { margin-bottom: 1.5rem; }
.rl-gids-tekst p { margin: 0 0 1rem; max-width: 52ch; }

/* Opbrengst: kop op de marge, vijf regels onder elkaar rechts van de as, op gewone leesmaat */
.rl-opbrengst { display: grid; grid-template-columns: var(--as) minmax(0, 1fr); padding: var(--sectie-ruimte) var(--marge); background: var(--color-surface-alt); }
.rl-opbrengst h2 { grid-column: 1; padding-right: 48px; }
.rl-lijst { grid-column: 2; display: grid; gap: 1.1rem; max-width: 46rem; }
.rl-lijst li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; align-items: baseline; }
.rl-lijst h3 { font-size: var(--text-basis); font-weight: 700; line-height: 1.4; }
.rl-lijst p { margin: 0; }

/* Plannen: op kalk, kop op de marge, zin en knop rechts van de as */
.rl-plannen { display: grid; grid-template-columns: var(--as) minmax(0, 1fr); align-items: center; padding: calc(var(--sectie-ruimte) * 0.7) var(--marge); background: var(--color-kalk); color: var(--color-text-inverse); }
.rl-plannen h2 { padding-right: 48px; }
.rl-plannen-tekst p { margin: 0 0 1.5rem; font-size: var(--text-intro); line-height: 1.35; max-width: 40ch; }

@media (max-width: 47.99em) {
  .rl-leiders { grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding: var(--sectie-ruimte) var(--marge); }
  .rl-leiders h2, .rl-portret, .rl-leiders-zin { grid-column: 1; grid-row: auto; }
  .rl-leiders h2, .rl-leiders-zin { max-width: none; padding-right: 0; margin: 0; }
  .rl-portret img { aspect-ratio: 4 / 5; }
  .rl-strook { grid-template-columns: minmax(0, 1fr); }
  .rl-strook h2, .rl-strook-zin { grid-column: 1; padding-left: var(--marge); }
  .rl-strook-zin { margin-bottom: 32px; }
  /* Op de telefoon: de strook wordt een raster van twee kolommen, de brede foto's over de volle breedte */
  .rl-film { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; height: auto; }
  .rl-f-staand img { aspect-ratio: 3 / 4; }
  .rl-f-breed { grid-column: 1 / -1; }
  .rl-f-breed img { aspect-ratio: 3 / 2; }
  .rl-film figure:last-child { grid-column: 1 / -1; }
  .rl-film figure:last-child img { aspect-ratio: 4 / 3; }
  .rl-opbrengst { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .rl-plannen { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .rl-plannen h2 { padding-right: 0; }
  .rl-opbrengst h2 { grid-column: 1; max-width: none; padding-right: 0; }
  .rl-lijst { grid-column: 1; gap: 20px; }
  .rl-lijst li { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .rl-gids { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .rl-gids-beeld { margin: 0; width: 75%; }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .rl-leiders { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .rl-opbrengst { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .rl-opbrengst h2, .rl-lijst { grid-column: 1; }
  .rl-strook { grid-template-columns: minmax(0, 1fr); }
  .rl-strook h2, .rl-strook-zin { grid-column: 1; padding-left: var(--marge); }
}