/* ==========================================================================
   Brain Buddy — responsive.css
   Container-query overrides for Elementor global classes
   Tiers: 1330 / 1024 / 820 / 565 (container max-width, px)

   REQUIRES container-type: inline-size on each class's nearest sizing
   ancestor. Add once, site-wide:
   ========================================================================== */

html body .global-section,
html body .section-inner,
html body .section-inner-grid,
html body .header,
html body .site-footer,
html body .card-grid,
html body .faq-panels {
  container-type: inline-size;
}

/* No @container (max-width:1440px) tier: .header/.section-inner/
   .section-inner-grid already cap at 1140–1440px, so nothing visually
   changes until the container drops under ~1330px. A 1440px tier would
   be a no-op on every class below. */


/* ---- global-section ---------------------------------------------------- */
.global-section {
  @container (max-width: 1024px) {
    padding-inline: 24px;
    padding-block-end: 80px;
  }

  @container (max-width: 820px) {
    padding-inline: 20px;
    padding-block-end: 64px;
  }

  @container (max-width: 565px) {
    padding-inline: 16px;
    padding-block-start: 16px;
    padding-block-end: 48px;
  }
}

/* ---- hero / default-hero -------------------------------------------------
   Radius steps down the existing brand scale (48 hero → 40 large-panel
   → 22 card) instead of inventing new values. */
.hero,
.default-hero {
  @container (max-width: 1024px) {
    border-end-start-radius: 40px;
    border-end-end-radius: 40px;
  }

  @container (max-width: 565px) {
    border-end-start-radius: 22px;
    border-end-end-radius: 22px;
  }
}

.default-hero {
  @container (max-width: 1024px) {
    padding-block: 64px 72px;
    padding-inline: 24px;
  }

  @container (max-width: 820px) {
    padding-block: 48px 56px;
    padding-inline: 20px;
  }

  @container (max-width: 565px) {
    padding-block: 32px 40px;
    padding-inline: 16px;
  }
}

/* ---- home-hero ----------------------------------------------------------- */
.home-hero {
  @container (max-width: 1024px) {
    padding-block-start: 60px;
    padding-block-end: 88px;
    padding-inline: 24px;
  }

  @container (max-width: 820px) {
    padding-block-start: 48px;
    padding-block-end: 64px;
    padding-inline: 20px;
  }

  @container (max-width: 565px) {
    padding-block-start: 32px;
    padding-block-end: 48px;
    padding-inline: 16px;
  }
}

