/* sites/services.css — parts shared by the request-style sub-sites (vet, groom, talk, taxi): price groups, the "ask" section
   layout with its three little steps, notes, and the hero art cards (record card, spa menu, ride ticket). Phone-first: base = 390 px.
   Candidate to move into sites.css once a fourth builder needs it. Tokens only — no new colours (docs/DESIGN.md §4). */
@layer sections {
  /* ---- fixes for shared parts (reported to core; harmless once sites.css carries them) -------------------------------
     1. the next .sheet slides UP over the hero by --sheet-r, so the hero needs that much extra bottom padding (CTAs were covered);
     2. sections.css styles the Cat Talk ask form with the same class names (.ask is sticky ≥1020 px, .ask__head is a flex row). */
  .site-hero { padding-bottom: calc(var(--space-6) + var(--sheet-r)); overflow-x: clip; }   /* WebKit counts the tilted art card's corners as page overflow */
  @media (min-width: 900px) { .site-hero { padding-bottom: calc(var(--space-7) + var(--sheet-r)); } }
  .ask[data-ask] { position: relative; top: auto; }
  .ask[data-ask] > .ask__head { display: block; }

  /* ---- price groups ------------------------------------------------------------------------------------------------ */
  .offer-group + .offer-group { margin-top: var(--space-6); }
  .offer-group__title { display: flex; align-items: center; gap: .6rem; margin: 0; font-family: var(--font-text); font-size: .86rem; font-weight: 800;
    letter-spacing: .13em; text-transform: uppercase; color: var(--amber); }
  .offer-group__title::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
  .surface-sage .offer { --ear-bg: var(--paper-3); }
  .surface-sage .offer--combo { --ear-bg: var(--paper-2); }
  .offer { scroll-margin-top: calc(var(--header-h) + 70px); }
  .offer:target { outline: 3px solid var(--sun); outline-offset: 4px; }
  @media (max-width: 719px) {      /* phones: the badge goes under the title so a long name keeps its width */
    .offer__head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); }
    .offer__badge { grid-column: 2; justify-self: start; margin-top: .45rem; }
  }

  /* ---- notes under a price list ------------------------------------------------------------------------------------ */
  .svc-notes, .vet-notes { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-3); }
  .svc-notes li, .vet-notes li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--r-md);
    background: color-mix(in srgb, var(--paper-3) 70%, transparent); border: 1px solid var(--line); }
  .svc-notes p, .vet-notes p { margin: 0; color: var(--ink); line-height: 1.5; }
  .svc-notes a, .vet-notes a { display: inline-flex; align-items: center; gap: .25rem; font-weight: 800; color: var(--ink); min-height: 44px; }
  .svc-notes a .i, .vet-notes a .i { width: 16px; height: 16px; }
  @media (min-width: 900px) { .svc-notes, .vet-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .honest--warn { background: var(--blush-soft); margin-top: var(--space-5); }

  /* promises: four boxed cards are four screens of scrolling on a phone — a compact ruled list there, cards from 720 px */
  @media (max-width: 719px) {
    .promises { gap: 0; }
    .promise { padding: var(--space-3) 0; background: none; border: 0; border-radius: 0; border-bottom: 1px dashed var(--line-strong); }
    .promise:last-child { border-bottom: 0; }
  }
  .honest--warn .i { color: var(--err); }

  /* ---- the ask section: steps beside the form --------------------------------------------------------------------- */
  .ask-wrap { display: grid; gap: var(--space-6); align-items: start; }
  .ask-side .section-head { margin-bottom: var(--space-4); }
  .ask-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); counter-reset: none; }
  .ask-steps li { display: flex; gap: var(--space-3); align-items: flex-start; }
  .ask-steps__n { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sun); color: var(--sun-ink);
    font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
  .ask-steps p { margin: 0; color: var(--ink-2); line-height: 1.45; }
  .ask-steps strong { display: block; color: var(--ink); font-size: 1.05rem; }
  @media (min-width: 960px) {
    .ask-wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: var(--space-8); }
    .ask-side { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
  }

  /* ---- hero art cards (decorative, aria-hidden): paper "documents" tilted on the sunbeam ---------------------------- */
  .artcard { --ear-bg: var(--paper-3); position: relative; padding: var(--space-5) var(--space-5) var(--space-4); transform: rotate(-2deg);
    max-width: 380px; margin-inline: auto; }
  .artcard__top { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); }
  .artcard__top strong { display: block; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-size: 1.2rem; line-height: 1.1; }
  .artcard__top small { display: block; color: var(--ink-2); font-size: .85rem; font-weight: 700; }
  .artcard__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
  .artcard__rows li { display: flex; align-items: center; gap: .6rem; min-height: 40px; padding: .35rem 0; border-bottom: 1px dashed var(--line-strong);
    font-weight: 700; font-size: .95rem; }
  .artcard__rows li > span { flex: 1; min-width: 0; }
  .artcard__rows em { font-style: normal; font-weight: 800; color: var(--amber); font-variant-numeric: tabular-nums; }
  .artcard__foot { display: flex; align-items: center; gap: .5rem; margin: var(--space-4) 0 0; font-weight: 800; font-size: .95rem; }
  .artcard__foot .i { width: 18px; height: 18px; color: var(--err); }
  @media (prefers-reduced-motion: no-preference) {
    .artcard { animation: art-in .9s var(--ease-out) both .15s; }
    @keyframes art-in { from { transform: rotate(-7deg) translateY(28px); } to { transform: rotate(-2deg); } }   /* transform only: never hold a paint behind opacity */
  }
  @media (max-width: 899px) { .site-hero__art { width: min(100%, 360px); } }
}