/* =========================================================
   ForGrowth Academy — responsive.css
   Loaded LAST. A consolidated responsive layer covering the gaps the
   per-component stylesheets do not: viewport-unit behaviour on mobile
   browsers, touch-target sizing, landscape phones, small phones, the tablet
   band, and very wide screens.

   Nothing here restyles a component. It only adjusts sizing and spacing at
   viewport ranges the existing rules do not reach.
   ========================================================= */


/* =========================================================
   1. VIEWPORT UNITS ON MOBILE
   100vh does not account for the browser's collapsing address bar, so
   full-height elements get clipped on iOS and Android. dvh tracks the visible
   area. The vh line stays first as the fallback for older browsers.
   ========================================================= */

@supports (height: 100dvh) {
  .curtain { height: 100vh; height: 100dvh; }
  .bot { max-height: calc(100dvh - 40px); }
  @media (max-width: 480px) {
    .bot { height: 100dvh; }
  }
}


/* =========================================================
   2. TOUCH TARGETS
   Applied by pointer type rather than width, so a touchscreen laptop gets
   them too and a mouse user is not given oversized controls.
   ========================================================= */

@media (pointer: coarse) {
  /* 44px is the practical minimum for a reliable tap. */
  .nav-links a,
  .mobile-nav a,
  .cat-chip,
  .chip,
  .pg-mode,
  .flow-chain .flow-node,
  .faq-q,
  .bot-quick button { min-height: 44px; }

  .cat-chip,
  .chip { display: inline-flex; align-items: center; }

  /* Small icon buttons need padding rather than a taller box. */
  .bot-close,
  .pop-close,
  .nav-toggle { min-width: 44px; min-height: 44px; }

  /* Hover-only affordances never trigger on touch, so make sure nothing is
     hidden behind one. */
  .art-card-arrow,
  .tk-cell .tk-idx { opacity: 1; }
}


/* =========================================================
   3. LANDSCAPE PHONES AND SHORT SCREENS
   A phone held sideways is ~380px tall. Full-height intros and tall minimums
   make the page unusable there.
   ========================================================= */

@media (max-height: 520px) and (orientation: landscape) {
  /* Skip the brand curtain — there is no room for it. */
  .curtain { display: none; }
  .curtain-runway { height: 0; }
  .hero-veiled { opacity: 1 !important; transform: none !important; }

  .hero { padding-block: 28px 32px; }
  .hero .hero-visual { min-height: 0; }
  .hero .hv-score { position: static; margin-top: 12px; transform: none; }

  .section { padding: 44px 0; }
  .section-tight { padding: 36px 0; }

  /* The floating stack would cover most of the screen. */
  .fab-stack { bottom: 62px; gap: 7px; }
  .bot-launcher { bottom: 10px; right: 10px; }
  .bot { height: calc(100dvh - 20px); }
}


/* =========================================================
   4. TABLET (760px – 1024px)
   The band where two columns still work but desktop spacing is too generous.
   ========================================================= */

@media (min-width: 761px) and (max-width: 1024px) {
  .container { padding: 0 30px; }
  .section { padding: 88px 0; }
  .section-tight { padding: 68px 0; }

  /* Hero: dashboard sits below the copy, so give it room without a big gap. */
  .hero .hero-visual { min-height: 300px; margin-top: 8px; }

  /* Two columns reads better than one at this width. */
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .plus-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .plus-strip p { font-size: 13px; }
}


/* =========================================================
   5. SMALL PHONES (≤ 400px)
   ========================================================= */

@media (max-width: 400px) {
  .container { padding: 0 16px; }

  .section { padding: 56px 0; }
  .section-tight { padding: 44px 0; }

  /* Headline can overflow at this width if it does not scale down further. */
  .hero h1 { font-size: clamp(34px, 13vw, 48px); }
  .hero .hero-sub { font-size: 15px; }

  /* Stacked full-width buttons beat two cramped ones. */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  .section-head h2 { font-size: clamp(23px, 7.5vw, 30px); }

  /* Dashboard cluster: absolute children can push past the viewport. */
  .hero .hv-dash { width: 100%; transform: none; }
  .hero .hv-score { position: static; margin: 12px 0 0 auto; transform: none; }
  .hero .hv-chip { display: none; }
  .hero .hero-visual { min-height: 0; flex-direction: column; align-items: stretch; }

  .plus-strip { gap: 10px; }
  .batch-card { padding: 22px 18px; }
  .enquiry-side, .enquiry-form-area { padding: 28px 18px; }
}


/* =========================================================
   6. VERY SMALL PHONES (≤ 340px)
   Older and budget Android handsets still land here.
   ========================================================= */

@media (max-width: 340px) {
  .container { padding: 0 13px; }
  .hero h1 { font-size: 30px; }
  .section-head h2 { font-size: 22px; }
  .fab-stack { right: 10px; }
  .bot-launcher { right: 10px; bottom: 10px; }
}


/* =========================================================
   7. LARGE SCREENS (≥ 1600px)
   Content is capped at the shell width; this keeps the generous sections from
   feeling sparse on a very wide monitor.
   ========================================================= */

@media (min-width: 1600px) {
  .hero .hero-visual { min-height: 440px; }
  .floating-tools-transition .ft-grid { max-width: 1180px; }
}


