/* ============================================================================
   MORRAPARK v2 — HOMEPAGE
   Landingspagina die doorverwijst naar de subpagina's. Geen enkel ruimtetype
   krijgt voorrang: werkplekken, vergaderruimtes en kantoren zijn gelijkwaardig.
   Groene hero (met foto i.p.v. boeker) + USP-strip + drie gelijke ruimtekaarten.
   Bouwt op base.css / theme.css.
   ============================================================================ */

/* ---- HERO (drenched groen, foto rechts) ---- */
.hero-home { background: var(--brand); color: #fff; position: relative; overflow: hidden; }
.hero-home::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 120% at 88% 0%, rgba(203,177,142,.18), transparent 55%);
}
.hero-home .container {
  position: relative; display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center;
  padding-top: clamp(3rem, 6vw, 4.8rem); padding-bottom: clamp(3rem, 6vw, 4.8rem);
}
.hero-home .kicker { color: var(--accent); }
.hero-home .kicker::before { background: var(--accent); }
.hero-home h1 { color: #fff; margin: 0 0 1.1rem; }
.hero-home h1 strong { color: var(--accent); }
.hero-home__lead { color: rgba(255,255,255,.9); font-size: var(--text-lg); line-height: 1.5; max-width: 34rem; margin: 0 0 1.8rem; }
.hero-home__cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero-home__trust {
  display: flex; flex-wrap: wrap; gap: .55rem 1.6rem; list-style: none; padding: 0;
  margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.22);
}
.hero-home__trust li { display: flex; align-items: center; gap: .45rem; font-size: var(--text-sm); color: rgba(255,255,255,.88); }
.hero-home__trust svg { width: 1.05rem; height: 1.05rem; stroke: var(--accent); flex: none; }
.hero-home__media {
  border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3.3;
  border: 1px solid rgba(203,177,142,.3); box-shadow: 0 1.4rem 3rem rgba(0,0,0,.28);
}

/* De USP-strip staat in base.css: hij wordt ook op de ruimtepagina's gebruikt. */

/* ---- RUIMTES (drie gelijkwaardige kaarten) ---- */
.rooms-home { padding: clamp(3.5rem,7vw,6rem) 0; }
.rooms-home__head { max-width: 44rem; margin: 0 0 2.6rem; }
.rooms-home__head .lead { margin-top: 1rem; }
.rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.room-card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: transform .16s cubic-bezier(.22,1,.36,1), box-shadow .2s;
}
.room-card:hover { transform: translateY(-3px); box-shadow: 0 1rem 2.2rem rgba(13,46,34,.15); text-decoration: none; }
.room-card__media { aspect-ratio: 3 / 2; }
.room-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.room-card h3 { color: var(--ink); }
.room-card p { color: var(--ink-lead); font-size: var(--text-sm); margin: .5rem 0 1.1rem; }
.room-card__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; }
.room-card__meta {
  margin-top: auto; display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--text-2xs); color: var(--site-accent); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: .1em;
}
.room-card__meta svg { width: 1rem; height: 1rem; stroke: currentColor; transition: transform .2s cubic-bezier(.22,1,.36,1); }
.room-card:hover .room-card__meta svg { transform: translateX(4px); }

/* ---- DUURZAAM split ---- */
.green-home { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.green-home .container { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding-top: clamp(3rem,6vw,5rem); padding-bottom: clamp(3rem,6vw,5rem); }
.green-home__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow); }

/* ---- REVIEWS ---- */
.reviews-home { padding: clamp(3.5rem,7vw,6rem) 0; }
.reviews-home__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; margin-top: 2.2rem; }

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .hero-home .container { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .hero-home__media { order: 0; aspect-ratio: 16/10; }
  .rooms { grid-template-columns: 1fr; }
  .green-home .container { grid-template-columns: 1fr; gap: 2rem; }
  .green-home__media { order: -1; }
  .reviews-home__grid { grid-template-columns: 1fr; }
}