/* ==========================================================================
   Phones & tablets only (v1.24).
   Loaded with <link media="(max-width: 1024px)">, so a desktop browser never
   applies a single rule here — desktop layouts are untouched by design.
   Tiers: tablet = 641–1024px (iPad portrait/landscape mini), phone = ≤640px.
   ========================================================================== */

/* ---- Shared (phones + tablets) ------------------------------------------- */
:root {
  --sec-y: clamp(2.6rem, 1.6rem + 3vw, 3.75rem);
  --sec-y-sm: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
}
/* Solid header once scrolled: the frosted bar let busy photos show through the logo. */
.site-header, .site-header.scrolled { background: rgba(9, 11, 15, 0.97); }
.nav-toggle { min-width: 44px; min-height: 44px; }
.header-actions .btn { min-height: 40px; }

/* Footer links get finger-sized rows. */
.footer-col > a { padding: 0.55rem 0; }
.footer-legal a { padding: 0.35rem 0; }

/* Credentials strip: one tidy swipeable line instead of a stacked column. */
.creds { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; gap: 1.6rem; padding-inline: var(--gutter); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.creds::-webkit-scrollbar { display: none; }
.creds > * { flex: none; }
.creds img { height: 28px; }

/* Shorter photos in photo + text sections. */
.feature-media { aspect-ratio: 16 / 10; }

/* FAQ category chips: one swipeable row. */
.faq-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) .25rem; }
.faq-nav::-webkit-scrollbar { display: none; }
.faq-nav a { flex: none; padding: .55rem .95rem; }

/* ---- Tablets (641–1024px) ------------------------------------------------ */
@media (min-width: 641px) {
  /* Photo and text side by side again (as on desktop), photo a touch shorter. */
  .feature { grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; }
  .feature:nth-child(even) .feature-media { order: 2; }
  .feature-media { aspect-ratio: 4 / 5; }
  /* Dog & puppy cards: three across with square photos (2 across below 820px). */
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dog-media, .puppy-media { aspect-ratio: 1 / 1; }
  .litter-card, .litter-card:has(.l-pair) { grid-template-columns: 38% 1fr; }
  .litter-card .l-media, .litter-card .l-pair figure { min-height: 220px; }
}
@media (min-width: 641px) and (max-width: 820px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature { gap: 1.5rem; }
  .feature-body h2 { font-size: 1.6rem; }
}

