/* Clear & Kind Canine design system: reset, base elements, layout
   primitives and utilities. Uses the semantic tokens from tokens.css only. */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  [role="list"] { list-style: none; padding: 0; }
  [hidden] { display: none !important; }
}

@layer base {
  body {
    background: var(--surface-page);
    color: var(--text-strong);
    font-family: var(--font-sans);
    font-size: var(--type-body);
    line-height: var(--leading-body);
    overflow-wrap: break-word;
    /* Keep the footer at the bottom of short pages. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  main { flex: 1 0 auto; }
  main:focus { outline: none; }

  h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: var(--weight-regular);
    line-height: var(--leading-heading);
    text-wrap: balance;
  }
  h1 { font-size: var(--type-display-lg); line-height: var(--leading-display); }
  h2 { font-size: var(--type-heading-md); }
  h3 { font-size: var(--type-heading-xs); line-height: var(--leading-title); }

  p { text-wrap: pretty; }
  strong, b { font-weight: var(--weight-semibold); }

  a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-thickness var(--duration) ease-out;
  }
  a:hover { text-decoration-thickness: 2px; }
  /* Inline text links: one weight everywhere, even where the text wraps them
     in <strong> (How It Works, Privacy Policy); the underline marks the link
     (CTA report, Scott 2026-10-20). Classed links (buttons, card and arrow
     links, nav) keep their own styles. */
  :where(p, li, dd) a:not([class]) { font-weight: var(--weight-regular); }

  :focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
  }

  /* Any dark surface: light text, golden focus ring, grayscale smoothing
     (light-on-dark text renders heavier on macOS without it). */
  .on-dark {
    --focus-ring: var(--focus-ring-on-inverse);
    color: var(--text-on-inverse);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer layout {
  /* Content column: 1248px wide inside the gutter. */
  .container {
    width: 100%;
    max-width: calc(var(--layout-max) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .prose { max-width: calc(var(--layout-prose) + 2 * var(--gutter)); }
  .prose > * + * { margin-top: var(--space-16); }

  /* A band is a full-width section with a surface color. */
  .band { padding-block: var(--band-pad); }
  .band--lg { padding-block: var(--band-pad-lg); }
  .band--flush-top { padding-top: 0; }
  .band--rule { border-top: 1px solid var(--border-subtle); }
  .band--alt { background: var(--surface-alt); }
  .band--tint { background: var(--surface-tint); }
  .band--inverse { background: var(--surface-inverse); }

  /* Stack: vertical rhythm between children. */
  .stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--stack-gap, var(--space-24)); }
  .stack--sm { --stack-gap: var(--space-16); }
  .stack--md { --stack-gap: var(--space-20); }
  .stack--lg { --stack-gap: var(--space-28); }
  .stack--xl { --stack-gap: var(--space-48); }
  .stack > * { max-width: 100%; }
  /* Grids and rules inside a stack take the full width, not their content's. */
  .stack > :is(.split, .media-split, .rule, .cards, .story-grid, .trainers, .principles, .gallery) { align-self: stretch; }

  /* Split: heading column and content column (Figma: 470px + 1fr, 80px gap). */
  .split { display: grid; gap: var(--space-32); align-items: start; }
  @media (min-width: 1024px) {
    .split { grid-template-columns: minmax(0, 470fr) minmax(0, 698fr); gap: var(--space-80); }
    .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-88); }
    .split--pricing { grid-template-columns: minmax(0, 490fr) minmax(0, 654fr); gap: 104px; }
    .split--consultation { grid-template-columns: minmax(0, 516fr) minmax(0, 644fr); }
    .split--center { align-items: center; }
  }

  /* Media split: text and a photo (Figma: 70–94px gap). Two columns from
     768px (Scott, 2026-10-17): both columns scale together (text 8 : photo 7),
     so neither side leaves empty room; the photo stops at 540px (.framed-photo).
     The gap grows from 40px to 72px. Phones stack. */
  .media-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-48); align-items: start; }
  @media (min-width: 768px) {
    .media-split--with-media { grid-template-columns: minmax(0, 8fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 72px); }
    .media-split--center { align-items: center; }
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .text-muted { color: var(--text-muted); }
  .text-center { text-align: center; }
}