/* ---- hero-ctas — stack buttons full-width on mobile ----------------------- */
.hero-ctas {
  @container (max-width: 565px) {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
}

/* ---- footer-top — real columns are 1.3fr .9fr .9fr 1.1fr (uniform 48px
   gap), not 4 equal tracks. Selector matches theme CSS nesting exactly
   so this wins at equal specificity (loads after in the cascade). ------- */
.site-footer.full-bleed .footer-inner .footer-top {
  @container (max-width: 1024px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  @container (max-width: 565px) {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 40px;
  }
}

/* ---- site-footer -----------------------------------------------------------
   Radius steps down to the existing 24px card-scale token on mobile. */
.site-footer {
  @container (max-width: 1024px) {
    padding-block-start: 64px;
    margin-inline: 16px;
    border-start-start-radius: 36px;
    border-start-end-radius: 36px;
  }

  @container (max-width: 565px) {
    padding-block-start: 48px;
    margin-inline: 12px;
    max-width: calc(100% - 24px);
    border-start-start-radius: 24px;
    border-start-end-radius: 24px;
  }
}

/* ---- final-cta -------------------------------------------------------------- */
.final-cta {
  @container (max-width: 1024px) {
    padding-block-end: 88px;
  }

  @container (max-width: 820px) {
    padding-block-end: 64px;
  }

  @container (max-width: 565px) {
    padding-block-start: 16px;
    padding-block-end: 48px;
  }
}

/* ---- founder ------------------------------------------------------------------ */
.founder {
  @container (max-width: 1024px) {
    padding-block-end: 88px;
  }

  @container (max-width: 820px) {
    padding-block-end: 64px;
  }

  @container (max-width: 565px) {
    padding-block-start: 24px;
    padding-block-end: 48px;
  }
}

/* ---- intro --------------------------------------------------------------------- */
.intro {
  @container (max-width: 1024px) {
    padding-block-start: 72px;
  }

  @container (max-width: 820px) {
    padding-block-start: 56px;
    padding-block-end: 32px;
  }

  @container (max-width: 565px) {
    padding-block-start: 40px;
    padding-block-end: 24px;
  }
}

/* ---- full-bleed ------------------------------------------------------------------ */
.full-bleed {
  @container (max-width: 1024px) {
    padding-inline: 24px;
  }

  @container (max-width: 565px) {
    padding-inline: 16px;
  }
}

/* ---- card ---------------------------------------------------------------------------
   border-radius stays at 22px (already the smallest brand token) — not scaled. */
.card {
  @container (max-width: 1024px) {
    padding-block: 32px;
    padding-inline: 28px;
  }

  @container (max-width: 565px) {
    padding-block: 28px;
    padding-inline: 24px;
    gap: 16px;
  }
}

/* ---- card-grid ------------------------------------------------------------------------
   Gap only. Column count isn't set on this shared class — confirm the
   per-instance grid-template-columns actually collapses to 1 col at ≤820/565. */
.card-grid {
  @container (max-width: 1024px) {
    gap: 16px 20px;
  }

  @container (max-width: 565px) {
    gap: 14px;
  }
}

/* ---- section-inner / copy-col — gap tightens on mobile only --------------------------- */
.section-inner,
.copy-col {
  @container (max-width: 565px) {
    gap: 16px;
  }
}

/* ---- label-col — italic accent heading scales down on mobile -------------------------- */
.label-col {
  @container (max-width: 565px) {
    font-size: 21px;
  }
}

/* ---- quote — decorative pull-quote mark scales down on mobile ------------------------- */
.quote {
  @container (max-width: 565px) {
    font-size: 16px;
  }
}

/* ---- faq-item — tighter accordion padding on mobile ------------------------------------ */
.faq-item {
  @container (max-width: 565px) {
    padding-block: 20px;
  }
}

/* ---- team-row — radius steps down with the brand rounding scale ------------------------ */
.team-row {
  @container (max-width: 565px) {
    border-radius: 24px;
  }
}

/* ---- asymmetric 2-col grid family — stack to 1 column on tablet portrait ---------------
   Selectors match theme CSS exactly (same specificity, later in cascade = wins). */
.elementor .section-inner-grid.cols-85-115,
.elementor .section-inner-grid.cols-90-110,
.elementor .section-inner-grid.cols-80-120,
.founder .section-inner-grid {
  @container (max-width: 820px) {
    grid-template-columns: 1fr;
  }
}

/* therapy-card's column-split is !important in the theme CSS, so the
   override has to match that specificity to win. */
.therapy-card {
  @container (max-width: 820px) {
    grid-template-columns: 1fr !important;
  }
}

/* ---- disable sticky once the 2-col grids above stack — a pinned sidebar
   makes no sense once its sibling column is gone. ------------------------- */
.sticky,
.label-col .stick {
  @container (max-width: 820px) {
    position: static;
    top: auto;
  }
}


/* ==========================================================================
   NOT INCLUDED — no rules generated
   ==========================================================================
   Still genuinely empty (no props anywhere — nothing to make responsive
   until they're styled):
     faq-panel, flip, services, founder-team, nav-faq, team-photo

   Resolved by theme CSS, no override needed:
     list — flex row, gap 8px, stable at every width
     steps-line — repeating-linear-gradient background, scales with
       element width automatically, no breakpoint needed
     footer-inner — max-width: 1120px; already smaller than the
       container at ≤820/565, so the cap never binds there
     final-cta-wrapper — only has color-context child overrides
       (.btn-primary/.btn-ghost inside it), no layout of its own

   Intentionally left unscaled — small, stable at every container width:
     stick (base position rule), plus, mark, dot, faq-question, dash,
     pull-quote, chip, default-eyebrow, eyebrow, footer-link, btn,
     btn-primary, btn-ghost, btn-line, card-link, card-icon,
     section-inner-grid, header, faq-panels, faq-answer, hero-sub,
     hero-lede
   ========================================================================== */