/**
 * mobile.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Mobile-first responsive overrides.
 * Loaded last so it patches everything in base/components/layout.
 *
 * Breakpoints:
 *   --sm:  480px   (large phones, landscape)
 *   --md:  768px   (tablets portrait)
 *   --lg:  1024px  (tablets landscape, small laptops)
 *   --xl:  1280px  (desktop — our container max)
 * ─────────────────────────────────────────────────────────────────────────────
 */


/* ════════════════════════════════════════════════════════════════════════════
   GLOBAL — applies at all small sizes
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

  /* Reduce base font slightly on very small phones */
  html { font-size: 15px; }

  /* Buttons — full width on smallest screens when stacked */
  .hero__ctas .btn,
  .post-featured .btn,
  .patreon-gate .btn {
    width: 100%;
    justify-content: center;
  }

  /* Tags — allow wrap and smaller padding */
  .tag { padding: 0.15em 0.5em; }

  /* Breadcrumb — allow wrap */
  .breadcrumb { flex-wrap: wrap; }

  /* Empty state — reduce padding */
  .empty-state { padding: var(--sp-8); }
}


/* ════════════════════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* Already handled in components.css — these are refinements */
  .site-header { padding-block: var(--sp-3); }

  .logo-text { display: none; } /* Show just '44 mark on small screens */

  /* Nav open state — full viewport */
  .primary-nav.is-open {
    overflow-y: auto;
    padding-bottom: var(--sp-16); /* clearance for thumb */
  }

  /* Larger touch targets in mobile nav */
  .primary-nav a {
    padding: var(--sp-4) var(--sp-4);
    font-size: var(--text-lg);
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* Support button full-width in mobile nav */
  .primary-nav .btn {
    width: 100%;
    justify-content: center;
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    font-size: var(--text-base);
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .hero { min-height: 85svh; }
  .hero__content { padding-block: var(--sp-16) var(--sp-12); }
  .hero__sub { font-size: var(--text-base); }
  .hero__ctas { flex-direction: column; align-items: flex-start; }
  .hero__scroll-hint { display: none; } /* hide on mobile — no room */
}

@media (max-width: 480px) {
  .hero { min-height: 90svh; }
  .hero__ctas .btn { width: 100%; justify-content: center; }
}


/* ════════════════════════════════════════════════════════════════════════════
   STATS STRIP
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .stats-strip__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
    justify-items: center;
  }
  .stat__number { font-size: var(--text-xl); }
}

@media (max-width: 480px) {
  .stats-strip__inner {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 5th stat (nations) spans full width on 2-col layout */
  .stat:last-child {
    grid-column: 1 / -1;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   SECTION HEADERS (homepage sections)
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .section { padding-block: var(--sp-16); }

  /* Stack heading + "browse all" link vertically */
  .section__header {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--sp-2);
    margin-bottom: var(--sp-8);
  }
  .section__more {
    grid-column: 1;
    grid-row: 3;
    font-size: var(--text-base);
    padding: var(--sp-3) 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   CARD GRIDS
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Unit cards — 2 columns on tablet */
  .card-grid--units {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }

  /* Op cards — single column on tablet */
  .card-grid--ops {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  /* Unit cards — single column on phone */
  .card-grid--units {
    grid-template-columns: 1fr;
  }

  /* Ensure card images aren't too tall */
  .unit-card__image { aspect-ratio: 16/8; }
}


/* ════════════════════════════════════════════════════════════════════════════
   MAP CTA SECTION
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Already hides preview — just tighten text */
  .map-cta__text h2 { font-size: var(--text-2xl); }
  .map-cta__text p { font-size: var(--text-base); }
}

@media (max-width: 480px) {
  .map-cta__text .btn { width: 100%; justify-content: center; }
}


/* ════════════════════════════════════════════════════════════════════════════
   PHOTO GRID (homepage)
   ════════════════════════════════════════════════════════════════════════════ */

/* Already drops to 2-col at 768px — fine as is */
@media (max-width: 480px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
}


/* ════════════════════════════════════════════════════════════════════════════
   DIARY LIST
   ════════════════════════════════════════════════════════════════════════════ */

/* Already collapses at 768px — add touch target improvement */
@media (max-width: 768px) {
  .diary-row {
    padding: var(--sp-4) 0;
    min-height: 48px;
  }
  .diary-row__date { font-size: var(--text-xs); }
}


/* ════════════════════════════════════════════════════════════════════════════
   PAGE HEADERS (interior pages)
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .page-header {
    padding-top: calc(72px + var(--sp-8));
    padding-bottom: var(--sp-8);
  }
  .page-header h1 { font-size: var(--text-2xl); }
  .page-header p { font-size: var(--text-base); }
  .page-header__inner { flex-direction: column; gap: var(--sp-4); }
  .page-header__badge { width: 70px; height: 70px; }
  .page-header__excerpt { font-size: var(--text-base); }
}


/* ════════════════════════════════════════════════════════════════════════════
   PAGE LAYOUT — SIDEBAR
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  /* Already stacks — sidebar comes first on mobile (facts before prose) */
  .page-layout--sidebar {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  /* Sidebar stacks above article — reorder */
  .page-sidebar { order: -1; position: static; }

  /* On tablet, show sidebar as horizontal scrolling pill row */
  .page-sidebar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-4);
  }
}

