/* Groenhart — Over ons (compositie). Gedeelde componenten staan in style.css.
   1 kop met gegevensstrook en staand beeld · 2 uit ons werkboek (regels met een plant) · 3 wie wat doet (donker) · 4 werkplaats en materiaal · 5 verder lezen */

/* Rechterrand van .wrap, voor beeld dat tot de rand van het scherm loopt */
.page-over { --edge: max(var(--pad), calc((100% - var(--maxw)) / 2)); }

/* --------------------------------------------------------------------------
   1. Kop
   -------------------------------------------------------------------------- */
.ov-head { padding-top: var(--head-top); padding-bottom: var(--section); }
.ov-head__grid { display: grid; gap: var(--space-l) var(--gap); }
.ov-head__label { order: 1; }
.ov-head__title { order: 2; max-width: 15ch; }
.ov-head__photo { order: 3; }
.ov-head__story { order: 4; display: grid; gap: 1.1rem; max-width: 46ch; }
.ov-head__note { order: 5; max-width: 26ch; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); }
.ov-titleblock { order: 6; }
.ov-head__story .lead { margin-bottom: .35rem; }
.ov-head__photo .media { aspect-ratio: 4 / 5; }
.ov-head__photo img { object-position: 50% 50%; }
@media (min-width: 600px) and (max-width: 959px) { .ov-head__photo .media { aspect-ratio: 4 / 3; } .ov-head__photo img { object-position: 50% 62%; } }

/* Gegevensstrook in de kantlijn (gedeelde .strip uit style.css) */
.ov-titleblock { max-width: 30rem; }
.ov-titleblock dd a { display: inline-block; padding-block: .2rem; }

@media (min-width: 960px) {
  .ov-head__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--space-xl); align-items: start; }
  .ov-head__label { grid-column: 1 / span 3; grid-row: 1; padding-top: 1.1rem; }
  .ov-head__title { grid-column: 4 / -1; grid-row: 1; max-width: 17ch; }
  .ov-head__story { grid-column: 4 / span 5; grid-row: 2; padding-top: .4rem; }
  .ov-head__note { grid-column: 4 / span 5; grid-row: 3; align-self: end; margin-bottom: 2.6rem; }
  .ov-head__photo { grid-column: 9 / -1; grid-row: 2 / span 2; }
  .ov-titleblock { grid-column: 1 / span 3; grid-row: 2 / span 2; align-self: end; grid-template-columns: 1fr; max-width: 15rem; margin-bottom: 2.2rem; }
  .ov-titleblock dd { font-size: 1.1rem; }
}
@media (min-width: 1200px) {
  .ov-head__story { grid-column: 4 / span 4; }
}

/* --------------------------------------------------------------------------
   2. Uit ons werkboek: een kleine bordertekening in de kantlijn, daarnaast de sleutel.
   Elke rij begint bij de plant (code zoals op de tekening, Latijnse en Nederlandse naam),
   de les staat eronder als korte noot.
   -------------------------------------------------------------------------- */
