/* Celestara — Mobile / Responsive overrides
   Loaded last so these rules win over inline <style> blocks.
   Primary breakpoint: 768px  |  Phone: 480px
---------------------------------------------------------------- */

/* ── DS strip ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ds-strip {
    padding: 10px 20px;
    font-size: 10px;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    text-align: center;
  }

  /* ── NAV ───────────────────────────────────────────────────── */
  .nav {
    padding: 14px 20px;
    flex-wrap: wrap;
    gap: 0;
  }
  .nav .links {
    order: 3;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 0 4px;
    margin-top: 10px;
    border-top: 1px solid rgba(184,216,248,0.10);
    gap: 20px;
    flex-wrap: nowrap;
  }
  .nav .links::-webkit-scrollbar { display: none; }
  .nav .links a { white-space: nowrap; }

  /* ── HERO (index.html) ─────────────────────────────────────── */
  .hero {
    min-height: auto;
    padding: 64px 20px 56px;
  }
  .hero-content {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }
  .hero-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .hero-stats .stat { padding: 16px; }
  .hero-stats .stat .v { font-size: 28px; }

  /* ── PAGE-HERO (sub-pages via page-shell.css) ──────────────── */
  .page-hero {
    padding: 48px 20px 44px;
    min-height: auto;
  }
  .page-hero-content {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  /* ── PROMO BANNER ──────────────────────────────────────────── */
  .promo {
    padding: 12px 20px;
    flex-wrap: wrap;
    text-align: center;
    gap: 8px;
    justify-content: center;
  }

  /* ── SECTION PADDING ───────────────────────────────────────── */
  section.block {
    padding: 64px 20px !important;
  }

  /* ── SECTION / PAGE-SHELL HEADERS ─────────────────────────── */
  .block .header,
  .s-header,
  .header {
    grid-template-columns: 1fr !important;
    gap: 16px;
    margin-bottom: 36px;
  }

  /* ── VALUES / PILLARS (3-col → 1-col) ─────────────────────── */
  .values,
  .pillars {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* ── EDEN FEATURE SPREAD ───────────────────────────────────── */
  .eden {
    grid-template-columns: 1fr !important;
  }
  .eden-img {
    min-height: 280px;
    border-radius: var(--r-md) var(--r-md) 0 0 !important;
  }
  .eden-body {
    padding: 36px 24px;
    border-radius: 0 0 var(--r-md) var(--r-md) !important;
  }
  .eden-body h3 { font-size: 36px; }
  .eden-features { grid-template-columns: 1fr; }

  /* ── SHIP SECTION ──────────────────────────────────────────── */
  .ship {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .ship-body h3 { font-size: 52px; }
  .ship-specs { grid-template-columns: repeat(2, 1fr); }

  /* ── TICKET CARDS (3-col → 1-col) ─────────────────────────── */
  .tickets {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .ticket { min-height: auto; }

  /* ── STOPOVERS (3-col → 1-col) ─────────────────────────────── */
  .stops {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .stop-card { aspect-ratio: 16/9; }

  /* ── CRYOSTASIS ────────────────────────────────────────────── */
  .cryo-hero {
    grid-template-columns: 1fr !important;
  }
  .cryo-hero .img { min-height: 260px; }
  .cryo-hero .body {
    padding: 36px 24px;
  }
  .cryo-hero .body h3 { font-size: 32px; }
  .cryo { padding: 32px 20px; }
  .cryo-header {
    grid-template-columns: 1fr !important;
    gap: 16px;
    margin-bottom: 32px;
  }
  .cryo-header h3 { font-size: 36px; }
  .cryo-tl { grid-template-columns: 1fr !important; }

  /* ── GENERIC FEATURE (sub-pages: 1fr 1.1fr → 1-col) ───────── */
  .feature {
    grid-template-columns: 1fr !important;
  }
  .feature .img,
  .feature .feat-img { min-height: 260px; }
  .feature .body,
  .feature .feat-body { padding: 36px 24px !important; }
  /* Flip variant (eden-9.html .feature.flip) */
  .feature.flip { direction: ltr; }
  .feature.flip .img { order: 0; }

  /* ── MISSION SPREAD (about.html) ───────────────────────────── */
  .mission {
    grid-template-columns: 1fr !important;
  }
  .mission-img {
    min-height: 280px;
    border-radius: var(--r-md) var(--r-md) 0 0 !important;
  }
  .mission-body {
    padding: 36px 24px !important;
    border-radius: 0 0 var(--r-md) var(--r-md) !important;
  }
  .mission-body h3 { font-size: 36px; }

  /* ── STATS ROWS (repeat 4 → 2x2) ──────────────────────────── */
  .stats { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── SPECIES / THREE-UP / DISTRICTS / DEPTS / CAPS ─────────── */
  .species,
  .three-up,
  .districts,
  .depts,
  .caps,
  .layers {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }

  /* ── ROSTER / BOUNDS / PILLARS (2-col → 1-col) ────────────── */
  .roster,
  .bounds {
    grid-template-columns: 1fr !important;
  }

  /* ── SCHEDULE (entertainment.html: 4-col → simpler) ───────── */
  .schedule {
    grid-template-columns: auto 1fr !important;
    gap: 12px;
  }

  /* ── TIMELINE (about.html: 220px 1fr → 1-col) ─────────────── */
  .timeline {
    grid-template-columns: 1fr !important;
    gap: 4px;
  }
  .timeline .yr { font-size: 40px; }

  /* ── MANIFESTO / TRANSCRIPT / TRAINING (fixed left col) ────── */
  .manifesto,
  .transcript,
  .training { grid-template-columns: 1fr !important; }

  /* ── BOOKING-KIT LAYOUT ────────────────────────────────────── */
  .layout {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .trip {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
  }
  .cabin-grid { grid-template-columns: 1fr !important; }
  .onboard { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── FINAL CTA ─────────────────────────────────────────────── */
  .final { padding: 80px 20px !important; }

  /* ── FOOTER ────────────────────────────────────────────────── */
  footer { padding: 56px 20px 32px !important; }
  .foot-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px;
  }
  .foot-brand { grid-column: 1 / -1; }
  .foot-bot {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    margin-top: 40px !important;
  }
}

/* ── PHONE ONLY (≤ 480px) ─────────────────────────────────────── */
@media (max-width: 480px) {
  .hero-stats { grid-template-columns: 1fr !important; }
  .ship-specs { grid-template-columns: 1fr !important; }
  .foot-grid { grid-template-columns: 1fr !important; }
  .foot-brand { grid-column: auto; }

  .species,
  .three-up,
  .districts,
  .depts,
  .caps,
  .layers { grid-template-columns: 1fr !important; }

  .stats { grid-template-columns: repeat(2, 1fr) !important; }

  .stop-card { aspect-ratio: 4/3; }
  .trip { grid-template-columns: 1fr !important; }
  .onboard { grid-template-columns: 1fr !important; }

  .nav .cta { padding: 10px 16px; font-size: 11px; }
}