@media (max-width: 480px) {
  .page-sidebar {
    grid-template-columns: 1fr;
  }
  /* Fact list — tighter on small screens */
  .fact-list { font-size: var(--text-sm); gap: var(--sp-1) var(--sp-3); }
}


/* ════════════════════════════════════════════════════════════════════════════
   FILTER BAR
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }
  .filter-select,
  .filter-search {
    width: 100%;
    min-width: unset;
    min-height: 44px; /* iOS minimum touch target */
    font-size: var(--text-base); /* prevents iOS zoom on focus */
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════════════ */

/* Already stacks at 768px — refinements */
@media (max-width: 768px) {
  .site-footer { padding-top: var(--sp-12); }
  .footer-nav ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }
  .footer-nav a,
  .footer-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .footer-nav ul { grid-template-columns: 1fr; }
  .footer-links { flex-direction: row; flex-wrap: wrap; gap: var(--sp-4); }
}


/* ════════════════════════════════════════════════════════════════════════════
   PROJECT PAGES (hong-kong etc.)
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .project-hero { padding-top: calc(72px + var(--sp-10)); padding-bottom: var(--sp-10); }
  .project-hero__title { font-size: var(--text-2xl); }
  .project-hero__subtitle { font-size: var(--text-base); }
  .project-hero .btn { width: 100%; justify-content: center; }

  .project-body { padding-block: var(--sp-10); }

  /* Gallery — 2 columns on mobile */
  .project-gallery { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }

  /* Iframes — fixed height on mobile instead of aspect ratio */
  .project-iframe-wrap {
    aspect-ratio: unset;
    height: 300px;
  }
  .project-iframe-wrap--tableau { height: 400px; }

  /* Partners — stack */
  .project-partners { grid-template-columns: 1fr; }

  /* Support section */
  .project-support { padding-block: var(--sp-16); }
  .project-support__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* Gallery — single column on smallest phones */
  .project-gallery { grid-template-columns: 1fr; }
  .project-pullquote { padding: var(--sp-4) var(--sp-5); font-size: var(--text-base); }
}


/* ════════════════════════════════════════════════════════════════════════════
   BLOG / INTEL PAGES
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Post hero */
  .post-hero { padding-top: calc(72px + var(--sp-8)); padding-bottom: var(--sp-8); }
  .post-hero__title { font-size: var(--text-xl); }
  .post-hero__meta { gap: var(--sp-2); }

  /* Hero image — shorter on mobile */
  .post-hero-image img { max-height: 280px; }

  /* Post body padding */
  .post-body { padding-block: var(--sp-8); }

  /* Featured post — already stacks, tighten spacing */
  .post-featured { gap: var(--sp-6); margin-bottom: var(--sp-10); padding-bottom: var(--sp-10); }
  .post-featured__excerpt { -webkit-line-clamp: 3; }

  /* Post grid — 2 columns on tablet */
  .post-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }

  /* Patreon gate */
  .patreon-gate { padding: var(--sp-8) var(--sp-4); }
  .patreon-gate h2 { font-size: var(--text-xl); }

  /* Author block */
  .post-author { padding: var(--sp-4); }
}

@media (max-width: 480px) {
  /* Post grid — single column on phone */
  .post-grid { grid-template-columns: 1fr; }
  .post-hero__title { font-size: var(--text-lg); }

  /* Post tags — smaller gap */
  .post-tags { gap: var(--sp-2); }
}


/* ════════════════════════════════════════════════════════════════════════════
   UNIT PAGES (generated from JSON)
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .unit-tags { gap: var(--sp-2); }
}


/* ════════════════════════════════════════════════════════════════════════════
   TEST SECTION
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .test-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════════════════
   PROSE — mobile typography
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .prose { font-size: var(--text-base); }
  .prose h2 { font-size: var(--text-xl); margin-top: var(--sp-8); }
  .prose h3 { font-size: var(--text-lg); }
  .prose blockquote { padding-left: var(--sp-4); }
}


/* ════════════════════════════════════════════════════════════════════════════
   TOUCH TARGETS — global minimum 44px for all interactive elements
   Per Apple HIG and WCAG 2.5.5
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .btn { min-height: 44px; }
  .btn--sm { min-height: 36px; } /* exception for truly small UI */
  .unit-card__cta,
  .op-card__cta,
  .post-card__cta,
  .section__more,
  .post-nav__back {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — respect user preference
   ════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__scroll-hint { display: none; }
}


/* ════════════════════════════════════════════════════════════════════════════
   PRINT — basic print styles
   ════════════════════════════════════════════════════════════════════════════ */

@media print {
  .site-header,
  .site-footer,
  .project-support,
  .patreon-gate,
  .post-nav,
  .hero__scroll-hint,
  .stats-strip,
  .filter-bar { display: none !important; }

  body { background: white; color: black; font-size: 12pt; }
  .container { max-width: 100%; padding: 0; }
  .prose { font-size: 11pt; }
  a { color: black; text-decoration: underline; }
  .project-iframe-wrap,
  .post-hero-image img { max-height: 200px; }
}