/* ==========================================================================
   Seacoast NHIC - homepage sections
   --------------------------------------------------------------------------
   Loaded only by the homepage. Consumes tokens.css, the primitives in base.css,
   and the button/icon primitives in shell.css.

   Breakpoints used here (matching tokens.css, and deliberately aligned with the
   legacy stylesheet's 479/639/768/1023 so the shared shell never reflows at a
   different width than legacy body content on other pages):
     sm 30rem/480 · md 48rem/768 · lg 64rem/1024 · xl 80rem/1280
   ========================================================================== */

/* ==========================================================================
   1. HERO
   ========================================================================== */

.sn-hero {
  /* The green wash fades to the page cream, so the hero reads as one calm
     surface rather than a coloured band with a hard edge. */
  background: linear-gradient(180deg, var(--sn-green-50) 0%, var(--sn-bg) 100%);
  /* NO bottom padding. The trust row already closes the hero with a rule and
     its own leading space, so anything here stacks on top of the next
     section's --sn-section-y and reads as dead air rather than separation.
     Iteration 51 cut this from a full --sn-section-y to 48px for that reason
     and it was still 160px of empty band on desktop (48 here + 112 there);
     see the .sn-hero + .sn-section rule below, which owns that gap now. */
  padding-block: var(--sn-space-7) 0;
}

/* The single seam between the hero and the body of the page.
   Scoped to the adjacent sibling so ONLY this boundary tightens - every other
   section keeps the full --sn-section-y rhythm. 48px is measured from the trust
   row's text to the next eyebrow, which is a clear section break without the
   scroll of nothing that 160px produced. */
.sn-hero + .sn-section {
  padding-block-start: var(--sn-space-7);
}

/* Single centred column at every width, widened in this pass from 52rem to the
   page container so the hero shares the exact left and right edges as every
   section below it. At 1440px the sections all measure 1200px starting at
   x=120; the old 52rem hero measured 832px starting at x=304, which read as a
   narrow ribbon inset inside the page rather than the top of it. The trust row
   at the foot of the hero is already a .sn-container, so this also puts the
   headline on the same axis as the rule beneath it.

   The caps below are set in `ch`, not `rem`, on purpose: `ch` scales with the
   element's own font-size, so each block keeps the same MEASURE (characters per
   line) as the fluid type scale grows. A rem cap would silently tighten the
   line length as the type got bigger. */
.sn-hero__inner {
  max-width: var(--sn-container);
  text-align: center;
}

/* Widened from 26ch to 34ch, which turns the 62-character headline from three
   ragged lines into two balanced ones at desktop (~31 characters each - well
   inside the comfortable range, and display type tolerates longer lines than
   body copy). `text-wrap: balance` from base.css evens the two lines out.

   The threshold is sharper than it looks. The headline's glyphs total ~1929px
   at 64px, so two lines need a box of at least ~980px. At 26ch/960px it was
   ~20px short and fell to THREE lines measuring 790/477/662 - a stranded middle
   line. 34ch/~1122px clears the threshold with margin. If this copy is ever
   rewritten, re-measure: a few characters either way flips the line count.

   The size also grows past --sn-fs-display's 60px ceiling to 64px, so the H1
   still reads as the dominant element now that it spans more width. The clamp's
   floor is 2.375rem/38px - identical to --sn-fs-display's floor - so nothing
   about the mobile hero changes. */
.sn-hero__title {
  font-size: clamp(2.375rem, 1.55rem + 3.67vw, 4rem); /* 38 → 64 */
  margin-block-end: var(--sn-space-5);
  /* max-width with auto margins rather than a narrower container, so the
     bullets and CTA below can use the full centred column width. */
  max-width: 34ch;
  margin-inline: auto;
}

/* The brief calls this an H2. It ships as a <p class="sn-hero__sub"> with the
   copy byte-identical: a 30-word H2 directly beneath the H1 produces a nonsense
   document outline and carries no SEO benefit. Styled at lead size so it reads
   exactly as intended.

   Widened 52ch → 60ch and stepped up from --sn-fs-lead's 22px ceiling to 24px,
   holding roughly the same ratio to the H1 as before (0.37 → 0.375) so the two
   still read as a pair rather than as two unrelated blocks. Mobile floor is
   unchanged at 19px. */
