/* ═══════════════════════════════════════════════════════════════════
   Mobile design-review fixes — 3 Jul 2026
   Enqueued site-wide from inc/functions/tdr-inner-pages.php (loads after
   styles.min.css), so these overrides reach every template. Homepage +
   global mobile polish. Keep edits here, not in styles.min.css (gulp).
   ═══════════════════════════════════════════════════════════════════ */

/* 1 — Header: below 1100px the nav hides and the grid (1fr auto 1fr)
   leaves the burger stranded in the centre column. Flush logo left,
   burger right. */
@media (max-width: 1100px) {
  .site-header__inner { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; }
  .site-header__menu-toggle { margin-left: auto; }
}

@media (max-width: 767px) {
  /* 2 — Heroes: base .hero__h1 is 60px !important, which blocked the intended
     36px mobile size. Applies to the homepage, courses, vacancies + single
     vacancy heroes (all use .hero__h1). */
  .hero__h1 { font-size: 40px !important; letter-spacing: -1.2px; max-width: 100%; }
  .hero__sub { font-size: 15px !important; }

  /* Legacy #top_banner hero (Contact and any older templates) also runs 60px. */
  .banner-overlay h1,
  #top_banner .banner-overlay h1 { font-size: 36px !important; line-height: 1.12; }

  /* 3 — Showreel video was max-width:calc(100vw - 160px) ≈ 230px on a phone.
     Give it small gutters and let it fill the width. */
  .showreel { padding-left: 20px !important; padding-right: 20px !important; }
  .showreel__wrap { width: 100% !important; max-width: 100% !important; }

  /* 4 — Testimonials: heading is reveal-gated (opacity:0 until JS runs), which
     reads as "slow to load". Show it by default. Slow the marquee so it isn't
     a blur on a narrow viewport. */
  .voices__header[data-reveal] { opacity: 1 !important; transform: none !important; }
  .voices__track { animation-duration: 75s !important; }

  /* 5 — Blue CTA heading floored at its 26px clamp min — give it presence. */
  .cta-banner__heading,
  .tdr-page .cta-banner__heading { font-size: 30px !important; line-height: 1.15; }
}

@media (max-width: 360px) {
  .hero__h1 { font-size: 34px !important; }
  .banner-overlay h1 { font-size: 32px !important; }
}

/* ═══ GLOBAL (all viewports) — never gate content visibility on JS ═══
   [data-reveal]/[data-stagger] start at opacity:0 until an IntersectionObserver
   adds .is-visible. On real mobile that fires late (Mo: "testimonials took a
   while to load") and in headless/hidden tabs it never fires → blank sections.
   Show content by default; the .is-visible transition still smooths any toggle. */
[data-reveal],
[data-stagger] > * { opacity: 1 !important; transform: none !important; }

/* ═══ Mobile vertical rhythm — desktop sections keep 80–100px top/bottom
   padding on phones, which stacks into big empty voids. Tighten to ~52px. ═══ */
@media (max-width: 767px) {
  .paths, .appr-section, .journey, .voices, .news,
  .showreel, .tdr-page .section {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  .cta-banner, .cta-banner--v1, .cta-banner--v2 {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  /* Section headers carried a 56px bottom margin too. */
  .voices__header, .appr-section__header, .paths__header { margin-bottom: 32px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Homepage video hero on mobile — 10 Aug 2026
   render_video() used to fork on isMobile() and serve phones a static
   .banner_image hero. That fork is gone, so #top_banner.video-banner now
   renders on every viewport and a set of legacy small screen rules inside
   styles.min.css finally apply for the first time. Correct them here.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* styles.min.css @639px offsets the overlay with top:75% / left:7.5vw,
     written back when it was absolutely positioned. It is position:relative
     now, so top:75% shunted the hero copy three quarters of the way down
     the banner and left it hanging off the bottom. */
  #top_banner.video-banner .video-overlay {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* 100vh counts the collapsed browser chrome on iOS and Android, so the
     hero overflowed by the height of the address bar and the buttons sat
     under the fold. svh is the visible viewport. The 100vh declarations in
     styles.min.css stay as the fallback for anything without svh support. */
  #top_banner.video-banner { height: 100svh; }
  #top_banner.video-banner .video-overlay { min-height: 100svh !important; }

  /* The @639px block caps h1 and p at 90% of an already narrow column. */
  #top_banner.video-banner .video-overlay h1,
  #top_banner.video-banner .video-overlay p { width: 100%; max-width: 100%; }

  /* Scrim. The homepage gradient runs left to right and fades to 0.08 alpha,
     which is fine behind a 600px desktop column but leaves white text sitting
     on bare video once the copy spans the full width of a phone. Swap to a
     vertical scrim. Doubling .video-banner lifts specificity above the
     inline !important rule that homepage.php prints later in the head. */
  .home #top_banner.video-banner.video-banner::before {
    background: linear-gradient(180deg, rgba(25, 23, 86, 0.45) 0%, rgba(25, 23, 86, 0.68) 55%, rgba(25, 23, 86, 0.88) 100%) !important;
  }

  /* Poster carries the hero until the HLS manifest has enough to paint, so it
     needs the same cover framing as the video itself. */
  #top_banner.video-banner .video-js .vjs-poster {
    background-size: cover;
    background-position: center;
  }
}

/* ═══ Apprenticeship slider tidy-ups (mobile) ═══ */
@media (max-width: 767px) {
  /* The track is a native swipe carousel (85vw cards peek the next one), so the
     one-dot-per-course row just gets crowded with 15+ courses. Drop it; the
     card peek is the swipe affordance. */
  .appr-dots { display: none !important; }
  .appr-panel .appr-track { margin-bottom: 4px; }

  /* Tab bar scrolls horizontally (sectors + arrows sit off-screen right).
     Fade the right edge to hint there's more to swipe to. */
  .appr-tabs {
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
            mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
}