/* ==========================================================================
   Havilah Cottage — For families page
   Page-specific only. The page hero, values list, FAQ, testimonial carousel
   and CTA band are shared components and live in components.css; the three
   column layout is the shared .grid.grid--3 from layout.css.

   This file exists for one small block, the "Where to start" signposts.
   base.css zeroes every heading and paragraph margin and only restores them
   for p + p, so a heading followed by a paragraph followed by a button row
   needs its own rhythm.

   Every rule here overrides components.css and layout.css at matching or
   higher specificity, so it only wins because this file loads after them.
   Keep that order in the head.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Where to start signposts
   Each cell is a heading, one muted line, and a button row. The buttons are
   the point of the block, so the text above them stays quiet and tight.
   .btn-row's own margin-top is --s-6, which reads as a gap between sections
   rather than inside a card, so it is pulled in one step here.
   -------------------------------------------------------------------------- */

.signpost h3 { margin-bottom: var(--s-3); }

.signpost p { color: var(--c-muted); }

.signpost .btn-row { margin-top: var(--s-5); }

/* --------------------------------------------------------------------------
   Dividers between the three signposts (admin request, 2026-10-11)
   Without them the three columns read as one block of text. A plain purple
   rule at 20% is the separator: it is not gold and not a gradient, so it is
   not one of the brand ornaments SKILL.md §2.1 rations, and --c-purple-dark-a20
   is the existing token one step up from the a12 hairline used on testimonial
   cards, which needs the extra weight here because the band is lavender
   rather than white.

   The shared .grid gap is replaced by padding, so that the rule sits an equal
   --s-6 from the text on both sides of it. With gap in play the rule would
   hug the column that owns it. The outer edges keep no padding, so the first
   and last columns still line up with the container.

   Grid items stretch by default, so each rule runs the full height of the
   tallest column rather than stopping at its own content.
   -------------------------------------------------------------------------- */

.signposts { gap: 0; }

/* Stacked below 64em: the rule goes above each later item, not beside it. */
.signpost + .signpost {
  border-block-start: 1px solid var(--c-purple-dark-a20);
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-6);
}

/* Responsive overrides come after the rules they override (CLAUDE.md §7). */
@media (min-width: 64em) {
  .signpost + .signpost {
    border-block-start: 0;
    margin-block-start: 0;
    padding-block-start: 0;
    border-inline-start: 1px solid var(--c-purple-dark-a20);
  }

  .signpost { padding-inline: var(--s-6); }

  .signpost:first-child { padding-inline-start: 0; }

  .signpost:last-child { padding-inline-end: 0; }
}