/* ===================================================================
   mobile.css — Mobile-first Responsive Overrides for MediCore
   =================================================================== */

/* ================================================================
   1. GLOBAL TOUCH & INTERACTION IMPROVEMENTS
   ================================================================ */

/* Ensure minimum 44x44 tap targets on interactive elements */
a, button, input, select, textarea, .mc-hamburger, .mc-mobile-close {
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
}

/* Base body styles */
body {
  overflow-x: hidden;
  /* Prevent iOS Safari zooming */
  -webkit-text-size-adjust: 100%;
}

/* Ensure form inputs prevent iOS zoom (needs font-size >= 16px) */
input, textarea, select {
  font-size: 16px !important;
  min-height: 48px !important;
  width: 100%;
}

/* Hide scrollbars on swipeable containers */
.swipe-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  padding-bottom: 8px; /* Room for scroll shadow */
}
.swipe-scroll::-webkit-scrollbar {
  display: none;
}
.swipe-scroll > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* All hover-only effects must also trigger on focus/active */
body button:focus, body .mc-btn:focus,
body button:active, body .mc-btn:active {
  transform: scale(0.97) !important;
}

/* Remove hover card lifts on touch devices to prevent stuck states */
@media (hover: none) {
  .mc-card-hover:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }
  .mc-doctor-img-zoom:hover img {
    transform: none !important;
  }
}

/* ================================================================
   2. TYPOGRAPHY SCALE (Mobile First)
   ================================================================ */
h1, .text-display-xl, .text-headline-lg {
  font-size: clamp(2rem, 7vw, 3.5rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
}

h2, .text-headline-md {
  font-size: clamp(1.5rem, 5.5vw, 2.5rem) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em;
}

h3, .text-headline-sm {
  font-size: clamp(1.2rem, 4.5vw, 1.8rem) !important;
  line-height: 1.4 !important;
}

body, p, .text-body-lg, .text-body-md {
  font-size: max(16px, 1rem) !important;
  line-height: 1.6 !important;
}

/* ================================================================
   3. GLOBAL LAYOUT (Mobile First)
   ================================================================ */

/* Padding overrides for sections */
section {
  padding: 48px 20px !important;
}

/* Collapse grid layouts */
.grid {
  grid-template-columns: 1fr !important;
}

/* Hero sections */
section.pt-xl, section.h-\[614px\] {
  height: auto !important;
  min-height: 80vh !important;
  padding-top: 120px !important; /* account for sticky nav */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Asymmetric 2-col image-left/right stack vertically */
.col-span-12.md\:col-span-5,
.col-span-12.md\:col-span-7,
.md\:col-span-5, .md\:col-span-7 {
  width: 100% !important;
}

/* Replace diagonal clip-paths with flat layout on mobile */
.clip-path-diagonal,
.clip-path-diagonal-reverse {
  clip-path: none !important;
  border-top: 1px solid rgba(0,0,0,0.1);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* Button groups stack */
.flex.gap-md, .flex.gap-lg, .flex.gap-6 {
  flex-direction: column !important;
  width: 100%;
}
.flex.gap-md > *, .flex.gap-lg > *, .flex.gap-6 > * {
  width: 100% !important;
  text-align: center;
  justify-content: center;
}

/* ================================================================
   4. NAVBAR MOBILE BEHAVIOR OVERRIDES
   ================================================================ */
@media (max-width: 767px) {
  /* Fix nav padding */
  .mc-navbar-inner {
    padding: 12px 20px !important;
  }
  
  /* Shrink logo slightly */
  .mc-navbar-logo {
    font-size: 18px !important;
  }

  /* Override mc-mobile-menu drawer to use max-height slide */
  .mc-mobile-menu {
    transform: none !important;
    top: 60px !important; /* Below navbar roughly */
    padding: 0 !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms ease-in-out !important;
    display: flex !important;
    flex-direction: column;
  }
  
  .mc-mobile-menu.mc-menu-open {
    max-height: 100vh;
    padding-bottom: 40px !important; /* Extra padding */
    overflow-y: auto;
  }

  .mc-mobile-menu-header {
    display: flex;
    justify-content: flex-end;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(197, 198, 205, 0.2);
  }

  .mc-mobile-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #45474c;
    padding: 8px;
  }

  .mc-mobile-links-container {
    padding: 0 20px;
    flex: 1;
  }

  .mc-mobile-links-container a {
    height: 56px;
    display: flex;
    align-items: center;
  }

  .mc-mobile-menu-footer {
    padding: 24px 20px;
    margin-top: auto;
  }

  .mc-mobile-emergency-btn {
    width: 100%;
    background: #ba1a1a;
    color: white;
    font-weight: 700;
    padding: 16px;
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: none;
  }
}

/* ================================================================
   5. PAGE-SPECIFIC MOBILE LAYOUTS
   ================================================================ */

/* ----- Home ----- */
/* Stat strip: 2x2 grid */
.mc-stat-strip > div {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
}

/* Appointment booking bar (home): Stack vertically */
.glass-panel.flex.justify-between {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 16px !important;
}
.glass-panel.flex.justify-between select {
  width: 100%;
}

/* Departments grid: 2-column */
#departments-grid .grid {
  grid-template-columns: 1fr 1fr !important;
}
#departments-grid .mc-dept-card {
  padding: 16px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Why Choose Us */
#why-choose-us-img {
  display: none !important; /* hide image on mobile */
}

