/* ============================================================
   GOPAL ORTHO — Mobile Responsive Stylesheet
   Loaded AFTER all inline styles — uses specific overrides
   Breakpoints:
     ≤1100px : Tablet/Landscape mobile — navbar collapses
     ≤900px  : Tablet portrait — 2-col → 1-col grids
     ≤768px  : Large mobile
     ≤640px  : Standard mobile
     ≤480px  : Small mobile
     ≤380px  : Extra-small mobile
   ============================================================ */

/* ============================================================
   BASE — prevent horizontal overflow everywhere
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden !important;
  max-width: 100vw;
}

img, video, iframe {
  max-width: 100%;
  height: auto;
}

svg {
  max-width: 100%;
}

/* ============================================================
   CONTAINER
   ============================================================ */
@media (max-width: 768px) {
  .container {
    padding-left: 1.125rem !important;
    padding-right: 1.125rem !important;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }
}

/* ============================================================
   SECTION PADDING
   ============================================================ */
@media (max-width: 640px) {
  .section-pad {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* ============================================================
   EMERGENCY BAR
   ============================================================ */
@media (max-width: 640px) {
  .emergency-bar__text {
    font-size: 0.75rem;
    max-width: 50vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .emergency-bar__cta {
    height: 28px;
    padding: 0 0.75rem;
    font-size: 0.75rem;
    flex-shrink: 0;
  }

  .emergency-bar__alert-icon {
    display: none;
  }
}

/* ============================================================
   NAVBAR — Mobile fixes (works alongside Navbar.html styles)
   ============================================================ */

/* Ensure navbar doesn't overflow */
#navbar {
  width: 100%;
  max-width: 100vw;
}

@media (max-width: 1100px) {
  /* The navbar component handles hiding .navbar__links and showing #mobile-toggle */
  /* We just ensure the layout is clean */
  .navbar__inner {
    gap: 0 !important;
  }

  /* Hide the phone number to save space, show only hamburger */
  .nav-phone {
    display: none !important;
  }

  /* Hide desktop CTA button on tablet/mobile */
  .navbar__cta {
    display: none !important;
  }

  /* Make the actions container take remaining space and push hamburger right */
  .navbar__actions {
    margin-left: auto !important;
    gap: 0 !important;
  }

  /* Ensure the logo doesn't shrink */
  .navbar__logo {
    flex-shrink: 0 !important;
    margin-right: auto !important;
  }
}

@media (max-width: 768px) {
  .navbar__inner {
    height: 62px !important;
    padding: 0 1.125rem !important;
  }

  .logo-gopal {
    font-size: 1.75rem !important;
  }

  .logo-ortho {
    font-size: 1.65rem !important;
  }

  .logo-divider {
    height: 26px !important;
    margin: 0 0.5rem !important;
  }

  #mobile-toggle {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }
}

@media (max-width: 480px) {
  .navbar__inner {
    height: 58px !important;
    padding: 0 1rem !important;
  }

  .logo-gopal {
    font-size: 1.5rem !important;
  }

  .logo-ortho {
    font-size: 1.4rem !important;
  }

  .logo-divider {
    height: 22px !important;
    margin: 0 0.4rem !important;
  }

  #mobile-toggle {
    width: 38px !important;
    height: 38px !important;
  }
}

@media (max-width: 380px) {
  .navbar__inner {
    padding: 0 0.75rem !important;
  }

  .logo-gopal {
    font-size: 1.3rem !important;
  }

  .logo-ortho {
    font-size: 1.25rem !important;
  }
}

/* ============================================================
   HERO — index.html
   ============================================================ */
@media (max-width: 1100px) {
  .hero__inner {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
    gap: 2rem !important;
  }

  .hero__content {
    max-width: 100% !important;
  }

  .hero__ctas {
    justify-content: center !important;
  }

  .hero__trust {
    justify-content: center !important;
  }

  .hero-img-wrap {
    width: min(400px, 88vw) !important;
    min-height: 300px !important;
    margin: 0 auto !important;
  }

  .hero-target::before,
  .hero-target::after {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .hero__heading {
    font-size: clamp(2.2rem, 7vw, 3rem) !important;
    margin-top: 0 !important;
  }

  .hero__sub {
    font-size: 0.9375rem !important;
    margin: 0 auto 1.75rem !important;
  }

  .hero-img-wrap {
    width: min(340px, 86vw) !important;
    min-height: 260px !important;
  }

  .hero-img {
    width: min(300px, 90%) !important;
  }
}

@media (max-width: 640px) {
  #hero {
    min-height: auto !important;
  }

  .hero__heading {
    font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
    margin-top: 0 !important;
  }

  .hero__eyebrow {
    justify-content: center !important;
    font-size: 0.6875rem !important;
  }

  .hero-img-wrap {
    width: min(280px, 84vw) !important;
    min-height: 220px !important;
  }

  .hero-img {
    width: min(260px, 88%) !important;
  }

  .hero-target--hip {
    display: none !important;
  }

  .hero-target {
    font-size: 0.65rem !important;
    padding: 0.35rem 0.6rem !important;
  }

  .hero__ctas .btn {
    width: 100% !important;
    max-width: 280px !important;
  }

  .hero__brand-seal {
    margin-bottom: 0.875rem !important;
  }
}

@media (max-width: 480px) {
  .hero__heading {
    font-size: clamp(1.7rem, 8vw, 2.2rem) !important;
  }

  .hero__ctas {
    flex-direction: column !important;
    align-items: center !important;
  }

  .hero__ctas .btn {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-img-wrap {
    width: min(260px, 82vw) !important;
    min-height: 200px !important;
  }

  .trust-pill {
    font-size: 0.8125rem !important;
  }

  .hero-orb-1,
  .hero-orb-2,
  .hero-orb-3 {
    display: none !important;
  }
}

/* ============================================================
   STATS BAR
   ============================================================ */
@media (max-width: 700px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }

  .stat-item::after {
    display: none !important;
  }

  .stat-num {
    font-size: clamp(1.6rem, 7vw, 2.25rem) !important;
  }

  .stat-label {
    font-size: 0.6875rem !important;
  }
}

@media (max-width: 420px) {
  .stat-num {
    font-size: 1.5rem !important;
  }

  .stat-item {
    padding: 1.25rem 0.75rem !important;
  }
}

/* ============================================================
   ABOUT — index.html
   ============================================================ */
@media (max-width: 900px) {
  .about__grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  .about__badge {
    left: 0.5rem !important;
    bottom: 1rem !important;
  }
}

@media (max-width: 640px) {
  .about__img-card {
    aspect-ratio: 4/3 !important;
    height: auto !important;
  }

  .about__list {
    gap: 0.75rem !important;
    margin: 1.5rem 0 2rem !important;
  }

  .about__list-text {
    font-size: 0.875rem !important;
  }

  .about-certifications {
    gap: 0.5rem !important;
  }

  .about__badge {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    display: inline-flex !important;
    margin-top: 1rem !important;
  }
}

/* ============================================================
   SERVICES — index.html
   ============================================================ */
@media (max-width: 900px) {
  .services-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }
}

