/*
 * ============================================================
 *  RESPONSIVE  —  css/responsive.css
 *
 *  Strategy: Desktop-first overrides.
 *  All breakpoints in one file for easy scanning.
 *
 *  Breakpoints:
 *    1200px  — large tablet / small desktop
 *    1024px  — tablet landscape
 *     768px  — tablet portrait / large mobile  ← main mobile point
 *     480px  — small mobile (iPhone SE, etc.)
 *     360px  — very small mobile
 *
 *  Rules of thumb applied here:
 *    • All touch targets ≥ 44×44px
 *    • Reduce section padding on small screens
 *    • Single-column layouts below 768px
 *    • No horizontal overflow at any width
 * ============================================================
 */


/* ──────────────────────────────────────────
   1200px — Large Tablet
────────────────────────────────────────── */
@media (max-width: 1200px) {

  .hero__title { font-size: 2.6rem; }

  .hero__image-placeholder {
    width: 360px;
    height: 400px;
  }
}


/* ──────────────────────────────────────────
   1024px — Tablet Landscape
────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Reduce hero title */
  .hero__title { font-size: 2.2rem; }

  /* Shrink image a bit */
  .hero__image-placeholder {
    width: 300px;
    height: 340px;
  }

  /* 2-col grids */
  .services__grid     { grid-template-columns: 1fr 1fr; }
  .testimonials__grid { grid-template-columns: 1fr 1fr; }
  .pain__grid         { grid-template-columns: 1fr 1fr; }

  /* Footer: 2×2 */
  .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
}


/* ──────────────────────────────────────────
   768px — Tablet Portrait / Mobile
   This is the main mobile breakpoint.
────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Token overrides: tighter spacing ── */
  :root {
    --section-pad-y: 56px;
    --section-pad-x: 6%;
  }

  /* ── NAVIGATION ── */

  /* Hide desktop links, show hamburger */
  .nav__links    { display: none; }
  .nav__hamburger { display: flex; }

  /* Active nav link highlight */
  .nav__links a.is-active {
    color: var(--color-primary);
    font-weight: var(--weight-extrabold);
  }

  /*
   * Mobile dropdown — scoped here so it NEVER fires on desktop.
   * JS adds .is-open to .nav__links on hamburger click.
   */
  .nav__links.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    z-index: 99;
    background: var(--color-white);
    padding: var(--space-5) var(--section-pad-x);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    gap: 0;
    border-top: 2px solid var(--color-primary-xlight);
  }

  /* Larger tap targets for mobile nav links */
  .nav__links.is-open a {
    padding: 14px 0;
    border-bottom: 1px solid var(--color-primary-xlight);
    font-size: var(--text-base);
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .nav__links.is-open a:last-child {
    border-bottom: none;
    margin-top: var(--space-3);
  }

  /* CTA button inside mobile menu */
  .nav__links.is-open .nav__cta {
    text-align: center;
    justify-content: center;
    border-radius: var(--radius-full);
    padding: 14px 22px !important;
  }

  /* ── HERO ── */

  .hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 48px;
    padding-bottom: 48px;
    min-height: auto;
    text-align: center;
  }

  /* Show image first on mobile */
  .hero__visual { order: -1; }

  .hero__content { order: 1; }

  .hero__title  { font-size: 2rem; }

  .hero__lead {
    font-size: var(--text-base);
    margin-left: auto;
    margin-right: auto;
  }

  /* Centre buttons on mobile */
  .hero__btns {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Smaller image shape on mobile */
  .hero__image-wrap  { width: 260px; }
  .hero__image-placeholder {
    width: 100%;
    height: 280px;
  }

  /* Move floating badge inside image-wrap — repositioned */
  .floating-badge {
    top: auto;
    bottom: -12px;
    right: -8px;
    font-size: 0.75rem;
    padding: 8px 12px;
  }

  /* Stats row */
  .hero__stats {
    gap: var(--space-3);
    justify-content: center;
  }

  .stat-card {
    min-width: 90px;
    padding: 10px 14px;
  }

  /* ── SECTION HEADINGS ── */
  .section-title { font-size: 1.8rem; }

  /* ── PAIN ── */
  .pain__grid { grid-template-columns: 1fr; }

  /* ── ABOUT ── */
  .about__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Remove desktop offset — columns are stacked, no alignment needed */
  .about__image-wrap {
    margin-top: 0;
  }

  /* Cap image height so it doesn't fill whole screen */
  .about__image {
    max-height: 340px;
    /* Allow badge to escape below the photo */
    overflow: visible;
  }

  /* The img itself carries border-radius so it stays clipped */
  .about__image img {
    border-radius: var(--radius-2xl);
  }

  /* Move badge below the photo so it never covers the face */
  .about__badge {
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  /* Reserve space for the badge that now floats below */
  .about__image-wrap {
    padding-bottom: var(--space-10);
  }

  /* ── SERVICES ── */
  .services__grid { grid-template-columns: 1fr; }

  /* ── COURSES ── */
  .courses__grid { grid-template-columns: 1fr; }

  /* ── HOW IT WORKS ── */
  .how__steps {
    grid-template-columns: 1fr 1fr;
  }
  .how__steps::before { display: none; }

  /* ── TESTIMONIALS ── */
  .testimonials__grid { grid-template-columns: 1fr; }

  /* ── INSTAGRAM ── */
  .instagram__grid { grid-template-columns: repeat(2, 1fr); }

  /* ── BUTTONS — bigger tap areas ── */
  .btn--primary,
  .btn--outline {
    padding: 14px 28px;
    min-height: 48px;
  }

  .btn--white { min-height: 52px; }

  /* ── CTA BANNER ── */
  .cta-banner__title { font-size: 2rem; }
  .cta-banner__lead  { font-size: var(--text-base); }

  /* ── FOOTER ── */
  .footer__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer__bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }
}


