/* ==========================================================================
   Prestige Dental Suite — responsive.css
   Layout adjustments only. Written desktop-first; breakpoints:
   1199 / 991 / 767 / 575 / 380. Verified targets: 320 → 1440 px.
   ========================================================================== */

h1, h2, h3, h4 { overflow-wrap: break-word; }

/* ---- ≤ 1199 ------------------------------------------------------------ */
@media (max-width: 1199.98px) {
  .values { grid-template-columns: repeat(2, 1fr); }
  .hero-card { left: -1.25rem; }
  .footer-brand-col { margin-bottom: 1rem; }
}

/* ---- ≤ 991 : tablet / mobile navigation -------------------------------- */
@media (max-width: 991.98px) {
  :root { --header-h: 72px; }
  .wrap .row { --bs-gutter-x: 1.5rem; }

  .site-header__inner { flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 1.25rem;
    padding: .75rem var(--gutter) 1.75rem; background: var(--bg); border-bottom: 1px solid var(--border);
    box-shadow: 0 24px 40px rgba(20, 33, 61, .12); max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .js .site-nav { opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; }
  .js .site-nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  html:not(.js) .site-nav { position: static; flex-basis: 100%; box-shadow: none; padding-inline: 0; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__link { display: flex; align-items: center; min-height: 56px; padding: .6rem 0; font-size: 1.1rem; border-bottom: 1px solid var(--border); }
  .site-nav__link::after { display: none; }
  .site-nav__link[aria-current="page"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); margin-right: .75rem; }
  .site-nav .btn { width: 100%; min-height: 54px; }

  .hero__copy { text-align: left; }
  /* hero-media no longer used in new full-bleed hero */

  .trust__grid { grid-template-columns: 1fr 1fr; }
  .trust__item { padding: 1.6rem 1.25rem; }
  .trust__item:first-child { padding-left: 1.25rem; }
  .trust__item:nth-child(3) { border-left: 0; }
  .trust__item:nth-child(n+3) { border-top: 1px solid var(--border); }

  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .exp { grid-template-columns: 1fr; }
  .exp__intro { position: static; }
  .about-media { max-width: 560px; margin-inline: auto; margin-bottom: 1rem; }
  .mosaic { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 130px; }
  .dentist-feature, .split { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .mv-grid { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
  .section__head--split { align-items: flex-start; }
}

/* ---- ≤ 767 : phones / small tablets ------------------------------------ */
@media (max-width: 767.98px) {
  html { scroll-padding-bottom: 96px; }
  body { font-size: 1rem; padding-bottom: 76px; }
  .page-appointment { padding-bottom: 0; }

  .section { padding-block: clamp(3.25rem, 11vw, 4.5rem); }

  .pgrid { grid-template-columns: 1fr; }
  .pcard { aspect-ratio: 4 / 3.4; }
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; }
  .mosaic__item--wide { grid-column: span 2; }
  .mosaic__zoom { opacity: 1; transform: none; width: 36px; height: 36px; }

  .tl-step { padding: 1.5rem 1.4rem; }
  .timeline { padding-left: 3.4rem; }
  .timeline::before { left: 1.15rem; }
  .tl-step__num { left: -3.4rem; width: 2.6rem; height: 2.6rem; font-size: .85rem; }
  .tl-step i.tl-step__icon { display: none; }
  .tl-step:hover { transform: none; }

  .footer__bar { flex-direction: column; align-items: flex-start; }

  /* Mobile quick-action bar (Call / WhatsApp / Book) */
  .quick-bar {
    display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; z-index: 95; left: 0; right: 0; bottom: 0;
    background: var(--white); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(20, 33, 61, .08);
    padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom)); gap: .5rem;
  }
  .quick-bar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 52px; border-radius: 12px;
    font-family: var(--font-head); font-weight: 700; font-size: .78rem; color: var(--navy); transition: background-color .25s var(--ease);
  }
  .quick-bar a i { font-size: 1.2rem; color: var(--purple); }
  .quick-bar a:active { background: var(--lavender); }
  .quick-bar a.is-primary { background: var(--navy); color: var(--white); }
  .quick-bar a.is-primary i { color: #C9B6F0; }
  .wa-float { display: none; }
  .to-top { bottom: calc(84px + env(safe-area-inset-bottom)); right: 1rem; }
  .toast { bottom: 6.5rem; }

  /* Appointment & contact pages: no bar so it can't sit over form controls */
  .page-appointment .quick-bar { display: none; }
  .page-appointment .wa-float { display: grid; width: 50px; height: 50px; font-size: 1.45rem; right: .9rem; bottom: .9rem; }
  .page-appointment .to-top { bottom: 4.6rem; right: 1rem; }
  .page-appointment .wizard-wrap { padding-bottom: 4rem; }

  dialog.lightbox { width: 96vw; }
  .lb-btn { width: 44px; height: 44px; }
  .lb-btn--prev { left: .4rem; }
  .lb-btn--next { right: .4rem; }
  .lightbox__cap { flex-direction: column; gap: .25rem; }
}

