/* ==========================================================================
   Havilah Cottage — shared service page styles
   Loaded by every /services/<slug>/ page. Extracted from pages/personal-care.css
   on 2026-10-10, when the Companion Care page needed the same rules: nothing in
   that file was Personal Care specific, every selector was a generic service
   page class, so it became this rather than being copied.

   What belongs here: anything two or more service pages need. What does not:
   a rule genuinely unique to one page, which goes in its own pages/<slug>.css
   loaded after this one. The page hero, service row, compare table and pending
   block are shared COMPONENTS and stay in components.css.

   Every rule here overrides components.css at matching specificity, so it only
   wins because this file loads after it. Keep that order in every page head.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero type on service pages
   The admin removed the hero's CTA row on 2026-10-09, so the heading and lede
   are the whole composition and carry it at a larger size. The shared
   .page-hero keeps its button row and its h1/lede sizes for the service pages
   still to be built, so nothing else moves.

   The copy column widens from the shared 36rem: at --fs-display the heading
   would otherwise run to five lines. The lede keeps its own 46ch measure, so
   the wider column lengthens the heading, not the reading line.

   Both selectors match the component's specificity (0-1-1 and 0-1-0), so these
   win only because this file loads after components.css. Neither rule being
   overridden sits in a media query, so none is repeated here.
   -------------------------------------------------------------------------- */

.page-hero__copy { max-width: 44rem; }

.page-hero h1 { font-size: var(--fs-display); }

.page-hero__lede {
  max-width: 48ch;
  font-size: var(--fs-h4);
}

/* --------------------------------------------------------------------------
   Service row proportions on service pages
   The shared component gives the media column 46% (components.css), which the
   admin approved for the homepage on 2026-10-01. On this page the photograph
   is the thing being explained, so it takes 52% inside the wider container:
   641px rather than 478px at 1440, uncropped, so every alt text still
   describes the whole frame. The homepage is deliberately untouched.

   The media query is required, not decorative: the rule being overridden sits
   inside its own `min-width: 64em` block, and both selectors are single-class,
   so this only wins because this file loads after components.css.
   -------------------------------------------------------------------------- */

@media (min-width: 64em) {
  .service-row { grid-template-columns: 52fr 48fr; }

  .service-row--media-right { grid-template-columns: 48fr 52fr; }
}

/* --------------------------------------------------------------------------
   Pending blocks on service pages
   A pending block replacing a service row body has no image beside it on
   small screens, so it needs the same rhythm as the rows it stands among.
   -------------------------------------------------------------------------- */

.service-row__body .pending { margin-top: var(--s-2); }

/* Removed 2026-10-09: a rule setting apart a pending block that followed a full
   section of approved content (`.values + .pending`, `.team-grid + .pending`,
   `.faq-list + .pending`). All three selectors are dead. The statistics block
   after `.values` was dropped by administration, and `.team-grid` and
   `.faq-list` are not on this page: the owner section became `.owner` in skill
   2.7, and the FAQ uses bare `<details class="faq">`. If a pending block ever
   needs separating from approved content above it again, add the rule back for
   the selector that is actually in the markup. */

/* --------------------------------------------------------------------------
   Meet the owner — portrait beside the biography
   The shared .team-grid is built for a row of four small cards; one card alone
   inherited a quarter-width track, so it had to be capped at 19rem and the
   portrait came out at 304px. This gives the portrait its own column instead,
   as the reference lays the section out, and the biography sits beside it.
   .split supplies the grid, the gap and align-items: center.
   -------------------------------------------------------------------------- */

/* Stacked, the portrait would otherwise run the full container: 707px wide and
   884 tall at 768px. Cap and centre it until there are two columns. */
.owner__portrait {
  max-width: 26rem;
  margin: 0 auto;
}

.owner__portrait img {
  width: 100%;
  border-radius: var(--r-md);
}

/* The team-card treatment, reused so the owner reads as the same family. */
.owner__name {
  margin-bottom: var(--s-1);
  color: var(--c-gold-dark);
  font-family: var(--ff-head);
  font-size: var(--fs-h3);
}

.owner__role {
  color: var(--c-charcoal);
  font-size: var(--fs-base);
}

.owner__body .pending { margin-top: var(--s-5); }

/* Responsive overrides after the rules they override (CLAUDE.md §7). */
@media (min-width: 64em) {
  .owner { grid-template-columns: 50fr 50fr; }

  .owner__portrait {
    max-width: none;
    margin-inline: 0;
  }
}