/* Homepage: intro, gather and about sections run the full width of the screen. */

/* ── Intro + About: edge-to-edge photo beside padded text ── */
.homepage :is(.intro, .about-section) {
  padding: 0;
}
.homepage :is(.intro, .about-section) > .container {
  max-width: none;
  padding: 0;
}
.homepage :is(.intro-inner, .about-inner) {
  gap: 0;
  align-items: stretch;
  min-height: calc(100vh - var(--nav-height));
}
.homepage :is(.intro-text, .about-text) {
  align-self: center;
  padding: var(--section-pad) clamp(24px, 6vw, 120px);
}
.homepage :is(.intro-image, .about-image) {
  aspect-ratio: auto;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
}
.homepage :is(.intro-image, .about-image) img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
.homepage .about-image { position: relative; }
/* The offset frame decoration would poke off-screen at full bleed. */
.homepage .intro-image::before { display: none; }

/* Desktop: same height as the values section (section padding + one 3:5 card
   in a 4-column grid with 2px gaps), measured against the section's own width. */
@media (min-width: 1025px) {
  .homepage :is(.intro, .about-section) { container-type: inline-size; }
  .homepage :is(.intro-inner, .about-inner) {
    min-height: calc(2 * var(--section-pad) + (100cqw - 6px) * 5 / 12);
  }
  .homepage :is(.intro-text, .about-text) { padding-block: 40px; }
}

/* ── Rooms: centred heading above the grid and button below, like the gather section ── */
.homepage .rooms-section {
  padding: clamp(40px, 4vw, 64px) 0 28px;
}
.homepage .rooms-header {
  display: block;
  text-align: center;
  margin-bottom: 28px;
}
.homepage .rooms-header .label {
  color: #977d65;
  font-size: .65rem;
  letter-spacing: .35em;
}
.homepage .rooms-header h2 {
  margin: 14px 0 16px;
  color: var(--forest);
  font-size: clamp(2rem, 4.4vw, 4rem);
  font-weight: 400;
}
.homepage .rooms-header p {
  max-width: 660px;
  margin: 0 auto;
  line-height: 1.55;
}
.homepage .rooms-footer {
  margin-top: 24px;
  text-align: center;
}

/* Gather button at the standard .btn size, matching the rooms button. */
.homepage .gather-screenshot .gather-footer .btn {
  padding: 14px 32px;
  font-size: .78rem;
  letter-spacing: .15em;
}

/* ── Gather: edge-to-edge card grid, header and button stay padded ── */
.homepage .gather-screenshot > .container {
  max-width: none;
  padding-inline: 0;
}
.homepage .gather-screenshot :is(.gather-header, .gather-footer) {
  padding-inline: var(--gutter);
}
.homepage .gather-screenshot .gather-grid {
  gap: 2px;
  /* Equal columns so the centre gap lines up with the rooms grid's centre gap. */
  grid-template-columns: 1fr 1fr;
}

/* Gather: switch to the stacked mobile layout (gather.css's 700px rules) from 1100px down. */
@media (max-width: 1100px) {
  .homepage .gather-screenshot .gather-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    aspect-ratio: auto;
  }
  .homepage .gather-screenshot .gather-card { grid-row: auto; aspect-ratio: 2 / 1; }
  .homepage .gather-screenshot .gather-card-main { aspect-ratio: 4 / 3; }
  .homepage .gather-screenshot .gather-card h4 { font-size: clamp(1.2rem, 4.4vw, 1.65rem); }
}

@media (max-width: 768px) {
  .homepage :is(.intro-inner, .about-inner) { min-height: 0; }
  .homepage :is(.intro-image, .about-image) {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .homepage :is(.intro-text, .about-text) { padding: 48px var(--gutter); }
}
@media (max-width: 700px) {
  .homepage .rooms-header h2 { font-size: clamp(2rem, 7vw, 3rem); }
  .homepage .rooms-header { margin-bottom: 22px; }
  .homepage .gather-screenshot .gather-grid { gap: 2px; grid-template-columns: 1fr; }
}