/*
 * Home page layout.
 *
 * Section wrappers, backgrounds, and alignment rules that are
 * genuinely home-specific. Everything reusable (the content
 * container, the 4-up grid, the section-lead paragraph) lives in
 * _layout.css; shared card components live in _cards.css,
 * _price_cards.css, _hero.css, and _eyebrow.css.
 *
 * If you find yourself reaching for a rule here on a second page,
 * promote it to _layout.css instead of copying it.
 *
 * No literal colour, spacing, or font values — everything routes
 * through var() tokens from _tokens.css. See docs/design_system.md
 * §"Do Nots".
 */

/* Shared section rhythm. Every home section has breathing room, and
 * the about and nieuws bands drop into --stone so the eye gets an
 * alternating band pattern. The hero handles its own padding in
 * _hero.css. */
.home-quick-actions,
.home-about,
.home-tarieven,
.home-nieuws {
  padding-block: 3rem;
}

.home-about,
.home-nieuws {
  background: var(--stone);
}

@media (min-width: 48rem) {
  .home-quick-actions,
  .home-about,
  .home-tarieven,
  .home-nieuws {
    padding-block: 3.5rem;
  }
}

/* Eyebrow-block headings inside a home section carry a small bottom
 * margin so grids and leads don't crowd the heading. */
.container > .eyebrow-block-title {
  margin-bottom: 1.5rem;
}

/* ---- About split layout ------------------------------------------ */

.about-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.about-text .eyebrow-block-title {
  margin-bottom: 1rem;
}

.about-photo-img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (min-width: 48rem) {
  .about-split {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
  }
}

/* ---- Quick actions ------------------------------------------------ */

.home-quick-action {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: box-shadow .2s, transform .2s;
}

.home-quick-action:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.home-quick-action .pattern-link {
  display: inline-block;
  margin-top: 1rem;
}

/* ---- Tarieven anchor offset -------------------------------------- */

.home-tarieven {
  scroll-margin-top: 5rem;
}

/* ---- Nieuws ------------------------------------------------------- */

.home-nieuws-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

@media (min-width: 64rem) {
  .home-nieuws-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.home-nieuws-more {
  margin-top: 2rem;
}

.home-nieuws-more .pattern-link {
  text-decoration: none;
}

/* CTA band at the bottom of the home page — composes the shared
 * .cta-band component from _cta_band.css. No home-specific overrides
 * needed today. */