/* ==========================================================================
   Havilah Cottage — homepage-only styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — full-bleed background video (decision P2)
   The video is decorative and must never be the LCP element: the poster paints
   immediately, hero-video.js attaches the sources afterwards, and the H1 is
   real text.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  isolation: isolate;
  min-height: min(38rem, 86svh);
  background: var(--c-purple-dark);
  color: var(--c-ivory);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-hero-media);
}

/* The <picture> wrapper is a block with auto height, so the img's 100% had
   nothing to fill: the poster stopped at its natural ratio below ~1250px and
   left a flat band under it on every phone. */
.hero__media picture { height: 100%; }

.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Portrait crop: keep the two people in frame. */
  object-position: 62% 38%;
}

@media (min-width: 64em) {
  /* The subject sits centre-right; bias the crop so the copy side stays calm. */
  .hero__media img,
  .hero__media video { object-position: 70% 50%; }
}

.hero__media video {
  position: absolute;
  inset: 0;
}

/* Scrim. On a phone the copy spans the full width, so the gradient runs
   vertically — a horizontal one would put the whole visible frame in its
   darkest band and flatten the photo into a purple block. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-hero-scrim);
  background: var(--g-hero-scrim-v);
}

@media (min-width: 64em) {
  /* The brand's left-to-right gradient: deep purple under the copy, easing to
     medium and light purple across the room on the right (stops in tokens.css). */
  .hero__scrim { background: var(--g-hero-scrim-h); }
}

.hero__inner {
  position: relative;
  z-index: var(--z-hero-content);
  align-self: center;
  width: 100%;
  padding-block: var(--s-9) calc(var(--s-9) + var(--s-7));
}

.hero__copy { max-width: 34rem; }

.hero h1 {
  color: var(--c-ivory);
  font-weight: var(--fw-head-strong);
}

/* The lede is a full paragraph, so it is set at body size and body leading:
   clearly subordinate to the H1, and narrower than the copy column so it
   breaks into a readable block rather than running the hero's full width. */
.hero__lede {
  margin-top: var(--s-5);
  max-width: 46ch;
  color: var(--c-ivory);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

.hero .btn-row { margin-top: var(--s-6); }

/* Trust strip pinned to the hero's bottom edge, as in the reference layout. */
.hero__trust {
  position: relative;
  z-index: var(--z-hero-content);
  align-self: end;
  background: var(--c-purple-dark-a85);
  border-top: 1px solid var(--c-gold-light-a40);
  color: var(--c-ivory);
}

/* The one orchestrated moment (SKILL.md §2.5). */
@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * {
    animation: hero-rise var(--dur-slow) var(--ease-out) both;
  }
  .hero__copy > :nth-child(2) { animation-delay: 90ms; }
  .hero__copy > :nth-child(3) { animation-delay: 180ms; }
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 64em) {
  .hero { min-height: min(44rem, 88svh); }
  .hero__copy { max-width: 38rem; }
}

/* --------------------------------------------------------------------------
   Welcome — framed photo beside the brand intro

   The photo is the section's focal point, so the columns are equal rather than
   the 7-5 used for service rows: at 7-5 the image sits in the *smaller* column
   and reads as a thumbnail. A generous column gap keeps the gold border from
   crowding the copy.
   -------------------------------------------------------------------------- */

.welcome__media {
  max-width: min(26rem, 88vw);
  margin-inline: auto;
}

/* From 64em the text column and the photo share top and bottom edges
   (decision P23). The photo is taken out of flow, so it adds no height of its
   own: the row is exactly as tall as the text column, heading to button, and
   the photo fills the stretched cell with object-fit: cover. Nothing is a
   fixed height, so it follows text size, zoom and copy changes.

   The crop is anchored right. The client's face already meets the photo's
   right edge, so the spare width comes off the left (the caregiver's ear and
   the plain wall) and both faces stay in frame down to 1024px.

   The media column is deliberately the larger of the two, because the photo
   carries this section, and the gap is tight so the pair reads as one unit. */
@media (min-width: 64em) {
  .welcome {
    grid-template-columns: 1fr 1.1fr;
    gap: var(--s-6);
    align-items: stretch;
  }

  .welcome__media {
    position: relative;
    max-width: none;
    margin-inline: 0;
  }

  .welcome__photo {
    position: absolute;
    inset: 0;
  }

  .welcome__photo picture,
  .welcome__photo img { height: 100%; }

  .welcome__photo img {
    object-fit: cover;
    object-position: 100% 40%;
  }
}

/* More room overall, so the photo can take a little more of it. */
@media (min-width: 80em) {
  .welcome {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--s-7);
  }
}

/* --------------------------------------------------------------------------
   Journey — intro beside the steps; the steps keep their vertical gold
   connector at every width (components.css, SKILL.md §3)
   -------------------------------------------------------------------------- */

/* The steps column is much taller than the intro; centring would leave the
   heading floating in the middle of empty space. */
.journey-split { align-items: start; }

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

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

@media (min-width: 64em) {
  .journey-section__intro { margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Families / Careers editorial blocks
   -------------------------------------------------------------------------- */

.families__body p,
.careers__body p { color: var(--c-muted); }

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

/* This block carries its own proportions rather than the shared .split--7-5,
   which stays untouched for other sections. The media column goes 420 -> 478px
   at 1440 (+14%) and the gap --s-8 -> --s-6, so the photo sits closer to the
   copy. The text still holds ~62 characters a line, inside the comfortable
   range. Below 64em .split's single column and --s-7 gap still apply, so the
   stacked layout is unchanged. */
@media (min-width: 64em) {
  .careers__body {
    grid-template-columns: 54fr 46fr;
    gap: var(--s-6);
  }
}

.careers__media img { border-radius: var(--r-md); }

/* --------------------------------------------------------------------------
   FAQ column width — long answers stay readable
   -------------------------------------------------------------------------- */

.faq-list { max-width: 56rem; }

.faq-list--center { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Service tiles — four across, this page only
   The shared .grid--tiles goes to three columns at 64em (layout.css), which
   was right for the six services published until 2026-10-09. With four it
   leaves an orphan tile alone on a second row beside a column and a half of
   empty space. Four across keeps them on one row and keeps the section's
   proportions close to what it had, rather than doubling the tile size as a
   two by two block would.

   Scoped here, not in layout.css: /styleguide/ also uses .grid--tiles and
   demonstrates it with its own number of tiles. Repeats the 64em query
   because the rule it overrides lives inside one (CLAUDE.md §7).
   -------------------------------------------------------------------------- */

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