/* ==========================================================================
   MANA AGRI STORE — RESPONSIVE OVERRIDES
   Loaded after style.css. Mobile-first-ish overrides via max-width queries
   to keep the base file authoritative for desktop composition.
   Breakpoints: 1200 (laptop) / 1024 (tablet landscape) / 768 (tablet) /
   576 (mobile) / landscape-mobile (short viewport).
   ========================================================================== */

/* The 1300px "motto single-line safety net" breakpoint that used to live
   here is gone — it existed only because the motto quote was rendering
   at H2 scale (.section-heading, ~41.6px) and needed help to avoid
   overflowing at narrower widths with nowrap forced on. Resized to a
   real H3 (style.css's .motto h3, sitewide h3{font-size:1.2rem} scale)
   per later instruction, the same nowrap text is far short of any
   width that could overflow — verified by measurement, zero page-level
   overflow at every width from 320px to 1920px — so the breakpoint had
   nothing left to do. */

/* ---------- Laptop / small desktop (<=1200px) ---------- */
@media (max-width: 1200px) {
  :root { --container-w: 100%; }
}

/* ---------- Tablet landscape (<=1024px) ---------- */
@media (max-width: 1024px) {
  .about__inner { gap: 2.5rem; }
}

/* ---------- Tablet portrait (<=900px) ---------- */
@media (max-width: 900px) {
  /* The overlay-on-image approach (see style.css's HERO block) only
     holds up while the image is tall enough in absolute px for its
     35%-to-bottom safe zone to comfortably fit heading + subtext +
     button. At 2.757:1, a narrow viewport makes the image short enough
     that band gets too tight well before typical mobile widths.
     Originally handled by stacking (image full-width on top, text
     below on its own purple panel) — now goes further per explicit
     instruction: the image is removed from view entirely at this
     breakpoint (display:none, not just relying on the text covering
     it), and .hero itself supplies the solid purple directly, so
     there's no image to load-and-hide and no seam to match colors
     across — just one flat purple panel with the text sitting in
     normal document flow. */
  .hero {
    background: var(--purple-accent);
  }
  .hero__img {
    display: none;
  }
  .hero__overlay {
    position: static;
    width: auto;
    padding: clamp(2rem, 5vw, 2.5rem) var(--content-inset);
  }

  .about__inner { grid-template-columns: 1fr; }
  .about__media { max-width: 480px; margin-inline: auto; }

  /* Stack: text first, photo below — chosen over a full-bleed
     text-on-photo treatment because it needs no new contrast tuning
     (the text sits on the same flat purple background at every
     breakpoint, never on the image), which is the safer call on a
     narrow column where there's little room to keep a scrim legible
     edge-to-edge. */
  .about__tomorrow { grid-template-columns: 1fr; }
  /* Was its own hardcoded clamp (4-5rem top / flat 3rem bottom), tuned
     back when the desktop baseline was var(--section-pad)'s old 4-7rem
     range. Now reuses that same token (only the left/right values stay
     mobile-specific — narrower left inset, no distinct right value
     needed since the stacked column is full-width), so this breakpoint
     can't drift out of sync with the sitewide spacing-reduction pass. */
  .about__tomorrow-content {
    padding: var(--section-pad) 1.75rem var(--section-pad) var(--content-inset);
  }
  /* .about__tomorrow-content .section-heading (style.css) forces
     white-space:nowrap on "A bright tomorrow for the farmer" and sets
     a font-size clamp calibrated for the >900px 2-column layout — this
     stacked single-column layout gives that heading a DIFFERENT
     (mostly wider, except at the very narrow end) available width at
     the same viewport, so it needs its own clamp, not the desktop one.
     Calibrated the same way: measured this column's true available
     width with wrap temporarily allowed (avoiding nowrap's own
     min-content forcing the column wider than the viewport), then
     found the largest integer px that still fit on one line with an
     8px safety margin at each width — 320px allows up to 16px, 360px
     up to 18px, 480px up to 26px, 576px up to 32px, 768px up to 33px,
     900px up to 32px. clamp(1rem/16px, 4.2vw, 1.9rem/30.4px) stays at
     or under every one of those (16px floor at 320-360px, 20.16px at
     480px, 24.19px at 576px, 30.4px ceiling from 768px up) — verified
     by rendering at 320, 360, 480, 576, 768, 900px, zero page overflow
     at any of them. */
  .about__tomorrow-content .section-heading {
    font-size: clamp(1rem, 4.2vw, 1.9rem);
  }
  .about__tomorrow-media { min-height: 320px; }

  .services__grid { grid-template-columns: repeat(2, 1fr); }

  .contact-content { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ---------- Navigation collapse (<=880px) ---------- */
@media (max-width: 880px) {
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 82vw);
    height: 100vh;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2.5rem;
    padding: 6.5rem 2rem 2rem;
    box-shadow: -20px 0 40px -20px rgba(23,36,23,0.3);
    transform: translateX(100%);
    transition: transform var(--dur-med) var(--ease-out);
    z-index: 105;
  }
  .nav.is-open { transform: translateX(0); }

  .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.4rem;
    width: 100%;
  }
  .nav__link { font-size: 1.05rem; }
  .nav__cta { width: 100%; justify-content: center; }

  /* Hamburger -> X animation when open */
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-toggle[aria-expanded="true"] span { background: var(--dark-green); }
}