.ov-rules__head { display: grid; gap: var(--space-m); margin-bottom: var(--space-xl); }
.ov-rules__title { font-size: clamp(2.1rem, 1.45rem + 2.4vw, 3.75rem); font-weight: 300; line-height: 1.04; letter-spacing: -.024em; max-width: 16ch; }
.ov-rules__intro { color: var(--kiezel); max-width: 44ch; }
.ov-key { display: grid; gap: var(--space-xl) var(--gap); align-items: start; }
.ov-key__plan { margin: 0; max-width: 20rem; }
.ov-key__svg { display: block; width: 100%; height: auto; }
.ov-key__svg .plan-code { font-size: 11px; letter-spacing: 0; }
.ov-rules__list { display: grid; border-top: 1px solid var(--inkt); }
.ov-rule { display: grid; gap: 1rem var(--gap); padding: 1.6rem 0 1.9rem; border-bottom: 1px solid var(--steen-lijn); }
.ov-rule__plant { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: .9rem; align-items: center; }
.ov-rule__code {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--bos); border-radius: 50%;
  background: var(--linnen-licht); font-size: .75rem; font-weight: 600; font-stretch: 85%; color: var(--bos-diep);
}
.ov-rule__name { display: grid; gap: .1rem; }
.ov-rule__sci { font-family: var(--serif); font-size: clamp(1.45rem, 1.2rem + .9vw, 2rem); font-weight: 340; line-height: 1.15; }
.ov-rule__sci .latin { font-size: inherit; font-weight: inherit; }
.ov-rule__nl { font-size: var(--fs-small); color: var(--kiezel); }
.ov-rule__note { display: grid; gap: .45rem; padding-left: 3.5rem; }
.ov-rule__title { font-size: 1.3rem; font-weight: 400; line-height: 1.3; letter-spacing: -.005em; }
.ov-rule__text { color: var(--kiezel); max-width: 52ch; }
@media (min-width: 700px) {
  .ov-rule { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .ov-rule__note { padding-left: 0; padding-top: .35rem; }
}
@media (min-width: 960px) {
  .ov-rules__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .ov-rules__label { grid-column: 1 / span 3; padding-top: 1.1rem; }
  .ov-rules__title { grid-column: 4 / span 6; }
  .ov-rules__intro { grid-column: 4 / span 5; }
  .ov-key { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ov-key__plan { grid-column: 1 / span 3; max-width: none; position: sticky; top: calc(var(--header-h) + 2rem); }
  /* het plan staat hier smal (ca. 210–330px): plantcodes groter, zodat ze rond 9,5px blijven */
  .ov-key__svg .plan-code { font-size: 15px; transform: translateY(1.3px); }
  .ov-key__svg circle.plan-fill { r: 13px; }
  .ov-rules__list { grid-column: 4 / -1; }
}

/* --------------------------------------------------------------------------
   3. De ploeg — bomen op een lijn: initialen in een plansymbool
   -------------------------------------------------------------------------- */
.ov-crew__list { display: grid; border-top: 1px solid var(--lijn-donker); }
.ov-crew__head { display: grid; gap: var(--space-m); margin-bottom: var(--space-xl); }
.ov-crew__title { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 4.2rem); font-weight: 300; line-height: 1.04; letter-spacing: -.025em; max-width: 18ch; }
.ov-person { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.75rem 0 2rem; border-bottom: 1px solid var(--lijn-donker); }
.ov-person__photo { margin: 0; }
.ov-person__photo .media { aspect-ratio: 4 / 5; }
.ov-person__photo .caption { color: var(--mist); border-top-color: var(--lijn-donker); }
@media (min-width: 600px) and (max-width: 959px) {
  .ov-person { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--gap); align-items: start; }
}
.ov-person__body { display: grid; gap: .55rem; align-content: start; min-width: 0; }
.ov-person__name { font-size: clamp(1.75rem, 1.45rem + 1vw, 2.35rem); font-weight: 320; line-height: 1.05; }
.ov-person__role { font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .16em; text-transform: uppercase; color: var(--mos-licht); }
.ov-person__text { color: var(--tekst-licht); max-width: 36ch; margin-top: .25rem; }
.ov-person__facts { display: grid; margin-top: .6rem; border-top: 1px solid var(--lijn-donker); font-size: var(--fs-small); }
.ov-person__facts > div { display: grid; gap: .1rem; padding: .7rem 0; border-bottom: 1px solid var(--lijn-donker); }
.ov-person__facts > div:last-child { border-bottom: 0; }
.ov-person__facts dt { font-size: var(--fs-xs); color: var(--mist); }
.ov-person__facts dd { color: var(--tekst-licht); line-height: 1.5; }
.ov-person__facts .latin { font-size: 1.08rem; }

.ov-crew__foot { display: grid; gap: var(--space-l); margin-top: var(--space-xl); }
.ov-crew__aside { font-size: var(--fs-small); color: var(--mist); max-width: 40ch; padding-left: 1rem; border-left: 1px solid var(--lijn-donker); }
.ov-crew__cta { display: grid; gap: 1.25rem; justify-items: start; }
.ov-crew__cta-text { font-family: var(--serif); font-optical-sizing: auto; font-size: var(--fs-lead); font-weight: 340; line-height: 1.3; max-width: 26ch; }

@media (max-width: 599px) {
  .ov-crew__cta .btn { width: 100%; }
}
@media (min-width: 900px) {
  .ov-crew__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .ov-crew__head .label { grid-column: 1 / span 3; padding-top: 1.1rem; }
  .ov-crew__title { grid-column: 4 / -1; }
  .ov-crew__list { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; padding-top: 2rem; border-bottom: 1px solid var(--lijn-donker); }
  .ov-person { grid-template-columns: 1fr; gap: 1.5rem; padding: 0 clamp(1.5rem, 2.5vw, 3rem) 2.75rem; border-bottom: 0; }
  .ov-person:first-child { padding-left: 0; }
  .ov-person:last-child { padding-right: 0; }
  .ov-person + .ov-person { border-left: 1px solid var(--lijn-donker); }
  /* de cirkel staat óp de lijn, als een boom op een haaglijn */

  .ov-crew__foot { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; margin-top: var(--space-xl); }
  .ov-crew__aside { grid-column: 1 / span 4; }
  .ov-crew__cta { grid-column: 6 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--gap); }
}

/* --------------------------------------------------------------------------
   4. Werkplaats en materiaal
   -------------------------------------------------------------------------- */