.sn-hero__sub {
  font-size: clamp(1.188rem, 1.03rem + 0.7vw, 1.5rem); /* 19 → 24 */
  color: var(--sn-text);
  max-width: 60ch;
  margin-inline: auto;
  margin-block-end: var(--sn-space-6);
}

.sn-hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sn-space-3);
}

/* The CTA scales with the headline it sits under. .sn-btn--lg alone (56px tall,
   22px text) read undersized once the H1 grew to 64px, so the hero's own
   instance grows to 68px and 24px - matching the subheadline's size exactly,
   which is what keeps the block reading as one deliberate group rather than
   three separately-sized things.

   Scoped to .sn-hero__cta .sn-btn, never to .sn-btn--lg itself: that modifier
   is shared with the assessment page, and this is a hero-specific proportion,
   not a change to the button system. */
.sn-hero__cta .sn-btn {
  /* Full-width on phones - the single most important target on the page. */
  width: 100%;
  text-align: center;
}
@media (min-width: 30rem) {
  .sn-hero__cta .sn-btn {
    width: auto;
  }
}
@media (min-width: 64rem) {
  .sn-hero__cta .sn-btn {
    min-height: 68px;
    padding-inline: var(--sn-space-8);
    font-size: 1.5rem; /* 24px, matching .sn-hero__sub's ceiling */
  }
}
/* Microcopy holds its place at the bottom of the hierarchy: it steps 15 → 17px
   where the subheadline goes 19 → 24px, so it stays clearly subordinate instead
   of creeping up towards body size as everything else grows. */
.sn-hero__cta .sn-microcopy {
  font-size: clamp(0.9375rem, 0.89rem + 0.2vw, 1.0625rem); /* 15 → 17 */
}

/* Bullets sit between the subheadline and the CTA, centred on the same axis as
   the H1 and subheadline above them.

   `width: max-content` + auto margins centres the LIST AS A BLOCK, while the
   rows inside stay left-aligned. That distinction matters: centring each row
   individually puts the three icons at three different horizontal positions,
   which reads as ragged rather than deliberate. Sizing the block to its widest
   item instead gives the icons one clean vertical column while the group as a
   whole still sits centred under the headline.

   `max-width: 100%` lets the block shrink and the text wrap on a narrow phone
   rather than overflowing, and `text-align: left` keeps a wrapped second line
   ragged-right under its own first line instead of centring the fragment. */
.sn-hero__bullets {
  display: grid;
  gap: var(--sn-space-4);
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  margin-block-end: var(--sn-space-7);
  text-align: left;
}
.sn-hero__bullets li {
  display: flex;
  align-items: flex-start;
  gap: var(--sn-space-3);
  /* 17 → 19px: a step up from --sn-fs-body's 18px ceiling, keeping the bullets
     between the microcopy (17) and the subheadline (24) now that both ends of
     the hierarchy have moved. Mobile floor unchanged. */
  font-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  color: var(--sn-ink);
}
.sn-hero__bullets .sn-icon {
  margin-block-start: 2px;
}

/* --- Trust row ---------------------------------------------------------- */

.sn-trustrow {
  display: grid;
  gap: var(--sn-space-3);
  margin-block-start: var(--sn-space-7);
  padding-block-start: var(--sn-space-6);
  border-top: 1px solid var(--sn-line-strong);
}
.sn-trustrow li {
  display: flex;
  align-items: center;
  gap: var(--sn-space-2);
  font-size: var(--sn-fs-sm);
  font-weight: 500;
  color: var(--sn-text);
}
.sn-trustrow .sn-icon {
  color: var(--sn-accent);
}

@media (min-width: 48rem) {
  .sn-trustrow {
    grid-auto-flow: column;
    justify-content: center;
    gap: var(--sn-space-7);
  }
}

