/* ============================================================
   MOBILE.CSS - Humans of BAJA
   Mobile-first responsive overrides (≤768px)
   Loaded after styles.css on all pages.
   ============================================================ */

/* ── TABLET (≤768px) ──────────────────────────────────────── */
@media (max-width: 768px) {

  /* ─── Global spacing ─── */
  .section { padding: 2rem 0; }
  .container { padding: 0 1.25rem; }

  /* ─── Homepage: Initiative section ─── */
  /* Hide nostalgia paragraph - too long for mobile */
  .initiative-nostalgia { display: none; }

  /* Reduce first paragraph line-clamp for brevity */
  .initiative-text .section-body:first-of-type {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Tighten initiative grid: text + logo in same viewport */
  .initiative-section { padding: 1.5rem 0 1rem; }
  .initiative-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: center;
  }
  .initiative-text { text-align: center; }
  .initiative-text h2 { text-align: center; font-size: clamp(1.4rem, 5vw, 2rem); }
  .initiative-text .section-body { font-size: 0.82rem; line-height: 1.6; }
  .initiative-cta { margin-top: 1rem !important; }
  .initiative-visual { padding: 1.5rem; }
  .initiative-visual img { max-width: 160px; }

  /* ─── Homepage: Journey (Then vs Now) ─── */
  .origin-section { padding: 1.5rem 0; }
  .journey-compare-text h3 { font-size: 1.2rem; }
  .journey-compare-stats { gap: 0; }
  .journey-stat-num { font-size: 1.2rem; }
  .journey-stat-label { font-size: 0.55rem; }
  .journey-link { margin-top: 1.5rem !important; }

  /* ─── Homepage: Map section ─── */
  .map-section { padding: 2rem 0 2.5rem; }
  .map-header h2 { font-size: clamp(1.3rem, 5vw, 1.8rem); }
  .map-counter { font-size: 0.85rem; }
  .map-counter span#pin-count { font-size: 1rem; }
  #map { height: 45vh; min-height: 250px; }

  /* ─── Homepage: Footprint banner ─── */
  .footprint-banner { padding: 1.5rem 1.25rem 1.25rem; }
  .fb-header { margin-bottom: 1.25rem; }
  .fb-header h2 { font-size: 1.2rem; }

  /* ─── Homepage: Hero ─── */
  .video-hero-content { padding: 1.5rem 1.25rem; }
  .video-hero .hero-sub br { display: none; }
  .video-hero .hero-hook { font-size: clamp(1.3rem, 5.5vw, 1.8rem); }
  .video-hero .hero-beats { font-size: clamp(0.95rem, 3.5vw, 1.15rem); }

  /* ─── Story page ─── */
  .stry-hero h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  .stry-hero__content { padding: calc(var(--header-h) + 1.5rem) 1.25rem 4rem; }
  .stry-hero__sub { font-size: 0.82rem; }
  .stry-nav { display: none; }
  .stry-cta { min-height: 40vh; padding: 3rem 1.25rem; }
  .stry-cta h2 { font-size: clamp(1.3rem, 5vw, 2rem); }

  /* ─── About page ─── */
  .about-page-header { padding-top: calc(var(--header-h) + 2rem); }
  .about-page-header h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
  .about-content-block { text-align: left; }
  .about-content-block .section-body { max-width: 100%; font-size: 0.85rem; }
  .about-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .about-stat { padding: 1rem 0.5rem; }
  .about-stat-number { font-size: 1.4rem; }
  .leader-photo-wrapper { flex-direction: column; text-align: center; gap: 0.5rem; }
  .leader-photo-placeholder { width: 56px; height: 56px; min-width: 56px; }
  .leader-quote { font-size: 0.82rem; padding-left: 1rem; }

  /* ─── Register page ─── */
  .form-page { padding: calc(var(--header-h) + 1.5rem) 1.25rem 2.5rem; }
  .form-card { padding: 1.5rem 1.25rem; }
  .form-intro h1 { font-size: clamp(1.5rem, 5vw, 2rem); }
  .form-intro p { font-size: 0.82rem; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .register-map-container { height: 280px; }
  .form-step-indicator { font-size: 0.68rem; }

  /* Location badge bar: tighter on mobile */
  .loc-badge--set {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.82rem;
  }

  .pin-badge-actions {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.25rem;
  }

  .pin-badge-actions button {
    flex: 1;
    text-align: center;
    justify-content: center;
    min-height: 44px;
    font-size: 0.72rem;
  }

  /* Dropdown panels: cap width to viewport */
  .dropdown-panel {
    max-width: calc(100vw - 2.5rem);
  }

  /* Map toolbar buttons: better mobile layout */
  .map-cta-bar {
    font-size: 0.82rem;
    padding: 0.75rem 1rem;
  }

  .map-privacy-note {
    font-size: 0.72rem;
    padding: 0.45rem 1rem;
  }

  /* Step buttons: full width with good touch targets */
  .step-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    min-height: 48px;
    font-size: 0.85rem;
  }

  .step-actions--final {
    flex-direction: row;
  }

  .step-actions--final .step-prev {
    width: auto;
    flex-shrink: 0;
    min-height: 44px;
  }

  .step-actions--final .step-submit {
    flex: 1;
    min-height: 48px;
  }

  /* Success links: stack vertically */
  .success-links {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .success-link-card {
    padding: 1rem 1.25rem;
    min-height: 60px;
  }

  /* Story CTA email: full width */
  .story-cta-email {
    width: 100%;
    max-width: 100%;
  }

  .story-email-address {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* Success page: tighter */
  .form-success {
    padding: 3rem 1.25rem 3rem;
    min-height: auto;
  }

  .success-header h2 {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
  }

  .success-header p {
    font-size: 0.88rem;
  }

  /* Consent: better touch target */
  .consent-group {
    padding: 1rem;
  }

  /* ─── Typography scaling ─── */
  h2 { font-size: clamp(1.3rem, 5vw, 2rem); }
  .section-tag { font-size: 0.58rem; letter-spacing: 0.15em; }
  .section-body { font-size: 0.82rem; line-height: 1.6; }

  /* ─── Buttons ─── */
  .btn-ghost { font-size: 0.72rem; padding: 0.55rem 1.2rem; }
  .btn-primary { font-size: 0.78rem; padding: 0.65rem 1.5rem; }

  /* ─── Back-to-top above tab bar ─── */
  .back-to-top { bottom: 5.5rem; }
}


/* ── SMALL PHONE (≤480px) ─────────────────────────────────── */
@media (max-width: 480px) {

  /* Even tighter spacing */
  .section { padding: 1.5rem 0; }
  .container { padding: 0 1rem; }

  /* Initiative: make logo even smaller, keep in viewport */
  .initiative-section { padding: 1rem 0 0.5rem; }
  .initiative-grid { gap: 0.75rem; }
  .initiative-text h2 { font-size: 1.3rem; }
  .initiative-visual { padding: 1rem; }
  .initiative-visual img { max-width: 130px; }

  /* Journey cards */
  .origin-section { padding: 1rem 0; }
  .journey-compare-text h3 { font-size: 1.05rem; }
  .journey-card { aspect-ratio: 16 / 10; }
  .journey-stat-num { font-size: 1.05rem; }
  .journey-link { margin-top: 1rem !important; }

  /* Map */
  .map-section { padding: 1.5rem 0 2rem; }
  .map-header h2 { font-size: 1.2rem; }
  #map { height: 40vh; min-height: 220px; }
  .map-metrics {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
  }
  .map-metric { padding: 0.6rem 0.3rem; }
  .map-metric-value { font-size: 0.9rem; }
  .map-metric-label { font-size: 0.5rem; }

  /* Footprint banner */
  .fb-header h2 { font-size: 1rem; }
  .fb-steps { gap: 0.1rem; }
  .fb-step-num { width: 32px; height: 32px; font-size: 0.8rem; }
  .fb-note br { display: none; }

  /* Hero actions */
  .hero-actions { flex-wrap: wrap; gap: 0.5rem; }
  .video-hero .hero-actions { flex-wrap: wrap; gap: 0.5rem; }
  .video-hero .hero-actions .btn-ghost {
    font-size: 0.65rem;
    padding: 0.5rem 1rem;
  }

  /* Story page */
  .stry-hero h1 { font-size: clamp(1.4rem, 6vw, 1.8rem); }
  .stry-hero__badge { font-size: 0.5rem; padding: 0.35rem 0.65rem; }
  .tl { padding: 1rem 0.5rem 2rem; }
  .tl__card-head { padding: 1rem 1rem 0; }
  .tl__card-text { padding: 0.6rem 1rem; }
  .tl__card-body { padding: 0.6rem 0.75rem 0.75rem; }
  .tl__card-watermark { font-size: 3rem; }

  /* Register page */
  .form-page { padding: calc(var(--header-h) + 1rem) 0.85rem 2rem; }
  .form-card { padding: 1.25rem 1rem; border-radius: var(--radius-sm); }
  .form-intro h1 { font-size: 1.3rem; }
  .form-group input[type="text"],
  .form-group input[type="url"],
  .form-group input[type="email"],
  .form-group select,
  .form-group textarea {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 0.65rem 0.75rem;
  }
  .register-map-container { height: 260px; }
  .consent-group { padding: 0.85rem; }
  .loc-badge--set { font-size: 0.78rem; padding: 0.65rem 0.85rem; }
  .form-section-label { font-size: 0.65rem; margin-bottom: 1.25rem; }
  .form-step-indicator { font-size: 0.62rem; }

  /* Success page tighter */
  .form-success { padding: 2.5rem 0.85rem 3rem; }
  .success-header .success-icon { width: 56px; height: 56px; }
  .success-header .success-icon svg { width: 26px; height: 26px; }
  .success-header h2 { font-size: 1.3rem; }
  .success-header p { font-size: 0.82rem; }
  .story-email-address { font-size: 0.78rem; }
  .copy-email-btn { font-size: 0.7rem; padding: 0.4rem 0.75rem; }

  /* Step buttons */
  .step-prev { font-size: 0.82rem; padding: 0.75rem 1.25rem; min-height: 44px; }
  .step-submit { font-size: 0.82rem; padding: 0.75rem 1.5rem; min-height: 44px; }

  /* About page */
  .about-stats-grid { grid-template-columns: 1fr 1fr; gap: 0.35rem; }
  .about-stat-number { font-size: 1.2rem; }
  .about-stat-label { font-size: 0.62rem; }

  /* Typography */
  .section-tag { font-size: 0.52rem; }
  .section-body { font-size: 0.78rem; }
}


/* ── VERY SMALL PHONE (≤360px - iPhone SE, Galaxy S) ──────── */
@media (max-width: 360px) {

  .container { padding: 0 0.85rem; }
  .section { padding: 1.25rem 0; }

  /* Initiative: absolute minimum */
  .initiative-text h2 { font-size: 1.15rem; }
  .initiative-visual img { max-width: 110px; }
  .initiative-visual { padding: 0.75rem; }

  /* Journey cards */
  .journey-compare-text h3 { font-size: 0.95rem; }
  .journey-stat-num { font-size: 0.95rem; }

  /* Map */
  #map { height: 35vh; min-height: 200px; }
  .map-metric-value { font-size: 0.8rem; }
  .map-metric-label { font-size: 0.45rem; }

  /* Hero */
  .video-hero h1 { font-size: 1.8rem; }
  .video-hero .hero-hook { font-size: 1.2rem; }
  .video-hero .hero-beats { font-size: 0.9rem; }

  /* Story */
  .stry-hero h1 { font-size: 1.3rem; }

  /* Register */
  .form-intro h1 { font-size: 1.15rem; }
  .register-map-container { height: 240px; }
  .loc-badge--set { font-size: 0.72rem; padding: 0.55rem 0.75rem; }
  .form-step-indicator { font-size: 0.58rem; }
  .success-story-cta { padding: 1rem 0.85rem; }
  .story-cta-header strong { font-size: 0.82rem; }

  /* Buttons even more compact */
  .btn-ghost { font-size: 0.65rem; padding: 0.45rem 0.9rem; }
  .btn-primary { font-size: 0.7rem; padding: 0.55rem 1.2rem; }
}