@media (max-width: 580px) {
  .services-grid {
    grid-template-columns: 1fr !important;
  }

  .service-card {
    padding: 1.375rem !important;
  }

  .svc-title {
    font-size: 1.2rem !important;
  }
}

/* ============================================================
   PHYSIO HIGHLIGHT — index.html
   ============================================================ */
@media (max-width: 1020px) {
  .physio-highlight__card {
    grid-template-columns: 1fr !important;
  }

  .physio-highlight__left {
    min-height: 320px !important;
  }
}

@media (max-width: 640px) {
  .physio-highlight__left {
    min-height: 260px !important;
  }

  .physio-highlight__left-title {
    font-size: 1.75rem !important;
  }

  .physio-highlight__right {
    padding: 1.75rem 1.25rem 2rem !important;
  }

  .physio-highlight__heading {
    font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
  }

  .physio-highlight__list {
    grid-template-columns: 1fr !important;
    gap: 0.875rem !important;
    margin-top: 1.5rem !important;
  }

  .physio-highlight__photo {
    object-position: 60% center !important;
  }
}

/* ============================================================
   HOSPITAL SHOWCASE — index.html
   ============================================================ */
@media (max-width: 900px) {
  .hospital-showcase__grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .hospital-showcase__image {
    min-height: 300px !important;
  }

  .hospital-showcase__stats {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .hospital-showcase__image {
    min-height: 240px !important;
  }

  .hospital-showcase__badge {
    left: 1rem !important;
    bottom: 1rem !important;
    padding: 0.75rem !important;
    gap: 0.5rem !important;
  }

  .hospital-showcase__badge img {
    width: 36px !important;
    height: 36px !important;
  }

  .hospital-showcase__stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
    margin-top: 1.25rem !important;
  }

  .hospital-stat {
    padding: 0.875rem !important;
  }
}

