/* Clear & Kind Canine design system: page compositions. Each block lays out
   one Figma frame's sections from the components; no new visual styles. */

@layer pages {

  /* ---------- Page intro (every page's first section) ---------- */
  .page-intro { padding-block: var(--space-48) var(--space-48); }
  @media (min-width: 1024px) { .page-intro { padding-block: var(--space-64) var(--space-56); } }
  .page-intro .split--even { align-items: start; }
  .page-intro--contact { padding-bottom: var(--space-48); }
  .headline { display: flex; flex-direction: column; gap: var(--space-12); }
  .headline .scribble { margin-left: 2px; }

  /* Photo with the hand-drawn heart and sunshine (Home and Programs intros). */
  .framed-photo { position: relative; width: 100%; max-width: 540px; padding-right: 20px; }
  .framed-photo .photo { width: 100%; }
  .framed-photo__heart { position: absolute; top: 60px; right: 4px; width: 58px; height: 70px; rotate: 12deg; }
  .framed-photo__sun { position: absolute; left: -12px; bottom: 52px; width: 68px; height: 68px; }
  @media (min-width: 1280px) { .framed-photo__sun { left: -30px; } }
  .framed-photo--compact { max-width: 514px; padding-right: 32px; }
  .framed-photo--compact .framed-photo__sun { bottom: 46px; }

  /* ---------- Home ---------- */
  .hero { padding-block: var(--space-48) var(--space-56); }
  @media (min-width: 1024px) { .hero { padding-block: var(--space-64) var(--space-72); } }
  .hero__copy { max-width: 40rem; }
  /* Where we train (home.md, service-area list): a real list for search engines
     and screen readers; body text at the contact lines' 15px, the label in the
     heading color. */
  .service-modes { display: flex; flex-direction: column; gap: var(--space-8); margin: 0; } /* Figma "Training introduction": three 22px lines in 82px, so 8px apart */
  .service-modes strong { font-weight: var(--weight-semibold); color: var(--text-strong); } /* 600, like the cards' Learn More (Scott, 2026-11-03; Figma 700) */
  .service-modes .body { font-size: var(--type-body-sm); line-height: var(--leading-list); } /* Figma "Training introduction": Inter 15px, line height 145% (Scott, 2026-11-03) */
  .programs-overview { padding-top: var(--space-8); }
  .gallery__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12) var(--space-32); width: 100%; }
  .gallery__title { font-size: var(--size-38); line-height: var(--leading-title); }
  .gallery { width: 100%; display: grid; gap: var(--space-24); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

  /* ---------- Programs ---------- */
  .training-programs__head { display: flex; flex-direction: column; gap: var(--space-16); padding-bottom: var(--space-28); }

  /* Consultation band (Figma 2116:2501): the heading spans the band; below
     it, price and description beside what the consultation includes. The
     standing dog rises from the band's bottom edge under the description
     and is cropped by it (desktop only). */
  .consultation { position: relative; overflow: hidden; }
  .consultation__inner { --stack-gap: var(--space-8); }
  .consultation__head { --stack-gap: var(--space-14); }
  .consultation__head .heading--md { line-height: 1.36; } /* Figma: "normal" for Noto Serif, 63px at 46px */
  .consultation__intro { --stack-gap: var(--space-24); }
  /* Figma: "$175" bold cream, a thin blue bar, "1 Hour" bold coral (4.7:1 on the dark band). */
  .consultation__price { font-size: var(--type-lead); line-height: 1.6; color: var(--text-on-inverse-label); }
  .consultation__price strong { font-weight: 700; color: var(--text-on-inverse); }
  .consultation__price .consultation__duration { color: var(--accent-primary); }
  .consultation__sep { margin-inline: 4px; font-weight: 300; }
  .consultation__dog { display: none; color: var(--accent-sketch); }
  @media (min-width: 1024px) {
    .consultation { padding-block: var(--space-64); } /* Figma: 64px top and bottom */
    /* Figma "Frame 10": the dog at 147px wide, its top 165px showing, 105px
       in from the column's right edge (x 360 at 1440px). Anchored to the
       bottom, not a fixed top, so larger text can never slide under it (WCAG
       1.4.12, accessibility audit P1, 2026-10-20): it hangs 84px below the
       band (cropped) and shows 101px inside the intro column, whose bottom
       padding keeps that room, plus Figma's 53px gap, clear of the text. */
    .consultation__intro { position: relative; align-self: stretch; padding-bottom: 154px; }
    .consultation__dog { display: block; position: absolute; right: 105px; bottom: calc(-1 * var(--space-64) - 84px); width: 147px; height: auto; }
  }
  .consultation__includes-label { font-family: var(--font-sans); font-size: var(--type-lead); font-weight: 700; line-height: 1.6; }
  .consultation__includes { display: grid; gap: var(--space-24) var(--space-32); margin: 0; padding-bottom: var(--space-16); }
  /* Figma: two columns, read top to bottom (Understand, Set priorities | Get practical, Plan). */
  @media (min-width: 768px) { .consultation__includes { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); grid-auto-flow: column; } }
  .consultation__includes li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--type-body); line-height: 1.6; }
  .consultation__paw { width: 20px; height: 24px; color: var(--accent-icon); }
  .consultation__item-title { font-weight: 700; }
  .consultation .note { color: var(--text-on-inverse-muted); }

  /* Local training: copy above a rule that closes the section. */
  /* Local training (Figma 2154:3465): copy beside the map (516×300),
     centered, 72px gap; a blue rule 96px below closes the section. */
  .local-training { padding-bottom: 0; }
  .local-training__inner { display: grid; gap: var(--space-40); align-items: center; padding-bottom: var(--space-64); border-bottom: 1px solid var(--border-field); }
  .local-training .heading--lg { line-height: 1.05; }
  /* The map in the blue palette, with Figma's elevation (2417:618, Scott 2026-10-29). */
  .local-training__map { margin: 0; width: 100%; max-width: 516px; aspect-ratio: 516 / 300; overflow: hidden; border-radius: var(--radius-card); background: var(--surface-alt); box-shadow: var(--shadow-raised); }
  .local-training__map img { width: 100%; height: 100%; object-fit: cover; }
  @media (min-width: 900px) {
    .local-training__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 516px); gap: clamp(40px, 5vw, 72px); }
  }
  @media (min-width: 1024px) {
    .local-training { padding-top: var(--space-96); }
    .local-training__inner { padding-bottom: var(--space-96); }
  }
  .programs-invitation { padding-top: var(--space-80); }
  .programs-invitation .invitation__art { width: 120px; height: auto; }

  /* Closing invitation (Programs "Let's talk about your dog.", About "Let's Learn Together"). */
  .invitation__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); max-width: calc(800px + 2 * var(--gutter)); text-align: center; }
  .invitation__inner .svg--heart-accent { width: 58px; height: 70px; }
  .invitation__inner .svg--heart-accent-sm { width: 42px; height: 50px; }
  .invitation__copy { align-items: center; }
  .invitation__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-16) var(--space-28); padding-top: var(--space-8); font-size: var(--type-body-sm); }
  @media (min-width: 1024px) { .invitation { padding-block: var(--space-80); } }
  .programs { margin: 0; }
  .programs + * { margin-top: var(--space-32); }

  /* ---------- How It Works ---------- */
  .steps { margin: 0; padding: 0; list-style: none; }

  /* ---------- About (Figma 2116:2677) ---------- */
  /* Hero and trainer profiles on blue: intro 760px, two 560px profiles. */
  .about-hero { background: var(--surface-tint); padding-block: var(--space-48) var(--space-64); }
  .about-hero .stack--xl { --stack-gap: var(--space-48); }
  /* The title may run 1024px wide (Scott, 2026-10-28, after the H1 became
     "A shared belief in a kinder way of training dogs."); the paragraphs stay 760px. */
  .about-hero__intro { max-width: 1024px; }
  .about-hero__intro > .body { max-width: 760px; }
  /* Figma 2116:2705: 78px. */
  .about-hero__title { font-size: var(--size-78); line-height: 1.16; max-width: 1024px; }
  @media (min-width: 1024px) {
    .about-hero { padding-block: var(--space-64) var(--space-96); }
    .about-hero .stack--xl { --stack-gap: 60px; }
  }

  .trainers { display: grid; gap: var(--space-48); margin: 0; }
  @media (min-width: 768px) { .trainers { grid-template-columns: repeat(2, minmax(0, 560px)); gap: clamp(32px, 5vw, 72px); } }
  .trainer { display: flex; flex-direction: column; gap: var(--space-24); }
  .trainer .photo { width: 100%; }
  .trainer__details { --stack-gap: var(--space-12); }
  .trainer__details .button { margin-top: var(--space-12); }
  .trainer__name { font-size: var(--size-36); line-height: 1.2; }

  /* Mission: copy and photo, 588px each, 72px gap. */
  .mission { padding-block: var(--space-64); }
  .mission__inner { display: grid; gap: var(--space-48); align-items: start; }
  .mission__inner > .stack { max-width: 40rem; }
  .mission__vision { line-height: 1.15; }
  .mission__photo { width: 100%; max-width: 588px; }
  @media (min-width: 900px) {
    .mission__inner--with-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); }
  }
  @media (min-width: 1024px) { .mission { padding-block: var(--space-96); } }

  /* Experience on blue: the "16" lockup beside the credentials. */
  .experience { background: var(--surface-tint); padding-block: var(--space-64); }
  .experience .stack--xl { --stack-gap: var(--space-40); }
  .experience__body { display: grid; gap: var(--space-48); align-items: start; }
  @media (min-width: 900px) { .experience__body { grid-template-columns: minmax(0, 560fr) minmax(0, 616fr); gap: clamp(40px, 5vw, 72px); } }
  @media (min-width: 1024px) { .experience { padding-block: var(--space-96); } }
  .experience__lockup { display: flex; align-items: flex-end; gap: var(--space-20); margin: 0; font-family: var(--font-serif); color: var(--text-strong); }
  /* The tight tracking lets the "6" overhang its box by ~0.04em; the margin
     puts that back, so the visible gap to the label is the 20px flex gap. */
  .experience__number { font-size: clamp(5.5rem, 3.6rem + 7.2vw, 10rem); line-height: .9; letter-spacing: -0.09em; margin-right: 0.04em; }
  .experience__label { font-size: var(--size-27); line-height: 1.2; }
  .experience__note { font-size: var(--type-body); line-height: 1.5; color: var(--text-muted); }
  .experience__list-label { font-size: var(--type-body-sm); font-weight: var(--weight-semibold); color: var(--text-strong); }
  .experience .bullet-list { grid-template-columns: 1fr; gap: 10px; }

  /* What Guides Us: closed by a rule above the invitation. */
  .principles-band { padding-top: var(--space-64); }
  .principles-band__inner { padding-bottom: var(--space-64); border-bottom: 1px solid var(--border-field); }
  @media (min-width: 1024px) {
    .principles-band { padding-top: var(--space-96); }
    .principles-band__inner { padding-bottom: var(--space-96); }
  }
  .principles { display: grid; gap: var(--space-40); margin: 0; }
  @media (min-width: 900px) { .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  /* No rule above each principle: nothing sits directly under the section heading (Scott, 2026-10-20). */
  .principle { display: flex; flex-direction: column; gap: var(--space-20); padding-top: var(--space-8); }
  /* The Figma icon colors (decoration only). */
  .principle .svg--principle-understand { color: var(--accent-icon); }
  .principle .svg--principle-teach { color: var(--text-strong); }
  .principle .svg--principle-trust { color: var(--accent-primary); }
  .about-invitation .invitation__art { width: 120px; height: auto; }
  .principle__icon { width: 32px; height: 32px; }

  .bullet-list { display: grid; gap: var(--space-12) var(--space-32); margin: 0; }
  @media (min-width: 768px) { .bullet-list { grid-template-columns: 1fr 1fr; } }
  .bullet-list li { position: relative; padding-left: var(--space-20); }
  .bullet-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .7em;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-round);
    background: var(--accent-sketch);
  }

  /* ---------- Contact ---------- */
  /* Figma 2116:1958 (Scott, 2026-10-29): the intro and the details in one
     column, the form panel beside them from the top; equal columns (Scott). */
  .contact-layout { display: grid; gap: var(--space-48); align-items: start; padding-bottom: var(--space-24); }
  .contact-intro .detail-list { padding-top: var(--space-12); }
  @media (min-width: 1024px) {
    .contact-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-88); }
  }

  /* ---------- Trainer bios (Figma Bio_Template 2132:1201, 2163:3629) ---------- */
  /* Hero: copy 448px + portrait, 72px gap, on blue. Phones stack. */
  .bio-hero { background: var(--surface-tint); padding-block: var(--space-32) var(--space-48); }
  .bio-hero__inner { display: grid; gap: var(--space-40); align-items: start; }
  .bio-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-48); }
  /* Name, role, credentials, intro (Figma 2132:1226): 16px apart, 12px between
     the role and the credentials. The credentials stay inside the H1 (client
     review 1.2), so the H1 is display: contents and its two parts are placed
     in this grid: the name first, the credentials after the role. */
  .bio-hero__identity { display: grid; gap: var(--space-16); justify-items: start; }
  .bio-hero__name { display: contents; line-height: 1.05; }
  .bio-hero__first { line-height: 1.05; }
  .bio-hero__role { order: 1; font-size: var(--type-body); font-weight: var(--weight-semibold); line-height: normal; color: var(--text-strong); }
  .bio-hero__credentials { order: 2; margin-top: calc(var(--space-12) - var(--space-16)); font-family: var(--font-sans); font-size: var(--type-credential); font-weight: var(--weight-semibold); line-height: 1.05; letter-spacing: 0; color: var(--text-strong); }
  .bio-hero__identity > .body { order: 3; }
  .bio-hero__portrait { width: 100%; }
  @media (min-width: 1024px) {
    .bio-hero { padding-block: var(--space-48) var(--space-72); }
    .bio-hero__inner--with-portrait { grid-template-columns: minmax(0, 448fr) minmax(0, 728fr); gap: var(--space-72); }
  }

  /* Dividers: 32px above and below (88px before Kind words). No divider under the hero (Scott, 2026-10-25); the first section keeps the same 64px gap. */
  .bio-rule { padding-block: var(--space-32); }
  .bio-hero + .bio-section { padding-top: var(--space-64); }
  @media (min-width: 1024px) { .bio-rule--wide { padding-block: var(--space-88); } }

  /* Text sections: label, then heading and paragraphs in a 656px column. */
  .bio-section .stack--xl { --stack-gap: var(--space-32); }
  .bio-section__text { max-width: 656px; }
  .bio-section__text > .stack { --stack-gap: 29px; } /* Figma: an empty line between paragraphs */
  /* Signature and full name under Experience (Figma 2154:3361): 24px below the
     text, the name 24px below the signature. The image is ink on transparent. */
  .bio-signature { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); margin-top: calc(var(--space-24) - var(--stack-gap, var(--space-24))); } /* the column's gap is 32px; Figma has 24px here */
  .bio-signature__img { display: block; max-width: 100%; height: auto; }

  /* Kind words: the quote at 28px serif, 840px wide. */
  .bio-quote { padding-bottom: var(--space-72); }
  .bio-quote__figure { display: flex; flex-direction: column; gap: var(--space-20); max-width: 840px; margin: 0; }
  .bio-quote__figure blockquote { margin: 0; }
  .bio-quote__figure blockquote p { font-family: var(--font-serif); font-size: var(--type-quote-lg); line-height: 1.45; color: var(--text-strong); }
  .bio-quote__figure figcaption { font-size: var(--type-body-sm); color: var(--text-muted); }

  /* The other trainer: portrait 342×300 beside the copy, centered. */
  .bio-other__inner { display: grid; gap: var(--space-32); align-items: center; }
  .bio-other__portrait { width: 100%; max-width: 342px; }
  @media (min-width: 768px) {
    .bio-other__inner--with-portrait { grid-template-columns: minmax(0, 342px) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); }
  }

  /* ---------- Policy pages and the 404 ---------- */
  .policy { padding-bottom: var(--space-72); }
  .policy .prose { max-width: calc(var(--layout-prose) + 2 * var(--gutter)); }

  /* ---------- How It Works (Figma 2417:388, Scott 2026-10-28) ---------- */
  /* Page heading on a blue band, the photo beside it from 1024px. */
  .page-intro--how .photo { width: 100%; max-width: 482px; }
  @media (min-width: 1024px) {
    .page-intro--how { padding-block: var(--space-56) var(--space-64); }
    .page-intro--how .media-split--with-media { grid-template-columns: minmax(0, 1fr) minmax(0, 482px); gap: clamp(40px, 6.5vw, 94px); }
  }
  /* FAQ on a sand band: the dog photo beside the heading, the questions lined up
     with the steps' text (76px marker + 40px gap). */
  .faq-section { padding-block: var(--space-40) var(--space-64); }
  .faq-section__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
  /* From 1024px, site.js sets --dog-y to keep Vincent level with the pointer (or the focused question). */
  .faq__treat { display: none; }
  .faq-section__dog { position: relative; width: 64px; align-self: start; transform: translateY(var(--dog-y, 0px)); transition: transform 160ms ease-out; }
  .faq-section__photo { width: 100%; background: none; border-radius: 0; }
  /* Easter egg (Scott, 2026-10-29): a speech bubble above Vincent when a
     question opens or closes (.is-woofing, set by site.js for 1.2s). With
     reduced motion it just appears and disappears. */
  .faq-dog__bubble {
    position: absolute;
    left: 62%;
    bottom: calc(100% + 4px);
    padding: 4px 10px;
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    color: var(--text-strong);
    font-size: var(--type-caption);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--text-strong) 14%, transparent);
    opacity: 0;
    pointer-events: none;
  }
  .faq-dog__bubble::before { content: attr(data-says); }
  /* The tail, pointing down at the dog. */
  .faq-dog__bubble::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 100%;
    border: 6px solid transparent;
    border-top-color: var(--surface-raised);
  }
  .is-woofing .faq-dog__bubble { opacity: 1; }
  @media (prefers-reduced-motion: no-preference) {
    .is-woofing .faq-section__photo { animation: faq-dog-hop 450ms ease-out; transform-origin: 50% 100%; }
    .is-woofing .faq-dog__bubble { animation: faq-dog-bubble 260ms ease-out; transform-origin: 10px 100%; }
  }
  @keyframes faq-dog-hop { 0%, 100% { transform: none; } 35% { transform: translateY(-6px) rotate(-5deg); } 70% { transform: translateY(0) rotate(3deg); } }
  @keyframes faq-dog-bubble { from { opacity: 0; transform: scale(.6) translateY(4px); } to { opacity: 1; transform: none; } }
  .faq-section__title { font-size: var(--type-heading-md); line-height: 1.15; padding-bottom: var(--space-32); }
  @media (min-width: 1024px) {
    .faq-section { padding-top: 42px; }
    .faq-section__inner { grid-template-columns: 84px minmax(0, 1fr); gap: 32px; }
    /* Vincent is drawn over the treats; clicks pass through him to them. */
    .faq-section__dog { width: 84px; z-index: 1; pointer-events: none; }
    /* A treat per question in his column (Figma 2417:726): centered under him
       (84px column, 32px gap: his center is 74px left of the question), level
       with the question. Clicking it toggles the question; once it's opened,
       site.js adds .is-eaten and the treat fades away (he ate it). */
    .faq__item { position: relative; }
    /* Its click area covers his whole column and the gap up to the question,
       the height of the question row, so the row is clickable from the left
       edge of his column to the end of the question (Scott, 2026-10-29). The
       emoji stays centered under him (42px in). */
    .faq__treat { display: flex; align-items: center; position: absolute; left: -116px; top: 0; width: 116px; height: 60px; font-size: 2rem; line-height: 1; cursor: pointer; }
    .faq__treat::before { content: attr(data-treat); width: 36px; margin-left: 24px; text-align: center; }
    .faq__treat.is-eaten::before { opacity: 0; }
    @media (prefers-reduced-motion: no-preference) { .faq__treat::before { transition: opacity 250ms ease-out; } }
    .faq-section__body { padding-top: 10px; }
    .faq-section__title { font-size: var(--type-heading-lg); padding-bottom: 48px; }
  }
}