/* ==========================================================================
   Responsive layer (mobile-first): small → large screens
   ========================================================================== */

@media (min-width: 560px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .journey { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .form-grid--2 .field--full { grid-column: 1 / -1; }
  .cred-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .locator__list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .topbar { display: block; }
  .header-call { display: inline-flex; }
  .header-cta .btn--book { display: inline-flex; }
  .locations { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .split { grid-template-columns: 1fr 1fr; align-items: start; }
  .action-bar { display: none; }
  body.has-action-bar { padding-bottom: 0; }
}

@media (min-width: 960px) {
  :root { --header-h: 84px; }
  .brand img { height: 56px; max-width: 240px; }
  .nav { display: block; }
  .menu-toggle { display: none; }
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: 4rem; }
  .hero__visual { margin-right: 0; }
  .cred-strip__grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .locator { grid-template-columns: 1.15fr .85fr; gap: 4rem; }
  .locator__list { grid-template-columns: repeat(2, 1fr); }
  .doctor { grid-template-columns: .9fr 1.1fr; gap: 5rem; }
  .pillars--3 { grid-template-columns: repeat(3, 1fr); }
  .pillars--5 { grid-template-columns: repeat(5, 1fr); }
  .journey { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
  .journey__line { display: block; position: absolute; left: 4%; right: 4%; top: 54px; height: 40px; color: var(--coral); z-index: 0; pointer-events: none; }
  .step { z-index: 1; background: rgba(255, 255, 255, .94); }
  .page-hero__grid { grid-template-columns: 1.4fr .9fr; gap: 3rem; }
  .content-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 4rem; }
  .sidebar { position: sticky; top: calc(var(--header-h) + 24px); }
  .related-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 3rem; }
  .cta-band__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: center; }
  .cta-band__inner .btn-row { justify-content: flex-end; }
  .cta-band p { margin-bottom: 0; }
}

@media (min-width: 1200px) {
  .hero__badge--a { left: -12%; }
  .hero__badge--b { right: -8%; }
  .locator__list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1600px) {
  :root { --container: 1360px; }
}

/* Small phones: tighten spacing, keep touch targets ≥44px */
@media (max-width: 400px) {
  .slots { grid-template-columns: 1fr; }
  .hero__badge { display: none; }
  .btn { padding-inline: 1.1rem; }
  .locator__list { grid-template-columns: 1fr; }
}

/* Mobile-only: hide floating badges that overlap the portrait */
@media (max-width: 959px) {
  .hero__badge--b { display: none; }
  .hero__badge--a { left: 4%; bottom: 4%; }
  .doctor__caption { right: .75rem; bottom: .75rem; }
  .sidebar .toc { display: none; }
}

