/*
 * mobile-public.css — Surgical mobile overrides for AgentLeash public marketing pages.
 *
 * Target: viewports <= 768px (phones + small tablets in portrait).
 * Scope: landing.html, tf-home.html, signup.html, login.html, about.html.
 *
 * Rationale: each of the 5 public pages was built desktop-first with inline
 * <style> blocks. Some have partial mobile breakpoints, none are fully
 * mobile-finished. Investor demo (2026-05-07) needs these pages to read as
 * polished on a phone. This stylesheet does NOT redesign anything — it
 * trims oversized hero padding, shrinks oversized headlines, stacks
 * grids/flex rows that were assuming desktop width, removes desktop-only
 * paddings on cards, and provides safe defaults for navs without a real
 * hamburger.
 *
 * Loaded last (after the inline <style>) so the cascade lets these win
 * without resorting to !important except where inline styles would
 * otherwise clobber us.
 *
 * Owner: Deckard. Filed for follow-up: a real responsive refactor where
 * each page's inline <style> is moved into a shared design-system stylesheet.
 * Until then, this file is the single mobile patch surface.
 */

@media (max-width: 768px) {

  /* --------------------------------------------------------------- *
   * Global guardrails
   * --------------------------------------------------------------- */

  html, body {
    overflow-x: hidden;            /* defensive: kill any horizontal scroll */
  }

  body {
    line-height: 1.5;
  }

  img, video, iframe {
    max-width: 100%;
    height: auto;
  }

  /* --------------------------------------------------------------- *
   * Nav (shared across all 5 pages)
   *   landing.html      uses .nav .nav-inner .nav-links .nav-cta
   *   tf-home.html      uses .nav .nav-logo .nav-right
   *   about.html        uses .nav .nav-logo .nav-right
   *   signup/login.html have no nav (centered card layout)
   *
   * The three nav layouts all have the same desktop assumption:
   *   padding: 0 48px / height 72px / 1200px max content width.
   * On a 390px viewport the right-side cluster spills, the logo
   * crowds the hamburger area, and the nav alone eats ~10% of
   * vertical real estate before the hero starts.
   * --------------------------------------------------------------- */

  .nav {
    padding: 12px 16px !important;   /* 48px → 16px horiz, slim vertical */
    height: auto !important;          /* let content size it */
    min-height: 56px;
  }

  .nav-inner {
    padding: 0 !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  .nav-logo {
    font-size: 16px !important;
    gap: 8px !important;
  }

  .nav-logo img {
    height: 28px !important;          /* 40px → 28px */
  }

  .nav-logo-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
  }

  /* Hide secondary text links; keep CTA visible. */
  .nav-links .nav-link {
    display: none !important;
  }

  /* about.html / similar: nav uses .btn-nav.ghost siblings instead of
   * .nav-link. They're full-size desktop links and crowd the logo. Slim
   * them down to compact pill buttons that still fit on a 375px screen. */
  .nav-right .btn-nav,
  .nav-right a.btn-nav,
  .nav-right a[class*="btn-nav"] {
    padding: 6px 10px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
  }

  /* about.html nav uses `.btn-nav.ghost` for secondary links and has no
   * primary CTA. Hide the 2nd+ ghost links to keep the nav compact;
   * keep the first as a single visible action. tf-home.html uses
   * `.btn-nav-ghost` (different class with hyphen, plural) which is
   * already hidden by the page's existing media rule. */
  .nav-right > .btn-nav.ghost ~ .btn-nav.ghost {
    display: none !important;
  }

  .nav-links {
    gap: 12px !important;
  }

  .nav-cta,
  .nav-right .btn-primary,
  .nav-right a[class*="btn"] {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  .nav-right {
    gap: 8px !important;
  }

  /* --------------------------------------------------------------- *
   * Hero / above-the-fold
   *   landing.html .hero   has padding 160px 0 100px (huge)
   *   tf-home.html .hero   already has a mobile rule but stays tall
   *   signup.html  uses an inline-styled blue panel that's too tall
   *   about.html   .about-hero / page-hero — large headline
   *
   * Goals:
   *   - Hero padding-top no more than ~80px (clears fixed nav + breath)
   *   - Hero padding-bottom <= 40px on mobile so first content below
   *     the hero doesn't get pushed off-screen
   *   - Headline scaled so two-line headline fits comfortably
   *   - Subheadline / paragraph scaled to readable mobile size
   * --------------------------------------------------------------- */

  .hero,
  .about-hero,
  .page-hero,
  .signup-hero {
    padding: 80px 16px 32px !important;
    text-align: center;
  }

  .hero h1,
  .about-hero h1,
  .page-hero h1,
  .signup-hero h1 {
    font-size: clamp(28px, 9vw, 36px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 16px !important;
  }

  .hero p,
  .hero-sub,
  .about-hero p,
  .page-hero p,
  .signup-hero p {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin: 0 auto 24px !important;
    max-width: 100% !important;
  }

  .hero-badge,
  .hero-tag {
    font-size: 12px !important;
    padding: 5px 12px !important;
  }

  /* Stats row: keep horizontal 3-col, just shrink. Stacking column made it look too tall. */
  .hero-stats {
    flex-direction: row !important;
    gap: 16px !important;
    margin-top: 28px !important;
    flex-wrap: nowrap;
  }

  .hero-stat {
    flex: 1 1 0;
    min-width: 0;
  }

  .hero-stat .num {
    font-size: 22px !important;
  }

  .hero-stat .label {
    font-size: 11px !important;
    line-height: 1.3;
  }

  /* CTA cluster — stack column instead of side-by-side row */
  .hero-cta,
  .cta-row,
  .button-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .hero-cta a,
  .hero-cta button,
  .button-row a,
  .button-row button {
    width: 100% !important;
    text-align: center !important;
  }

  /* Hero image / illustration — usually too tall, shrink and trim margins */
  .hero-image-wrap,
  .hero-img,
  .hero-graphic {
    margin-top: 16px !important;
    border-radius: 12px !important;
  }

  /* tf-home.html: on mobile the .hero-image-wrap is the LAST child of
   * the hero section, so on a stacked column layout the hero image
   * lands ~1.5 viewports below the fold (after the H1 → sub → CTA →
   * Certified card → Why-Join sidebar all stack vertically). Promote
   * the image up to right after the headline/subhead so it appears
   * in the actual hero area on mobile. We do this by turning the hero
   * section into a flex column and ordering the image first-of-content
   * after .hero-inner's text but before its 2-col grid.
   *
   * Cleanest approach without HTML edits: turn the section into a flex
   * column, leave .hero-inner at order:0 (default), and pull
   * .hero-image-wrap to order:-1 so it comes BEFORE .hero-inner.
   * That puts the hero image as the very first thing the user sees
   * after the badge — strong visual anchor on phone. */
  .hero {
    display: flex !important;
    flex-direction: column !important;
  }

  .hero > .hero-image-wrap {
    order: -1 !important;
    margin: 4px 0 18px !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;  /* standard hero shape — prominent without dominating */
    max-height: 32vh !important;       /* but cap at 32% of viewport so the H1 still hits the fold */
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12) !important;
  }

  .hero > .hero-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;     /* crop to fill the banner box, no distortion */
    object-position: center !important;
    display: block !important;
  }

  /* Pull the section padding even tighter on tf-home so the image sits
   * just under the nav, not floating in space. */
  body > .hero {
    padding-top: 64px !important;     /* nav clearance only */
  }

  /* Make the hero badge compact so it doesn't push the H1 down. */
  .hero-tag,
  .hero-badge {
    margin: 0 auto 10px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
  }

  /* Pull the hero text up tight against the image now that we've moved it. */
  .hero > .hero-inner {
    margin-top: 0 !important;
  }

  /* --------------------------------------------------------------- *
   * Sections / general layout
   *   Most content sections use 80px+ vertical padding desktop.
   *   On mobile that's a wall of whitespace between sections.
   * --------------------------------------------------------------- */

  section,
  .section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  section[class*="section"] > *,
  .container,
  .content,
  .inner,
  [class*="-inner"] {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Multi-column grids — stack to 1-up on mobile. */
  [style*="grid-template-columns"],
  [style*="grid-template-columns: repeat"],
  .grid,
  .features-grid,
  .three-col,
  .two-col {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* --------------------------------------------------------------- *
   * Auth cards (signup.html, login.html)
   * --------------------------------------------------------------- */

  .login-card,
  .signup-card,
  .auth-card,
  [class*="login"][class*="card"],
  [class*="signup"][class*="card"] {
    padding: 24px 20px !important;       /* 48px → 24/20px */
    margin: 16px !important;
    max-width: calc(100% - 32px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  }

  /* signup.html intro panel — big blue hero at top of form takes the
   * whole viewport on mobile. Trim it. */
  .signup-intro,
  .intro-panel,
  [class*="intro-panel"],
  .brand-panel {
    padding: 24px 20px !important;
    margin-bottom: 16px !important;
  }

  /* signup.html brand panel uses a multi-color gradient logo against a
   * royal-blue background; the page's inline `filter: invert(1)` only
   * shifts the gradient (orange→green) instead of forcing white. Force
   * the logo to pure white in this context. */
  .brand-panel img {
    filter: brightness(0) invert(1) !important;
  }

  /* Form controls — full width, larger tap targets */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  textarea,
  select,
  .form-input,
  .form-control {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;          /* >=16px prevents iOS zoom on focus */
    padding: 12px 14px !important;
  }

  button,
  .btn,
  [class*="btn-"] {
    min-height: 44px;                    /* iOS HIG tap target */
  }

  /* --------------------------------------------------------------- *
   * Footer (every page)
   * --------------------------------------------------------------- */

  .footer,
  footer {
    padding: 24px 16px !important;
    text-align: center;
  }

  .footer-grid,
  .footer-cols {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* --------------------------------------------------------------- *
   * Page-specific surgical overrides
   * --------------------------------------------------------------- */

  /* tf-home.html — has inline `padding: 110px 20px 0` already.
   * Tighten further; "extreme top whitespace" was the AI-vision finding. */
  body > .hero,
  .hero[class~="hero"] {
    padding-top: 76px !important;
  }

  /* tf-home.html — "Never let your agents..." tagline is an inline-styled
   * muted italic <p> that reads as orphaned/disabled copy on mobile when
   * the desktop 2-column hero collapses. Promote it to a confident tagline. */
  .hero p[style*="italic"],
  .hero-inner p[style*="italic"] {
    font-style: normal !important;
    font-weight: 600 !important;
    color: var(--text-primary, #111827) !important;
    text-align: center !important;
    font-size: 15px !important;
    margin: 8px 0 24px !important;
  }

  /* about.html — `.about-hero h1` is unbounded font-size desktop. */
  .about-hero {
    padding: 80px 16px 24px !important;
  }

  /* landing.html — hero stats triple-column squashed; already covered above
   * by .hero-stats. Belt-and-suspenders the first-screen breath: */
  .hero::before {
    width: 100% !important;
    height: 400px !important;
    top: -100px !important;
  }
}

/* --------------------------------------------------------------- *
 * Very narrow phones (iPhone SE 1st gen / older Android <= 360px)
 * --------------------------------------------------------------- */
@media (max-width: 380px) {
  .hero h1,
  .about-hero h1,
  .page-hero h1 {
    font-size: 26px !important;
  }

  .nav-cta,
  .nav-right a[class*="btn"] {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }
}