/* ==========================================================================
   Dr. Dilip S. Kiyawat Neurosurgical & Spine Care
   Master Mobile & Tablet Responsiveness Stylesheet
   Applies across ALL main pages and all 26 condition/treatment sub-menu pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Universal Viewport & Base Normalization
   -------------------------------------------------------------------------- */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* Ensure images, videos, and iframes never cause horizontal page overflow */
img, picture, video, canvas, svg, iframe {
  max-width: 100% !important;
  height: auto;
}

/* Responsive iframe wrappers (Google Maps, YouTube) */
.map-embed-wrapper,
.map-container,
.contact-map-section iframe {
  width: 100% !important;
  max-width: 100% !important;
}

/* --------------------------------------------------------------------------
   2. Responsive Header & Navigation Drawer
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .site-header {
    height: var(--header-height, 70px) !important;
  }

  main {
    margin-top: var(--header-height, 70px) !important;
  }

  .nav-menu,
  .top-header,
  .nav-actions .phone-link,
  .nav-actions .btn-book {
    display: none !important;
  }

  .mobile-toggle {
    display: flex !important;
  }

  .mobile-drawer {
    width: min(340px, 88vw) !important;
  }

  .drawer-body {
    -webkit-overflow-scrolling: touch;
    padding: 1.25rem 1rem !important;
  }
}

@media (max-width: 480px) {
  .site-header {
    height: var(--header-height, 62px) !important;
  }

  main {
    margin-top: var(--header-height, 62px) !important;
  }

  .logo-wrapper {
    height: 38px !important;
    padding: 2px 6px !important;
  }

  .logo-img {
    max-width: 175px !important;
  }

  .doctor-name {
    font-size: 1.05rem !important;
  }

  .doctor-title {
    display: none !important;
  }

  .nav-container {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }
}

/* --------------------------------------------------------------------------
   3. Universal Container & Section Spacing
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .container {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

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

  /* Form inputs font-size 16px prevents iOS Safari auto-zoom */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="time"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

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

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

/* --------------------------------------------------------------------------
   4. Sub-Menu & Dedicated Condition Pages (All 26 Treatments)
   Matches [class*="-layout-grid"], [class*="-hero-section"], etc.
   -------------------------------------------------------------------------- */

