/* ============================================================================
   FILE: css/responsive.css
   PURPOSE: Adapting the layout to phones and tablets.
   ----------------------------------------------------------------------------
   HOW IT WORKS (beginner explanation):
   A "@media" rule is a question the browser answers about itself.
   "@media (max-width: 960px)" means: "IF the screen is 960 pixels wide or
   narrower, apply the rules inside these braces." Desktop styles stay in
   the other files; here we only OVERRIDE what must change on small screens.

   RULE OF THUMB: multi-column grids collapse to a single column, and the
   horizontal menu becomes a tap-to-open dropdown.
   ========================================================================== */

@media (max-width: 960px) {

  /* --- HERO: side-by-side columns stack vertically ----------------------- */
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .beam-stage { justify-self: start; width: min(340px, 70vw); }

  /* --- CARD GRIDS: everything becomes one column ------------------------- */
  .phases, .caps, .metrics { grid-template-columns: 1fr; }

  /* Metrics were separated by right borders in a row; stacked vertically
     they need bottom borders instead. */
  .metric { border-right: 0; border-bottom: 1px solid var(--line); }

  /* Ecosystem: 4 columns become a tidy 2x2 grid. */
  .eco-grid { grid-template-columns: 1fr 1fr; }

  /* Contact: form drops below the contact info. */
  .contact-grid { grid-template-columns: 1fr; }

  /* Map gets taller proportions on narrow screens so it stays usable. */
  .map-wrap { aspect-ratio: 4 / 3; }

  /* --- MOBILE NAVIGATION -------------------------------------------------- */
  /* Hide the horizontal menu; it reappears as a vertical dropdown when
     JavaScript adds the class "open" (see the menu button in js/main.js). */
  nav ul {
    display: none;
    position: absolute;
    top: 68px;                /* directly below the header bar */
    left: 0; right: 0;
    background: var(--void);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    padding: 10px 28px 22px;
  }
  nav ul.open { display: flex; }
  nav li { padding: 12px 0; }

  /* Show the MENU button (it was display:none on desktop). */
  .menu-btn { display: block; }
}

/* Extra-small phones: shrink section padding so content isn't cramped. */
@media (max-width: 480px) {
  :root { --section-pad: 80px; }
  .wrap { padding: 0 20px; }
  .cookie-banner { left: 12px; right: 12px; max-width: none; }
}