/* ── Hero (not designed; derived from the home hero and the cards) ── */
/* min-height, not height: a long title grows the hero instead of clipping the text. The text keeps its size when the
   visitor changes the font scale (.no-zoom-font, see base.css). */
.project-hero { position: relative; display: flex; align-items: flex-end; min-height: max(360px, min(70vh, 640px)); overflow: hidden; color: var(--color-white); background: var(--color-placeholder); }
.project-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-hero__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 55%); }
.project-hero__content { position: relative; padding-top: 32px; padding-bottom: 40px; }
.project-hero__title { font-size: clamp(32px, 5vw, 48px); font-weight: 900; line-height: 1.1; }
.project-hero__meta { font-size: 18px; margin-top: 6px; }

.project-detail__description { margin-bottom: 48px; font-size: 18px; line-height: 30px; }

/* Previous / all / next: "alle projecten" stays centred, the neighbours sit at the edges. */
.project-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 48px; }
.project-nav__prev { grid-column: 1; justify-self: start; }
.project-nav__all { grid-column: 2; }
.project-nav__next { grid-column: 3; justify-self: end; }
.project-nav__link { max-width: 100%; gap: 10px; }
.project-nav__link[hidden] { display: none; }
.project-nav__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  /* On a phone the hero has the ratio of the whole photo (--hero-ratio, set on the page; the markup also swaps in the
     uncropped "large" rendition), so nothing is cut off at the top and bottom. The ratio is a minimum: a long title or a
     large font scale (zoom-font.js) makes the hero taller and then only the sides are cropped. */
  .project-hero { min-height: 0; aspect-ratio: var(--hero-ratio, 16 / 9); }
  .project-nav__link { padding: 0 14px; }
  .project-nav__name { display: none; }
}

/* ── Photo slider ───────────────────────────────────────────── */
.slider { margin-bottom: 56px; }
.slider-main { position: relative; aspect-ratio: 16 / 9; background: var(--color-ink); overflow: hidden; }
.slider-main-img { width: 100%; height: 100%; object-fit: contain; transition: clip-path 0.6s ease; }
.slider-main-fade { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; transition: opacity 0.6s ease, clip-path 0.6s ease; }
.slider-main-fade.is-visible { opacity: 1; }
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.slider-arrow-prev { left: 12px; }
.slider-arrow-next { right: 12px; }
.slider-counter { position: absolute; right: 12px; bottom: 12px; padding: 2px 8px; background: rgba(0, 0, 0, 0.5); color: var(--color-white); font-size: 12px; line-height: 1.6; }
.slider-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-block: 8px; scrollbar-width: thin; }
.slider-thumb { flex: 0 0 96px; height: 72px; object-fit: cover; cursor: pointer; opacity: 0.5; border: 2px solid transparent; transition: opacity var(--transition); }
.slider-thumb:hover { opacity: 0.8; }
.slider-thumb.active { opacity: 1; border-color: var(--color-accent); }

/* ── Fact sheet (sand, like the footer) ─────────────────────── */
.factsheet { padding: 32px; background: var(--color-sand); }
.factsheet__list { margin-top: 24px; }
.factsheet__row { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding-block: 12px; border-top: 1px solid rgba(0, 0, 0, 0.12); }
.factsheet__row dt { font-weight: 700; color: var(--color-accent); }
.factsheet__row dd .prose { max-width: none; }

@media (max-width: 600px) {
  .project-hero__image { object-fit: contain; }
  .factsheet { padding: 20px; }
  .factsheet__row { grid-template-columns: 1fr; gap: 2px; }
}

/* ── Subtitle and "bijzonderheden" (news about this project) ── */
.project-hero__subtitle { font-size: 20px; font-weight: 700; line-height: 1.3; margin-top: 4px; }
.project-highlights { margin-top: 56px; scroll-margin-top: calc(var(--header-height) + 16px); }
.project-highlights__list { margin-top: 24px; display: grid; gap: 24px; list-style: none; }
.project-highlights__item { display: grid; gap: 4px; padding-left: 16px; border-left: 3px solid var(--color-accent); }
.project-highlights__title { font-size: 20px; font-weight: 900; line-height: 1.25; color: var(--color-accent); }
.project-highlights__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.project-highlights__body { max-width: 70ch; }