/*
 * mobile_layout.css — CareSync Mobile Overrides
 * Link this AFTER the main stylesheet in index.html.
 * All rules are scoped to max-width: 768px unless noted.
 * -----------------------------------------------------------
 * Changes implemented:
 *  1.  Hero order: Available at 2AM → pill → body → photo → CTAs
 *  2.  Trust bar: compact single-line pill layout, no gaps
 *  3.  Stats band: centre-aligned numbers
 *  4.  Problem section: heading → photo → body, centre-aligned
 *  5.  FAQ: stacked, fully centre-aligned
 *  6.  Footer divider line above footer
 *  7.  Footer mobile layout: centred brand, 2-col links, legal row
 *  8.  Nav: right-side drawer instead of drop-down
 *  9.  Reduced section padding (top gap cut by ~40%)
 * 10.  About page: stats/founder centred, photo bigger
 * 11.  Contact: CTA improved, clinicians block below form
 * 12.  Global section-title top-gap reduction
 */

/* ── 0. BASE RESETS FOR MOBILE ─────────────────────────────── */
@media (max-width: 768px) {

  /* Reduce global section padding */
  section { padding: 40px 0 !important; }
  .container { padding: 0 20px !important; }

  /* Reduce the giant top-of-section eyebrow gap */
  .eyebrow { margin-bottom: 10px !important; }

  /* Page heroes (inner pages) — account for announce bar + nav + breathing gap */
  .page-hero {
    padding-top: calc(var(--nav) + 56px) !important;
    padding-bottom: 40px !important;
  }
  .page-hero-text { padding: 0 !important; }
}

/* ── 1. HERO REORDER ────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero { padding-top: calc(var(--nav) + 56px) !important; }

  .hero-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 20px !important;
  }

  /* hero-text: pill + h1 → appears first */
  .hero-text {
    order: 1 !important;
    padding-bottom: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .hero-pill   { order: 1 !important; margin-bottom: 14px !important; }
  .hero-h1     { order: 2 !important; margin-bottom: 0 !important; font-size: 2.1rem !important; }
  /* sub and actions hidden inside hero-text temporarily — show after image */
  .hero-sub    { order: 4 !important; margin-top: 20px !important; margin-bottom: 24px !important; text-align: center !important; }
  .hero-actions { order: 5 !important; }

  /* Photo block → order 2, sits between h1 and sub via hero-inner flex */
  .hero-img-col {
    order: 2 !important;
    width: 100% !important;
    align-self: auto !important;
    margin: 20px 0 0 !important;
  }

  .hero-img {
    height: 260px !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 16px !important;
    margin-bottom: 0 !important;
  }

  /* sub + CTA are inside hero-text which is order:1 — they naturally come after h1
     but we want them visually AFTER the photo (order:2 block).
     Solution: move sub + actions out to hero-inner level via CSS trick using
     a CSS grid instead, with named areas */

  /* Override: use grid with named rows */
  .hero-inner {
    display: grid !important;
    grid-template-areas:
      "pill"
      "h1"
      "photo"
      "sub"
      "cta" !important;
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding: 0 20px !important;
    gap: 0 !important;
  }

  .hero-pill        { grid-area: pill !important;  margin-bottom: 14px !important; display: flex !important; justify-content: center !important; }
  .hero-h1          { grid-area: h1 !important;    margin-bottom: 0 !important; font-size: 2.1rem !important; }
  .hero-img-col     { grid-area: photo !important; margin: 20px 0 !important; }
  .hero-sub         { grid-area: sub !important;   margin-bottom: 20px !important; text-align: center !important; }
  .hero-actions     { grid-area: cta !important; }

  /* hero-text becomes a display:contents pass-through in grid mode */
  .hero-text {
    display: contents !important;
  }

  .hero-img {
    height: 260px !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 16px !important;
  }

  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 10px !important;
    padding-bottom: 8px !important;
  }
  .hero-actions .btn { width: 100% !important; justify-content: center !important; }
}

/* ── 2. TRUST BAR ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .trust-bar { padding: 10px 0 !important; }

  .trust-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px 10px !important;
    padding: 0 16px !important;
  }

  .trust-item {
    font-size: 0.65rem !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
  }

  .trust-sep { display: none !important; }

  /* Each item gets a tiny pill border so they read as tags, not orphan words */
  .trust-item {
    background: hsla(42,22%,97%,.12) !important;
    border: 1px solid hsla(42,22%,97%,.2) !important;
    border-radius: 100px !important;
    padding: 3px 10px !important;
  }
}

