/* =============================================================
   mobile.css — narrow-viewport overrides
   ---
   Kept separate from styles.css so the design source of truth
   stays untouched (per CLAUDE.md §15). Loaded AFTER styles.css
   in site/snippets/header.php, so these rules win on cascade.
   ---
   Breakpoints follow Bootstrap 5.3:
     md / 767.98px  ← typical tablet → phone boundary
     sm / 575.98px  ← narrow phone
   Most fixes target md so they apply to tablets in portrait too.
   ============================================================= */

/* -------------------------------------------------------------
   Logo: HTML has width="400" which overflows narrow viewports.
   Cap it for mobile so the navbar doesn't blow out. The hamburger
   sits to its right via Bootstrap's flex layout.
   ------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .navbar .logo img {
    width: auto;
    max-width: 180px;
    height: auto;
  }
}

@media (max-width: 575.98px) {
  .navbar .logo img {
    max-width: 150px;
  }
}


/* -------------------------------------------------------------
   Featured course section (homepage): image appears BEFORE content
   in source order so on desktop it sits left-of-content. When the
   grid collapses to 1 column the image floats above the heading,
   which means a reader on a phone sees the picture before they
   know what the section is about. Reorder so copy comes first.
   ------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .featured-grid {
    display: flex;
    flex-direction: column;
  }
  .featured-grid > .featured-content { order: 1; }
  .featured-grid > .featured-image-col { order: 2; }
}


/* -------------------------------------------------------------
   Inline newsletter forms: input + button live in a horizontal
   flex layout. On narrow phones each takes ~140px of a 320px
   viewport, leaving the input only enough room for ~8 chars.
   Stack them vertically below 480px so each is full-width.
   ------------------------------------------------------------- */
@media (max-width: 479.98px) {
  .newsletter,
  .ha-newsletter-form,
  .fc-newsletter {
    flex-direction: column;
    gap: var(--space-8);
  }

  .newsletter input,
  .ha-newsletter-form input,
  .fc-newsletter input {
    border-radius: var(--radius-999);
    width: 100%;
  }

  .newsletter button,
  .ha-newsletter-form button,
  .fc-newsletter button {
    width: 100%;
    border-radius: var(--radius-999);
  }

  /* The .newsletter shell has a border around the whole pill; on
     mobile each child is its own pill so the outer border looks
     wrong. Strip it. */
  .newsletter {
    border: none;
    padding: 0;
  }
}


/* -------------------------------------------------------------
   CTA pairs: .cta-row already uses flex-wrap, but on a 320px
   phone two buttons side-by-side with 16px gap leaves each one
   ~140px wide — labels like "Learn More About Lessons" wrap
   awkwardly. Stack vertically on narrow phones and let each
   button be full-width for tap-target clarity (WCAG 2.5.5).
   ------------------------------------------------------------- */
@media (max-width: 479.98px) {
  .cta-row,
  .ha-hero-ctas,
  .enrollment-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-row > a,
  .ha-hero-ctas > a,
  .enrollment-ctas > a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}


/* -------------------------------------------------------------
   Hero stats: existing rule at 991px flexes them to 50% each
   (2×2 grid). On very narrow phones two stats per row still
   look cramped because each .stat-num is a clamp-sized display
   font. Drop to 1-column at 479px and reduce the number-font
   so big stats like "Combined Years in Practice" don't push the
   stat number to two lines.
   ------------------------------------------------------------- */
@media (max-width: 479.98px) {
  .hero-stats {
    flex-direction: column;
    gap: var(--space-20);
  }
  .stat {
    flex: 0 0 auto;
    text-align: center;
  }
  .stat-num {
    font-size: var(--fs-32);
  }
}


