/* ═══════════════════════════════════
   PROTO — Responsive
   ═══════════════════════════════════ */

/* Kill horizontal scroll everywhere */
*, *::before, *::after {
  max-width: 100vw;
}
html, body {
  overflow-x: hidden !important;
  width: 100%;
}
/* BG orbs must never cause scroll */
.bg-orb1, .bg-orb2, .bg-orb3 {
  overflow: hidden;
}

/* ═══ TABLET ≤ 900px ═══ */
@media (max-width: 900px) {

  /* Hero → single column, image below */
  .hero {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
    padding: 96px 24px 56px;
    gap: 36px;
  }
  .hero-content { width: 100%; }
  .hero-visual {
    width: 100%;
    justify-content: center;
  }
  .hero-img-container { max-width: 420px; width: 100%; }

  /* Sections */
  .sec { padding: 80px 24px; }
  .divider { padding: 0 24px; }

  /* Grids → fewer cols */
  .pillars { grid-template-columns: 1fr; }
  .vm-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .highlights { grid-template-columns: repeat(2, 1fr); }
  .gal-grid { grid-template-columns: repeat(2, 1fr); }

  /* Tooltips wrap */
  .t-card .tooltip {
    white-space: normal;
    max-width: 200px;
    text-align: center;
  }
}

/* ═══ PHONE ≤ 640px ═══ */
@media (max-width: 640px) {

  /* ── NAV: compact, only key links ── */
  nav { height: 46px; }
  .nav-inner { padding: 0 14px; }
  .nav-brand { font-size: 0.72rem; letter-spacing: 0.08em; }
  .nav-center { gap: 0; }
  .nav-center a {
    font-size: 0.68rem;
    padding: 5px 8px;
  }
  /* Hide Gallery on phone */
  .nav-center a:nth-child(4) { display: none; }
  .nav-code-btn {
    padding: 5px 12px;
    font-size: 0.68rem;
    border-radius: 6px;
  }

  /* ── HERO ── */
  .hero {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    padding: 76px 16px 40px;
    gap: 28px;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 100%;
    width: 100%;
  }
  .hero-content { width: 100%; }
  .hero h1 { font-size: 2.6rem; }
  .hero-sub { font-size: 0.86rem; max-width: 100%; }
  .hero-badge { font-size: 0.52rem; padding: 4px 10px 4px 8px; margin-bottom: 16px; }
  .hero-ftc-tag { font-size: 0.62rem; }
  .scroll-hint { display: none; }
  .hero-visual { width: 100%; justify-content: center; }
  .hero-img-container { max-width: 280px; width: 100%; }
  .hero-img-container img { width: 100%; }
  .img-label { font-size: 0.5rem; padding: 4px 8px; bottom: 10px; left: 10px; }

  /* Scroll hint below image on mobile — left aligned */
  .mobile-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding-top: 8px;
  }
  .mobile-scroll-hint svg { color: var(--blue); flex-shrink: 0; }
  .mobile-scroll-hint span {
    font-size: 0.52rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-3);
    font-weight: 500;
  }

  /* Hero fills screen so about is below the fold */
  .hero {
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: center;
  }

  /* ── SECTIONS ── */
  .sec { padding: 52px 16px; max-width: 100%; }
  .divider { padding: 0 16px; }
  .s-over { font-size: 0.5rem; }
  .s-head { font-size: 1.5rem; }
  .s-desc { font-size: 0.84rem; max-width: 100%; }

  /* Hide lines of code stat on mobile */
  .stat-hide-mobile { display: none; }

  /* Stats: members + season same line */
  .stats { gap: 8px; flex-wrap: nowrap; }
  .stat-item { min-width: 0; flex: 1; padding: 12px 14px; text-align: center; }

  /* Highlights: 2 per line */
  .highlights { grid-template-columns: 1fr 1fr !important; gap: 8px; }

  /* Gallery: 2 per line */
  .gal-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; margin-top: 16px; }
  .st-num { font-size: 1.4rem; }
  .st-lbl { font-size: 0.5rem; }

  /* ── VM ── */
  .vm-grid { grid-template-columns: 1fr; gap: 8px; }
  .vm-card { padding: 22px 18px; }
  .vm-card p { font-size: 0.82rem; }

  .hl-card { padding: 16px 12px; }
  .hl-card h4 { font-size: 0.72rem; }
  .hl-card p { font-size: 0.58rem; }
  .hl-icon { font-size: 1.1rem; margin-bottom: 6px; }

  /* ── RESOURCE BTNS ── */
  .res-links { gap: 6px; }
  .res-btn { padding: 6px 10px; font-size: 0.64rem; }
  .res-btn svg { width: 12px; height: 12px; }

  /* ── PILLARS ── */
  .pillars { grid-template-columns: 1fr; gap: 8px; }
  .pill { padding: 22px 18px; }
  .pill h3 { font-size: 0.8rem; }
  .pill p { font-size: 0.72rem; }
  .pill-ico { width: 30px; height: 30px; font-size: 0.68rem; margin-bottom: 12px; }

  /* ── TEAM ── */
  .team-grid { grid-template-columns: 1fr; gap: 8px; }
  .t-card { padding: 16px 14px; gap: 12px; }
  .t-av { width: 36px; height: 36px; font-size: 0.72rem; border-radius: 8px; }
  .t-info h3 { font-size: 0.76rem; }
  .t-info .role { font-size: 0.52rem; }
  .t-card .tooltip { display: none; }

  /* ── GALLERY ── */
  .gal-tabs { gap: 4px; margin-top: 24px; }
  .gal-tab { padding: 5px 10px; font-size: 0.6rem; }
  .gal-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
  .gal-tag { font-size: 0.46rem; padding: 3px 6px; top: 6px; right: 6px; }
  .gal-item .expand-icon { display: none; }

  /* ── LIGHTBOX ── */
  .lightbox img { max-width: 94vw; max-height: 70vh; border-radius: 10px; }
  .lightbox-close { top: 12px; right: 12px; width: 30px; height: 30px; }
  .lightbox-tag { font-size: 0.56rem; bottom: 16px; padding: 5px 12px; }

  /* ── FOOTER ── */
  footer {
    flex-direction: column; gap: 4px; text-align: center;
    padding: 28px 16px;
  }
}

/* ═══ SMALL PHONE ≤ 400px ═══ */
@media (max-width: 400px) {
  .nav-center a { font-size: 0.6rem; padding: 4px 6px; }
  .nav-brand { font-size: 0.66rem; }
  .nav-code-btn { padding: 4px 9px; font-size: 0.6rem; }

  .hero { padding: 70px 14px 36px; }
  .hero h1 { font-size: 2.1rem; }
  .hero-sub { font-size: 0.8rem; }
  .hero-badge { font-size: 0.48rem; }
  .hero-img-container { max-width: 220px; }

  .sec { padding: 44px 14px; }
  .s-head { font-size: 1.3rem; }
  .s-desc { font-size: 0.8rem; }

  .highlights { grid-template-columns: 1fr 1fr !important; }
  .gal-grid { grid-template-columns: 1fr 1fr !important; }
  .stats { flex-direction: row; gap: 6px; }
  .stat-item { width: auto; flex: 1; }
}