/* ---- Phones (≤640px) ----------------------------------------------------- */
@media (max-width: 640px) {
  body { -webkit-text-size-adjust: 100%; }
  h1 { font-size: clamp(1.9rem, 7.4vw, 2.3rem); }
  h2 { font-size: clamp(1.45rem, 6vw, 1.75rem); }
  .lead { font-size: 1.02rem; }

  /* Swipeable rows: cards side by side with the next one peeking in, instead of
     a long stack of full-width cards. Applies to the home page rows, Services,
     Training and About card sets, and litter/puppy card rows. */
  body.home .card-grid,
  .card-grid:has(> .puppy-card),
  .grid.cols-3:has(> .service-card),
  .grid.cols-4:has(> .service-card) {
    display: flex; gap: .85rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter)); padding: .25rem var(--gutter) 1rem;
    scrollbar-width: none;
  }
  body.home .card-grid::-webkit-scrollbar,
  .card-grid:has(> .puppy-card)::-webkit-scrollbar,
  .grid.cols-3:has(> .service-card)::-webkit-scrollbar,
  .grid.cols-4:has(> .service-card)::-webkit-scrollbar { display: none; }
  body.home .card-grid > *,
  .card-grid:has(> .puppy-card) > *,
  .grid.cols-3:has(> .service-card) > *,
  .grid.cols-4:has(> .service-card) > * { flex: 0 0 78%; scroll-snap-align: start; max-width: 340px; }
  .grid.cols-3:has(> .service-card) > *, .grid.cols-4:has(> .service-card) > * { flex-basis: 84%; }

  /* Our Dogs page: a compact two-across grid so every dog stays in view. */
  body:not(.home) .card-grid:has(> .dog-card) { grid-template-columns: 1fr 1fr; gap: .75rem; }
  body:not(.home) .card-grid:has(> .dog-card) .dog-media { aspect-ratio: 1 / 1; }
  body:not(.home) .card-grid:has(> .dog-card) .dog-body { padding: .75rem .8rem .85rem; }
  body:not(.home) .card-grid:has(> .dog-card) .dog-name { font-size: 1.05rem; }
  body:not(.home) .card-grid:has(> .dog-card) .dog-meta { font-size: .76rem; flex-direction: column; gap: .05rem; }
  body:not(.home) .card-grid:has(> .dog-card) .dog-meta .dot { display: none; }
  body:not(.home) .card-grid:has(> .dog-card) .dog-desc,
  body:not(.home) .card-grid:has(> .dog-card) .dog-foot { display: none; }
  body:not(.home) .card-grid:has(> .dog-card) .dog-tag { font-size: .6rem; padding: .25rem .5rem; }

  /* Dog cards inside swipe rows: square photo, tighter body. */
  body.home .dog-media { aspect-ratio: 1 / 1; }

  /* Home "Our program": features as a compact 2×2 grid. */
  #program .feature-body .grid { grid-template-columns: 1fr 1fr !important; gap: 1.1rem 1rem !important; }
  #program .feature-body .grid h4 { font-size: .98rem; }
  #program .feature-body .grid p { font-size: .84rem; line-height: 1.45; }

  /* Past litters: compact rows (small photo left, details right). */
  .litter-card, .litter-card:has(.l-pair) { grid-template-columns: 112px 1fr; }
  .litter-card .l-media, .litter-card .l-pair figure { min-height: 0; height: 100%; }
  .litter-card .l-pair { grid-template-columns: 1fr; }
  .litter-card .l-pair figure + figure { display: none; }
  .litter-card .l-year { font-size: .7rem; padding: .2rem .5rem; top: .5rem; left: .5rem; }
  .litter-card .l-body { padding: .9rem 1rem; }
  .litter-card .l-cross { font-size: 1.05rem; }
  .litter-card .l-body p.muted { display: none; }
  .litter-card .l-stats { gap: 1rem; padding-top: .55rem; }
  .litter-card .l-stats .s b { font-size: 1.05rem; }
  .litter-card .l-stats .s span { font-size: .64rem; }

  /* Footer: link columns side by side, contact below, everything tighter. */
  .site-footer { padding-top: 2.5rem; }
  .footer-main { gap: 1.75rem; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; }
  .footer-cols .footer-contact { grid-column: 1 / -1; }
  .footer-tag { font-size: .9rem; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: .75rem; }
  .footer-legal { justify-content: center; gap: .9rem; }

  /* Litter timeline: a compact vertical timeline (rail + dots) instead of six boxes. */
  .l-timeline { display: block; position: relative; }
  .l-timeline::before { content: ""; position: absolute; left: 18px; top: 10px; bottom: 10px; width: 2px; background: var(--line-strong); }
  .l-step { position: relative; display: grid; grid-template-columns: 38px 1fr; column-gap: .9rem; background: none; border: 0; border-radius: 0; padding: 0 0 1.15rem; }
  .l-step > * { grid-column: 2; }
  .l-step > .l-node { grid-column: 1; grid-row: 1 / span 3; margin: 0; position: relative; z-index: 1; background: var(--bg-800); border: 1px solid var(--line-strong); box-shadow: 0 0 0 4px var(--bg-850); }
  .l-step h4 { font-size: .98rem; }

  /* FAQ: tighter question rows. */
  .faq-item summary { padding: 1rem 0; font-size: 1.05rem; gap: 1rem; }

  /* Sticky action bar (phones): Reserve Now / Join the waitlist. */
  .m-cta { display: flex; }
  body.has-m-cta { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* Sticky action bar (shown by app.js after the first screen; phones only). */
.m-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  gap: .6rem; padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(9, 11, 15, 0.97); border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform .28s var(--ease, ease);
}
.m-cta.show { transform: none; }
.m-cta .btn { flex: 1 1 0; min-height: 46px; justify-content: center; width: auto; }
.m-cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); }