/* Hero Banner on All Service Pages */
@media (max-width: 768px) {
  [class*="-hero-section"] {
    padding: 2.75rem 0 2.25rem !important;
  }

  [class*="-hero-title"],
  .sci-hero-title,
  .bts-hero-title,
  .bh-hero-title,
  .tbi-hero-title,
  .hero-title {
    font-size: clamp(1.65rem, 5.5vw, 2.25rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 0.75rem !important;
    word-break: break-word !important;
  }

  [class*="-hero-breadcrumbs"],
  .sci-hero-breadcrumbs,
  .hero-breadcrumbs {
    font-size: 0.85rem !important;
    flex-wrap: wrap !important;
    gap: 0.35rem 0.5rem !important;
  }

  [class*="-hero-tagline"],
  .sci-hero-tagline,
  .hero-tagline {
    font-size: 0.78rem !important;
    letter-spacing: 1px !important;
    margin-bottom: 0.4rem !important;
  }
}

/* Main Layout Grid & Column Stacking */
@media (max-width: 1024px) {
  [class*="-layout-grid"],
  .sci-layout-grid,
  .bts-layout-grid,
  .bh-layout-grid,
  .tbi-layout-grid,
  .avm-layout-grid,
  .epi-layout-grid,
  .hydro-layout-grid,
  .mvd-layout-grid,
  .aneurysm-layout-grid,
  .ped-layout-grid,
  .st-layout-grid,
  .fos-layout-grid,
  .miss-layout-grid,
  .shds-layout-grid,
  .spond-layout-grid,
  .opll-layout-grid,
  .cdpt-layout-grid,
  .scvj-layout-grid,
  .ovc-layout-grid,
  .csm-layout-grid,
  .sbs-layout-grid,
  .fdos-layout-grid,
  .lcs-layout-grid,
  .detail-page-grid,
  .news-layout-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  [class*="-sidebar-col"],
  .sci-sidebar-col,
  .detail-sidebar-column {
    width: 100% !important;
    margin-top: 1rem !important;
  }

  [class*="-sidebar-sticky"],
  .sci-sidebar-sticky {
    position: static !important;
  }
}

/* Content Blocks & Card Padding inside Service Pages */
@media (max-width: 768px) {
  [class*="-intro-block"],
  [class*="-stabilization-block"],
  [class*="-surgical-block"],
  [class*="-overview-block"],
  .sci-intro-block,
  .sci-stabilization-block,
  .detail-content-column {
    padding: 1.5rem 1.25rem !important;
    border-radius: var(--radius-md) !important;
  }

  [class*="-main-heading"],
  .sci-main-heading,
  .section-main-heading,
  .actions-title {
    font-size: clamp(1.4rem, 4.5vw, 1.85rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
    word-break: break-word !important;
  }

  [class*="-lead-subtitle"],
  .sci-lead-subtitle {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  [class*="-clinical-text"],
  .sci-clinical-text {
    font-size: 0.98rem !important;
    line-height: 1.7 !important;
    gap: 1rem !important;
  }

  /* Internal Feature Grids: Pillars, Radiographs, Steps, Types */
  [class*="-pillars-grid"],
  [class*="-features-grid"],
  [class*="-radiographs-grid"],
  [class*="-strip-list"],
  [class*="-cards-grid"],
  [class*="-steps-grid"],
  [class*="-types-grid"],
  .sci-pillars-grid,
  .sci-radiographs-grid,
  .sci-strip-list {
    grid-template-columns: 1fr !important;
    gap: 1.15rem !important;
  }

  /* Case Highlight Banner & Icon Box */
  [class*="-case-highlight"],
  .sci-case-highlight {
    flex-direction: column !important;
    text-align: center !important;
    padding: 1.35rem 1.15rem !important;
    gap: 1rem !important;
  }

  .case-icon-box,
  [class*="-case-icon"] {
    margin: 0 auto !important;
  }

  /* CTA Rows & Action Buttons */
  [class*="-cta-row"],
  .sci-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 0.75rem !important;
  }

  .btn-whatsapp-cta,
  .btn-consult-quick,
  [class*="btn-consult"],
  [class*="btn-emergency"],
  .btn-emergency-call {
    width: 100% !important;
    justify-content: center !important;
    min-height: 46px !important;
    font-size: 0.95rem !important;
    text-align: center !important;
  }

  /* Radiograph Enlargement Modal */
  .modal-content-wrap {
    width: 94% !important;
    padding: 0.5rem !important;
  }

  .modal-content-wrap img {
    max-height: 70vh !important;
    max-width: 94vw !important;
  }

  .modal-close-btn {
    top: -40px !important;
    right: 5px !important;
    font-size: 2.2rem !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  [class*="-intro-block"],
  [class*="-stabilization-block"],
  [class*="-surgical-block"],
  [class*="-overview-block"] {
    padding: 1.25rem 0.95rem !important;
  }
}

/* Sidebar Treatments Menu on Mobile Devices */
@media (max-width: 768px) {
  [class*="-services-widget"],
  .sci-services-widget,
  .sidebar-block {
    padding: 1.35rem 1.15rem !important;
    border-radius: var(--radius-md) !important;
  }

  [class*="-services-menu"],
  .sci-services-menu {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 0.45rem !important;
  }

  [class*="-services-menu"] li,
  .sci-services-menu li {
    margin-bottom: 0 !important;
  }

  [class*="-services-menu"] a,
  .sci-services-menu a {
    padding: 0.65rem 0.85rem !important;
    font-size: 0.88rem !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* About Doctor Sidebar Card */
  [class*="-about-card"],
  .sci-about-card {
    padding: 1.5rem 1.15rem !important;
    text-align: center !important;
  }

  .sci-doctor-avatar {
    margin: 0 auto 0.75rem !important;
  }

  .sci-social-links {
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  [class*="-services-menu"],
  .sci-services-menu {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   5. Services Overview Page (services.php) Mobile Tuning
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .services-controls-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 1rem !important;
    gap: 1rem !important;
  }

  .filter-pills-group {
    width: 100% !important;
    justify-content: center !important;
  }

  .filter-btn {
    flex: 1 1 auto !important;
    justify-content: center !important;
    padding: 0.55rem 0.85rem !important;
    font-size: 0.84rem !important;
  }

  .services-search-wrapper {
    width: 100% !important;
  }

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

  .service-cta-card {
    min-height: 350px !important;
  }
}

/* --------------------------------------------------------------------------
   6. Contact Page (contact.php) Mobile Tuning
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .quick-info-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

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

  .hospital-card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  .hospital-btn-directions {
    width: 100% !important;
    justify-content: center !important;
  }

  .contact-form-container {
    padding: 2rem 1.25rem !important;
    border-radius: var(--radius-md) !important;
  }

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

  .form-heading {
    font-size: 1.6rem !important;
  }

  .gradient-submit-btn {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
  }

  .contact-map-section iframe {
    height: 320px !important;
  }
}

@media (max-width: 480px) {
  .contact-form-container {
    padding: 1.5rem 1rem !important;
  }

  .hospital-card {
    padding: 1.35rem 1rem !important;
  }
}

/* --------------------------------------------------------------------------
   7. FAQs & Get Answers (faq.php, get-answers.php) Mobile Tuning
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .faq-hero-section {
    padding: 3rem 1rem 2.25rem !important;
  }

  .faq-hero-title {
    font-size: 1.9rem !important;
  }

  .faq-toolbar-container {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
  }

  .faq-category-pills {
    width: 100% !important;
    justify-content: center !important;
  }

  .faq-pill {
    padding: 0.5rem 0.85rem !important;
    font-size: 0.82rem !important;
  }

  .faq-search-box {
    width: 100% !important;
  }

  .faq-accordion-trigger {
    padding: 1rem 1.15rem !important;
    font-size: 0.95rem !important;
  }

  .faq-accordion-body {
    padding: 0 1.15rem 1.15rem !important;
    font-size: 0.92rem !important;
  }

  .faq-ask-banner {
    flex-direction: column !important;
    text-align: center !important;
    padding: 2rem 1.25rem !important;
  }

  .faq-ask-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.75rem !important;
  }

  .btn-ask-primary,
  .btn-ask-outline {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* --------------------------------------------------------------------------
   8. Gallery & Reviews (gallery.php, testimonials.php) Mobile Tuning
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

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

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

  .gallery-filter-btn {
    padding: 0.45rem 0.85rem !important;
    font-size: 0.82rem !important;
  }
}

/* --------------------------------------------------------------------------
   9. Floating Action Widgets (WhatsApp & Back to Top)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .whatsapp-chat-widget,
  .whatsapp-sticky-widget {
    bottom: 16px !important;
    right: 68px !important;
    padding: 0.55rem 0.95rem !important;
    font-size: 0.84rem !important;
    gap: 6px !important;
  }

  .whatsapp-chat-widget i,
  .whatsapp-sticky-widget i {
    font-size: 1.15rem !important;
  }

  .back-to-top {
    bottom: 16px !important;
    right: 14px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 0.9rem !important;
  }
}

/* --------------------------------------------------------------------------
   10. Booking Modal Responsive Tuning
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
  .booking-modal-content {
    width: 94% !important;
    padding: 1.5rem 1.15rem !important;
    max-height: 88vh !important;
  }

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

  .booking-modal-header h3 {
    font-size: 1.3rem !important;
  }

  .booking-modal-submit {
    padding: 0.85rem !important;
    font-size: 0.95rem !important;
  }
}