/* =====================================================
   AURA MINDSPACE - COMPREHENSIVE RESPONSIVE STYLESHEET
   Covers: 1920px - 1440px - 1366px - 1024px - 768px - 430px - 390px - 360px
   Version: 3.0 | 2026
   ===================================================== */

/* =====================================================
   GLOBAL OVERFLOW FIX
   ===================================================== */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* =====================================================
   UNIVERSAL CONTAINER SYSTEM
   Every section must use .aura-container
   ===================================================== */
.aura-container,
.container,
.container-aura,
.main-container {
  width: min(100% - 32px, 1240px) !important;
  margin-inline: auto;
}

/* =====================================================
   GLOBAL IMAGE SAFETY
   ===================================================== */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =====================================================
   LARGE DESKTOP (1400px+)
   ===================================================== */
@media (min-width: 1400px) {
  .aura-container,
  .container-aura {
    max-width: 1340px !important;
    width: min(100% - 48px, 1340px) !important;
  }
}

/* =====================================================
   LAPTOP (992px - 1199px)
   ===================================================== */
@media (max-width: 1199px) {
  .hero-title-v2 {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
  }

  #svc-drop {
    width: min(540px, calc(100vw - 24px)) !important;
  }
}

/* =====================================================
   TABLET LANDSCAPE (768px - 991px)
   ===================================================== */
@media (max-width: 991px) {
  :root {
    --space-3xl: 5rem;
    --space-2xl: 3.5rem;
    --space-xl: 2.5rem;
  }

  .aura-container,
  .container,
  .container-aura,
  .main-container {
    width: min(100% - 32px, 100%) !important;
  }

  /* Header */
  .desktop-nav,
  .nav-cta {
    display: none !important;
  }

  .hamburger-btn {
    display: flex !important;
  }

  /* Bento Section */
  .bento-card {
    padding: 2rem 1.5rem;
  }

  .bento-icon-bg {
    font-size: 8rem;
  }

  .bento-title {
    font-size: 1.35rem;
  }

  /* Why Online Section */
  .why-online-section {
    padding: 5rem 0;
  }

  .premium-glass-card {
    padding: 2rem 1.5rem;
  }

  .glass-number {
    font-size: 5rem;
  }

  /* Approach Pillars */
  .premium-pillar-card {
    padding: 1.75rem;
  }

  /* Program Cards */
  .program-card {
    padding: 2rem 1.5rem;
    margin-bottom: 1rem;
  }

  /* Founder card */
  .founder-card {
    padding: 2rem;
  }

  /* Service card */
  .service-card {
    margin-bottom: 1rem;
  }

  /* FAQ */
  .faq-question {
    font-size: var(--text-sm, 0.9rem);
    padding: 1.25rem 1.25rem;
  }

  /* Contact Form */
  .contact-form-card {
    padding: 2rem;
  }

  /* Footer */
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  /* Premium Hero V2 */
  .premium-hero-v2 {
    padding: 7rem 0 3rem;
    min-height: auto;
    text-align: center;
  }

  .hero-actions-v2 {
    justify-content: center;
  }

  .hero-social-proof {
    justify-content: center;
    width: 100%;
    margin-top: 1rem;
  }

  .hero-desc-v2 {
    margin: 0 auto 2rem;
  }

  .hero-image-wrapper-v2 {
    margin: 3rem auto 0;
    max-width: 420px;
  }

  .hero-glass-card-v2 {
    left: 10px;
    bottom: 10px;
    width: calc(100% - 20px);
    min-width: unset;
  }

  /* Floating quote card in "A Space for Mothers" section */
  .lg\:col-span-5 {
    position: relative;
    overflow: visible;
    padding-bottom: 1rem;
  }
}

/* =====================================================
   MOBILE (0px - 767px)
   ===================================================== */
