/* Groenhart — Projecten (overzicht). Gedeelde componenten staan in style.css.
   Compositie: kop met eigen projectkaart (de punten zijn de links), uitgelicht project op donker,
   drie casusrijen die steeds anders zijn opgebouwd, een typografisch tussenstuk. */

/* --------------------------------------------------------------------------
   1. Paginakop: titel en projectkaart
   -------------------------------------------------------------------------- */
.pj-head {
  display: grid; gap: var(--space-m) var(--gap);
  padding-top: var(--head-top);
  padding-bottom: var(--space-2xl);
}
.pj-head__title { max-width: 14ch; }
.pj-head__lead { max-width: 40ch; }

.pj-map { margin-top: var(--space-l); }
.pj-map .sheet { max-width: 560px; }

/* Speldenprikken op de kaart: elke prik is een link naar het project op deze pagina */
.pin { cursor: pointer; }
.pin__hit { fill: transparent; }
.pin:focus { outline: none; }
.pin:focus-visible .pin__hit { fill: none; stroke: var(--bos); stroke-width: 2.5; r: 26px; } /* trefvlak r=33 (≥ 44px), focusring blijft dicht om de pin */
/* kleine kaartteksten leesbaar houden: de kaart staat smal (ca. 270–300px) */
.pj-map .map-ink-text { font-size: 14px; letter-spacing: .1em; }
.pj-map .map-label--water { font-size: 14px; }
.pj-map .pin__n { font-size: 13px; transform: translateY(.6px); }
/* 960–1059px: de kaart staat hier het kleinst (schaal ≈ 0,65) */
@media (min-width: 960px) and (max-width: 1059px) { .pj-map .map-label, .pj-map .pin__n { font-size: 14px; } }
.pin__dot { fill: var(--linnen-licht); stroke: var(--bos); stroke-width: 1.4; transition: fill var(--t-fast), stroke-width var(--t-fast); }
.pin__n { fill: var(--bos); font-size: 11.5px; font-weight: 700; letter-spacing: 0; transition: fill var(--t-fast); }
.pin--1 .pin__dot { fill: var(--bos); }
.pin--1 .pin__n { fill: var(--linnen-licht); }
.pin:is(:hover, :focus-visible) .pin__dot { fill: var(--mos); stroke: var(--mos); stroke-width: 6; }
.pin:is(:hover, :focus-visible) .pin__n { fill: var(--linnen-licht); }
.pin:is(:hover, :focus-visible) .map-label { text-decoration: underline; }

@media (min-width: 700px) and (max-width: 959px) {
  .pj-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--space-l); }
  .pj-head__label, .pj-head__title, .pj-head__lead { grid-column: 1 / -1; }
  .pj-map { grid-column: 1 / -1; margin-top: var(--space-m); }
}
@media (min-width: 960px) {
  .pj-head { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--space-l); align-items: start; }
  .pj-head__label { grid-column: 1 / span 3; padding-top: 1.1rem; }
  .pj-head__title { grid-column: 4 / -1; }
  .pj-head__lead { grid-column: 4 / span 5; grid-row: 2; }
  .pj-map { grid-column: 9 / -1; grid-row: 2; margin-top: .35rem; }
}

/* --------------------------------------------------------------------------
   Gedeeld binnen deze pagina
   -------------------------------------------------------------------------- */
.pj-plants { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; font-size: 1.08rem; }
.pj-plants li { display: inline-flex; align-items: center; gap: .6rem; }
.pj-plants li::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--mos); background: radial-gradient(circle, var(--mos) 0 1.2px, transparent 1.6px);
}
.section--dark .pj-plants li::before { border-color: var(--mos-licht); background: radial-gradient(circle, var(--mos-licht) 0 1.2px, transparent 1.6px); }

.pj-facts dt { font-size: var(--fs-small); }
.pj-facts dd { font-size: var(--fs-small); }
.pj-facts > div { grid-template-columns: 5.75rem minmax(0, 1fr); column-gap: 1rem; padding: .75rem 0; }
@media (min-width: 640px) { .pj-facts > div { grid-template-columns: 7.5rem 1fr; padding: .8rem 0; } }

.pj-story { display: grid; gap: .45rem; max-width: 52ch; }
.pj-story p + .pj-story__h { margin-top: 1rem; }
.pj-story__h {
  font-family: var(--sans); font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mos); line-height: 1.3;
}
.pj-story p { color: var(--inkt); }

.pj-case__title { font-size: var(--fs-h2); }

/* --------------------------------------------------------------------------
   2. Uitgelicht (donker)
   -------------------------------------------------------------------------- */
