/* ═══════════════════════════════════════════════════════════
   ECHO AI Solutions — Mobile Stylesheet
   Loaded on every page after main.css (and page-specific CSS).
   Fixes and supplements all mobile breakpoints site-wide.
   ═══════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────
   GLOBAL — applies to every page
───────────────────────────────────────────────────────── */

/* iOS Safari: background-attachment:fixed causes blank/broken
   sections on mobile. Override to scroll everywhere. */
@supports (-webkit-overflow-scrolling: touch) {
  * { background-attachment: scroll !important; }
}
/* Belt-and-suspenders for non-Webkit mobile browsers */
@media (max-width: 768px) {
  * { background-attachment: scroll !important; }
}

/* Shared page-hero inner padding — every inner page hero uses
   .page-hero-inner with padding: 0 60px. Tighten on mobile. */
@media (max-width: 640px) {
  .page-hero { padding: 110px 0 72px; }
  .page-hero h1 { margin-bottom: 20px; }
  .page-hero-sub { font-size: 0.95rem; }
}

/* Signal divider side padding */
@media (max-width: 480px) {
  .signal-rule { padding: 0 20px; }
}

/* Buttons — ensure they never overflow their container */
@media (max-width: 400px) {
  .btn {
    padding: 13px 24px;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    white-space: normal;
    text-align: center;
  }
}


/* ─────────────────────────────────────────────────────────
   HOME PAGE (index.html)
   main.css already handles 960px + 520px breakpoints well.
   Fill the gap between those two.
───────────────────────────────────────────────────────── */

/* Future Vision section: background-attachment:fixed already
   covered by the global rule above. */

/* Belief cards: border-right separators become border-bottom
   when stacked in single column */
@media (max-width: 960px) {
  .belief-card {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .belief-card:last-child { border-bottom: none; }
}

/* Product cards: tighten inner padding on narrow screens */
@media (max-width: 400px) {
  .card-body { padding: 24px 20px; }
  .card-chips { gap: 5px; }
  .card-chips span { font-size: 0.5rem; padding: 4px 9px; }
}

/* Story section: quote side is hidden when text col fills width */
@media (max-width: 960px) {
  .story-quote-mark { font-size: 3.5rem; }
}
@media (max-width: 480px) {
  .story-section { padding: 64px 0; }
  .story-inner { padding: 0 20px; }
  .story-text h2 { font-size: clamp(1.6rem, 8vw, 2.4rem); }
}

/* Vision statement CTA buttons already flex-direction:column
   at 480px. Make sure padding doesn't cut them off. */
@media (max-width: 480px) {
  .vision-inner { padding: 0 20px; }
  .vision-section { padding: 80px 0; }
}


/* ─────────────────────────────────────────────────────────
   LEGACY PAGE (pages/legacy.html)
   Existing breakpoint handles: two-col-layout, padding,
   how-step, cat-grid, foot-nav. Gaps to fill:
   — .cat-grid repeat(2,1fr) cards need smaller padding
   — .promise-ctas stacking at narrow widths
   — .page-hero padding on very small screens
───────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* padding on inner-contain already handled, but missing
     the legacy-specific .inner-section rhythm */
  .inner-section { padding: 80px 0; }
}

@media (max-width: 640px) {
  .inner-section { padding: 64px 0; }
  /* Category/feature cards: reduce inner padding on small screens */
  .cat-card { padding: 28px 24px; }
  /* Promise CTAs */
  .promise-ctas {
    flex-direction: column;
    align-items: center;
  }
  .promise-ctas .btn { width: min(280px, 100%); text-align: center; }
}

@media (max-width: 480px) {
  /* How-step: the 60px number column can shrink further */
  .how-step { grid-template-columns: 48px 1fr; gap: 16px; }
  .how-num {
    font-size: clamp(2rem, 8vw, 3rem);
  }
}


/* ─────────────────────────────────────────────────────────
   GROVE PAGE (pages/grove.html)
   Existing breakpoint handles: two-col-layout, padding,
   how-step, grove-pull-quote, grove-canvas.
   Gaps:
   — .how-steps display uses 80px column at desktop
   — .closing-ctas needs column stacking at narrow
   — CTA button section padding
───────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .grove-pull-quote { padding: 48px 20px; }
  .closing-ctas {
    flex-direction: column;
    align-items: center;
  }
  .closing-ctas .btn { width: min(280px, 100%); text-align: center; }
  /* Table/registration area if present */
  .grove-table-inner { padding: 0 20px; }
}

@media (max-width: 480px) {
  .how-step { grid-template-columns: 48px 1fr; gap: 16px; }
  #grove-canvas { height: 260px; }
}


