/* ==========================================================================
   RESPONSIVE — All Media Queries
   Breakpoints:
   - 960px  — Ecosystem grid to 2-col
   - 880px  — Hero to single column
   - 820px  — Steps, CTA, thesis cards, contact to single column
   - 760px  — Story, Vision horizon to single column
   - 720px  — Mobile nav, pilot padding, CTA padding, form row
   - 560px  — Ecosystem grid to single column
   ========================================================================== */

/* ---- 960px ---- */
@media (max-width: 960px) {
  .eco-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- 880px ---- */
@media (max-width: 880px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero__stage {
    margin: 0 auto;
  }
}

/* ---- 820px ---- */
@media (max-width: 820px) {
  .thesis__cards {
    grid-template-columns: 1fr;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .step {
    border-right: none;
    border-bottom: 1px solid var(--color-line);
  }

  .step:last-child {
    border-bottom: none;
  }

  .cta-grid {
    grid-template-columns: 1fr;
  }

  .contact__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- 760px ---- */
@media (max-width: 760px) {
  .story__grid {
    grid-template-columns: 1fr;
  }

  .vision__horizon {
    grid-template-columns: 1fr;
  }
}

/* ---- 720px ---- */
@media (max-width: 720px) {
  /* Mobile nav */
  .nav__toggle {
    display: flex;
  }

  .nav__links {
    position: fixed;
    top: var(--nav-height);
    right: 0;
    width: 280px;
    max-width: 85vw;
    /* Anchor exactly below the navbar and fill the rest of the viewport.
       dvh accounts for mobile browser chrome (avoids the 100vh under-URL-bar bug);
       vh is a fallback for older browsers. */
    height: calc(100vh - var(--nav-height));
    height: calc(100dvh - var(--nav-height));
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-lg) var(--gutter) var(--space-xl);
    background: rgba(14, 14, 17, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid var(--color-line);
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    z-index: calc(var(--z-nav) + 1);
    gap: 0;
    /* Internal scroll is a fallback only (very short screens / large text).
       Body is locked while open, so only the menu ever scrolls — never both. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .nav__links.nav__links--open {
    transform: translateX(0);
  }

  .nav__link {
    display: block;
    width: 100%;
    padding: 14px 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--color-line);
  }

  .nav__links .btn {
    margin-top: var(--space-md);
    width: 100%;
    text-align: center;
  }

  /* Mobile overlay — smooth fade via opacity/visibility (no display toggling) */
  .nav__mobile-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-overlay);
    opacity: 0;
    visibility: hidden;
    /* On hide: fade out, then flip visibility after the duration. */
    transition: opacity var(--transition-slow) ease,
                visibility 0s linear var(--transition-slow);
  }

  .nav__mobile-overlay--visible {
    opacity: 1;
    visibility: visible;
    /* On show: flip visibility instantly, fade opacity in. */
    transition: opacity var(--transition-slow) ease,
                visibility 0s linear 0s;
  }

  /* Pilot */
  .pilot {
    padding: var(--space-xl) var(--space-lg);
  }

  /* CTA card */
  .cta-card {
    padding: 36px 26px;
  }

  /* Form */
  .form__row {
    grid-template-columns: 1fr;
  }

  .form {
    padding: 28px 22px;
  }
}

/* ---- 560px ---- */
@media (max-width: 560px) {
  .eco-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- 480px ---- */
@media (max-width: 480px) {
  .hero {
    padding: 120px 0 60px;
  }

  .hero__title {
    font-size: 2rem;
  }

  section {
    padding: 64px 0;
  }

  .pilot__stats {
    gap: var(--space-lg);
  }
}

/* ---- Touch Devices ---- */
@media (hover: none) {
  /* Disable hover transforms on touch devices to prevent stuck states */
  .btn--gradient:hover,
  .btn--ghost:hover,
  .card:hover,
  .eco:hover,
  .horizon-card:hover,
  .cta-card:hover,
  .back-to-top:hover {
    transform: none !important;
  }
  
  .card:hover,
  .cta-card:hover,
  .horizon-card:hover {
    box-shadow: none !important;
    border-color: var(--color-line) !important;
  }
}