/* ── Hero: text and button must be visible without scrolling ── */
/* min-height, not height: with a large font scale (zoom-font.js) the intro grows the hero
   instead of running under the header. */
.home-hero { position: relative; display: flex; align-items: flex-end; min-height: var(--home-hero-height); overflow: hidden; color: var(--color-white); background: var(--color-ink); }
.home-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-hero__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 70%); }
.home-hero__content { position: relative; width: 100%; padding-top: calc(var(--header-height) + 24px); padding-bottom: 56px; }
.home-hero__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.home-hero__intro { max-width: 560px; font-size: 16px; line-height: 28px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.home-hero .button { flex: none; }

/* ── "actueel": sand band with a diagonal cut on the right ────── */
.news-section { position: relative; isolation: isolate; padding-block: 64px 48px; }
.news-section::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-sand); clip-path: polygon(0 0, 90% 0, 75% 100%, 0 100%); }
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 32px; }

/* ── Project carousel ───────────────────────────────────────── */
.projects-section { padding-block: 64px 72px; }
.projects-section__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.carousel-controls { display: flex; gap: 8px; }
.carousel { overflow: hidden; margin-top: 24px; }
.carousel__track { display: flex; gap: 20px; transition: transform 0.4s ease; will-change: transform; }
.carousel__item { flex: 0 0 calc((100% - 40px) / 3); min-width: 0; }
.projects-section__more { margin-top: 28px; }

@media (max-width: 900px) {
  .news-grid { grid-template-columns: 1fr; gap: 24px; max-width: 480px; }
  .news-section::before { clip-path: none; }
  .carousel__item { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 600px) {
  .home-hero__inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .home-hero__content { padding-bottom: 32px; }
  .carousel__item { flex-basis: 100%; }
}