/* Doctor highlights swipeable row */
#doctor-highlights .grid {
  display: flex !important;
}
#doctor-highlights .grid {
  /* Apply swipe-scroll classes manually or convert here */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  flex-wrap: nowrap;
}
#doctor-highlights .grid::-webkit-scrollbar { display: none; }
#doctor-highlights .grid > div {
  flex: 0 0 80%; /* 2.5 cards visible? Make it 80% per card to hint */
  scroll-snap-align: start;
}

/* Insurance Marquee */
.insurance-marquee {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.insurance-marquee > div {
  flex: 0 0 auto;
}

/* Map goes full width on top */
#map-section .flex-row {
  flex-direction: column !important;
}

/* ----- About Us ----- */
/* Timeline */
#timeline .flex.overflow-x-auto {
  flex-direction: column !important;
  overflow: visible !important;
  border-left: 2px solid #c5c6cd;
  padding-left: 20px;
  gap: 32px !important;
}
#timeline .mc-timeline-item {
  width: 100% !important;
  border-top: none !important;
  position: relative;
}
/* Bullet for vertical timeline */
#timeline .mc-timeline-item::before {
  content: '';
  position: absolute;
  left: -27px; /* matches padding + border */
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #009578;
}

/* Leadership grid: 2-column */
#leadership .grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}
#leadership .group > p.text-on-surface-variant {
  display: none !important; /* Hide bio on mobile */
}

/* Stats: 2x2 */
#about-stats .grid {
  grid-template-columns: 1fr 1fr !important;
}

/* ----- Departments ----- */
/* Filter chips */
#dept-filters {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
#dept-filters::-webkit-scrollbar { display: none; }

/* Departments grid: 2-column */
#departments-page-grid {
  grid-template-columns: 1fr 1fr !important;
}

/* Comparison table */
.overflow-x-auto table {
  width: max-content; /* Ensure table doesn't compress */
}
.overflow-x-auto th:first-child,
.overflow-x-auto td:first-child {
  position: sticky;
  left: 0;
  background: white; /* Needs solid bg */
  z-index: 2;
  box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}

/* ----- Our Specialists ----- */
/* Search filter toggle */
#specialist-filters {
  flex-direction: column !important;
}

/* Doctor grid: 2-column */
#specialist-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}
#specialist-grid .flex.justify-between {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

/* HOD Strip */
#hod-strip {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
#hod-strip::-webkit-scrollbar { display: none; }
#hod-strip > div {
  flex: 0 0 85% !important;
  scroll-snap-align: start;
}

/* ----- Doctor Profile ----- */
/* Header card */
#doctor-profile-header .grid {
  display: flex !important;
  flex-direction: column !important;
}

/* Tab bar */
#doctor-tabs {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#doctor-tabs::-webkit-scrollbar { display: none; }

/* Calendar */
.grid-cols-7 {
  gap: 4px !important;
}
.grid-cols-7 button, .grid-cols-7 span {
  min-height: 44px !important;
  min-width: 44px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Similar doctors */
#similar-doctors {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
#similar-doctors::-webkit-scrollbar { display: none; }
#similar-doctors > div {
  flex: 0 0 75%;
  scroll-snap-align: start;
}

/* ----- Book Appointment ----- */
/* Step Indicator */
.mc-step-progress-container {
  display: none !important; /* Hide complex labels */
}
.mobile-step-indicator {
  display: flex !important;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}
.mobile-step-indicator span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e4e2e3;
}
.mobile-step-indicator span.active {
  background: #009578;
}

