/* ============================================================
   Family & Lifestyle Medicine — Breakpoints and touch-target sizing
   Part 10 of 11. The cascade depends on load order:
   these files must stay linked in numeric sequence (see any page <head>).
   ============================================================ */

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1150px) {
  /* Banner stacks: photo becomes a full-bleed header strip above the copy. */
  .hero { display: block; min-height: 0; padding-block: 0 clamp(2.5rem, 6vw, 4rem); }
  .hero__panel, .hero__deco { display: none; }
  .hero__figure {
    position: relative; width: 100%; inset: auto;
    height: clamp(15rem, 46vw, 30rem);
    border-top-left-radius: 0;
    border-bottom-left-radius: clamp(90px, 20vw, 170px);
    margin-bottom: clamp(1.8rem, 5vw, 2.8rem);
  }
  /* The wide strip only shows ~40% of this portrait source, so aim the window
     at the middle band — the stethoscope across the coat — rather than the
     tight chin close-up the desktop framing starts from. */
  .hero__figure img { object-position: center 45%; }
  .hero__content { max-width: none; }

  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .stat:nth-child(3)::before { display: none; }

  .hours__inner { grid-template-columns: 1fr; }

  .team__grid,
  .pillars__grid,
  .why__grid,
  .services__grid,
  .pricing__grid { grid-template-columns: repeat(2, 1fr); }

  .price-card--featured { transform: none; }

  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .cta-band { background-attachment: scroll, scroll; }
}

/* Below the layout breakpoint the primary nav moves out of the header and into
   the fixed bottom bar (04-header.css) — the trimmed inline row keeps all six
   items comfortable down to this width, and below it a thumb-reachable bar
   beats a hamburger. The header keeps only the logo. */
@media (max-width: 1080px) {
  .nav { display: none; }

  /* Reserve the bar's height at the end of the document so the footer's last
     row — and the back-to-top link in it — can still be scrolled clear of it.
     Measured off the same token the bar sets its height from. */
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  body.sheet-open { overflow: hidden; }
}

@media (max-width: 700px) {
  .utility-bar { font-size: .76rem; }
  .utility-bar__inner { justify-content: center; padding-block: .5rem; }
  .utility-bar__contacts { gap: .5rem 1.1rem; justify-content: center; }

  .team__grid,
  .pillars__grid,
  .why__grid,
  .services__grid,
  .pricing__grid { grid-template-columns: 1fr; }

  .doctor-card { grid-template-columns: 1fr; }
  .doctor-card__photo { min-height: 0; aspect-ratio: 16 / 11; position: relative; }
  .doctor-card__photo img { position: absolute; }

  .hero__actions .btn,
  .cta-band__actions .btn,
  .why__more-actions .btn { flex: 1 1 100%; }

  .footer__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .footer__bottom { justify-content: center; text-align: center; }
  .team__note { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .team__note p { flex: none; }
  .hours__list li { flex-direction: column; gap: .3rem; }
}

@media (max-width: 420px) {
  .stats__grid { grid-template-columns: 1fr; }
  .stat + .stat::before { display: none; }
  .stat + .stat { padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .14); }
}

/* ============================================================
   Touch targets
   Text links default to their line box (~18px tall), which is under the 24px
   WCAG 2.5.8 minimum and well under the ~44px vendors recommend. Enlarge them
   wherever a finger is the input device.
   ============================================================ */
@media (max-width: 1080px), (pointer: coarse) {
  .utility-link { padding-block: .4rem; }
  .utility-link--portal { padding-block: .45rem; }
  .utility-bar__social a[aria-label] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
  }

  .breadcrumb a, .breadcrumb span { padding-block: .35rem; }

  .link-arrow { padding-block: .45rem; }

  .footer__col ul { gap: .1rem; }
  .footer__col a { display: inline-block; padding-block: .55rem; }
  .footer__contact li { padding-block: .1rem; }
  .footer__top { padding-block: .5rem; }
  .footer__social { width: 46px; height: 46px; }

  .references__box summary { padding-block: .45rem; }
  .references__box a { display: inline-block; padding-block: .4rem; }
  .faq-item__answer a { display: inline-block; padding-block: .35rem; }
  .contact-chip { padding-block: .65rem; }

  /* Buttons already clear 44px at btn--lg; nudge the small variant up. */
  .btn--sm { padding-block: .75rem; }
}