/* ---- ≤ 575 : narrow phones -------------------------------------------- */
@media (max-width: 575.98px) {
  .svc-grid, .values, .team-grid, .trust__grid { grid-template-columns: 1fr; }
  .trust__item, .trust__item:first-child { padding: 1.25rem 0; border-left: 0 !important; }
  .trust__item + .trust__item { border-top: 1px solid var(--border); }
  .choice-grid { grid-template-columns: 1fr; }
  .method-row { grid-template-columns: 1fr; }
  .method-row .choice__box { flex-direction: row; justify-content: flex-start; min-height: 56px; text-align: left; }
  .slots { grid-template-columns: repeat(3, 1fr); }
  .btn { white-space: normal; }
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
  .cta-panel { border-radius: 24px; }
  .cta-panel .btn-row { align-items: stretch; }
  /* hero-media legacy rules removed — new full-bleed hero handles sizing via min-height */
  .about-media { padding-right: 0; padding-bottom: 0; }
  .about-media__panel { position: relative; width: auto; margin: -2.2rem 1rem 0; }
  .hist__item { grid-template-columns: 1fr; gap: .25rem; }
  .review dl > div { grid-template-columns: 1fr; gap: .1rem; }
  .wp-step__label { font-size: .68rem; }
  .wp-step__dot { width: 36px; height: 36px; }
  .wizard-progress::before, .wizard-progress::after { top: 17px; }
  .wiz-actions { flex-direction: column-reverse; }
  .wiz-actions .btn { width: 100%; }
  .faq-q { padding: 1.1rem 1.1rem; font-size: 1rem; }
  .faq-a__content { padding: 0 1.1rem 1.25rem; }
  .map-ph, .map-embed { aspect-ratio: 4 / 4; min-height: 280px; }
  .footer__hours li { max-width: none; }
  .mv-card > i { display: none; }
}

/* ---- ≤ 380 : 320–360 px devices ---------------------------------------- */
@media (max-width: 380px) {
  :root { --gutter: 1.1rem; }
  .brand { gap: .55rem; }
  .brand__mark { width: 40px; height: 40px; border-radius: 12px; }
  .brand__name { font-size: 1rem; }
  .brand__name small { letter-spacing: .16em; }
  .nav-toggle { width: 44px; height: 44px; }
  .display { font-size: 2.3rem; }
  .eyebrow { letter-spacing: .12em; font-size: .72rem; }
  .form-card { padding: 1.15rem; }
  .slots { grid-template-columns: repeat(2, 1fr); }
  .slider-ui { right: .6rem; bottom: .6rem; padding: .25rem; }
  .dot { width: 20px; }
}

/* ---- ≥ 1440 : wide desktop --------------------------------------------- */
@media (min-width: 1440px) {
  :root { --maxw: 1300px; }
}