/* ============================================================
   responsive.css – Responsive breakpoints for all screen
   sizes. Imported last.
   ============================================================ */

/* --- Tablet (≤ 900 px) --- */
@media (max-width: 900px) {
  /* A-02: the hamburger/mobile menu was only triggered by #navbar's
     scroll-based .shrunk class (navbar.js), never by viewport width — so
     on first load, before any scroll, a narrow screen showed the full
     desktop .nav-links row regardless of whether it fit. .nav-links
     doesn't wrap or shrink (every link is white-space:nowrap, no
     flex-shrink handling), so its rendered width is fixed by its content
     — measuring it directly (not via document.documentElement.scrollWidth,
     which missed this entirely: body's overflow-x:hidden silently clips
     the excess before it ever shows up as page-level scrollWidth) found
     it overflows everywhere from about 955px down to the narrowest phone
     widths, not just below 600px as a first pass wrongly concluded.
     "Om elnätsfakta.se", "Kontakt", "Länkregister" and "Logga in" were
     unreachable — cut off past the right edge — until the visitor
     scrolled 60px down. Placed at the existing 900px breakpoint (this
     project's own declared tablet cutoff, comfortably past the ~955px
     true break point) rather than inventing a new one. Same specificity
     as navbar.css's unconditional .nav-links/.hamburger rules, so this
     wins purely by loading after them — no !important needed.
     #navbar.shrunk's own toggle still applies unchanged above 900px. */
  .nav-links { display: none; }
  .hamburger { display: flex; }

  .chart-wrap,
  .map-inner {
    grid-template-columns: 1fr;
  }

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

  /* Hide side navigation on narrow screens */
  .breadcrumb {
    display: none;
  }
}

/* --- Mobile (≤ 600 px) --- */
@media (max-width: 600px) {
  .invest-legend {
    grid-template-columns: repeat(2, 1fr);
  }

  section {
    padding: 70px 5%;
  }

  .hero-content {
    margin-left: 5%;
  }

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

  /* A-02: minmax(0, 1fr), not plain 1fr — a bare 1fr track's implicit
     minimum is its content's auto/min-content width, not 0. "552 640 km"
     can't wrap short enough to fit a true half-share, so that track was
     winning space from its sibling and pushing the whole grid past the
     viewport — clipped by body's overflow-x:hidden, so the number just
     read as cut off rather than showing as a scrollbar. minmax(0, 1fr)
     lets the track actually shrink to the available space; the number
     wraps onto two lines instead, which reads fine on a narrow card. */
  .stats-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .carousel-item {
    min-width: 280px;
  }

}