@media (min-width: 64rem) {
  .sn-hero {
    /* Top padding only. The bottom stays 0 at every width - the gap below the
       trust row is owned solely by `.sn-hero + .sn-section`, so there is one
       place to change it. This override is why the base rule's `0` appeared not
       to work on desktop while working on mobile. */
    padding-block: var(--sn-space-8) 0;
  }
}

/* ==========================================================================
   2. "IS THIS YOU?" problem cards
   ========================================================================== */

.sn-sectionhead {
  max-width: 60ch;
  margin-block-end: var(--sn-space-7);
}
.sn-sectionhead--center {
  margin-inline: auto;
  text-align: center;
}
.sn-sectionhead h2 {
  margin-block-end: var(--sn-space-4);
}

.sn-problems__grid {
  display: grid;
  gap: var(--sn-space-5);
}
.sn-problem {
  display: flex;
  flex-direction: column;
  gap: var(--sn-space-3);
}
.sn-problem h3 {
  font-size: var(--sn-fs-h4);
}
.sn-problem p {
  font-size: var(--sn-fs-sm);
}
/* The per-card "Start the assessment to see if we can help" link was REMOVED
   from all four cards at iteration 53. Its rule pushed the link to the card's
   bottom edge so the four aligned; with no link there is nothing to push, so
   the rule is deleted. `.sn-problem` keeps its flex column - that is what the
   `gap` between icon, heading and copy relies on. */

@media (min-width: 48rem) {
  .sn-problems__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .sn-problems__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ==========================================================================
   3. PROCESS - how the assessment works
   ========================================================================== */

.sn-process__steps {
  display: grid;
  gap: var(--sn-space-6);
  position: relative;
}
.sn-step {
  display: grid;
  gap: var(--sn-space-3);
  justify-items: start;
  position: relative;
}
.sn-step__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--sn-r-pill);
  background: var(--sn-green-100);
  color: var(--sn-accent);
  font-family: var(--sn-font-serif);
  font-size: var(--sn-fs-h4);
  font-weight: 600;
  /* Sits above the connector line so the line appears to pass behind it. */
  position: relative;
  z-index: 1;
}
.sn-step h3 {
  font-size: var(--sn-fs-h4);
}
.sn-step p {
  font-size: var(--sn-fs-sm);
}

/* Connector: vertical on mobile, horizontal from md. Drawn on the list so it
   spans the whole row rather than being repeated per step. */
.sn-process__steps::before {
  content: "";
  position: absolute;
  background: var(--sn-line-strong);
  left: 22px;
  top: 22px;
  bottom: 22px;
  width: 2px;
}

/* The .sn-process__cta block ("Start My Assessment" + microcopy) was REMOVED at
   iteration 53, along with six other in-page CTAs, leaving only the header and
   hero. Its CSS is deleted rather than left behind as dead rules - recover from
   git history if a second CTA is ever reinstated. */

@media (min-width: 48rem) {
  .sn-process__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sn-space-6);
  }
  .sn-process__steps::before {
    left: 22px;
    right: 22px;
    top: 22px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
}

/* ==========================================================================
   4. SERVICES
   ========================================================================== */

.sn-services__grid {
  display: grid;
  gap: var(--sn-space-5);
}
.sn-service {
  display: flex;
  flex-direction: column;
  gap: var(--sn-space-3);
}
.sn-service h3 {
  font-size: var(--sn-fs-h3);
}
.sn-service > p {
  font-size: var(--sn-fs-sm);
}
.sn-service__primary {
  margin-block-start: auto;
  padding-block-start: var(--sn-space-2);
}
.sn-service__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sn-space-2);
  padding-block-start: var(--sn-space-3);
  border-top: 1px solid var(--sn-line);
}
.sn-service__chips a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: var(--sn-space-1) var(--sn-space-3);
  border: 1px solid var(--sn-line);
  border-radius: var(--sn-r-pill);
  background: var(--sn-bg-alt);
  font-size: var(--sn-fs-xs);
  font-weight: 500;
  color: var(--sn-text);
  text-decoration: none;
}
.sn-service__chips a:hover {
  border-color: var(--sn-green-300);
  background: var(--sn-green-50);
  color: var(--sn-accent);
  text-decoration: none;
}

