/* ============================================================
   Mobile / responsive layout for NoEggPlant
   ------------------------------------------------------------
   The original design was desktop-only: fixed multi-column grids
   and no breakpoints. These rules collapse the layout to a single
   column on phones and small tablets and tidy up spacing.

   Because the pages use inline styles (which normally beat a
   stylesheet), these overrides use !important so they win. Nothing
   here affects the desktop layout — it all lives inside the
   max-width media query.
   ============================================================ */

/* Impact calculator: keep the selected scale preset filled yellow.
   Uses !important so it survives the inline-style hover helper. */
.imp-preset.is-active {
  background: #F1FC7A !important;
  color: #26072E !important;
  border-color: #F1FC7A !important;
}

@media (max-width: 768px) {

  /* 1) Collapse every multi-column grid to a single column.
        The attribute selectors match the inline styles directly, so
        no HTML changes are needed for the grids themselves.
        (Two exceptions handled below: the number keypad and the
         4-column methodology table.) */
  [style*="1fr 1fr"],
  [style*="1.05fr"],
  [style*="1.55fr"],
  [style*="1.08fr"],
  [style*="auto 1fr"],
  [style*="repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* 2) Tighten the big side padding and vertical section spacing. */
  [style*="padding:0 40px"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  #problem, #solution, #scaling, #about, #partner, #evidence, #impact {
    padding-top: 57px !important;
    padding-bottom: 57px !important;
  }
  /* The products section starts with the full-width USP banner, so its own
     top padding stays at zero on phones too. */
  #product { padding-top: 0 !important; padding-bottom: 57px !important; }
  /* The Story and The Impact share the same dark background; keep their
     shared seam tight on phones as well. */
  #about { padding-bottom: 28px !important; }
  #impact { padding-top: 28px !important; }
  /* Grid columns may never grow wider than the screen because one child
     (like a text input with its built-in default width) refuses to shrink. */
  .impact-row > * { min-width: 0; }

  /* Footer on phones: the desktop's wide gaps stack up to a very tall
     footer, so everything moves closer together. */
  footer > div:first-child { gap: 26px !important; }
  footer > div:first-child > div:last-child { gap: 10px 22px !important; }
  footer > div:last-child { gap: 6px !important; margin-top: 24px !important; padding: 16px 22px 0 !important; }
  /* The full-bleed Fibers band inside the products section gets its own,
     tighter padding on phones. */
  .prod-band { margin-top: 20px !important; padding: 28px 0 !important; }

  /* 3) Hero nav: shrink the logo, swap the inline links for a
        hamburger button that opens the dropdown menu. */
  #nmnav { height: 74px !important; padding: 0 20px !important; }
  #nmnav img { height: 58px !important; }
  #navLinks { display: none !important; }   /* hide the desktop links */
  #navToggle { display: flex !important; }  /* show the hamburger */

  /* 4) Hero bottom labels: stop "Takes" / "Gives back" and their
        paragraphs overlapping. Narrow each to its own half, shrink
        the big word, and drop the long paragraph on phones. */
  #top .hlabel-l { left: 20px !important; right: auto !important; max-width: 44vw !important; }
  #top .hlabel-r { right: 20px !important; left: auto !important; max-width: 44vw !important; }
  #top .hbig { font-size: 20px !important; white-space: nowrap !important; }
  #top .hdesc { display: none !important; }

  /* 5) Solution carousel: make each card fit the phone screen so a
        whole card is visible at a time (it still swipes sideways). */
  #solTrack > div { flex-basis: 86% !important; }

  /* 5b) Product photos: turn the desktop grid into a swipe carousel.
         Each photo becomes an equal slide; the next one peeks at the
         edge to signal there's more to swipe. */
  .prod-media {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px !important;
    scrollbar-width: none;
  }
  .prod-media::-webkit-scrollbar { display: none; }
  .prod-slide {
    flex: 0 0 85% !important;
    height: 300px !important;
    scroll-snap-align: center;
  }

  /* 5c) Founder photo: shorter (more landscape) on phones so both founders
         and the Lekker Lupine logo stay in frame. The min-height:0 is needed
         because the desktop layout gives the figure min-height:420px, and
         min-height beats height — without this line the photo turns into a
         tall crop that pushes the left founder out of frame. */
  .founders-figure { height: 240px !important; min-height: 0 !important; }

  /* 6) Methodology: let the 4-column coefficient table scroll
        sideways instead of squashing its columns. */
  .mtable { overflow-x: auto !important; }
  .mtable > div { min-width: 560px; }
}

/* On desktop, never show the mobile-only hamburger or its menu
   (guards against it lingering if the window is resized larger). */
@media (min-width: 769px) {
  #navToggle, #mobileMenu { display: none !important; }

  /* The Price: put the image on the left and the text on the right
     (on phones it stays stacked text-first for a better reading order). */
  .price-row { grid-template-columns: .95fr 1.05fr !important; }
  .price-img { order: -1 !important; }

  /* The Impact: input card on the left (spanning both rows, top-aligned),
     text and results stacked on the right. Reads left-to-right as
     cause -> effect, and the text stays right for The Story's rhythm.
     On phones the source order stacks heading, input, results. */
  .impact-input { grid-column: 1; grid-row: 1 / span 2; }
  .impact-text { grid-column: 2; grid-row: 1; }
  .impact-results { grid-column: 2; grid-row: 2; }
}

/* Solution cards: on wide screens there's room for all three, so show
   them side-by-side instead of a cut-off carousel, and hide the now-
   pointless arrows/dots. Below this width they stay a swipe carousel. */
@media (min-width: 1024px) {
  #solTrack { overflow: visible !important; }
  #solTrack > div { flex: 1 1 0 !important; min-width: 0 !important; }
  #solTrack + div { display: none !important; }
}