/* Step 1 Doctor list single col */
.mc-step-panel .md\:col-span-8 .grid {
  grid-template-columns: 1fr !important;
}

/* Date Slot Picker Grid */
.mc-step-panel .grid-cols-4,
.mc-step-panel .sm\:grid-cols-4 {
  grid-template-columns: repeat(3, 1fr) !important;
}
.mc-step-panel .grid-cols-4 button,
.mc-step-panel .sm\:grid-cols-4 button {
  min-height: 48px;
}

/* Confirm Button Fix */
[data-step-next] {
  width: 100% !important;
  justify-content: center !important;
}

/* ----- Patient Stories ----- */
/* Rating dashboard */
#rating-dashboard {
  flex-direction: column !important;
  align-items: flex-start !important;
}
#rating-dashboard button {
  width: 100% !important;
}

/* Filter chips */
#review-filters {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
#review-filters::-webkit-scrollbar { display: none; }

/* Masonry Reviews -> Single Col */
.columns-1.md\:columns-2.lg\:columns-3 {
  columns: 1 !important;
}

/* ----- Contact Us ----- */
/* Map section */
#contact-map {
  height: 300px !important;
}

/* Social Grid: 2-column or 3-column depending on space */
#social-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}
@media (min-width: 400px) {
  #social-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ================================================================
   6. DESKTOP OVERRIDES (Restoring Grid / Layouts for larger screens)
   ================================================================ */
@media (min-width: 768px) {
  /* Restore section padding */
  section {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
  
  /* Buttons can sit side-by-side again */
  .flex.gap-md, .flex.gap-lg, .flex.gap-6 {
    flex-direction: row !important;
    width: auto !important;
  }
  .flex.gap-md > *, .flex.gap-lg > *, .flex.gap-6 > * {
    width: auto !important;
  }
  
  /* Reset stat strip to 4 col */
  .mc-stat-strip > div {
    display: flex !important;
  }

  /* Map flex-row restore */
  #map-section .flex-row {
    flex-direction: row !important;
  }

  /* Book appointment flex grids */
  .mc-step-panel .md\:col-span-8 .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .mc-step-panel .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Timeline */
  #timeline .flex.overflow-x-auto {
    flex-direction: row !important;
    border-left: none;
    padding-left: 0;
  }
  #timeline .mc-timeline-item {
    width: 300px !important;
    border-top: 2px solid #c5c6cd !important;
  }
  #timeline .mc-timeline-item::before {
    display: none;
  }
  
  /* Leadership grid */
  #leadership .grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  @media (min-width: 1024px) {
    #leadership .grid {
      grid-template-columns: repeat(4, 1fr) !important;
    }
  }
  #leadership .group > p.text-on-surface-variant {
    display: block !important;
  }

  /* Stats */
  #about-stats .grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Departments grid */
  #departments-page-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Specialist grid */
  #specialist-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Header card */
  #doctor-profile-header .grid {
    display: grid !important;
    flex-direction: row !important;
  }

  /* Similar doctors */
  #similar-doctors {
    display: grid !important;
  }

  /* Rating dashboard */
  #rating-dashboard {
    flex-direction: row !important;
    align-items: flex-end !important;
  }
  #rating-dashboard button {
    width: auto !important;
  }

  /* Masonry Reviews */
  .columns-1.md\:columns-2.lg\:columns-3 {
    columns: 2 !important;
  }
  @media (min-width: 1024px) {
    .columns-1.md\:columns-2.lg\:columns-3 {
      columns: 3 !important;
    }
  }

  /* Social Grid */
  #social-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  @media (min-width: 1024px) {
    #social-grid {
      grid-template-columns: repeat(6, 1fr) !important;
    }
  }

  /* Contact Map */
  #contact-map {
    height: 500px !important;
  }

  /* Restore Clip paths */
  .clip-path-diagonal {
    clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0% 100%) !important;
    border-top: none;
    border-bottom: none;
  }
  .clip-path-diagonal-reverse {
    clip-path: polygon(0 0%, 100% 5%, 100% 100%, 0% 100%) !important;
    border-top: none;
    border-bottom: none;
  }
  
  /* Departments grid 2-col on desktop */
  #departments-grid .grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  /* Some 3-column / 4-column setups */
  #doctor-highlights .grid, #hod-strip {
    display: grid !important;
  }
  .insurance-marquee {
    display: flex !important;
  }
}