/* ==========================================================================
   CarePlus Physiotherapy — Responsive rules
   Breakpoints: 1200 / 1024 / 900 / 768 / 560 / 420
   Load AFTER style.css
   ========================================================================== */

/* ---------- Large desktop (1400px+) ---------- */
@media (min-width: 1400px) {
  :root { --max: 1240px; --section-y: 110px; }
  body { font-size: 17.5px; }
}

/* ---------- Small desktop / large tablet ---------- */
@media (max-width: 1320px) {
  /* The header runs out of room before the nav does: drop the phone block first. */
  .header-phone { display: none; }
  .nav { gap: 2px; }
  .nav a { padding: 10px 10px; font-size: .92rem; }
}

@media (max-width: 1200px) {
  :root { --section-y: 82px; }
  .split { gap: 44px; }
  .hero__grid { gap: 40px; }
  .cta-band { padding: 52px 40px; }
}

/* ---------- Tablet landscape ---------- */
@media (max-width: 1024px) {
  .nav, .header-actions .header-phone, .header-actions .btn--primary { display: none; }
  .nav-toggle { display: flex; }
  .header-actions .btn--gold { display: inline-flex; }
  .mobile-nav.is-open { display: block; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }


  .profile { grid-template-columns: 1fr; gap: 40px; }
  .profile__aside { position: static; grid-template-columns: repeat(2, 1fr); }
  .profile__photo { max-width: 420px; }

  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 38px; }
}

/* ---------- Tablet portrait ---------- */
@media (max-width: 900px) {
  /* Stacked pathway: the gutter chevrons no longer point anywhere. */
  .story { grid-template-columns: repeat(2, 1fr); }
  .story__col:not(:last-child)::after { display: none; }
  :root { --header-h: 72px; --section-y: 68px; }

  .hero { padding-top: 48px; }
  .hero__grid { grid-template-columns: 1fr; gap: 34px; }
  .hero__content { padding-bottom: 0; }
  .hero__media { max-width: 560px; }
  /* Stacked layout: a wider, shorter crop reads better above the fold. */
  .hero__media img { aspect-ratio: 16 / 10; }
  .hero-badge { left: 12px; bottom: 14px; }
  .lead { max-width: none; }

  .split, .service-block { grid-template-columns: 1fr; gap: 32px; }
  .service-block, .service-block--reverse { grid-template-columns: 1fr; align-items: start; }
  .service-block__media { position: static; }
  .split--reverse .split__media,
  .service-block--reverse .service-block__media { order: 0; }
  .service-block { padding: 42px 0; }
  .media-frame--gold { box-shadow: var(--shadow); }

  /* Timeline collapses to a single left rail */
  .journey::before { left: 27px; margin-left: 0; }
  .journey__step { grid-template-columns: 58px 1fr; gap: 20px; margin-bottom: 20px; }
  .journey__num { grid-column: 1; box-shadow: 0 0 0 6px var(--bg-soft), 0 8px 18px rgba(11, 46, 69, .16); }
  .journey__step:nth-child(odd) .journey__card,
  .journey__step:nth-child(even) .journey__card { grid-column: 2; grid-row: 1; text-align: left; }

  .quote { padding: 30px 26px; }
  .quote p { font-size: 1.02rem; }

  .form-card { padding: 28px 24px; }
  .cta-band { padding: 44px 26px; }
  .cta-inline { flex-direction: column; align-items: flex-start; padding: 24px; }
  .map-frame iframe { height: 360px; }
  .page-banner { padding: 48px 0; min-height: 240px; }
  .detail-grid { grid-template-columns: 1fr; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .profile__aside { grid-template-columns: 1fr; }
  :root { --gutter: 18px; --section-y: 56px; }
  body { font-size: 16.5px; }

  .grid { gap: 20px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }

  .card { padding: 26px 22px; }
  .value-card { padding: 28px 22px; }
  .story { grid-template-columns: 1fr; }

  .enquiry-strip { padding-bottom: 52px; }
  .enquiry-strip .enquiry-card { margin-top: 26px; }
  .enquiry-card { padding: 24px 20px; }

  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .header-actions .btn { width: auto; }
  .card__footer .btn, .cta-inline .btn { width: auto; }
  .card__footer { flex-direction: column; align-items: flex-start; }

  .stats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .stat { padding: 22px 14px; }

  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  /* Narrow phones: let the hours wrap rather than overflow the column. */
  .hours-row { white-space: normal; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-bottom ul { justify-content: center; gap: 16px; }

  .modal { padding: 0; }
  .modal__dialog { border-radius: 0; min-height: 100%; }
  .modal__head { padding: 26px 22px 0; }
  .modal__body { padding: 20px 22px 34px; }

  .floating-actions { right: 12px; bottom: 12px; flex-direction: row; align-items: center; }
  .fab { width: 50px; height: 50px; }
  .fab--book { height: 50px; padding: 0 18px; font-size: .9rem; }
  .fab--book span.label { display: none; }
  .fab__tip { display: none; }
  .fab--book svg { width: 22px; height: 22px; }
  .site-footer { padding-bottom: 68px; }

  .slider__slide { padding: 2px; }
  .jump-nav a { font-size: .84rem; padding: 8px 14px; }
  .service-visual { aspect-ratio: 16 / 10; }
  .map-frame iframe { height: 300px; }
  .journey__step { grid-template-columns: 46px 1fr; gap: 14px; }
  .journey::before { left: 21px; }
  .journey__num { width: 46px; height: 46px; font-size: .92rem; }
  .journey__card { padding: 20px; }
  .cta-band { padding: 36px 20px; }
  .quote-block { padding: 22px; font-size: 1rem; }
}

/* ---------- Small mobile ---------- */
@media (max-width: 560px) {
  .brand img { height: 42px; }
  .hero-badge { position: static; margin-top: 16px; max-width: none; }
  .trust-row { gap: 10px 18px; }
  .trust-row li { font-size: .86rem; }
  .eyebrow { font-size: .74rem; padding: 8px 14px; }
  .quote__author { flex-wrap: wrap; }
  .prose h2 { font-size: 1.35rem; }
}

@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr; }
  .pill-list li { font-size: .84rem; padding: 8px 13px; }
  .fab--book { padding: 0 14px; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .mobile-nav, .floating-actions, .modal, .map-frame,
  .cta-band, .cta-inline, .site-footer .footer-cta, .btn { display: none !important; }
  body { font-size: 12pt; color: #000; }
  .section { padding: 12pt 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}