/* ==========================================================================
   Havilah Cottage — layout: container, section rhythm, generic grids
   Mobile-first. Breakpoints: 40em (640) · 64em (1024) · 80em (1280).
   ========================================================================== */

/* --- Container ---------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide { max-width: 84rem; }
.container--narrow { max-width: 52rem; }

/* --- Section rhythm ------------------------------------------------------
   Rhythm comes from the background changing, not from boxes (SKILL.md §2.3).
   ------------------------------------------------------------------------ */

.section {
  padding-block: var(--section-y);
}

.section--tight { padding-block: var(--s-7); }

.section--ivory { background: var(--c-ivory); }
.section--lavender { background: var(--c-lavender); }
.section--lavender-light { background: var(--c-lavender-light); }
.section--white { background: var(--c-white); }

.section--dark {
  background: var(--c-purple-dark);
  color: var(--c-ivory);
}

.section--dark h2,
.section--dark h3 { color: var(--c-ivory); }

/* --- Section heading block ---------------------------------------------- */

.section__head {
  margin-bottom: var(--s-7);
}

/* A visual tagline between the h2 and the intro paragraph.
   Styled like an h3 but on a semantic <p>.  The compound selector
   overrides .section__head p { color: --c-muted }. */
.section__head .section__subtitle {
  font-family: var(--ff-head);
  font-weight: var(--fw-head);
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  color: var(--c-purple-dark);
  text-wrap: balance;
}

.section__head p {
  margin-top: var(--s-4);
  color: var(--c-muted);
}

.section--dark .section__head p { color: var(--c-ivory-a85); }

.section__head--center {
  text-align: center;
}

.section__head--center p {
  margin-inline: auto;
}

/* --- Prose flow ----------------------------------------------------------
   A text block where the spacing between elements is handled once, rather
   than with a margin utility on every paragraph.
   ------------------------------------------------------------------------ */

.prose > * + * { margin-top: var(--s-4); }

.prose > h2 + p,
.prose > h3 + p { margin-top: var(--s-5); }

.prose > * + .btn-row,
.prose > * + .includes__title { margin-top: var(--s-6); }

/* --- Generic grids ------------------------------------------------------ */

.grid {
  display: grid;
  gap: var(--s-5);
}

/* --- Split: copy beside media ------------------------------------------- */

.split {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}

/* --- Breakpoints -------------------------------------------------------- */

@media (min-width: 40em) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
  :root { --section-y: var(--s-10); }

  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--tiles { grid-template-columns: repeat(3, 1fr); }

  .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .split--media-first > :first-child { order: 2; }
  .split--media-first > :last-child { order: 1; }

  /* Asymmetric split for editorial blocks: copy gets more room. */
  .split--7-5 { grid-template-columns: 7fr 5fr; }
  .split--5-7 { grid-template-columns: 5fr 7fr; }

  .section__head { max-width: 46rem; }
  .section__head--center { max-width: 52rem; margin-inline: auto; }
}