.ov-shop { padding-top: var(--section); }
.ov-shop__top { display: grid; gap: var(--space-l) var(--gap); }
.ov-shop__lead .media { aspect-ratio: 3 / 2; }
.ov-shop__lead .caption { margin-inline: var(--pad); }
.ov-shop__intro { display: grid; gap: var(--space-m); justify-items: start; padding-inline: var(--pad); max-width: 40rem; }
.ov-shop__intro p { max-width: 44ch; }

/* Mobiel en tablet: de twee foto's als verspringend paar, de lijsten eronder */
.ov-shop__grid { display: grid; align-items: start; gap: var(--space-xl) var(--gap); margin-top: var(--space-2xl); }
@media (max-width: 599px) {
  .ov-shop__grid .caption { flex-direction: column; gap: .15rem; }
}

.ov-materials { display: grid; gap: var(--space-xl) var(--gap); }
.ov-materials__title { font-size: var(--fs-h3); margin-bottom: 1.1rem; }
.ov-materials__list { border-top: 1px solid var(--inkt); }
.ov-materials__list > div { display: grid; gap: .15rem; padding: .9rem 0 1rem; border-bottom: 1px solid var(--steen-lijn); }
.ov-materials__list dt { font-weight: 600; }
.ov-materials__list dd { color: var(--kiezel); font-size: var(--fs-small); }
/* "liever niet": rustiger, met een dunne doorhaling in de kantlijn */
.ov-materials__col--not .ov-materials__list { border-top-color: var(--lijn-sterk); }
.ov-materials__col--not dt { position: relative; padding-left: 1.6rem; }
.ov-materials__col--not dt::before { content: ""; position: absolute; left: 0; top: .78em; width: 12px; height: 1px; background: var(--kiezel); }
.ov-materials__col--not dd { padding-left: 1.6rem; }
.ov-materials__col:not(.ov-materials__col--not) dt { position: relative; padding-left: 1.6rem; }
.ov-materials__col:not(.ov-materials__col--not) dt::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--mos); background: radial-gradient(circle, var(--mos) 0 2px, transparent 2.5px);
}
.ov-materials__col:not(.ov-materials__col--not) dd { padding-left: 1.6rem; }

@media (min-width: 640px) {
  .ov-materials { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .ov-shop__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: clamp(2.5rem, 5vw, 6rem); }
  .ov-shop__lead .caption { margin-inline: var(--edge) 0; }
  .ov-shop__intro { padding: 0 var(--edge) 3.25rem 0; }

  .ov-shop__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; row-gap: var(--space-2xl); }
  .ov-materials { grid-column: 4 / -1; grid-row: 1; }
}

/* --------------------------------------------------------------------------
   5. Verder lezen: twee bladen
   -------------------------------------------------------------------------- */
.ov-next .sheet-head { margin-bottom: var(--space-l); }
.ov-next__heading { font-size: var(--fs-h3); }
.ov-next__list { display: grid; border-top: 1px solid var(--steen-lijn); }
.ov-next__list li { border-bottom: 1px solid var(--steen-lijn); }
.ov-next__link {
  display: grid; gap: .6rem; justify-items: start;
  padding: 1.75rem 0 1.9rem; text-decoration: none; color: inherit;
}
.ov-next__sym { width: 120px; height: 36px; color: var(--mos); margin-bottom: .6rem; transition: color var(--t) var(--ease), transform var(--t) var(--ease); }
.ov-next__kicker { font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .16em; text-transform: uppercase; color: var(--mos); }
.ov-next__title { font-family: var(--serif); font-optical-sizing: auto; font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.75rem); font-weight: 320; line-height: 1.08; letter-spacing: -.016em; max-width: 20ch; text-wrap: balance; }
.ov-next__more { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; font-weight: 600; color: var(--bos); }
.ov-next__more svg { width: 1.05em; height: 1.05em; transition: transform var(--t) var(--ease); }
.ov-next__link:hover .ov-next__title, .ov-next__link:focus-visible .ov-next__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.ov-next__link:hover .ov-next__more svg, .ov-next__link:focus-visible .ov-next__more svg { transform: translateX(4px); }
.ov-next__link:hover .ov-next__sym { color: var(--bos); transform: translateX(4px); }

@media (min-width: 760px) {
  .ov-next__list { grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--steen-lijn); }
  .ov-next__list li { border-bottom: 0; }
  .ov-next__list li + li { border-left: 1px solid var(--steen-lijn); }
  .ov-next__list li + li .ov-next__link { padding-left: clamp(1.5rem, 3vw, 3rem); }
  .ov-next__link { padding: 2.25rem 2rem 2.5rem 0; }
}
@media (min-width: 960px) {
  .ov-next__list { margin-left: calc((100% + var(--gap)) * 3 / 12); }
}

@media (prefers-reduced-motion: reduce) {
  .ov-next__link:hover .ov-next__sym { transform: none; }
}