/* ── 3. STATS: CENTRE ALIGN ─────────────────────────────────── */
@media (max-width: 768px) {
  .stats-band { padding: 36px 0 !important; }

  .stats-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }

  .stat-item {
    text-align: center !important;
    padding: 20px 16px !important;
    border-right: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
  }

  /* Remove borders on right column and bottom row */
  .stat-item:nth-child(2n) { border-right: none !important; }
  .stat-item:nth-last-child(-n+2) { border-bottom: none !important; }
  .stat-item:first-child { padding-left: 16px !important; }

  .stat-num  { font-size: 2.2rem !important; }
  .stat-label { max-width: 100% !important; font-size: 0.75rem !important; }
}

/* ── 4. PROBLEM SECTION ────────────────────────────────────── */
@media (max-width: 768px) {
  /* Collapse desktop grid, hide desktop photo */
  .problem-grid { display: block !important; }
  .problem-photo { display: none !important; }

  /* problem-content becomes a flex column for ordering */
  .problem-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Order: eyebrow(1) → h2(2) → desc(3) → mobile photo(4) → rows(5) */
  .problem-content .problem-eyebrow { order: 1 !important; margin-bottom: 10px !important; }
  .problem-content .problem-h2      { order: 2 !important; font-size: 1.5rem !important; margin-bottom: 0 !important; }
  .problem-content .problem-desc    { order: 3 !important; font-size: 0.88rem !important; text-align: center !important; margin: 16px 0 0 !important; }
  .problem-photo-mob                { order: 4 !important; display: flex !important; justify-content: center !important; margin: 20px 0 !important; }
  .problem-rows                     { order: 5 !important; width: 100% !important; margin-top: 8px !important; }

  /* 2×2 rows — keep as 2 columns */
  .problem-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 14px 0 !important;
  }
  .problem-side h4 { font-size: 0.62rem !important; }
  .problem-side p  { font-size: 0.78rem !important; text-align: left !important; }
}

/* ── 5. FAQ: STACKED & CENTRED ──────────────────────────────── */
@media (max-width: 768px) {
  .faq-section-grid {
    display: block !important;
  }

  .faq-hd {
    text-align: center !important;
    max-width: 100% !important;
    margin: 0 0 28px !important;
  }

  .faq-hd h2 { text-align: center !important; }

  .faq-list { max-width: 100% !important; }

  .faq-q { font-size: 0.88rem !important; }
  .faq-a { max-width: 100% !important; }

  .faq-contact-line { text-align: center !important; margin-top: 24px !important; }
}

/* ── 6. FOOTER DIVIDER LINE (barely-there) ──────────────────── */
.pre-footer-rule {
  height: 1px;
  background: hsl(38, 12%, 88%);
  margin: 0;
  border: none;
  opacity: 0.4;
}