/* ──────────────────────────────────────────
   480px — Small Mobile (iPhone SE, Galaxy A)
────────────────────────────────────────── */
@media (max-width: 480px) {

  /* ── Token overrides: tightest spacing ── */
  :root {
    --section-pad-y: 44px;
    --section-pad-x: 5%;
  }

  /* ── Nav logo — shrink badge + wordmark on small mobile ── */
  .nav__logo-badge {
    width: 36px;
    height: 36px;
  }

  .nav__logo-name {
    font-size: 0.85rem;  /* keep visible but compact */
    letter-spacing: -0.02em;
  }

  /* ── Hero ── */
  .hero__title { font-size: 1.75rem; }

  .hero__btns {
    flex-direction: column;
    align-items: center;
  }

  .hero__btns .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* Stats: wrap into 3 items in a row on small phones */
  .hero__stats { gap: var(--space-2); }

  .stat-card {
    min-width: 80px;
    padding: 8px 10px;
  }

  .stat-card__value { font-size: 1.2rem; }
  .stat-card__label { font-size: 0.65rem; }

  /* ── Section titles ── */
  .section-title     { font-size: 1.6rem; }
  .cta-banner__title { font-size: 1.6rem; }

  /* ── How it works: single column ── */
  .how__steps { grid-template-columns: 1fr; }

  /* Vertical step layout */
  .how__step { display: flex; align-items: flex-start; gap: 16px; text-align: left; }
  .how__step-icon { margin: 0; flex-shrink: 0; width: 56px; height: 56px; font-size: 1.4rem; }

  /* ── About qualities: single column ── */
  .about__qualities { grid-template-columns: 1fr; }

  /* ── Pain grid: single column already, reduce padding ── */
  .pain__card { padding: 20px 18px; }

  /* ── Course / service cards: full padding reduction ── */
  .course-card__body,
  .service-card__body,
  .service-card__header { padding: 20px; }

  /* ── Testimonial cards ── */
  .testi-card { padding: 20px; }

  /* ── Instagram: 2 col kept, but smaller gap ── */
  .instagram__grid { gap: var(--space-2); }

  /* ── FAQ ── */
  .faq-item__question { font-size: 0.9rem; padding: 16px 18px; }
  .faq-item__answer   { padding: 0 18px; }

  /* ── CTA button full width ── */
  .cta-banner .btn--white {
    width: 100%;
    max-width: 320px;
  }

  /* ── Footer brand max-width ── */
  .footer__brand p { max-width: 100%; }
}


/* ──────────────────────────────────────────
   360px — Very Small Screens (Galaxy A01 etc.)
────────────────────────────────────────── */
@media (max-width: 360px) {

  :root { --section-pad-x: 4%; }

  .nav__logo-badge { width: 34px; height: 34px; }
  .nav__logo-name  { font-size: 0.78rem; }
  .hero__title    { font-size: 1.55rem; }
  .section-title  { font-size: 1.4rem; }

  .hero__stats { flex-direction: column; align-items: center; }

  .stat-card { min-width: 120px; }
}