@media (max-width: 420px) {
  .hospital-showcase__stats {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   SPORTS / WHY SECTION — index.html
   ============================================================ */
@media (max-width: 900px) {
  #sports {
    min-height: auto !important;
    padding: 3.5rem 0 !important;
  }

  .sports-running-img {
    opacity: 0.08 !important;
    width: 100% !important;
    max-width: 100% !important;
    right: 0 !important;
    top: 50% !important;
  }

  .sports-content {
    width: 100% !important;
  }

  #sports .container {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

@media (max-width: 640px) {
  .sports-running-img {
    display: none !important;
  }

  #sports::after {
    display: none !important;
  }

  .why-grid {
    margin-top: 1.75rem !important;
    gap: 1rem !important;
  }

  .why-title {
    font-size: 0.9rem !important;
  }

  .why-text {
    font-size: 0.8125rem !important;
  }
}

/* ============================================================
   CTA BANNER — index.html
   ============================================================ */
@media (max-width: 640px) {
  .cta-banner__heading {
    font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
  }

  .cta-banner__btns {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }

  .cta-banner__btns .btn {
    width: 100% !important;
    max-width: 320px !important;
  }

  .cta-pill {
    font-size: 0.6875rem !important;
  }
}

/* ============================================================
   TESTIMONIALS — index.html
   ============================================================ */
@media (max-width: 768px) {
  .testi-card {
    flex: 0 0 300px !important;
    padding: 1.5rem !important;
  }
}

@media (max-width: 640px) {
  .testi-card {
    flex: 0 0 calc(100vw - 2.5rem) !important;
    max-width: 380px !important;
    padding: 1.375rem !important;
  }

  .testi-text {
    font-size: 0.875rem !important;
  }

  .testi-quote {
    font-size: 3.5rem !important;
  }
}

/* ============================================================
   CONTACT / MAP — index.html
   ============================================================ */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
  }

  .contact-map-col {
    min-height: 280px !important;
    padding: 0 !important;
  }

  .contact-map-col iframe {
    min-height: 280px !important;
  }

  .contact-info-col {
    padding: 2rem 1.5rem !important;
  }
}

@media (max-width: 640px) {
  .contact-info-col {
    padding: 1.75rem 1rem !important;
  }

  .contact-actions {
    flex-direction: column !important;
    gap: 0.625rem !important;
  }

  .contact-actions .btn {
    width: 100% !important;
  }
}

/* ============================================================
   FOOTER — index.html
   ============================================================ */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
    padding-bottom: 2.5rem !important;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }

  #footer {
    padding: 3.5rem 0 2rem !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }

  .footer-bottom-links {
    gap: 1rem !important;
  }
}

/* ============================================================
   FLOATING ELEMENTS
   ============================================================ */
@media (max-width: 640px) {
  #wa-fab {
    bottom: 1rem !important;
    right: 1rem !important;
    width: 50px !important;
    height: 50px !important;
  }

  #back-top {
    bottom: 4.5rem !important;
    right: 1rem !important;
    width: 38px !important;
    height: 38px !important;
  }

  #cookie-notice {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    border-bottom: none !important;
  }
}

/* ============================================================
   BUTTONS — Mobile sizing
   ============================================================ */
@media (max-width: 640px) {
  .btn {
    height: 48px !important;
    padding: 0 1.375rem !important;
    font-size: 0.875rem !important;
  }

  .btn-sm {
    height: 40px !important;
    padding: 0 1rem !important;
    font-size: 0.8125rem !important;
  }
}

/* ============================================================
   SUB-PAGES — page-hero
   ============================================================ */
@media (max-width: 640px) {
  .page-hero {
    padding: 3.5rem 0 2.5rem !important;
  }

  .page-hero__title {
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }

  .page-hero__sub {
    font-size: 0.9375rem !important;
  }

  .page-hero__actions {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .page-hero__actions .btn {
    width: 100% !important;
  }
}

/* ============================================================
   ABOUT PAGE (about/index.html)
   ============================================================ */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .values-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  .stat-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }
}

