/* Homepage: compositie van cover, keuze tussen eventstyling en boxen, boxcollectie,
   Dionne en afsluiting. Alles staat onder .home, zodat andere pagina's ongemoeid blijven. */
.home .cta--whatsapp { color: var(--color-cream); }
.home .chapter { --chapter-space: clamp(2.5rem, 4vw, 4rem); }
.home .chapter-title { font-size: clamp(2rem, 3.4vw, 3rem); }
.home .cover { grid-template-areas: "text" "media"; }
.home .cover__text { padding: 2rem var(--edge); }
.home .cover__title { font-size: clamp(2rem, 5vw, 4rem); margin-bottom: 1.25rem; }
.home .cover__lead { font-size: 1.05rem; margin-bottom: 1.5rem; }
.home .cover__actions { gap: .75rem; }
.home .cover__actions .cta { padding: .85rem 1.25rem; font-size: 1rem; }
.home .cover__media { height: 17rem; }
.home .cover__img { object-position: 50% 15%; }
.home .cover__media::after { background: none; }
.home .cover__media {
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 3.5rem);
  mask-image: linear-gradient(to top, transparent 0, #000 3.5rem);
}
.home .story-wave--deep, .home .story-wave--medium { margin-block: -1px; }
.home .story-wave--deep { height: clamp(3rem, 7vw, 6rem); }
.home .story-wave--medium { height: clamp(2.5rem, 6vw, 5rem); }
.home .chapter--spread {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem; padding-inline: var(--edge);
  scroll-margin-top: calc(var(--header-height-lg) + 1rem);
}
.home .spread__opening {
  grid-column: 1 / -1; max-width: 70rem; margin: 0 auto .5rem;
  padding: 0; text-align: center;
}
.home .spread__act {
  grid-column: auto; position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr);
  padding: 0; margin: 0; width: 100%; max-width: none;
  min-height: 26rem; border-radius: 1.5rem; overflow: hidden;
  background: var(--color-dark-brown);
}
.home .spread__act .spread__media {
  position: absolute; inset: 0; grid-area: auto; margin: 0;
  border-radius: 0; aspect-ratio: auto; z-index: -2;
}
.home .spread__act::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(30,20,15,.86), rgba(30,20,15,.55));
}
.home .spread__act .spread__content {
  grid-area: 1 / 1; align-self: end; max-width: 32rem;
  padding: clamp(1.5rem, 3vw, 2.5rem); gap: .85rem;
}
.home .spread__text { line-height: 1.6; }
.home .spread__content .cta { font-size: 1rem; padding: .8rem 1.2rem; }
.home .chapter--walnut .spread__content .cta {
  color: var(--color-dark-brown); background: var(--color-on-walnut);
  border-color: var(--color-on-walnut);
}
.home .chapter--walnut .spread__content .cta:hover { background: var(--color-cream); }
.home .boxes__opening { text-align: center; margin-bottom: 2rem; }
.home .chapter--boxes .box-collection__grid { gap: 2rem 1.5rem; }
.home .box-tile__body { grid-template-columns: minmax(0,1fr); border: 0; padding: 0; gap: .4rem; margin-top: 1rem; }
.home .box-tile__name { font-size: 2.5rem; }
.home .box-tile__price { grid-row: 2; color: var(--color-copper-deep); margin-top: .35rem; }
.home .boxes__footer { margin-top: 2rem; }
.home .chapter--close { --chapter-space: clamp(3rem, 5vw, 4.25rem); }
.home .close { gap: 1.25rem; }
.home .close__tagline { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--color-ink); }
.home .close__tagline em { color: var(--color-accent); }

@media (min-width: 640px) {
  .home .cover__actions { max-width: none; flex-wrap: wrap; }
  .home .chapter--boxes .box-collection__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home .chapter--spread { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home .spread__act { min-height: 30rem; }
}
@media (min-width: 1024px) {
  .home .cover { grid-template-columns: 1fr 1fr; grid-template-areas: "text media"; min-height: clamp(36rem, calc(100svh - 9rem), 80rem); }
  .home .cover__text { width: auto; max-width: none; align-self: center; padding: 3rem 0 3rem var(--edge); }
  .home .cover__media { position: absolute; inset: 0 0 0 42%; height: auto; width: auto; grid-area: auto; }
  .home .cover__media::after { background: linear-gradient(90deg,var(--color-cream),transparent 28%); }
  .home .cover__title { font-size: clamp(2.6rem,4.1vw,4rem); }
  .home .cover__lead { max-width: 28rem; }
  .home .spread__act { min-height: 26rem; }
}
@media (min-width: 1100px) {
  .home .chapter--boxes .box-collection__grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .home .cover { min-height: calc(100svh - 7rem); grid-template-rows: auto minmax(17rem, 1fr); }
  .home .cover__media { height: auto; }
}

.home .boxes__footer .cta {
  background-color: var(--color-copper-deep);
  border-color: var(--color-copper-deep);
  color: var(--color-cream);
}
.home .boxes__footer .cta:hover { background-color: var(--color-button-hover); border-color: var(--color-button-hover); }

/* Gewoon Dionne: foto links, tekst rechts, alles op de donkere achtergrond van het slot.
   De sectie loopt zonder golf of naad over in de slogan en de knop eronder. Alleen
   selectors voor .chapter--dionne en .chapter--close; niets erboven wordt geraakt. */
.home .chapter--dionne {
  display: block;
  padding-block: clamp(3rem, 5vw, 4.5rem);
}
.home .dionne {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  align-items: center;
}
.home .dionne__portrait {
  grid-area: auto;
  margin: 0;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: none;
  border-radius: var(--radius-photo);
  border-top-left-radius: 4.5rem;
}
.home .dionne__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.home .dionne__content { grid-area: auto; gap: 1rem; max-width: 30rem; }
.home .dionne__text { text-wrap: balance; color: var(--color-on-walnut); }
.home .dionne__content .cta { margin-top: 0.5rem; }

/* De slogan: dezelfde donkere vlak, met rustige ruimte na de foto. */

@media (min-width: 60rem) {
  .home .dionne {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }
  .home .dionne__portrait {
    aspect-ratio: 11 / 10;
    border-top-left-radius: 7rem;
  }
  .home .dionne__portrait img { object-position: 50% 32%; }
  .home .dionne__content { justify-self: start; }
  .home .dionne__content .chapter-title { font-size: clamp(2.25rem, 3.6vw, 3.25rem); }
}

/* Toetsenbordfocus en scrollen naar deze elementen mogen niet onder de sticky header eindigen. */
.home .dionne__portrait,
.home .dionne__content .chapter-title,
.home .dionne__content .cta,
.home .close__tagline,
.home .close .cta { scroll-margin-top: calc(var(--header-height-lg) + 1.5rem); }
@media (max-width: 380px) {
  .home .close__tagline { font-size: 1.55rem; }
}
/* Dionnes feedback: één lettertype en hetzelfde boogportret als Over Dionne. */
.home .dionne__portrait { width: min(78vw, 24rem); aspect-ratio: 2 / 3; border-radius: 999px 999px .5rem .5rem; margin-inline: auto; }
.home .dionne__portrait img { object-position: 50% 50%; }