/* ═══════════════════════════════════════════════════════
   Mind Home Services — Mobile Responsive CSS
═══════════════════════════════════════════════════════ */

/* ── Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100vw; }
body { -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; height: auto; }
input, select, textarea { font-size: 16px !important; }
* { -webkit-tap-highlight-color: transparent; }
@supports (padding: env(safe-area-inset-bottom)) {
  footer { padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
}

/* ── NAV ────────────────────────────────────────────── */
.nav-desktop { display: flex !important; }
.nav-mobile  { display: none  !important; }
@media (max-width: 768px) {
  .nav-desktop { display: none  !important; }
  .nav-mobile  { display: flex  !important; }
  nav > div { padding: 0 16px !important; height: 64px !important; }
}

/* ── HERO ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-grid   { grid-template-columns: 1fr !important; gap: 0 !important; padding: 0 32px !important; }
  .hero-sphere { display: none !important; }
}
@media (max-width: 768px) {
  #home { padding-top: 64px !important; min-height: 100svh !important; padding-bottom: 40px !important; }
  .hero-grid { padding: 32px 20px 0 !important; }
  #home h1 { font-size: clamp(32px,9vw,50px) !important; line-height: 1.1 !important; margin-bottom: 14px !important; }
  #home p  { font-size: 14px !important; max-width: 100% !important; margin-bottom: 12px !important; }
  /* CTA buttons: stack vertically, full width */
  .hero-btns { flex-direction: column !important; margin-bottom: 32px !important; }
  .hero-btns > button,
  .hero-btns > a { width: 100% !important; text-align: center !important; justify-content: center !important; }
  /* Stats row: 2×2 wrap */
  .hero-stats { flex-wrap: wrap !important; gap: 20px !important; }
  .hero-stats > div { width: calc(50% - 10px) !important; }
}

/* ── ABOUT ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
}
@media (max-width: 768px) {
  #about { padding: 56px 16px !important; }
  .about-grid { gap: 28px !important; }
  .about-grid > div > div[style*="1fr 1fr"] { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
}

/* ── DOCTORS ────────────────────────────────────────── */
@media (max-width: 768px) {
  #doctors { padding: 56px 16px !important; }
  /* Card body padding */
  .doc-card-body { padding: 22px 18px !important; }
  /* Header: stack photo + info vertically */
  .doc-card-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
  }
  /* Name size */
  .doc-card-header h3 { font-size: 20px !important; }
  /* Tags: center */
  .doc-card-header div[style*="flexWrap"] { justify-content: center !important; }
  /* Education/Specialties: 2col → 1col */
  .doc-card-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* ── SERVICES ───────────────────────────────────────── */
@media (max-width: 768px) {
  #services { padding: 56px 16px !important; }
  .services-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* ── TESTIMONIALS ───────────────────────────────────── */
@media (max-width: 768px) {
  #testimonials { padding: 56px 16px !important; }
  #testimonials > div > div > div[style*="padding"] {
    padding: 28px 18px 22px !important; border-radius: 20px !important;
  }
}

/* ── CRISIS BOX ─────────────────────────────────────── */
@media (max-width: 768px) {
  div[style*="criPulse"] {
    flex-direction: column !important; padding: 20px 16px !important;
    gap: 14px !important; border-radius: 16px !important; animation: none !important;
  }
  div[style*="criPulse"] div[style*="gap: 18"] { flex-direction: column !important; gap: 10px !important; }
  div[style*="criPulse"] div[style*="gap: 18"] > div { width: 100% !important; }
}

/* ── CONTACT CTA BOX (teal gradient "Book" section) ── */
@media (max-width: 900px) {
  .cta-box  { padding: 40px 24px !important; border-radius: 20px !important; }
  .cta-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}
@media (max-width: 580px) {
  .cta-box  { padding: 28px 16px !important; border-radius: 16px !important; }
  .cta-grid { gap: 20px !important; }
}

/* ── CONTACT GRID (locations/hours/fees/insurance) ─── */
.contact-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 1100px) {
  .contact-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
}
@media (max-width: 580px) {
  .contact-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  #contact { padding: 48px 16px !important; }
}

/* ── FOOTER ─────────────────────────────────────────── */
@media (max-width: 768px) {
  footer { padding: 28px 16px !important; }
  footer > div { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 14px !important; }
  footer > div > div:last-child { flex-wrap: wrap !important; justify-content: center !important; gap: 4px !important; }
}

/* ── BOOKING MODAL ──────────────────────────────────── */
@media (max-width: 768px) {
  div[style*="zIndex: 1000"] { padding: 0 !important; align-items: flex-end !important; }
  div[style*='maxHeight: "92vh"'],
  div[style*="maxHeight: \"92vh\""] {
    border-radius: 20px 20px 0 0 !important;
    max-height: 92svh !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
  /* Doctor pick in booking modal: 3col → 1col (scoped tightly) */
  div[style*='maxWidth: 760'] > div > div[style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important; gap: 8px !important;
  }
  /* Form fields: 2col → 1col */
  div[style*='maxWidth: 760'] div[style*='"1fr 1fr"'] {
    grid-template-columns: 1fr !important;
  }
  /* Calendar day cells */
  div[style*="repeat(7,1fr)"] button {
    padding: 5px 2px !important; font-size: 11px !important; min-height: 30px !important;
  }
}

/* ── ADMIN MODAL ────────────────────────────────────── */
@media (max-width: 768px) {
  div[style*="maxWidth: 1040"] {
    max-width: 100vw !important; width: 100vw !important;
    height: 100svh !important; border-radius: 0 !important;
  }
  div[style*="repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 10px !important;
  }
}