/* ============================================================
   TCA WEBSITE — MOBILE / SMALL-SCREEN POLISH
   Loaded LAST (see includes/header.php) so it only overrides what it
   must; every rule is inside a max-width / max-height query or an
   @supports block, so the desktop layout is untouched.

   Findings this file addresses (from the responsive audit):
   1. Program tabs: overflow-x:auto on the bar forced a stray vertical
      scroller (the little ▲▼ arrows) and clipped the tab labels.
   2. Nav brand wrapped to two lines and pushed into the hamburger.
   3. Hero scrim was ~90% opaque everywhere on phones — the artwork
      (children, tree, school) was almost invisible.
   4. 100vh frames jump/clip under mobile browser toolbars -> use svh.
   5. Floating quill sat over body copy on phones.
   6. Landscape phones: pinned 100vh scenes clipped their own text.
   7. Turnstile widget (fixed ~300px) could overflow a 320px form.
   ============================================================ */

/* ---- 4. Stable viewport height (address-bar safe) ---- */
@supports (height: 100svh) {
  .hero-scene-frame,
  .programs-scene-frame,
  .about-scene-frame,
  .contact-scene-bg { height: 100svh; }
}

/* ---- 1. Program tabs ---- */
.programs__tabs {
  overflow-y: hidden;            /* kills the stray vertical scroller */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.programs__tabs::-webkit-scrollbar { display: none; }
.programs__tabs .ptab { scroll-snap-align: start; white-space: nowrap; min-height: 44px; }

@media (max-width: 600px) {
  .ptab { padding: 12px 14px; font-size: 0.74rem; letter-spacing: 0.05em; }
  .prog-panel.active { grid-template-columns: 1fr; }   /* one readable column, no 240px-min squeeze */
}

/* ---- 2. Nav brand ---- */
@media (max-width: 900px) {
  .nav-logo { min-width: 0; gap: 10px; }
  .nav-logo img { width: 40px; height: 40px; flex-shrink: 0; }
  .hamburger { min-width: 44px; min-height: 44px; justify-content: center; }
}
@media (max-width: 480px) {
  .nav-brand { min-width: 0; }
  .nav-brand .name { font-size: 0.66rem; line-height: 1.2; letter-spacing: 0; }
  .nav-brand .sub  { font-size: 0.62rem; }
}

/* ---- 3. Hero: let the artwork show, keep text readable ----
   Strongest wash sits behind the text block (upper-middle); the lower
   third, where the children are, is left mostly clear. */
@media (max-width: 900px) {
  .hero-parallax::after {
    background:
      linear-gradient(180deg,
        rgba(6, 5, 20, 0.80) 0%,
        rgba(6, 5, 20, 0.78) 34%,
        rgba(6, 5, 20, 0.62) 58%,
        rgba(6, 5, 20, 0.18) 80%,
        rgba(6, 5, 20, 0) 100%),
      linear-gradient(to top, rgba(6, 5, 20, 0.85) 0%, rgba(6, 5, 20, 0) 14%);
  }
  .hero__content { margin-top: -10vh; }
  .hero__btns { gap: 0.75rem; }
  .hero__btns .btn-primary,
  .hero__btns .btn-outline { flex: 1 1 140px; text-align: center; }
  .hero__sub { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); }
}

/* ---- 5. Quill: smaller, fainter, never blocks taps ---- */
@media (max-width: 640px) {
  .quill-float { width: 44px; height: 114px; opacity: 0.45; pointer-events: none; }
}

/* ---- 7. Contact form on very narrow phones ---- */
.contact-form .cf-turnstile { max-width: 100%; overflow-x: auto; }
@media (max-width: 380px) {
  .contact-form--glass { padding: 1.1rem; }
  .contact-scene__inner { padding-left: 1rem; padding-right: 1rem; }
  .cf-turnstile { transform: scale(0.88); transform-origin: left top; }
}
.form-group input, .form-group select, .form-group textarea { font-size: 16px; } /* stops iOS zoom-on-focus */

/* ---- Misc phone hygiene ---- */
@media (max-width: 600px) {
  .achievements__grid { gap: 1rem; }
  .campus-life__grid { gap: 0.75rem; }
  .cl-item figcaption { font-size: 0.78rem; padding: 10px 12px; }
  .map-embed iframe { height: 220px; }
  .mascot-video-card { padding: 0.4rem; }
  .back-to-top { bottom: max(20px, env(safe-area-inset-bottom)); }
}

/* ---- 6. Landscape phones: pinned scenes must not clip their text ---- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-scene-frame, .programs-scene-frame, .about-scene-frame { height: auto; min-height: 100svh; }
  .hero__content { margin-top: 0; padding-top: 72px; padding-bottom: 24px; }
  .hero__mega { font-size: clamp(2.6rem, 14vh, 4rem); }
  .hero__sub { font-size: 0.92rem; margin-bottom: 1rem; }
  .hero__full-name { margin-bottom: 0.75rem; }
  .about-scene__content, .programs-scene__content { padding-top: 72px; padding-bottom: 32px; }
  .journey-scene-frame { height: 100svh; }
}

/* ---- Journey: keep the eagle clear of the heading on phones ---- */
@media (max-width: 560px) {
  .journey-scene__inner { padding-top: 5.75rem; }
  .journey-eagle-layer { top: 0; left: 3%; width: 38%; }
}