.pj-feature__head { display: grid; gap: var(--space-m) var(--gap); padding-top: var(--space-m); border-top: 1px solid var(--lijn-donker); margin-bottom: var(--space-xl); }
.pj-feature__title { font-size: clamp(2.3rem, 1.5rem + 3vw, 4.5rem); font-weight: 300; line-height: 1.02; max-width: 17ch; }
.pj-feature__title a { text-decoration: none; }
.pj-feature__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.pj-feature__media { display: block; aspect-ratio: 3 / 2; margin-inline: calc(-1 * var(--pad)); background: var(--bos); }
.pj-feature__media img { object-position: 50% 60%; }
.pj-feature__body { display: grid; gap: var(--space-l) var(--gap); margin-top: var(--space-l); }
.pj-feature__text { display: grid; gap: 1.1rem; align-content: start; }
.pj-feature__text > p:not(.pj-feature__lead) { color: var(--mist); max-width: 50ch; }
.pj-feature__lead { font-family: var(--serif); font-size: var(--fs-lead); font-weight: 340; line-height: 1.38; max-width: 36ch; }
.pj-feature__side { display: grid; gap: var(--space-l); align-content: start; justify-items: start; }
.pj-feature__side .facts { width: 100%; }
.pj-feature__btn { width: 100%; }

.pj-chapters { display: grid; gap: var(--space-m) var(--gap); margin-top: var(--space-2xl); padding-top: var(--space-m); border-top: 1px solid var(--lijn-donker); }
.pj-chapters__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); border-top: 1px solid var(--lijn-donker); }
.pj-chapters__list li { border-bottom: 1px solid var(--lijn-donker); }
.pj-chapters__list a {
  display: flex; align-items: baseline; gap: .8rem; min-height: 52px; padding: .8rem 0;
  font-size: var(--fs-small); color: var(--tekst-licht); text-decoration: none;
}
.pj-chapters__list a:hover { color: var(--mos-licht); text-decoration: underline; text-underline-offset: .22em; }