/* =========================================================
   8. UNIVERSAL OVERFLOW GUARDS
   The three most common causes of a horizontal scrollbar on phones.
   ========================================================= */

/* Long unbroken strings (emails, URLs, tool names). */
.hero-sub,
.section-head-note,
.tl-body-inner p,
.mg-def-inner p,
.batch-card p,
.pg-desc,
.footer-note { overflow-wrap: break-word; }

/* Absolutely positioned decoration must never extend the page. */
.hero,
.curtain,
.floating-tools-transition,
#projects { overflow-x: clip; }

/* Tables and pre blocks scroll themselves rather than widening the layout. */
.prose table,
.prose pre { max-width: 100%; overflow-x: auto; }


/* =========================================================
   9. FLOATING ACTIONS vs PAGE CONTENT
   The Priya launcher and the action stack are fixed to the bottom-right. On a
   phone they can sit over a centred call-to-action in the last section before
   the footer. This reserves room so a button is never covered.
   ========================================================= */

@media (max-width: 760px) {
  .section-dark:last-of-type { padding-bottom: 130px; }
  .site-footer .footer-bottom { padding-bottom: 84px; }
}

@media (max-width: 400px) {
  .section-dark:last-of-type { padding-bottom: 120px; }
}


/* =========================================================
   10. SECTION RHYTHM
   .section carried a flat 150px top and bottom, so the gap between any two
   adjacent sections was 300px — a third of a 900px screen, which reads as a
   layout fault rather than breathing room. Fluid padding keeps the airy feel
   on a large monitor and tightens it everywhere else.
   ========================================================= */

.section { padding: clamp(52px, 6vw, 104px) 0; }
.section-tight { padding: clamp(40px, 4.6vw, 78px) 0; }

@media (max-width: 900px) {
  .section { padding: clamp(48px, 7vw, 76px) 0; }
  .section-tight { padding: clamp(38px, 6vw, 60px) 0; }
}


/* =========================================================
   11. TOOLS BAND ON MOBILE
   Below 560px the band became a horizontal scroll strip, so only three or
   four logos were ever visible and the rest looked missing. It now wraps like
   the desktop layout — every tool on screen, just in more rows.
   ========================================================= */

@media (max-width: 560px) {
  .floating-tools-transition .ft-grid {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
    padding-bottom: 0;
    gap: 7px;
  }
  .floating-tools-transition .ft-card {
    flex: 0 0 auto;
    padding: 6px 10px 6px 7px;
    gap: 6px;
  }
  .floating-tools-transition .ft-name { font-size: 11px; }
  .floating-tools-transition .tool-logo { width: 17px; height: 17px; }
}

@media (max-width: 380px) {
  .floating-tools-transition .ft-grid { gap: 6px; }
  .floating-tools-transition .ft-card { padding: 5px 9px 5px 6px; }
  .floating-tools-transition .ft-name { font-size: 10.5px; }
}


/* =========================================================
   12. MOBILE NAVIGATION, FORMS AND FOOTER
   These adjustments address elements that can be taller than a short phone
   viewport or too tightly grouped at the narrowest widths. They preserve the
   existing components and only change their responsive arrangement.
   ========================================================= */

@media (max-width: 760px) {
  /* The menu holds seven links and a CTA. Let it scroll independently instead
     of clipping the last link when a phone is short or text is zoomed. */
  .mobile-nav {
    justify-content: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: max(84px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom));
  }
  .mobile-nav ul { width: 100%; }
  .mobile-nav .mobile-cta { flex: none; min-height: 48px; margin-bottom: 8px; }

  /* Form actions retain a reliable tap target when the columns collapse. */
  .step-actions { flex-wrap: wrap; }
  .step-actions .btn { min-height: 48px; }

  /* A footer logo needs its own row before the two link groups at phone size. */
  .footer-top { grid-template-columns: 1fr; gap: 30px; margin-bottom: 48px; }
  .site-footer { padding-top: 64px; }
  .footer-brand p { max-width: 36ch; }
}

@media (max-width: 480px) {
  .contact-card { padding: 28px 22px; gap: 18px; }
  .map-embed, .map-embed iframe { min-height: 260px; }

  /* Prevent a long primary label and the Back link competing for one row. */
  .step-actions .btn { flex: 1 1 180px; justify-content: center; }
  .step-back { min-height: 44px; padding: 0 4px; }
}


/* =========================================================
   13. FLOATING ACTIONS ABOVE THE MOBILE CTA
   The page has both a fixed bottom CTA and the enquiry/chat launchers. On
   portrait phones the launchers now sit above it, so neither control covers
   the other or the final section's content. Landscape keeps its compact
   treatment declared earlier in this file.
   ========================================================= */

@media (max-width: 720px) and (min-height: 521px) {
  .bot-launcher { bottom: calc(86px + env(safe-area-inset-bottom)); }
  .fab-stack { bottom: calc(146px + env(safe-area-inset-bottom)); }
  .bot { bottom: calc(86px + env(safe-area-inset-bottom)); }
}

@media (max-width: 400px) and (min-height: 521px) {
  .fab-stack { bottom: calc(136px + env(safe-area-inset-bottom)); }
}