/* ─────────────────────────────────────────────────────────
   INVEST PAGE (pages/invest.html)
   Existing breakpoint handles: two-col, form-row, padding.
   Gaps:
   — Inner section padding not fully addressed at 480px
   — Submit button is align-self:flex-start (fine on desktop,
     should go full-width on mobile for tap area)
   — Form container padding at very small screens
───────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .invest-form .form-submit {
    width: 100%;
    text-align: center;
    align-self: stretch;
    padding: 17px 24px;
  }
  /* Tier/pricing cards: reduce padding */
  .tier-card { padding: 28px 24px !important; }
  /* Aligned/form contains */
  .aligned-contain,
  .form-contain { padding: 0 20px; }
}

@media (max-width: 480px) {
  .inner-contain { padding: 0 20px; }
}


/* ─────────────────────────────────────────────────────────
   ORIGIN PAGE (pages/origin.html)
   Existing breakpoint handles: padding, echo-word, chapter-img.
   Gaps:
   — .closing-ctas is inline-grid with fixed 220px columns —
     breaks on small screens, needs to go flex column
   — Chapter image panel height on very small screens
   — Section vertical rhythm
───────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  /* Fix the fixed-width 220px×220px CTA grid */
  .closing-ctas {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .closing-ctas .cta-btn,
  .closing-ctas .cta-full {
    width: min(280px, 100%);
  }
  .closing-ctas-wrap { padding: 0 24px; }
}

@media (max-width: 480px) {
  .chapter-img-panel { height: 220px !important; }
  .wide-contain,
  .inner-contain { padding: 0 20px; }
  /* Dedication section */
  .dedication-inner { padding: 0 20px; }
}


/* ─────────────────────────────────────────────────────────
   TREE PAGE (pages/tree.html)
   Existing breakpoints handle: grow-grid, phil-cards,
   grow-item, padding at 680px.
   Gaps:
   — The hero CTA button has fixed padding: 18px 52px
     and max-width: 270px / min-width: 190px which clips at ~375px
   — Phil cards lose inner padding on small screens
   — .tree-rings / canvas animation if present: height
───────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .page-hero-inner { padding: 0 28px; }
  .phil-inner,
  .tree-viz-inner,
  .grow-inner,
  .tree-closing-inner { padding: 0 28px; }
}

@media (max-width: 680px) {
  /* Hero CTA button — remove fixed min/max-width constraints */
  .tree-hero-cta {
    min-width: 0 !important;
    max-width: 100% !important;
    width: min(300px, calc(100% - 40px));
    padding: 16px 28px !important;
    text-align: center;
  }
  /* Phil/grow cards inner padding */
  .phil-card { padding: 32px 24px !important; }
  .grow-right { padding: 32px 24px !important; }
  .grow-item  { padding: 24px !important; }
}

@media (max-width: 480px) {
  .page-hero-inner,
  .phil-inner,
  .tree-viz-inner,
  .grow-inner,
  .tree-closing-inner { padding: 0 20px; }
}


/* ─────────────────────────────────────────────────────────
   FUTURE PAGE (pages/future.html)
   Existing breakpoint handles: vision-grid, padding.
   Gaps:
   — Vision cards (.vision-item) have padding: 52px 44px —
     too much at mobile
   — Manifesto section padding
   — Closing CTAs
───────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .vision-item { padding: 36px 28px !important; }
  .manifesto-inner { padding: 0 24px; }
}

@media (max-width: 640px) {
  .vision-item { padding: 28px 20px !important; }
  .closing-ctas {
    flex-direction: column;
    align-items: center;
  }
  .closing-ctas .btn { width: min(280px, 100%); text-align: center; }
  .manifesto-inner { padding: 0 20px; }
  .narrow-contain { padding: 0 20px; }
}


/* ─────────────────────────────────────────────────────────
   VIRTUOSA PAGE (pages/virtuosa.html)
   Already has 7 media queries — most thorough on the site.
   One gap: the Sparky poster image section may need height
   clamping on very small screens.
───────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  /* Sparky poster */
  .sparky-img,
  .sparky-poster { max-height: 60vw; }
  /* Tier cards — reduce inner padding */
  .tier-card { padding: 28px 20px !important; }
}


/* ─────────────────────────────────────────────────────────
   CONTACT PAGE (pages/contact.html)
   Already has solid breakpoints (900px + 560px).
   One addition: contact-section background-attachment:fixed
   is handled by the global rule at top. Nothing else needed.
───────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────
   404 PAGE (pages/404.html)
   Simple centered layout — already inline-styled with
   padding: 120px 40px and flex wrap. Just tighten padding
   and ensure buttons stack cleanly.
───────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  /* .not-found has inline padding: 120px 40px — override it */
  .not-found {
    padding: 90px 20px !important;
  }
  /* Also cover any alternate class names used on other error pages */
  .not-found-inner,
  .error-inner {
    padding: 90px 20px !important;
  }
  /* .nf-cta is the actual CTA container on 404.html */
  .nf-cta,
  .error-ctas,
  .not-found-ctas {
    flex-direction: column;
    align-items: center;
  }
  .nf-cta .btn,
  .error-ctas .btn,
  .not-found-ctas .btn { width: min(260px, 100%); text-align: center; }
}