@media (min-width: 640px) {
  .pj-feature__btn { width: auto; }
}
@media (min-width: 960px) {
  .pj-feature__head { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .pj-feature__label { grid-column: 1 / span 3; padding-top: .9rem; }
  .pj-feature__title { grid-column: 4 / -1; }
  .pj-feature__media { aspect-ratio: 16 / 9; margin-inline: 0; }
  .pj-feature__body { grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: var(--space-xl); }
  .pj-feature__text { grid-column: 4 / span 5; }
  .pj-feature__side { grid-column: 9 / -1; }
  .pj-chapters { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pj-chapters__label { grid-column: 1 / span 3; padding-top: .35rem; }
  .pj-chapters__list { grid-column: 4 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   3–4. Casusrijen
   -------------------------------------------------------------------------- */
.pj-case__grid { display: grid; gap: var(--space-l) var(--gap); }
.pj-case__text { display: grid; gap: var(--space-m); align-content: start; justify-items: start; }
.pj-case__text .facts, .pj-case__side .facts { width: 100%; }

/* Detail overlapt het hoofdbeeld; een linnen rand houdt ze los van elkaar */
.pj-case__detail { position: relative; z-index: 1; }
.pj-case__detail .media { outline: 8px solid var(--linnen); }
.pj-case--b .pj-case__detail .media { outline-color: var(--linnen-licht); }

/* Naarden (mobiel): beeld tot de rand, detail half over de onderrand */
.pj-case--a .pj-case__main .media { margin-inline: calc(-1 * var(--pad)); }
.pj-case--a .pj-case__detail { width: 52%; justify-self: end; margin-top: calc(-1 * var(--space-l) - 22vw); }
.pj-case--a .pj-case__main .caption { max-width: 44%; flex-direction: column; gap: .2rem; }

/* Laren (mobiel): staand beeld, detail links ervoor */
.pj-case--b .pj-case__main { width: 86%; justify-self: end; }
.pj-case--b .pj-case__detail { width: 48%; margin-top: calc(-1 * var(--space-l) - 26vw); }
.pj-case--b .pj-case__main .caption { margin-left: 44%; flex-direction: column; gap: .2rem; }

@media (min-width: 960px) {
  .pj-case__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; row-gap: 0; }

  /* Naarden: beeld 1–7, detail schuift over de hoek naar 6–8, tekst 9–12 */
  .pj-case--a .pj-case__main { grid-column: 1 / span 7; grid-row: 1; }
  .pj-case--a .pj-case__main .media { margin-inline: 0; }
  .pj-case--a .pj-case__main .caption { max-width: 62%; flex-direction: row; }
  .pj-case--b .pj-case__main .caption { margin-left: 0; flex-direction: row; }
  .pj-case--a .pj-case__detail { grid-column: 6 / span 3; grid-row: 2; width: auto; justify-self: stretch; margin-top: -11rem; }
  .pj-case--a .pj-case__text { grid-column: 9 / -1; grid-row: 1 / span 2; padding-top: .25rem; }

  /* Laren: tekst 1–5 met het detail eronder (3–5), groot staand beeld 7–12 */
  .pj-case--b .pj-case__text { grid-column: 1 / span 5; grid-row: 1; }
  .pj-case--b .pj-case__detail { grid-column: 3 / span 3; grid-row: 2; width: auto; margin-top: var(--space-xl); }
  .pj-case--b .pj-case__main { grid-column: 7 / -1; grid-row: 1 / span 2; width: auto; justify-self: stretch; margin-top: 2.5rem; }
}
@media (min-width: 1200px) {
  /* Laren breed: tekst 1–4, detail 5–7 schuift over de linkeronderhoek van het staande beeld (7–12) */
  .pj-case--b .pj-case__text { grid-column: 1 / span 4; }
  .pj-case--b .pj-case__main { grid-column: 7 / -1; grid-row: 1; margin-top: 3rem; }
  .pj-case--b .pj-case__detail { grid-column: 5 / span 3; grid-row: 1; align-self: end; margin: 0 0 5.5rem; }
  .pj-case--b .pj-case__detail .caption { max-width: 60%; flex-direction: column; gap: .2rem; }
}

/* --------------------------------------------------------------------------
   5. Typografisch tussenstuk (donker)
   -------------------------------------------------------------------------- */
.pj-interlude__grid { display: grid; gap: var(--space-l) var(--gap); }
.pj-interlude__statement {
  font-size: clamp(2.05rem, 1.25rem + 3.2vw, 4.6rem); font-weight: 300; line-height: 1.06; letter-spacing: -.024em; max-width: 21ch;
}
.pj-interlude__body { display: grid; gap: var(--space-m); }
.pj-interlude__intro { color: var(--mist); max-width: 46ch; }
.pj-questions { display: grid; border-top: 1px solid var(--lijn-donker); }
.pj-questions li {
  display: grid; grid-template-columns: 2.25rem 1fr; align-items: baseline; gap: .75rem;
  padding: 1rem 0; border-bottom: 1px solid var(--lijn-donker);
  font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); font-weight: 340; line-height: 1.25;
}
.pj-questions__n { font-family: var(--serif); font-size: 1.1em; color: var(--mos-licht); }
.pj-interlude__cta { display: grid; gap: var(--space-m); justify-items: start; padding-top: var(--space-m); }
.pj-interlude__cta-text { font-weight: 600; max-width: 34ch; }
@media (max-width: 559px) {
  .pj-interlude__cta .btn { width: 100%; }
}
@media (min-width: 960px) {
  .pj-interlude__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .pj-interlude__label { grid-column: 1 / span 3; padding-top: 1.1rem; }
  .pj-interlude__statement { grid-column: 4 / -1; }
  .pj-interlude__body { grid-column: 4 / span 5; }
  .pj-interlude__cta { grid-column: 10 / -1; align-self: end; padding-top: 0; }
  .pj-questions li { padding: 1.15rem 0; }
}

/* --------------------------------------------------------------------------
   6. Bussum: beeld in volle breedte, tekst eronder
   -------------------------------------------------------------------------- */
.pj-case--c { padding-top: 0; }
.pj-wide { margin-bottom: var(--space-xl); }
.pj-wide__media { aspect-ratio: 3 / 2; }
.pj-wide__media img { object-position: 50% 38%; }
.pj-wide figcaption { margin-top: .7rem; }
.pj-wide .caption { display: flex; }
.pj-case--c .pj-case__head { display: grid; gap: var(--space-m); align-content: start; }
.pj-case__side { display: grid; gap: var(--space-m); align-content: start; justify-items: start; }
@media (min-width: 760px) {
  .pj-wide__media { aspect-ratio: 16 / 9; max-height: 82vh; width: 100%; }
}
@media (min-width: 960px) {
  .pj-case--c .pj-case__grid { row-gap: var(--space-l); }
  .pj-case--c .pj-case__head { grid-column: 1 / span 3; }
  .pj-case--c .pj-story { grid-column: 4 / span 5; }
  .pj-case--c .pj-case__side { grid-column: 9 / -1; }
  .pj-case--c .pj-case__title { font-size: clamp(2.1rem, 1.4rem + 1.6vw, 3rem); }
}
@media (min-width: 1200px) {
  .pj-wide__media { aspect-ratio: 21 / 9; }
}