/* v2 components */
@media (min-width: 640px) {
  .quickbar__grid { grid-template-columns: repeat(4, 1fr); }
  .quick { border-bottom: 0; border-right: 1px solid var(--line); padding: 1.35rem 1.25rem; }
  .quick:last-child { border-right: 0; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .section-head--split { grid-template-columns: 1fr 1fr; }
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
  .booking__grid { grid-template-columns: .85fr 1.15fr; gap: 4rem; }
  .booking__photo { display: block; }
  .hero__grid { grid-template-columns: 1fr 1.05fr; }
  .page-hero--photo .page-hero__grid { grid-template-columns: 1.15fr .85fr; }
}
@media (max-width: 559px) {
  .hero__facts { grid-template-columns: 1fr; gap: .6rem; }
  .locator__list { grid-template-columns: 1fr; }
  .locator__figure { max-width: 280px; }
}
@media (max-width: 639px) {
  .quick small { display: none; }
  .quick { padding: .9rem .6rem; gap: .6rem; }
  .quick__icon { width: 38px; height: 38px; }
  .quick strong { font-size: .9rem; }
  .locator__figure { max-width: 240px; }
}
@media (min-width: 960px) {
  .svc-grid--wide { grid-template-columns: repeat(2, 1fr); }
  .svc-cat--wide { flex-direction: row; }
  .svc-cat--wide .svc-cat__media { width: 44%; aspect-ratio: auto; flex: none; }
}
@media (min-width: 960px) { .section-head--split > .btn { justify-self: end; } }
@media (min-width: 960px) { .doctor { align-items: start; } .doctor__media { position: sticky; top: calc(var(--header-h) + 24px); } }

/* Tables scroll inside their own box on small screens */
@media (max-width: 767px) { main table { display: block !important; width: 100% !important; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } main table th, main table td { min-width: 120px; } }

/* ==========================================================================
   Mobile polish (phones up to 639px)
   ========================================================================== */
@media (max-width: 639px) {
  :root { --section-y: 2.25rem; }
  .section { padding-block: 2.25rem; }
  h2 { font-size: clamp(1.6rem, 1.2rem + 2.2vw, 2rem); }
  .lead { font-size: 1.05rem; }

  /* Hero: compact kicker, full-width buttons side by side */
  .hero { padding-top: 1.5rem; }
  .hero__kicker { font-size: .78rem; padding: .35rem .8rem; }
  .hero__title { font-size: clamp(2.1rem, 1.4rem + 4vw, 2.6rem); }
  .hero .btn-row, .page-hero .btn-row, .cta-band .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .hero .btn-row .btn, .page-hero .btn-row .btn, .cta-band .btn-row .btn { width: 100%; justify-content: center; padding-inline: .75rem; font-size: .92rem; }
  .hero__facts { gap: .75rem; }
  .page-hero h1 { font-size: clamp(1.9rem, 1.3rem + 3.5vw, 2.4rem); }
  .page-hero .lead, .page-hero p { font-size: 1rem; }

  /* Service cards: show the first 4 conditions; "View all" lists the rest */
  .svc-cat__links li:nth-child(n+5), .svc-cat ul li:nth-child(n+5) { display: none; }
  .svc-cat__body, .svc-cat > div:not(.svc-cat__media) { padding: 1.25rem; }
  .svc-cat__foot, .svc-cat .btn-row { gap: .5rem; }

  /* Body map: figure first and smaller, areas as a compact 2-column grid */
  .locator { display: flex; flex-direction: column-reverse; gap: 1.5rem; }
  .locator__figure { max-width: 200px; margin: 0 auto; }
  .locator__list { grid-template-columns: 1fr 1fr !important; gap: .5rem; }
  .locator__item { padding: .7rem .75rem; gap: .5rem; font-size: .9rem; min-height: 52px; }
  .locator__item .icon:first-child { width: 22px; height: 22px; }
  .locator__arrow { display: none; }
  .locator__note { font-size: .78rem; }

  /* Journey: compact rows */
  .journey { gap: .75rem; }
  .step { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: start; padding: 1.1rem 1.15rem; }
  .step__num { grid-row: span 2; margin: 0; width: 42px; height: 42px; font-size: .9rem; }
  .step h3 { margin: .2rem 0 .25rem; font-size: 1.05rem; }
  .step p { margin: 0; font-size: .9rem; }

  /* Reviews and booking */
  .reviews .reviews-track { grid-auto-columns: 86%; }
  .reviews .review { padding: 1.35rem; }
  .form-card { padding: 1.25rem; border-radius: var(--radius); }
  .booking__photo { display: none; }

  /* Marquee sizes */
  .marquee--big .marquee__item { font-size: 2.2rem; padding: 0 1.1rem; }
  .marquee--thin .marquee__item { font-size: .85rem; padding: 0 1rem; }

  /* Footer: tidy columns */
  .footer-grid { gap: 2rem; }
}
@media (max-width: 359px) {
  .hero .btn-row, .page-hero .btn-row, .cta-band .btn-row { grid-template-columns: 1fr; }
  .locator__list { grid-template-columns: 1fr !important; }
}

/* Tablets (640–959px): two-column service cards, side-by-side booking */
@media (min-width: 640px) and (max-width: 959px) {
  .hero__grid { gap: 2.5rem; }
  .hero__visual { max-width: 620px; margin-inline: auto; }
  .locator__figure { max-width: 300px; margin: 0 auto; }
  .reviews .reviews-track { grid-auto-columns: 46%; }
  .doctor { gap: 2.5rem; }
  .doctor__media { max-width: 480px; }
}
.content-layout > *, .prose { min-width: 0; }
@media (max-width: 959px) { .content-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) { .hero .btn-row, .page-hero .btn-row { grid-template-columns: 1fr; } .hero .btn-row .btn, .page-hero .btn-row .btn { font-size: 1rem; padding-block: .95rem; white-space: nowrap; } }

/* Desktop: hero + quick-actions bar fit in the first screen */
@media (min-width: 960px) {
  .hero { min-height: calc(100svh - var(--header-h) - 38px - 92px); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(1.25rem, 3vh, 2.5rem); }
  .hero__kicker { margin-bottom: clamp(.75rem, 2vh, 1.25rem); }
  .hero__title { font-size: clamp(2.5rem, 1.2rem + 2.6vw + 1.2vh, 4rem); margin-bottom: clamp(.75rem, 2vh, 1.25rem); }
  .hero__text { font-size: clamp(1rem, .9rem + .35vw, 1.2rem); margin-bottom: clamp(1rem, 3vh, 1.75rem); }
  .hero__facts { margin-top: clamp(1rem, 3vh, 1.75rem); padding-top: clamp(.9rem, 2.5vh, 1.5rem); }
  .hero__visual { max-width: min(100%, calc((100svh - 300px) * 1.49)); justify-self: end; width: 100%; }
}
@media (min-width: 960px) and (max-height: 760px) {
  .hero__facts { display: none; }
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.15fr .85fr !important; gap: clamp(2rem, 4vw, 4rem); }
  .hero__title { font-size: clamp(2.4rem, 1rem + 2.2vw + 1vh, 3.5rem); }
  .hero__facts { margin-top: 1rem; padding-top: 1rem; }
  .hero__facts small, .hero__facts span { font-size: .8rem; }
}
@media (min-width: 960px) and (max-height: 900px) { .hero__facts { display: none; } }

/* Mobile spacing: tighten gaps between blocks and fill the last gallery cell */
@media (max-width: 639px) {
  .section > .container > :last-child, .prose > :last-child { margin-bottom: 0; }
  .section-head { margin-bottom: 1.5rem; }
  .content-layout { gap: 1.75rem; }
  .mosaic > .mosaic__tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .marquee { margin-block: 0 !important; }
}

/* Mobile action bar: compact single-line buttons on every phone width */
.action-bar { gap: .5rem; padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom)); grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.action-bar .btn { min-height: 46px; height: 46px; padding: 0 .9rem; gap: .45rem; font-size: .95rem; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-bar .btn .icon { flex: none; width: 1.05em; height: 1.05em; }
body.has-action-bar { padding-bottom: 70px; }
@media (max-width: 360px) {
  .action-bar .btn { font-size: .875rem; padding: 0 .6rem; gap: .35rem; }
}