/* ---------- Mobile (<=768px) ---------- */
@media (max-width: 768px) {
  /* --section-pad override removed — it fixed section spacing at 3.5rem
     here, which was smaller than the old desktop 4-7rem range but is
     now LARGER than the new 2.5-4rem range's own natural floor at this
     width (clamp(2.5rem, 4vw, 4rem) already resolves to its 2.5rem
     floor well above 768px, since 4vw stays under 2.5rem until ~800px).
     Removing the override lets that floor apply consistently instead
     of fighting it with a stale, now-backwards fixed value. */

  /* Stack: mascot above the full text column, same order as the HTML
     (mascot markup comes first) — single column, so the two are no
     longer sharing a row and height:100% on the mascot would just equal
     its own natural height; switched to a normal fixed width instead.
     Centered via margin-inline:auto on the image itself, not
     justify-items on the grid — that would've also shrink-wrapped
     .why-us__content down to its own content width instead of staying
     full-width, narrowing where the text can wrap. */
  .why-us__inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .why-us__mascot { height: auto; width: 150px; max-width: none; margin-inline: auto; }

  .counters { grid-template-columns: 1fr 1fr; }
  .counter--text { grid-column: span 2; }

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

  .contact-form { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 1.5rem; }

  .footer__inner {
    grid-template-columns: 1fr 1fr;
    row-gap: 2.5rem;
  }
  .footer__brand { grid-column: span 2; }
}

/* ---------- Small mobile (<=576px) ---------- */
@media (max-width: 576px) {
  .container { padding-inline: 1.25rem; }

  .hero__overlay { padding-left: var(--content-inset); padding-right: 1.25rem; }

  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }

  /* No override needed here anymore — this breakpoint is nested within
     <=900px, so it already inherits var(--section-pad) top/bottom from
     that rule's own .about__tomorrow-content padding, consistent with
     every other section boundary. */
  .about__tomorrow-media { min-height: 260px; }

  .footer__inner { grid-template-columns: 1fr; }
  .footer__brand { grid-column: span 1; }

  /* Copyright + social icons no longer fit comfortably side by side at
     this width — stack instead, centered (align-items:center from the
     base .footer__bottom rule handles the horizontal centering once the
     flex direction is column). */
  .footer__bottom { flex-direction: column; text-align: center; }

  .back-to-top { right: 1rem; bottom: 1rem; width: 42px; height: 42px; }
}

/* ---------- Extra-narrow mobile (<=350px) ---------- */
@media (max-width: 350px) {
  /* .motto h3 ("Farming Smarter, Growing Better") is white-space:nowrap
     by default (style.css) — at this narrow end of the stacked mobile
     .why-us layout, that forced real document overflow, not just an
     off-screen artifact: mapped by bisection, 29px of overflow at
     320px and 9px at 340px, dropping to exactly 0px from 360px up.
     Re-allowing wrap here removes the forced min-content width; the
     text still reads fine as two lines at this size (it already wraps
     acceptably elsewhere in the site at H3 scale, e.g. the About
     section's headings don't need single-line treatment). */
  .motto h3 { white-space: normal; }
}

/* ---------- Landscape mobile (short viewport, wide-ish) ---------- */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
  /* No hero-specific override needed here — this breakpoint is nested
     within <=900px, so it already inherits the stacked mobile hero
     (image full-width on top, text in normal flow below on a solid
     purple panel) from that rule above. Height here is driven by
     content, not viewport height, so a short landscape viewport doesn't
     force any extra reduction. */

  .nav { padding-top: 5rem; overflow-y: auto; }

  .about__inner { padding-block: 3rem; }
}