.homepage-trio-section {
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  background: var(--cream-soft);
}

/* Mobiel: één kolom. De DOM-volgorde is overnachten, gegevens, updates; met
   'order' zetten we dat overal om naar gegevens - overnachten - updates. */
.homepage-trio {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 1rem;
}

.homepage-card--details { order: 1; }
.homepage-card--stay { order: 2; }
.homepage-card--updates { order: 3; }

.homepage-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.4rem, 2.4vw, 2rem);
}

.homepage-card h2 {
  margin-bottom: .75rem;
  font-size: clamp(1.7rem, 2.5vw, 2.4rem);
}

.homepage-card--stay {
  background: var(--cream);
  border-top: 3px solid var(--gold);
}

.homepage-card--stay p:not(.eyebrow) {
  margin-bottom: 1rem;
}

/* Marge boven én onder op auto: de knoppen komen midden in de ruimte die overblijft
   onder de tekst te staan, in plaats van tegen de onderrand geplakt. */
.homepage-card--stay .button-row {
  margin-block: auto;
}

.homepage-card--details {
  color: var(--cream-soft);
  background: var(--olive);
}

.homepage-card--details h2 { color: #fff; }
.homepage-card--details .eyebrow { color: #e3c177; }
.homepage-card--details p:not(.eyebrow) { margin-bottom: 1.25rem; }
.homepage-card--details .button { margin-block: auto; width: 100%; }

.button--light {
  color: var(--olive-dark);
  background: var(--cream-soft);
  border-color: var(--cream-soft);
}

.homepage-card--updates {
  background: #fffdf8;
  border-top: 3px solid var(--gold);
}

.homepage-card--updates .section-heading { align-items: start; }
.homepage-card--updates .section-heading h2 { margin-bottom: 0; }
/* Voorkomt dat 'Alle updates →' over twee regels breekt in de smalle kolom. */
.homepage-card--updates .section-heading .text-link { white-space: nowrap; }
/* Scrollbare nieuwsfeed: alle updates blijven staan, de bezoeker bladert erdoorheen
   zonder dat de pagina meegroeit met elk nieuw bericht. */
.homepage-card--updates .update-list {
  margin-top: 1.25rem;
  max-height: 22rem;
  overflow-y: auto;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.homepage-card--updates .update-card { padding: .95rem 0; }
.homepage-card--updates .update-card h3 { font-size: 1.2rem; }
.homepage-card--updates .update-card p { margin-bottom: .35rem; font-size: .92rem; }

/* Breder scherm: links gegevens boven overnachten, rechts de updates-feed die
   over beide rijen doorloopt. */
@media (min-width: 801px) {
  .homepage-trio { grid-template-columns: 1.6fr 1fr; }
  .homepage-card--details { grid-column: 1; grid-row: 1; }
  .homepage-card--stay { grid-column: 1; grid-row: 2; }
  .homepage-card--updates { grid-column: 2; grid-row: 1 / span 2; }

  /* De feed groeit mee tot deze hoogte en gaat daarna pas scrollen. De waarde ligt
     net boven de huidige inhoud, zodat er nu nog geen schuifbalk staat en de drie
     katernen precies even lang zijn; komt er een update bij, dan scrollt de feed
     zonder dat het blok verder uitrekt. */
  .homepage-card--updates { min-height: 0; }
  .homepage-card--updates .update-list {
    min-height: 0;
    max-height: 46rem;
  }

  /* De ruimte onder de tekst wordt hier door de auto-marges van de knop verdeeld;
     een eigen ondermarge op de alinea zou die verdeling scheeftrekken. Op smalle
     schermen blijft de marge staan, want daar is geen vrije ruimte om te verdelen. */
  .homepage-card--details p:not(.eyebrow) { margin-bottom: 0; }
}

@media (max-width: 520px) {
  .homepage-card--stay .button, .homepage-card--details .button { width: 100%; }
}