/* ─────────────────────────────────────────────────────────
   FOOTER — supplement main.css rules
   (main.css already handles 860px + 520px)
───────────────────────────────────────────────────────── */

@media (max-width: 400px) {
  .sh-body { padding: 28px 16px 20px; }
  .sh-ground { padding: 0 16px 16px; }
  .sh-wordmark { font-size: 1.1rem; }
  .sh-nav { gap: 24px; }
}


/* ─────────────────────────────────────────────────────────
   SPARKY PAGE (pages/sparky.html)
   Inline breakpoints handle: 1000px (roles-grid, tiers-grid,
   loop-track), 860px (two-col, poster-col-wrap, inner-contain
   padding), 600px (problem-grid, replaces-grid).
   Gaps to fill:
   — Hero CTA buttons stack + full-width on small screens
   — .problem-card / .role-card / .tier-card inner padding
   — .replaces-grid goes 1-col at 400px (currently stays 2-col)
   — .loop-step inner padding on small screens
   — .poster-img-wrap / poster text vertical rhythm
   — .faq-item padding + question font size
   — .cta-section heading + button padding
   — Section vertical rhythm at 480px
───────────────────────────────────────────────────────── */

/* ── 860px: already handled inline (two-col, padding) ── */

@media (max-width: 640px) {
  /* Hero CTA buttons: stack and go full-width */
  .hero-ctas {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-ctas .btn-cyan,
  .hero-ctas .btn-ghost {
    width: min(300px, 100%);
    text-align: center;
    justify-content: center;
  }

  /* Section vertical rhythm */
  .inner-section { padding: 72px 0; }

  /* Problem cards: reduce padding */
  .problem-card { padding: 28px 24px !important; }

  /* Role cards */
  .role-card { padding: 28px 24px !important; }

  /* Tier cards: reduce inner padding */
  .tier-card { padding: 28px 24px !important; }

  /* Replaces grid: 2-col is fine at 640px,
     handled further down at 400px */

  /* Loop steps: reduce padding */
  .loop-step { padding: 24px 20px !important; }

  /* Poster section: reduce gap between image and text */
  .poster-col-wrap { gap: 32px; }

  /* FAQ items */
  .faq-item { padding: 24px 0 !important; }
  .faq-q { font-size: 0.9rem !important; }

  /* CTA section */
  .cta-section { padding: 80px 0 !important; }
  .cta-section .section-h2 { font-size: clamp(2rem, 8vw, 3rem); }
  .cta-inner {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .cta-inner .btn-cyan,
  .cta-inner .btn-ghost {
    width: min(300px, 100%);
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  /* Tighten all inner padding */
  .inner-contain { padding: 0 20px; }
  .page-hero-inner { padding: 0 20px; }
  .cta-inner { padding: 0 20px; }

  /* Section rhythm */
  .inner-section { padding: 60px 0; }

  /* Problem grid already 1-col at 600px — just reduce card padding */
  .problem-card { padding: 24px 18px !important; }

  /* Role cards */
  .role-card { padding: 24px 18px !important; }
  .role-icon { width: 44px; height: 44px; font-size: 1.2rem; }

  /* Loop: reduce step padding, shrink step number */
  .loop-step { padding: 20px 16px !important; }
  .loop-num {
    font-size: clamp(2rem, 8vw, 3rem);
    min-width: 40px;
  }

  /* Replaces: keep 2-col to 480px, handled at 400px below */

  /* Tier cards */
  .tier-card { padding: 24px 18px !important; }
  .tier-price { font-size: clamp(2rem, 8vw, 3.2rem) !important; }

  /* Poster: image box border radius if any */
  .poster-img-wrap { box-shadow: 0 0 28px rgba(0,212,255,0.08) !important; }

  /* FAQ */
  .faq-item { padding: 20px 0 !important; }
  .faq-q { font-size: 0.85rem !important; letter-spacing: 0.06em !important; }
  .faq-a { font-size: 0.9rem !important; }

  /* CTA section */
  .cta-section { padding: 64px 0 !important; }
}

@media (max-width: 400px) {
  /* Replaces grid: at 400px 2-col gets cramped, go 1-col */
  .replaces-grid { grid-template-columns: 1fr !important; }
  .replaces-item { padding: 18px 16px !important; }

  /* Tier features list */
  .tier-feature { font-size: 0.78rem !important; }

  /* Hero buttons */
  .btn-cyan,
  .btn-ghost {
    font-size: 0.6rem !important;
    letter-spacing: 0.16em !important;
    padding: 14px 24px !important;
  }

  /* FAQ */
  .faq-q { font-size: 0.8rem !important; }
}