/* Mobile overrides — load after page CSS */

@media (max-width: 1024px) {
  :root {
    --header-h: 76px;
  }

  .nav {
    display: none !important;
  }
  .hamburger {
    display: flex !important;
  }
  .mobile-nav {
    display: block !important;
    z-index: 250;
  }
  .mobile-nav.open {
    transform: translateX(0);
  }
  .mob-bar {
    display: grid !important;
  }
  .btn-book-header {
    display: none !important;
  }

  body {
    padding-bottom: 58px;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  .header {
    padding: 0 0.75rem !important;
    height: var(--header-h) !important;
    gap: 0.5rem;
    min-width: 0;
  }
  .header.scrolled {
    height: 68px !important;
  }
  .logo-wrap {
    min-width: 0;
    flex-shrink: 1;
  }
  .logo-img {
    height: 50px !important;
    max-width: 128px !important;
  }
  .header-cta {
    flex-shrink: 0;
    gap: 0.35rem;
  }
  .hamburger {
    padding: 0.35rem;
  }

  .float-wa {
    display: none !important;
  }
  .sticky-book {
    display: none !important;
  }

  .hero,
  .svc-hero,
  .doc-hero,
  .contact-hero,
  .fv-hero,
  .reviews-hero,
  .services-hero,
  .gallery-hero,
  .book-layout,
  .doctor-section,
  .about-grid,
  .location-grid,
  .philosophy,
  .philosophy-strip,
  .two-col,
  .contact-form-section,
  .contact-info-grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .hero {
    padding-top: var(--header-h);
    min-height: auto !important;
  }
  .hero-left,
  .hero-right,
  .svc-hero-content,
  .svc-left,
  .svc-right,
  .doc-hero-info {
    padding: 2.5rem 1.25rem !important;
  }
  .hero-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .hero-bg-text {
    font-size: 5rem !important;
  }

  .svc-hero-image {
    min-height: 320px !important;
    max-height: 48vh !important;
    order: -1 !important;
  }
  .doc-hero-image {
    min-height: min(68vh, 520px) !important;
    max-height: none !important;
    order: -1 !important;
  }
  .hero-doctor-image {
    min-height: unset !important;
    max-height: none !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 auto !important;
    aspect-ratio: unset !important;
    order: 2 !important;
  }
  .hero-doctor-image {
    position: relative !important;
    min-height: min(74vh, 800px) !important;
    overflow: hidden !important;
  }
  .hero-doctor-img {
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    transform: translateX(-50%) scale(1.45) !important;
    transform-origin: center bottom !important;
    height: min(74vh, 800px) !important;
    max-height: none !important;
    max-width: none !important;
    width: auto !important;
  }
  .hero-right {
    background: #1e1b17 !important;
    min-height: min(74vh, 800px) !important;
  }
  .doc-contact-item {
    grid-template-columns: 1fr !important;
    gap: 0.25rem !important;
  }
  .doc-hero-info,
  .svc-hero-content,
  .svc-left,
  .svc-right,
  .hero-left {
    order: 1 !important;
  }
  .doctor-photo {
    min-height: 320px !important;
    max-height: 48vh !important;
  }

  .section,
  .section-sm {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  .page-hero,
  .contact-hero,
  .fv-hero,
  .reviews-hero,
  .gallery-hero {
    padding: 5.5rem 1.25rem 2.5rem !important;
  }

  .hero-h1,
  .h1,
  .section-title,
  .doctor-name,
  .doc-hero-info h1,
  .svc-hero-content h1,
  .svc-left h1,
  .svc-right h1,
  .contact-hero h1,
  .fv-hero h1 {
    font-size: clamp(1.75rem, 6.5vw, 2.35rem) !important;
    line-height: 1.15 !important;
    word-break: break-word;
  }
  .h2,
  .section-title {
    font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
  }

  .hero-sub,
  .body-lg,
  .doctor-bio {
    max-width: 100% !important;
  }

  .btn-primary,
  .btn-wa,
  .btn-gold,
  .btn-outline,
  .btn-ghost,
  .btn-form,
  .btn-submit,
  .btn-strip,
  .f-book-btn {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center;
    box-sizing: border-box;
  }

  .hero-ctas,
  .doc-cta-row,
  .final-cta-btns {
    width: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .concern-grid,
  .why-grid,
  .reviews-grid,
  .blog-grid,
  .services-grid,
  .expertise-grid,
  .doc-reviews,
  .tmt-grid,
  .treatments-detail-grid,
  .ba-grid,
  .rev-grid,
  .safety-grid,
  .areas-grid,
  .bring-grid,
  .reassure-grid,
  .prp-compare,
  .process-grid,
  .journey-steps,
  .tab-content.active {
    grid-template-columns: 1fr !important;
  }

  .trust-bar,
  .inline-cta,
  .book-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 1.5rem 1.25rem !important;
    gap: 1rem !important;
  }

  .service-tabs,
  .filter-tabs,
  .trust-pills {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }

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

  .form-input,
  .form-select,
  .form-textarea,
  .form-row input,
  .form-row select,
  .form-row textarea {
    font-size: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  img,
  video,
  iframe {
    max-width: 100% !important;
  }

  .f-logo-img {
    height: 64px !important;
    max-width: 180px !important;
  }
  .f-map-wrap {
    max-width: 100% !important;
  }
  .footer-top {
    grid-template-columns: 1fr !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
  }

  .phil-left,
  .phil-right {
    padding: 2.5rem 1.25rem !important;
    min-height: auto !important;
  }
  .approach-step {
    grid-template-columns: 48px 1fr !important;
    gap: 1rem !important;
  }
  .svc-hero-photo--product {
    padding: 1.25rem 0.75rem !important;
  }
}

@media (max-width: 480px) {
  :root {
    --header-h: 70px;
  }
  .logo-img {
    height: 44px !important;
    max-width: 110px !important;
  }
  .section,
  .section-sm {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .hero-left,
  .hero-right {
    padding: 2rem 1rem !important;
  }
  .mobile-nav > a,
  .mobile-nav-item-head .mobile-nav-link {
    font-size: 1.25rem !important;
    padding: 0.6rem 0 !important;
  }
  .mobile-nav-submenu a {
    font-size: 1.05rem !important;
    padding: 0.4rem 0 !important;
  }
  .trust-pill {
    font-size: 0.58rem !important;
  }
}