/* ── 7. FOOTER MOBILE LAYOUT ────────────────────────────────── */
@media (max-width: 768px) {
  footer { padding: 44px 0 32px !important; }

  .footer-inner { padding: 0 20px !important; }

  .footer-top {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
    margin-bottom: 36px !important;
    text-align: center !important;
  }

  .footer-brand {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .footer-logo {
    justify-content: center !important;
    font-size: 1.3rem !important;
    margin-bottom: 8px !important;
  }

  .footer-tagline {
    max-width: 260px !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  /* Product + Company side by side */
  .footer-cols-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    width: 100% !important;
  }

  /* We'll use a CSS trick: hide the original Legal col and show it in bottom */
  .footer-col { text-align: center !important; }
  .footer-col h4 { margin-bottom: 12px !important; }
  .footer-col a { margin-bottom: 8px !important; }

  /* Legal col — keep visible, full width centred */
  .footer-col:last-child {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding-top: 24px !important;
    text-align: center !important;
  }

  .footer-copy { order: 2 !important; }

  /* Legal links inline in one row */
  .footer-legal {
    order: 1 !important;
    display: flex !important;
    gap: 20px !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
  }

  .footer-legal a { font-size: 0.78rem !important; }
}

/* ── 8. NAV DRAWER — handled in base CSS, just ensure hamburger stacks above ── */
@media (max-width: 768px) {
  .hamburger { z-index: 1003 !important; display: flex !important; }
  .btn-nav { display: none !important; }
  .nav-links { display: none !important; }
}

/* ── 9. SECTION SPACING TIGHTENED (global) ───────────────────── */
@media (max-width: 768px) {
  /* Already handled above via section { padding: 40px 0 } */
  /* Extra refinements per section: */

  .hero { padding-bottom: 0 !important; }

  .stats-band { padding: 32px 0 !important; }

  .how-hd { margin-bottom: 36px !important; }
  .how-hd h2,
  .moments-hd h2,
  .pricing-prev-hd h2,
  .faq-hd h2 { margin-bottom: 8px !important; }

  .how-steps { margin-top: 0 !important; }
  .how-step  { padding: 24px 20px !important; }

  .moments-hd  { margin-bottom: 28px !important; }
  .moments-grid { gap: 12px !important; }
  .moment-card  { padding: 24px 20px !important; }

  .home-cta { padding: 48px 0 !important; }

  .waitlist-page { padding-top: calc(var(--nav) + 32px) !important; padding-bottom: 48px !important; }
  .wl-form-card  { padding: 28px 20px !important; }

  .about-open { padding-top: calc(var(--nav) + 40px) !important; padding-bottom: 48px !important; }
  .about-stats-strip { padding: 32px 0 !important; }
  .about-founder-section { padding: 40px 0 !important; }
  .about-values-section  { padding: 40px 0 !important; }
}

/* ── 10. ABOUT PAGE: CENTRED EVERYTHING ─────────────────────── */
@media (max-width: 768px) {

  /* Stats strip — all centre */
  .about-stats-strip-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .about-stat-item {
    text-align: center !important;
    padding: 20px 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }

  .about-stat-item:last-child { border-bottom: none !important; }
  .about-stat-item:first-child { padding-top: 0 !important; }
  .about-stat-num { font-size: 2.4rem !important; }

  /* Founder section — centred, larger photo */
  .about-founder-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 28px !important;
    text-align: center !important;
  }

  .about-founder-photo-wrap {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .about-founder-photo {
    width: 260px !important;
    height: auto !important;
    aspect-ratio: 3/4 !important;
  }

  .about-founder-text {
    text-align: center !important;
  }

  .about-founder-eyebrow { text-align: center !important; }

  .about-founder-text h2 { font-size: 1.5rem !important; text-align: center !important; }

  .about-founder-text p { text-align: center !important; }

  .founder-sig {
    text-align: center !important;
    margin-top: 20px !important;
  }

  /* Values grid — single column, centred */
  .values-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .value-card { text-align: center !important; }

  /* About hero centred text already, just ensure sub-text fits */
  .about-hero-centered { padding: 0 4px !important; }
  .about-hero-centered h1 { font-size: 2rem !important; }
}

/* ── 11. CONTACT PAGE IMPROVEMENTS ─────────────────────────── */
@media (max-width: 768px) {

  .contact-intro { padding: 24px 20px !important; }
  .contact-intro-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .contact-intro-title { font-size: 1.3rem !important; }
  .contact-detail-email { font-size: 1rem !important; }

  .contact-form-card {
    border-radius: 16px !important;
    padding: 24px 20px !important;
  }

  /* Make the CTA submit button premium */
  .contact-form-card .form-submit {
    background: var(--primary) !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    padding: 15px !important;
    letter-spacing: -0.01em !important;
    box-shadow: 0 4px 20px hsla(153,42%,16%,.22) !important;
    transition: all 0.18s !important;
  }

  .contact-form-card .form-submit:hover {
    background: hsl(153, 39%, 12%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 28px hsla(153,42%,16%,.3) !important;
  }
}

/* ── EXTRAS: small fixes ────────────────────────────────────── */
@media (max-width: 768px) {

  /* Plans grid */
  .plans-grid,
  .plans-full { grid-template-columns: 1fr !important; max-width: 100% !important; }

  /* Founder band on home */
  .founder-inner {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 24px !important;
  }
  .founder-photo { margin: 0 auto !important; }
  .founder-quote { font-size: 1.05rem !important; }

  /* Safety */
  .safety-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Clinicians benefits */
  .clin-benefits { grid-template-columns: 1fr !important; }
  .clin-cta-box  { padding: 32px 20px !important; margin-top: 32px !important; }

  /* Pricing preview on home */
  .pricing-prev-hd { margin-bottom: 28px !important; }

  /* Page hero inner spacing */
  .page-hero-text h1 { font-size: clamp(1.8rem, 5vw, 2.6rem) !important; }
  .page-hero-text p  { font-size: 0.95rem !important; }

  /* Waitlist grid */
  .waitlist-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .waitlist-left { position: static !important; }

  /* Two-sides grid */
  .two-sides-grid { grid-template-columns: 1fr !important; }
  .side-col { padding: 28px 20px !important; }
}