@media (max-width: 640px) {
  .about-img {
    height: 260px !important;
  }

  .values-grid {
    grid-template-columns: 1fr !important;
  }

  .stat-row {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 480px) {
  .stat-row {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   SERVICES PAGE (services/index.html)
   ============================================================ */
@media (max-width: 900px) {
  .service-detail {
    grid-template-columns: 1fr !important;
    direction: ltr !important;
    gap: 1.5rem !important;
  }

  .service-detail:nth-child(even) {
    direction: ltr !important;
  }

  .service-detail__info {
    grid-template-columns: 1fr !important;
  }

  .cta-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.25rem !important;
  }

  .cta-inline {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .facility-grid {
    grid-template-columns: 1fr !important;
  }

  .about-grid {
    grid-template-columns: 1fr !important;
  }

  .team-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .testimonial-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 700px) {
  .team-grid {
    grid-template-columns: 1fr !important;
  }

  .testimonial-grid {
    grid-template-columns: 1fr !important;
  }

  .why-grid {
    grid-template-columns: 1fr !important;
  }

  .journey-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 640px) {
  .service-detail__img {
    height: 220px !important;
  }

  .emergency-grid {
    flex-direction: column !important;
    gap: 1.25rem !important;
  }

  .cta-final {
    padding: 1.75rem 1.25rem !important;
  }

  .cta-final__actions {
    flex-direction: column !important;
    align-items: center !important;
  }

  .cta-final__actions .btn {
    width: 100% !important;
  }

  .journey-grid {
    grid-template-columns: 1fr !important;
  }

  .about-card {
    padding: 1.25rem !important;
  }

  .conditions-list li {
    font-size: 0.8125rem !important;
    padding: 0.375rem 0.75rem !important;
  }
}

/* ============================================================
   CONTACT PAGE (contact/index.html)
   ============================================================ */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .form-row {
    grid-template-columns: 1fr !important;
  }

  .contact-actions {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 640px) {
  .contact-form-wrap {
    padding: 1.5rem 1.25rem !important;
  }

  .form-title {
    font-size: 1.375rem !important;
  }

  .form-input,
  input,
  textarea,
  select {
    font-size: 16px !important; /* Prevent iOS zoom */
  }

  .map-iframe {
    height: 260px !important;
  }
}

@media (max-width: 480px) {
  .contact-actions {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   DOCTORS PAGE
   ============================================================ */
@media (max-width: 900px) {
  .doctors-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
  }
}

@media (max-width: 600px) {
  .doctors-grid {
    grid-template-columns: 1fr !important;
    max-width: 420px !important;
    margin: 0 auto !important;
  }

  .doctor-card__img {
    height: 240px !important;
  }
}

/* ============================================================
   GALLERY PAGE
   ============================================================ */
@media (max-width: 640px) {
  .gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* ============================================================
   FOOTER COMPONENT (components/Footer.html)
   ============================================================ */
@media (max-width: 1024px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }

  .footer__col--brand {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 640px) {
  .footer__top {
    padding: 2.5rem 0 !important;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }

  .footer__bottom-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
}

@media (max-width: 480px) {
  .footer__grid {
    grid-template-columns: 1fr !important;
  }

  .footer__col--brand {
    grid-column: auto !important;
  }
}

/* ============================================================
   BODY MAP SECTION
   ============================================================ */
@media (max-width: 900px) {
  .body-map__layout {
    display: none !important;
  }

  .body-map__mobile-list {
    display: flex !important;
  }
}

/* ============================================================
   PHYSIO SECTION COMPONENT
   ============================================================ */
@media (max-width: 900px) {
  .physio-section__grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .physio-section__left {
    min-height: 280px !important;
  }
}

@media (max-width: 640px) {
  .physio-section__headline {
    font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
  }

  .physio-section__cta {
    width: 100% !important;
  }

  .physio-section__right {
    padding: 1.75rem 1rem !important;
  }
}

/* ============================================================
   WHY CHOOSE US COMPONENT
   ============================================================ */
@media (max-width: 640px) {
  .why-us__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.875rem !important;
  }

  .why-us__card {
    padding: 1.25rem !important;
  }
}

@media (max-width: 420px) {
  .why-us__grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   SAFE AREA — iPhone notch support
   ============================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
  .footer__bottom {
    padding-bottom: calc(1.125rem + env(safe-area-inset-bottom)) !important;
  }

  #mobile-drawer .drawer-panel {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom)) !important;
  }
}

/* ============================================================
   LANDSCAPE PHONE
   ============================================================ */
@media (max-height: 480px) and (max-width: 900px) {
  #hero {
    min-height: auto !important;
    padding-top: 1rem !important;
    padding-bottom: 2rem !important;
  }

  .hero__heading {
    font-size: 1.75rem !important;
  }

  .hero-img-wrap {
    display: none !important;
  }
}

/* ============================================================
   TOUCH DEVICES — Disable hover transforms
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .service-card:hover {
    transform: none !important;
    box-shadow: 0 2px 12px rgba(6,42,69,0.06) !important;
  }

  .service-card:hover::before {
    opacity: 0 !important;
  }

  .service-card:hover .svc-title,
  .service-card:hover .svc-text,
  .service-card:hover .svc-link {
    color: inherit !important;
  }

  .svc-title { color: var(--text-dark) !important; }
  .svc-text { color: var(--text-light) !important; }
  .svc-link { color: var(--primary) !important; }
}