/* ──────────────────────────────────────────
   ACTIVE NAV LINK (desktop + mobile)
   • aria-current="page" = multi-page active state (set in HTML)
   • .is-active = scroll-spy within a single page (set by JS)
────────────────────────────────────────── */

/* Multi-page: current page link — darker, heavier, underlined */
.nav__links a[aria-current="page"] {
  color: var(--color-primary-dark);   /* darker shade of brand purple */
  font-weight: var(--weight-extrabold);
  position: relative;
}

.nav__links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2.5px;
  background: var(--color-primary-dark);
  border-radius: 2px;
}

/* Single-page scroll-spy fallback */
.nav__links a.is-active {
  color: var(--color-primary-dark);
  font-weight: var(--weight-extrabold);
  position: relative;
}

.nav__links a.is-active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2.5px;
  background: var(--color-primary-dark);
  border-radius: 2px;
}


/* ──────────────────────────────────────────
   CREDENTIALS — single column on mobile
────────────────────────────────────────── */
@media (max-width: 640px) {
  .credentials-grid {
    grid-template-columns: 1fr;
  }
}


/* ──────────────────────────────────────────
   PHILOSOPHY — tablet + mobile
────────────────────────────────────────── */
@media (max-width: 1024px) {
  .philosophy__inner {
    grid-template-columns: 1fr;
    gap: var(--space-14);
  }

  .philosophy__quote-wrap {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    align-items: start;
  }

  .philosophy__pillar:last-child {
    grid-column: auto;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .philosophy__pillars {
    grid-template-columns: 1fr;
  }

  .philosophy__quote-wrap {
    grid-template-columns: 1fr;
  }
}


/* ──────────────────────────────────────────
   JOURNEY — tablet + mobile
────────────────────────────────────────── */
@media (max-width: 1024px) {
  .journey__cards {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  .journey__card--premium::before {
    right: var(--space-5);
  }
}

@media (max-width: 640px) {
  .journey__cards {
    max-width: 100%;
  }
}


/* ──────────────────────────────────────────
   SCHOOLS — tablet + mobile
────────────────────────────────────────── */
@media (max-width: 1024px) {
  .schools__inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .schools__lead {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .schools__topic-item {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }
}


/* ──────────────────────────────────────────
   CONSCIOUS PARENTING TOOLS — mobile
────────────────────────────────────────── */
@media (max-width: 768px) {
  .conscious__question-card {
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-6);
    text-align: center;
    align-items: center;
  }

  .conscious__question-mark {
    font-size: 3rem;
    width: auto;
  }

  .conscious__question-text {
    font-size: var(--text-2xl);
  }
}

@media (max-width: 480px) {
  .conscious__question-text {
    font-size: var(--text-xl);
  }
}


/* ──────────────────────────────────────────
   REDUCED MOTION — respect user preference
────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Page Hero (inner pages) ── */
@media (max-width: 768px) {
  .page-hero {
    padding: 56px var(--section-pad-x) 40px;
  }
  .page-hero__title {
    font-size: var(--text-4xl);
  }
  .page-hero__lead {
    font-size: var(--text-base);
  }
}

/* ── Narrative section (V1.2) ── */
@media (max-width: 768px) {
  .narrative__block {
    flex-direction: column;
    gap: var(--space-4);
  }
}

/* ── Schools offering cards (V1.2) ── */
@media (max-width: 768px) {
  .schools__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .schools__offerings-wrap {
    order: -1;
  }
}

/* ── NGOs offering grid (V1.2) ── */
@media (max-width: 768px) {
  .ngos__offerings {
    grid-template-columns: 1fr;
  }
}

/* ── Enroll / Connect section ── */
@media (max-width: 768px) {
  .enroll__options {
    flex-direction: column;
    align-items: center;
  }
  .enroll__option {
    width: 100%;
    max-width: 340px;
    justify-content: center;
  }
  .cta-banner__connect {
    flex-direction: column;
    align-items: center;
  }
}

/* ── Program Tabs ── */
@media (max-width: 768px) {
  .tabs__nav {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    border-radius: var(--radius-xl);
    gap: var(--space-2);
    padding: 5px;
  }
  .tabs__tab {
    flex-shrink: 0;
    padding: var(--space-3) var(--space-5);
    min-height: 44px;
    font-size: var(--text-sm);
  }
  .tab-offerings--grid {
    grid-template-columns: 1fr;
  }
  .tab-content-title {
    font-size: var(--text-2xl);
  }
  .tab-content-lead {
    font-size: var(--text-base);
  }
  .tab-offering-card {
    padding: var(--space-5) var(--space-5);
  }
}

@media (max-width: 480px) {
  .tabs__tab {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
  }
  .tab-content-title {
    font-size: var(--text-xl);
  }
  .tab-offering-card {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
  }
}

/* ══════════════════════════════════════════════════════
   JOURNEY TIER BLOCKS — responsive
══════════════════════════════════════════════════════ */

/* Tablet: reduce left panel width */
@media (max-width: 1024px) {
  .journey__tier {
    grid-template-columns: 160px 1fr;
  }
  .journey__tier-body {
    padding: var(--space-8);
  }
  .journey__tier-name {
    font-size: var(--text-3xl);
  }
  .programs-tabs .tab-content-title {
    font-size: var(--text-4xl);
  }
}

/* Mobile: stack visual panel above body */
@media (max-width: 768px) {
  .journey__tier {
    grid-template-columns: 1fr;
  }

  .journey__tier-visual {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: var(--space-5) var(--space-6);
    gap: var(--space-4);
    min-height: auto;
  }

  .journey__tier-num {
    font-size: 5rem;
    bottom: -6px;
    right: -4px;
  }

  .journey__tier-icon {
    font-size: 2.2rem;
    position: static;
  }

  .journey__tier-tagline {
    font-size: var(--text-xs);
  }

  .journey__tier-body {
    padding: var(--space-6);
    border-left: none !important;
    border-top: 4px solid;
  }

  .journey__tier--1 .journey__tier-body { border-top-color: var(--color-bronze); }
  .journey__tier--2 .journey__tier-body { border-top-color: var(--color-primary); }
  .journey__tier--3 .journey__tier-body { border-top-color: var(--color-teal); }

  .journey__tier-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .journey__tier-cta {
    margin-left: 0;
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Tabs on mobile */
  .programs-tabs .tabs__nav {
    width: 100%;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
  }

  .programs-tabs .tabs__tab {
    flex: 1;
    padding: var(--space-4) var(--space-3);
    min-width: auto;
    gap: var(--space-1);
  }

  .programs-tabs .tabs__tab-icon {
    font-size: var(--text-xl);
  }

  .programs-tabs .tabs__tab-label {
    font-size: var(--text-xs);
  }

  .programs-tabs .tab-content-title {
    font-size: var(--text-3xl);
  }
}

@media (max-width: 480px) {
  .journey__tier-name {
    font-size: var(--text-2xl);
  }

  .programs-tabs .tabs__tab-icon {
    font-size: var(--text-lg);
  }
}

/* ── Stories Tabs (about.html) ─────────────────────── */
@media (max-width: 1024px) {
  .testimonials__grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .stories-tabs {
    padding: 0 var(--space-4);
  }

  .stories-tabs__nav {
    width: 100%;
    border-radius: var(--radius-xl);
  }

  .stories-tabs__tab {
    flex: 1;
    justify-content: center;
    padding: var(--space-3) var(--space-4);
  }

  .testimonials__grid--3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  /* Keep icons visible — just shrink the tab to fit */
  .stories-tabs__tab {
    font-size: var(--text-xs, 0.75rem);
    padding: var(--space-2-5, 10px) var(--space-3);
    gap: var(--space-1-5, 6px);
  }

  .stories-tabs__tab-icon {
    font-size: 1rem;
  }
}

/* ── Stage Map responsive ── */
@media (max-width: 900px) {
  .journey__stage-map {
    padding: var(--space-6);
  }
  .journey__stage-path { gap: var(--space-2); }
  .journey__stage-step { min-width: 90px; }
  .journey__stage-name { font-size: 11px; }
}

@media (max-width: 640px) {
  .journey__stage-map { padding: var(--space-5) var(--space-4); }
  .journey__stage-path {
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }
  .journey__stage-step { min-width: 140px; text-align: center; }
  .journey__stage-num  { width: 28px; height: 28px; font-size: 11px; }
  .journey__stage-name { font-size: 11px; }
  .journey__stage-tier { font-size: 10px; padding: 2px var(--space-2); }
  .journey__stage-arrow {
    transform: rotate(90deg);
  }
  .journey__stage-arrow svg { width: 18px; height: 18px; }
}

/* (420px grid removed — column layout applied at 640px instead) */

/* ── Tier collapsible responsive ── */
@media (max-width: 768px) {
  .journey__tier-expand-modules li,
  .journey__tier-expand-days li {
    flex-direction: column;
    gap: var(--space-1);
  }

  .journey__tier-expand-day,
  .journey__tier-expand-modules li strong {
    align-self: flex-start;
  }
}