.sn-services__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sn-space-3) var(--sn-space-6);
  justify-content: center;
  margin-block-start: var(--sn-space-7);
  padding-block-start: var(--sn-space-6);
  border-top: 1px solid var(--sn-line);
}

/* Deliberately 1-col until lg: these cards carry the most copy on the page, and
   a 2-col stage leaves a single orphan card on the second row. */
@media (min-width: 64rem) {
  .sn-services__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   5. PILLARS + BIOS
   ========================================================================== */

.sn-pillars__grid {
  display: grid;
  gap: var(--sn-space-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Flat, no card chrome - four boxed cards here would make the section shout
   when its job is to reassure. */
.sn-pillar {
  display: grid;
  gap: var(--sn-space-2);
  justify-items: start;
}
.sn-pillar h3 {
  font-size: var(--sn-fs-h4);
}
.sn-pillar p {
  font-size: var(--sn-fs-sm);
}

@media (min-width: 64rem) {
  .sn-pillars__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.sn-bios {
  display: grid;
  gap: var(--sn-space-5);
  margin-block-start: var(--sn-space-8);
}
.sn-bio {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--sn-space-4);
  align-items: start;
}
.sn-bio img {
  width: 96px;
  height: 96px;
  border-radius: var(--sn-r-pill);
  object-fit: cover;
  object-position: 50% 20%;
}
.sn-bio h3 {
  font-size: var(--sn-fs-h4);
  margin-block-end: var(--sn-space-1);
}
.sn-bio__role {
  display: block;
  font-size: var(--sn-fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sn-accent);
  margin-block-end: var(--sn-space-3);
}
.sn-bio p {
  font-size: var(--sn-fs-sm);
}

.sn-bios__foot {
  display: flex;
  justify-content: center;
  margin-block-start: var(--sn-space-6);
}

@media (min-width: 48rem) {
  .sn-bios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sn-space-7);
  }
}

/* ==========================================================================
   6. TESTIMONIALS
   ========================================================================== */

.sn-testimonials__grid {
  display: grid;
  gap: var(--sn-space-5);
}
.sn-quote {
  margin: 0;
  padding: var(--sn-space-6);
  background: var(--sn-surface);
  border: 1px solid var(--sn-line);
  border-radius: var(--sn-r-lg);
  box-shadow: var(--sn-shadow-sm);
  display: flex;
  flex-direction: column;
}
/* The single sanctioned use of the logo's gold on the page. A hairline, not a
   fill - enough to warm the section without tipping into med-spa. */
.sn-quote::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 3px;
  background: var(--sn-logo-gold);
  margin-block-end: var(--sn-space-4);
}
.sn-quote blockquote {
  margin: 0;
  font-size: var(--sn-fs-sm);
  color: var(--sn-text);
}
.sn-quote figcaption {
  margin-block-start: var(--sn-space-4);
  padding-block-start: var(--sn-space-3);
  border-top: 1px solid var(--sn-line);
  font-size: var(--sn-fs-sm);
  font-weight: 600;
  color: var(--sn-ink);
}