/* -------------------------------------------------------------
   ha-stats-strip (homepage-alt hero stats): same pattern.
   ------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .ha-stats-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 379.98px) {
  .ha-stats-row {
    grid-template-columns: 1fr;
  }
}


/* -------------------------------------------------------------
   Section vertical padding: the homepage @media rule at 991
   sets sections to var(--space-80) (= 80px) top/bottom. On a
   phone that's two thumbs of empty space between sections. Trim
   it down for narrow phones to keep scrolling pace.
   ------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .mission,
  .founders,
  .offerings,
  .featured,
  .audience,
  .final-cta,
  .ha-process,
  .ha-offerings,
  .ha-founders,
  .ha-course,
  .ha-premise,
  .cd-hero,
  .cd-outcomes,
  .cd-curriculum,
  .cd-experience,
  .cd-testimonials,
  .cd-faq,
  .tk-problem,
  .tk-contents,
  .tk-value,
  .tk-workflow,
  .tk-checklist,
  .tk-enroll,
  .ct-contact,
  .ct-routes,
  .fb-survey,
  .fb-impact,
  .bd-related,
  .ls-grid-section,
  .about-intro,
  .about-origin,
  .about-values,
  .about-founders,
  .about-connect {
    padding-top: var(--space-56);
    padding-bottom: var(--space-56);
  }
}


/* -------------------------------------------------------------
   Display-class headings: clamp() handles most sizes nicely but
   the lower bound on a couple of selectors (.display = 48px,
   .hero-title = 44px) can still wrap mid-word on a 320px phone
   with a long compound headline. Nudge the lower bound down
   so words don't break.
   ------------------------------------------------------------- */
@media (max-width: 479.98px) {
  .display {
    font-size: clamp(34px, 9vw, 56px);
    line-height: var(--lh-100);
  }
  .hero-title,
  .cd-hero-title,
  .ha-hero-title,
  .tk-hero-title {
    word-break: normal;
    overflow-wrap: anywhere;
  }
}


/* -------------------------------------------------------------
   Containers on narrow phones: bring side-padding down so
   image cards and form fields don't get squeezed by 24px of
   gutter on each side of a 320px viewport.
   ------------------------------------------------------------- */
@media (max-width: 479.98px) {
  .container {
    padding-left: var(--space-16);
    padding-right: var(--space-16);
  }
}


/* -------------------------------------------------------------
   Footer: at 991 the footer reflows to 2 columns. Below 480px,
   2 columns of footer links + brand description is still cramped.
   Drop to single column.
   ------------------------------------------------------------- */
@media (max-width: 479.98px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }
}


/* -------------------------------------------------------------
   Course-band (homepage-alt) — fixed earlier this session to
   wrap in .container. Inside .container with the 420px image
   column + 1fr content column, on narrow phones the 420px
   column is forced to viewport-width which leaves no room for
   the content. Drop to 1-column at the same breakpoint the
   ha-course-inner @media rule already uses, but also reduce
   internal padding so content doesn't get squeezed.
   ------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .ha-course-content {
    padding: var(--space-32) var(--space-16);
  }
}


/* -------------------------------------------------------------
   Forms — long fieldsets that use 2-col on desktop benefit from
   wider tap-targets on mobile. Most already collapse via existing
   rules; this nudges form inputs to a minimum 44px tap height
   (WCAG 2.5.5 AAA target size).
   ------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .ct-field input,
  .ct-field select,
  .ct-field textarea,
  .fb-field input,
  .fb-field select,
  .fb-field textarea {
    min-height: 44px;
  }
}


/* -------------------------------------------------------------
   Topbar announcement: the demo banner sometimes contains long
   copy. On narrow phones it can wrap awkwardly with the inline
   red background. Trim padding so the wrapped lines aren't
   surrounded by huge whitespace.
   ------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .topbar p {
    font-size: var(--fs-12);
    line-height: var(--lh-130);
    padding: var(--space-6) 0;
  }
}


/* -------------------------------------------------------------
   Breadcrumbs: on narrow phones, breadcrumb trails with 3+
   levels can wrap awkwardly. Allow them to wrap with a small
   gap rather than smashing into each other.
   ------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .breadcrumb {
    flex-wrap: wrap;
    row-gap: var(--space-4);
    font-size: var(--fs-13);
  }
}


/* -------------------------------------------------------------
   Tables-like grids in admin-facing sections (footer columns,
   meta items): on narrow phones the dt/dd or label/value pairs
   should sit closer together vertically to keep things scannable.
   ------------------------------------------------------------- */
@media (max-width: 479.98px) {
  .ha-course-meta {
    flex-direction: column;
    gap: var(--space-12);
  }
}