/* ==========================================================================
   AGRINICHE UNITED CO. — FIELD LEDGER DESIGN SYSTEM
   Responsive Overrides
   File: assets/css/responsive.css
   Depends on: assets/css/variables.css, assets/css/base.css,
               assets/css/layout.css, assets/css/components.css
   NOTE: This file contains ONLY responsive (@media) overrides for real
   BEM component classes defined in components.css. Base/desktop styling
   lives in components.css and is not duplicated here. Generic layout
   utilities (.container, .grid-*, bare `section` padding) already have
   their own responsive rules in layout.css and are intentionally not
   repeated here to avoid duplicate/conflicting declarations.

   CSS custom properties cannot be used inside @media conditions, so the
   literal pixel values below mirror the tokens already defined in
   variables.css:
     --breakpoint-sm:  480px
     --breakpoint-md:  768px
     --breakpoint-lg:  1024px
     --breakpoint-xl:  1280px
     --breakpoint-2xl: 1536px
   ========================================================================== */


/* ==========================================================================
   1024px — Tablets / small laptops
   ========================================================================== */

@media (max-width: 1024px) {

  /* --- Homepage hero: collapse to one column, matching the same
     breakpoint at which layout.css already collapses the outer
     .hero section grid, so both layers change together. --- */
  .hero__container {
    grid-template-columns: 1fr;
  }

  .hero__visual {
    margin-top: var(--space-8);
  }

  /* --- Card grids: 3 columns → 2 columns --- */
  .business-units-section__grid,
  .partners-section__grid,
  .trusted-partners__grid,
  .why-agriniche-section__grid,
  .our-approach-section__grid,
  .vision-mission-section__grid,
  .solutions-section__grid,
  .projects-section__grid,
  .impact-statistics-section__grid,
  .about-section__capabilities {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Footer: 4 columns → 2 columns --- */
  .site-footer__top {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Navbar: switch to mobile toggle pattern. The menu/actions panel
     is hidden by default and revealed via [aria-expanded="true"] on
     .navbar__toggle, matching the existing HTML's aria attributes.
     NOTE: toggling aria-expanded requires JavaScript — navigation.js is
     currently empty. See the JS dependency note in the verification
     report below. --- */
  .navbar__toggle {
    display: flex;
  }

  .navbar__menu-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-md);
    padding: var(--space-4);
    display: none;
  }

  .navbar__toggle[aria-expanded="true"] + .navbar__menu-wrapper {
    display: flex;
  }

  .navbar__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .navbar__item {
    width: 100%;
  }

  .navbar__link {
    width: 100%;
    padding-block: var(--space-3);
  }

  .navbar__link::after {
    display: none;
  }

  .navbar__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
  }
}


/* ==========================================================================
   768px — Large mobile / small tablets
   ========================================================================== */

@media (max-width: 768px) {

  /* --- Topbar: stack contact info above social/language controls --- */
  .topbar__container {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .topbar__contact {
    gap: var(--space-4);
  }

  .topbar__meta {
    width: 100%;
    justify-content: space-between;
  }

  /* --- Page hero: reduce heading scale for narrower viewports --- */
  .page-hero__heading {
    font-size: var(--font-size-3xl);
  }

  /* --- Homepage hero: reduce heading scale to match --- */
  .hero__heading {
    font-size: var(--font-size-3xl);
  }

  /* --- Hero stat cards: 2 columns → 1 column --- */
  .hero__stats {
    grid-template-columns: 1fr;
  }

  /* --- Card grids: 2 columns → 1 column --- */
  .business-units-section__grid,
  .partners-section__grid,
  .trusted-partners__grid,
  .why-agriniche-section__grid,
  .our-approach-section__grid,
  .vision-mission-section__grid,
  .solutions-section__grid,
  .projects-section__grid,
  .impact-statistics-section__grid,
  .about-section__capabilities,
  .partner-category__grid {
    grid-template-columns: 1fr;
  }

  /* --- Process steps: horizontal pathway → vertical stack. The
     connecting line pivots from a horizontal segment between steps to
     a short vertical segment beneath each step's index circle. --- */
  .process-section__steps {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
  }

  .process-step {
    flex-direction: row;
    text-align: left;
    gap: var(--space-4);
  }

  .process-step:not(:last-child)::after {
    top: 2.5rem;
    left: 1.25rem;
    width: 2px;
    height: var(--space-6);
  }

  /* --- CTA actions: stack buttons on narrow viewports --- */
  .cta-section__actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* --- Contact form: two-column rows stack to one column --- */
  .contact-form__row {
    grid-template-columns: 1fr;
  }

  .contact-info {
    flex-direction: column;
    gap: var(--space-5);
  }

  /* --- Footer: 2 columns → 1 column --- */
  .site-footer__top {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   480px — Mobile
   ========================================================================== */

@media (max-width: 480px) {

  /* --- Homepage hero actions: stack buttons, prevent overflow --- */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__badges {
    flex-direction: column;
    gap: var(--space-3);
  }

  /* --- Topbar: reduce to a compact single-column stack --- */
  .topbar__contact {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .topbar__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* --- Buttons: full-width when stacked, preventing overflow on
     very narrow screens (applies wherever .btn already sits inside a
     stacked column from the rules above). --- */
  .hero__actions .btn,
  .cta-section__actions .btn,
  .navbar__actions .btn {
    width: 100%;
  }

  /* --- Detail-section icon/title scale down slightly --- */
  .business-center-detail__title,
  .solution-detail__title,
  .project-detail__title {
    font-size: var(--font-size-xl);
  }
}