@media (min-width: 48rem) {
  .sn-testimonials__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Below md: a CSS-only scroll-snap carousel. No JS, no slick, no jQuery - the
   legacy homepage loaded slick.min.js plus a second jQuery copy to do this. */
@media (max-width: 47.99rem) {
  .sn-testimonials__grid {
    display: flex;
    gap: var(--sn-space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--sn-gutter);
    /* Bleed to the viewport edges so the next card peeks in, which is what
       tells someone the row scrolls. */
    margin-inline: calc(var(--sn-gutter) * -1);
    padding-inline: var(--sn-gutter);
    padding-block-end: var(--sn-space-2);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .sn-testimonials__grid::-webkit-scrollbar {
    display: none;
  }
  .sn-quote {
    flex: 0 0 min(85%, 22rem);
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   7. LOCATIONS
   ========================================================================== */

.sn-locations__grid {
  display: grid;
  gap: var(--sn-space-5);
}

/* ==========================================================================
   8. FREQUENTLY ASKED QUESTIONS
   ========================================================================== */

.sn-faq__layout {
  display: grid;
  gap: var(--sn-space-7);
}
.sn-faq__intro {
  max-width: 24rem;
}
.sn-faq__intro .sn-eyebrow {
  display: block;
  margin-block-end: var(--sn-space-3);
}
.sn-faq__intro h2 {
  margin-block-end: var(--sn-space-4);
}
.sn-faq__intro p {
  font-size: var(--sn-fs-sm);
}
.sn-faq__list {
  border-top: 1px solid var(--sn-line-strong);
}
.sn-faq__item {
  border-bottom: 1px solid var(--sn-line-strong);
}
.sn-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sn-space-4);
  min-height: 4.5rem;
  padding-block: var(--sn-space-3);
  color: var(--sn-ink);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.sn-faq__item summary::-webkit-details-marker {
  display: none;
}
.sn-faq__item summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--sn-accent);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 180ms ease;
}
.sn-faq__item[open] summary::after {
  transform: rotate(45deg);
}
.sn-faq__item summary:focus-visible {
  outline: 2px solid var(--sn-accent);
  outline-offset: -2px;
}
.sn-faq__answer {
  max-width: 65ch;
  padding: 0 var(--sn-space-7) var(--sn-space-5) 0;
}
.sn-faq__answer p {
  margin: 0;
  color: var(--sn-text);
  font-size: var(--sn-fs-sm);
}

@media (min-width: 64rem) {
  .sn-faq__layout {
    grid-template-columns: minmax(16rem, 0.75fr) minmax(0, 1.25fr);
    align-items: start;
    gap: var(--sn-space-8);
  }
  .sn-faq__intro {
    position: sticky;
    top: calc(var(--sn-header-h) + var(--sn-space-5));
  }
}
.sn-location h3 {
  font-size: var(--sn-fs-h3);
  margin-block-end: var(--sn-space-4);
}
.sn-location__addr {
  display: flex;
  align-items: flex-start;
  gap: var(--sn-space-3);
  font-size: var(--sn-fs-sm);
  margin-block-end: var(--sn-space-5);
}
.sn-location__addr .sn-icon {
  margin-block-start: 2px;
}

/* A <dl>, not the legacy <table>. The table does not reflow at 360px; this
   does, collapsing to stacked rows. */
.sn-hours {
  margin: 0 0 var(--sn-space-5);
  font-size: var(--sn-fs-sm);
}
.sn-hours > div {
  display: grid;
  gap: var(--sn-space-1);
  padding-block: var(--sn-space-2);
  border-bottom: 1px solid var(--sn-line);
}
.sn-hours > div:last-child {
  border-bottom: 0;
}
.sn-hours dt {
  font-weight: 600;
  color: var(--sn-ink);
}
.sn-hours dd {
  margin: 0;
  color: var(--sn-text);
  /* Times line up in the narrow column instead of jittering. */
  font-variant-numeric: tabular-nums;
}

.sn-location__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sn-space-2) var(--sn-space-5);
  padding-block-start: var(--sn-space-3);
  border-top: 1px solid var(--sn-line);
}

/* The .sn-callout block ("Prefer to talk to a human? Call the clinic") was
   REMOVED at iteration 53: a phone CTA in the last section is a second
   conversion path competing with the assessment, which is what this redesign
   exists to avoid. The number is still reachable in the header, in both
   location cards directly above, and in the footer. CSS deleted with it. */

@media (min-width: 48rem) {
  .sn-locations__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sn-hours > div {
    /* max-content on the label column, floored at 7rem, so a long day label
       ("Every other Monday" on the Saco card) gets the width it needs instead
       of wrapping onto two lines, while short labels still align in a tidy
       column. Each card has its own <dl>, so the two cards sizing
       independently is correct rather than inconsistent. */
    grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
    gap: var(--sn-space-3);
  }
}