/* /services/free-consultation only. Each rule is something a shared component
   can't do yet; the matching shared asks are in the build record
   (scrollcraft/builds/services/pages/free-consultation.md). */

/* 0 · Hero. Photo 17 has a roll-up banner from 57% to 66% across the frame. SvcHero
   only sets object-position, and on any landscape screen the 3:2 photo is width-bound,
   so the whole width (banner included) shows at every position. Draw the image 182%
   wide from the left edge: only the left 55% (door, arched mirror, desk) is ever in
   frame. Portrait screens (below 2:3) are height-bound and crop by posM instead. */
@media (min-aspect-ratio: 2/3) {
  #hero .svc-hero__photo img { width: 182%; max-width: none; object-position: 0% 52%; }
}

/* 2 · The five reasons as a numbered ledger (number · reason · what it means), read
   down beside the photo, so this chapter doesn't repeat the 3 × 2 tile grid that
   follows it. Tiles has no one-column or row layout. */
#reasons .fc-ledger { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
#reasons .fc-ledger .tile { grid-template-columns: 2.75rem minmax(0, 0.95fr) minmax(0, 1.05fr); column-gap: var(--sc-5); align-items: baseline; padding-block: var(--sc-5); }
#reasons .fc-ledger .tile:last-child { border-bottom: 1px solid var(--rule-ink); }
#reasons .fc-ledger .tile__k { grid-row: 1; }
#reasons .fc-ledger .tile__x { color: var(--sc-ink); }
@media (max-width: 1100px) {
  #reasons .fc-ledger .tile { grid-template-columns: 2.75rem minmax(0, 1fr); row-gap: var(--sc-2); }
  #reasons .fc-ledger .tile__x { grid-column: 2; }
}

/* 4 · The three kinds of care, one per line at display size, each on its rule and
   wiping in after the last. Standout is built for one line a list ends on (a 15ch
   title with a paragraph under it); here it is three in a row with no paragraph.
   Unnumbered: three kinds of care, not a sequence (chapter 2 already counts 01–05). */
#choose .fc-three { display: grid; margin-top: var(--sc-8); }
#choose .fc-three .standout { margin-top: 0; padding: var(--sc-5) 0 var(--sc-4); }
#choose .fc-three .standout:last-child { border-bottom: 1px solid var(--rule-ink); }
#choose .fc-three .standout__t { margin: 0; max-width: 18ch; font-size: var(--sc-t-2xl); line-height: 1.14; }
#choose .fc-three .standout__x:empty { display: none; }
#choose .fc-after { margin: var(--sc-7) 0 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.35; max-width: 34ch; text-wrap: pretty; }

/* 5 · The guide routes to four services. CrossSell.astro still emits xsell--3 for four
   items (Math.min(n, 3)), which leaves Facials alone on a second row: four across on
   wide screens, two by two in between. Keyed on .xsell, so it keeps working once the
   component emits xsell--4 (shared ask in the build record). */
@media (min-width: 1100px) {
  #guide .xsell { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(1.5rem, 2.5vw, 2.5rem); }
  #guide .xsell__item h3 { font-size: var(--sc-t-xl); }
  /* four across, "Naturopathic Medicine" takes two lines: every name keeps two lines'
     height so the four lines under them start on one line (as the /services lists do) */
  #guide .xsell__item h3 { min-height: calc(2 * 1.2em); }
}
@media (min-width: 861px) and (max-width: 1099px) {
  #guide .xsell { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sc-6); }
}
/* The plates' lines run 4 to 7 lines, so each "Learn More" sat at its own height.
   Stretch the text row so every link in a row sits on one baseline. */
@media (min-width: 861px) {
  #guide .xsell__item { grid-template-rows: auto 1fr auto; align-content: stretch; }
}
/* No photographs here (the guide routes by need, not by room), so each plate stands on a
   rule like the tiles do, instead of ending on one: plates of different lengths left
   their bottom rules hanging in a row far below the shorter plates' links. */
#guide .xsell__item { padding: var(--sc-5) 0 0; border-bottom: 0; border-top: 1px solid var(--rule-ink); }
/* The facial menu has no prices on this page: no dotted leader running to nothing,
   and one step smaller than a priced menu (it sits under the Facials plate). */
#guide .fc-facials .menu-item__lead { display: none; }
#guide .fc-facials .menu-item__name { font-size: var(--sc-t-lg); max-width: none; }
#guide .fc-facials .menu-item { padding-block: var(--sc-4); }
/* The facials are a sub-list of the Facials plate, not a fifth section: hang them
   off a left rule, indented, so they read as nested under the plates. */
#guide .block.fc-facials { margin-top: var(--sc-7); padding-left: clamp(1rem, 2.5vw, 2.5rem); border-left: 1px solid var(--rule-ink); }
#guide .fc-still { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sc-5) var(--sc-7); margin-top: var(--sc-8); }
#guide .fc-still p { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.3; max-width: 30ch; text-wrap: pretty; }
@media (max-width: 520px) { #guide .fc-still .btn { flex: 1 1 100%; justify-content: center; } }
/* Phones: service.css sets each plate as a row (thumbnail left, words right). With no
   thumbnail that put the service name in a 38% column and squeezed its line into six
   or seven short lines beside it; stack name, line, link instead (chapter 3.0 → ~2.5
   screens). */
@media (max-width: 860px) {
  #guide .xsell__item { grid-template-columns: minmax(0, 1fr); gap: var(--sc-2); }
  #guide .xsell { gap: var(--sc-6); }
  #guide .fc-still { margin-top: var(--sc-7); }
  #guide .block.fc-facials { margin-top: var(--sc-4); }
}

/* 7 · Testimonials: three quotes side by side (four, two by two, until the one that named
   a practitioner came off, Oct 2), each on a rule with its attribution under it. No
   component sets a quotation yet. */
#voices .fc-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-7) clamp(1.5rem, 3.5vw, 3.5rem); }
#voices .fc-quote { margin: 0; display: grid; grid-template-rows: 1fr auto; align-content: start; gap: var(--sc-4); padding-top: var(--sc-5); border-top: 1px solid var(--rule-ink); }
#voices .fc-quote blockquote { margin: 0; }
#voices .fc-quote blockquote p { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.4; max-width: 40ch; text-wrap: pretty; }
#voices .fc-quote figcaption { margin: 0; color: var(--sc-ink-soft); }
@media (max-width: 1023px) {
  #voices .fc-quotes { grid-template-columns: minmax(0, 1fr); gap: var(--sc-6); }
}

/* 8 · FAQ head: "Questions? / We answer them all." at every width. On phones it
   otherwise broke after "We", splitting the answer from its subject. */
#faq .ch-head h2 em { display: block; }


/* Sept 23 · "Why choose us", three across: the tiles share their rows (subgrid,
   service.css), so the six texts start on one line, but the second row's titles
   run 2, 2 and 3 lines and the two short ones sat ~44px above their own text,
   closer to the rule than to what they title. Set on the row's foot, each title
   stands directly on its text; the spare room goes under the rule instead. */
@media (min-width: 961px) { #why .tiles--3 .tile__t { align-self: end; } }