/* =====================================================================
   NAVELI HOSPITAL — MOBILE-ONLY RESPONSIVE FIXES (v2)
   Add this AFTER your main stylesheet so it overrides correctly.
   All rules wrapped in @media (max-width: 767.98px) so desktop is untouched.
   Pair with mobile-fixes.js for the bariatric slider merge.
   ===================================================================== */

@media (max-width: 767.98px) {

  /* -------- GLOBAL POLISH -------- */
  html, body { overflow-x: hidden; }
  .container, .container-fluid { padding-left: 16px !important; padding-right: 16px !important; }
  .section-padding { padding: 50px 0 !important; }
  .section-title, h2 { font-size: 26px !important; line-height: 1.3 !important; }
  h1 { font-size: 28px !important; line-height: 1.25 !important; }
  h3 { font-size: 20px !important; }
  h4 { font-size: 18px !important; }
  p, .section-desc { font-size: 15px !important; line-height: 1.6 !important; }
  img { max-width: 100%; height: auto; }
  .row.g-4 { --bs-gutter-y: 1.25rem; }


  /* =================================================================
     BANNER / HERO  — fix button spacing + remove white space below
     ================================================================= */
  /* Make hero auto-size to its content (no more fixed 358px min-height) */
  section.hero-section { min-height: 0 !important; height: auto !important; }
  section.hero-section .carousel-item {
    min-height: 0 !important;
    padding: 30px 0 50px !important;
    background-size: cover !important;
    background-position: center !important;
  }
  /* Caption flows naturally inside the carousel-item */
  section.hero-section .carousel-item .carousel-caption {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    padding: 0 18px !important;
    text-align: center !important;
  }
  /* Indicators sit at the bottom edge */
  section.hero-section .carousel-indicators {
    position: absolute !important;
    bottom: 8px !important;
    margin: 0 !important;
  }
  /* Hide left/right arrow controls on mobile (not needed, dots work) */
  section.hero-section .carousel-control-prev,
  section.hero-section .carousel-control-next { display: none !important; }

  /* Stacked buttons get clean spacing */
  section.hero-section .carousel-caption .btn-accent.me-3 {
    display: block !important;
    margin: 0 auto 14px !important;
    width: max-content !important;
    max-width: 100% !important;
  }
  section.hero-section .carousel-caption .btn-outline-white {
    display: block !important;
    margin: 0 auto !important;
    width: max-content !important;
    max-width: 100% !important;
  }

  /* Trust badges sit flush against the hero (no white gap) */
  section.trust-badges {
    padding-top: 12px !important;
    padding-bottom: 18px !important;
    margin-top: 0 !important;
  }


  /* =================================================================
     CTA BANNER ("Schedule Your Consultation Today") — button spacing
     ================================================================= */
  section.cta-banner .btn-accent.me-3 {
    display: block !important;
    margin: 0 auto 14px !important;
    width: max-content !important;
    max-width: 100% !important;
  }
  section.cta-banner .btn-outline-white {
    display: block !important;
    margin: 0 auto !important;
    width: max-content !important;
    max-width: 100% !important;
  }
  section.cta-banner { text-align: center; }


  /* =================================================================
     1) LAPAROSCOPIC SURGERY SERVICES — taller images, full-width cards
     ================================================================= */
  section.bg-light-purple .row > .col-lg-4.col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  section.bg-light-purple .service-card-img .card-img-wrapper {
    height: 300px !important;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
  }
  section.bg-light-purple .service-card-img .card-img-wrapper img.card-img-top {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center;
  }


  /* =================================================================
     2) BARIATRIC SURGERIES — center card on top, horizontal slider below
     Pair with mobile-fixes.js which merges the two side columns.
     ================================================================= */

  /* Stack & reorder the row */
  section.bariatric-hero .row.align-items-center > .col-lg-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    order: 1;
    margin-bottom: 16px !important;
  }
  /* Right column hidden — its items get merged into left col by JS */
  section.bariatric-hero .row.align-items-center > .col-lg-3:last-child {
    display: none !important;
  }
  /* Left column becomes a horizontal scroll slider */
  section.bariatric-hero .row.align-items-center > .col-lg-3:first-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    order: 2;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 6px 16px 14px !important;
    margin: 0 -16px !important;
    scrollbar-width: none;
  }
  section.bariatric-hero .row.align-items-center > .col-lg-3:first-child::-webkit-scrollbar {
    display: none;
  }

  /* Center hero card */
  section.bariatric-hero .bariatric-center-wrapper {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 22px;
    padding: 16px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.20);
    border: 1px solid rgba(255, 255, 255, 0.40);
    position: relative;
    overflow: hidden;
  }
  section.bariatric-hero .bariatric-center-wrapper::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, #ea580c, #f97316);
  }
  section.bariatric-hero .bariatric-center-img {
    width: 100% !important;
    height: 260px !important;
    object-fit: cover !important;
    border-radius: 14px;
    margin-bottom: 14px;
  }
  section.bariatric-hero .bariatric-center-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0;
    text-align: center;
  }

  /* Each thumbnail inside the slider */
  section.bariatric-hero .bariatric-service-item {
    flex: 0 0 60% !important;
    scroll-snap-align: start;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    border: 2px solid transparent;
    text-align: center;
    transition: all 0.25s ease;
    cursor: pointer;
  }
  section.bariatric-hero .bariatric-service-item.active {
    border-color: #f97316;
    box-shadow: 0 8px 22px rgba(234, 88, 12, 0.30);
    transform: translateY(-2px);
  }
  section.bariatric-hero .bariatric-service-item .bari-img {
    width: 100% !important;
    height: 130px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    margin-bottom: 8px;
    display: block;
  }
  section.bariatric-hero .bariatric-service-item .bari-title {
    font-size: 12.5px !important;
    font-weight: 600;
    color: #374151;
    margin: 0;
    line-height: 1.3;
  }
  section.bariatric-hero .bariatric-service-item a {
    text-decoration: none;
    display: block;
  }


  /* =================================================================
     3) COMPREHENSIVE GYNECOLOGICAL CARE — 1 column per row
     ================================================================= */
  section.section-padding > .container > .row > .col-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  section.section-padding .service-card-img .card-img-wrapper {
    height: 260px !important;
    overflow: hidden;
  }
  section.section-padding .service-card-img .card-img-wrapper img.card-img-top {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }


  /* -------- MISC -------- */
  .video-section .col-lg-3,
  .video-section .col-md-6 { margin-bottom: 16px; }
  .btn, .btn-primary-brand { font-size: 14px !important; padding: 12px 22px !important; }
  .row { margin-left: -8px; margin-right: -8px; }
  .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }
}

/* Small tablet bumps */
@media (min-width: 576px) and (max-width: 767.98px) {
  section.bg-light-purple .service-card-img .card-img-wrapper { height: 340px !important; }
  section.section-padding .service-card-img .card-img-wrapper { height: 300px !important; }
  section.bariatric-hero .bariatric-center-img { height: 320px !important; }
  section.bariatric-hero .bariatric-service-item { flex: 0 0 45% !important; }
  section.bariatric-hero .bariatric-service-item .bari-img { height: 160px !important; }
}