@media (max-width: 767px) {
  :root {
    --space-3xl: 4rem;
    --space-2xl: 2.75rem;
    --space-xl: 2rem;
  }

  /* Container */
  .aura-container,
  .container,
  .container-aura,
  .main-container {
    width: min(100% - 24px, 100%) !important;
  }

  /* Typography */
  h1, .h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  h2, .h2 {
    font-size: clamp(1.7rem, 6vw, 2.5rem);
  }

  h3, .h3 {
    font-size: clamp(1.4rem, 5vw, 2rem);
  }

  /* Header positioning */
  #site-header {
    top: 10px !important;
    width: calc(100% - 24px) !important;
  }

  /* Hero title V2 */
  .hero-title-v2 {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }

  /* Hero glass card V2 - make static on mobile */
  .hero-glass-card-v2 {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: 100%;
    min-width: unset;
    margin-top: 1.5rem;
    animation: none;
    border-radius: 1rem;
    justify-content: flex-start;
  }

  /* A Space for Mothers - floating quote card */
  .lg\:col-span-5 .absolute {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 1.5rem;
    border-radius: 1rem !important;
    transform: none !important;
  }

  /* Bento Grid Cards */
  .bento-card {
    padding: 1.75rem 1.25rem;
  }

  .bento-icon-bg {
    font-size: 6rem;
  }

  .bento-title {
    font-size: 1.25rem;
  }

  /* Section padding */
  .premium-editorial-section {
    padding: 3.5rem 0;
  }

  .editorial-body-wrapper {
    padding: 1.75rem;
  }

  .drop-cap {
    font-size: 3.5rem;
  }

  /* Section eyebrow */
  .hero-eyebrow-new {
    font-size: 0.75rem;
  }

  /* Audience pills */
  .premium-audience-pill {
    font-size: 0.85rem;
    padding: 0.75rem 1.25rem;
  }

  .floating-audience-cloud {
    padding: 1rem 0;
    gap: 0.75rem;
  }

  /* Why Online Section */
  .why-online-section {
    padding: 3.5rem 0;
  }

  .premium-glass-card {
    padding: 1.75rem 1.25rem;
  }

  .glass-number {
    font-size: 4.5rem;
  }

  /* Approach Pillars */
  .premium-pillar-card {
    padding: 1.5rem;
  }

  /* Program Cards */
  .program-card {
    padding: 1.5rem 1.25rem;
  }

  /* Founder */
  .founder-card {
    padding: 1.75rem;
  }

  /* Premium CTA Section */
  .premium-cta-section {
    padding: 4rem 0;
    text-align: center;
  }

  .premium-cta-section .section-title-new {
    font-size: 1.8rem !important;
  }

  /* CTA Actions flex */
  .cta-actions {
    flex-direction: column;
    align-items: center;
  }

  /* Contact */
  .contact-section {
    padding: 3.5rem 0;
  }

  .contact-form-card {
    padding: 1.5rem;
  }

  /* Prevents iOS zoom on input focus */
  .form-control-aura,
  input, textarea, select {
    font-size: 16px !important;
  }

  /* FAQ */
  .faq-question {
    padding: 1.1rem 1rem;
    font-size: 0.9rem;
  }

  .faq-answer {
    padding: 0 1rem 1rem;
  }

  /* Page Hero (inner pages) */
  .page-hero {
    padding: 7.5rem 0 3rem;
    text-align: center;
  }

  .breadcrumb-nav {
    justify-content: center;
  }

  /* Footer */
  .footer-logo img {
    height: 52px;
  }

  /* Values Grid */
  .about-values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* Buttons */
  .btn-primary-aura,
  .btn-outline-aura,
  .btn-gold {
    padding: 0.875rem 1.5rem;
    font-size: 0.85rem;
  }

  /* Site logo */
  .site-logo img {
    height: 50px;
  }

  /* Hero actions V2 */
  .hero-actions-v2 {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .hero-actions-v2 a,
  .hero-actions-v2 button {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* Testimonials carousel - reduce side padding */
  .testimonials-owl-wrap {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
  }

  /* Sticky sidebar disable on mobile */
  .lg\:sticky.lg\:top-32 {
    position: static !important;
  }

  /* Inner page min-height reset */
  .min-h-\[55vh\],
  .min-h-\[60vh\] {
    min-height: auto !important;
    padding-top: 7rem !important;
    padding-bottom: 2rem !important;
  }

  /* Decorative spinning rings - hide on mobile */
  .animate-\[spin_40s_linear_infinite\],
  .animate-\[spin_60s_linear_infinite_reverse\] {
    display: none !important;
  }

  /* Decorative circle blob on inner pages - hide */
  .relative.w-\[380px\].h-\[380px\] {
    display: none !important;
  }

  /* Bento grid cols - full width */
  .grid.grid-cols-1.md\:grid-cols-12 > [class*="md:col-span"] {
    grid-column: span 12 !important;
  }

  /* Large blob circles that cause horizontal overflow */
  .absolute.-left-24.top-0,
  .absolute.-right-24.bottom-0,
  .absolute.-left-20.top-0,
  .absolute.-right-20.bottom-0,
  .absolute.-right-16.top-20,
  .absolute.-left-10.bottom-20 {
    display: none !important;
  }

  /* Max width 3xl for FAQ */
  .max-w-3xl.mx-auto {
    max-width: 100%;
  }

  /* Testimonial quote text */
  .testi-card {
    padding: 1.25rem !important;
  }

  .testi-quote {
    font-size: 0.88rem !important;
  }

  /* Approach section mobile fallback grid cells */
  .lg\:hidden.grid > div {
    padding: 1.5rem !important;
  }

  /* Contact info cards */
  .group.flex.items-start.gap-5.rounded-3xl {
    padding: 1rem !important;
  }

  /* FAQ btn */
  .faq-item .faq-btn {
    padding: 1rem !important;
  }

  /* About image floating badge */
  .relative.w-full.overflow-hidden .absolute.-right-4 {
    right: 8px !important;
    bottom: 8px !important;
    animation: none !important;
  }
}

/* =====================================================
   INDEX MOBILE HERO - CTA buttons stack
   ===================================================== */
@media (max-width: 767px) {
  div[style*="display:flex;gap:12px;flex-wrap:wrap"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  div[style*="display:flex;gap:12px;flex-wrap:wrap"] a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Footer pre-footer CTA heading */
  .bg-\[#0F2A1C\] h2 {
    font-size: clamp(1.6rem, 5vw, 2.2rem) !important;
  }
}

/* =====================================================
   FINAL CTA BLOCK
   ===================================================== */
@media (max-width: 767px) {
  section.py-10 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .mx-auto.max-w-5xl {
    border-radius: 1.5rem !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .mx-auto.max-w-5xl h2 {
    font-size: clamp(1.5rem, 5vw, 2rem) !important;
  }

  .mx-auto.max-w-5xl a.inline-flex {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
}

/* =====================================================
   PRE-FOOTER CTA
   ===================================================== */
@media (max-width: 640px) {
  .shrink-0.flex.flex-col.sm\:flex-row {
    width: 100%;
    flex-direction: column !important;
  }

  .shrink-0.flex.flex-col.sm\:flex-row a {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* =====================================================
   TESTIMONIALS CAROUSEL
   ===================================================== */
@media (max-width: 640px) {
  .testimonials-owl-wrap {
    padding-left: 2.25rem !important;
    padding-right: 2.25rem !important;
  }

  .testimonials-carousel .center .testi-card {
    transform: scale(1.02) !important;
  }

  .testimonials-carousel .testi-card {
    transform: scale(0.96) !important;
  }
}

/* =====================================================
   FOOTER GRID
   ===================================================== */
@media (max-width: 640px) {
  .grid.grid-cols-1.gap-10.sm\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }

  .sm\:col-span-2.lg\:col-span-1 {
    grid-column: span 1 !important;
  }
}

/* =====================================================
   MOBILE SMALL (0px - 480px)
   ===================================================== */
@media (max-width: 480px) {
  :root {
    --space-3xl: 3.5rem;
    --space-2xl: 2.5rem;
    --space-xl: 1.75rem;
  }

  /* Hero (mobile panel) */
  .hero-section {
    padding: 5.5rem 0 2.5rem;
  }

  .hero-image-blob img {
    height: 240px;
  }

  /* Mobile hero image height */
  div[style*="height:280px"],
  div[style*="height: 280px"] {
    height: 220px !important;
  }

  /* Stats row */
  div[style*="gap:32px"],
  div[style*="gap: 32px"] {
    gap: 14px !important;
    flex-wrap: wrap;
  }

  /* Cards */
  .aura-card,
  .aura-glass-card {
    padding: 1.5rem 1.25rem;
  }

  /* Values grid single column */
  .about-values-grid {
    grid-template-columns: 1fr;
  }

  /* Trust badges */
  .trust-badge {
    font-size: 0.7rem;
    padding: 4px 8px;
  }

  /* Contact info */
  .contact-info-item {
    padding: 0.875rem 0;
  }

  /* Scroll indicator */
  .scroll-indicator {
    display: none;
  }

  /* Testimonials */
  .testimonials-owl-wrap {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* Bento title */
  .bento-title {
    font-size: 1.15rem;
  }

  /* Mobile menu CTA button */
  #mobile-menu .mt-10 a {
    font-size: 0.82rem;
    padding: 0.875rem 1rem;
    border-radius: 1rem;
  }
}

/* =====================================================
   EXTRA SMALL MOBILE (0px - 380px)
   ===================================================== */
@media (max-width: 380px) {
  .aura-container,
  .container,
  .container-aura,
  .main-container {
    width: calc(100% - 20px) !important;
  }

  #site-header {
    width: calc(100% - 16px) !important;
  }

  /* Mobile menu drawer */
  #mobile-menu > div.absolute.right-0.top-0 {
    width: 90% !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    padding-top: 6rem !important;
    padding-bottom: 2rem !important;
  }

  /* Mobile nav link size */
  #mobile-menu nav a {
    font-size: 1.5rem !important;
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
  }

  /* Program cards */
  .program-card {
    padding: 1.25rem 1rem;
  }

  /* Testimonials */
  .testimonials-owl-wrap {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* FAQ */
  .faq-question {
    font-size: 0.85rem;
    padding: 1rem 0.875rem !important;
  }

  /* Buttons */
  .btn-primary-aura,
  .btn-outline-aura,
  .btn-gold {
    padding: 0.8rem 1.25rem;
    font-size: 0.82rem;
  }

  /* Founder note card */
  .rounded-\[3rem\].border.border-forest\/10.bg-ivory {
    border-radius: 1.5rem !important;
    padding: 1.5rem !important;
  }

  /* Who can join pills */
  .flex.flex-wrap.justify-center > div {
    font-size: 0.78rem;
    padding: 0.5rem 0.875rem;
  }
}

/* =====================================================
   MOBILE MENU - Body lock
   ===================================================== */
body.menu-open {
  overflow: hidden;
}

/* =====================================================
   PRINT STYLES
   ===================================================== */
@media print {
  #site-header,
  #mobile-menu,
  .cta-section,
  .scroll-indicator,
  .hero-bg-shapes,
  #aura-preloader {
    display: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
}