/* ==========================================================================
   AGRO-PROCESSING & VALUE ADDITION CENTER
   Responsive Overrides
   File: assets/css/responsive.css
   ========================================================================== */

@media (max-width: 1024px) {
  .hero__container { grid-template-columns: 1fr; }
  .hero__visual { margin-top: var(--space-8); }

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

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

  .navbar__toggle { display: flex; }

  .navbar__menu-wrapper {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    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__link { width: 100%; padding-block: var(--space-3); }
  .navbar__link::after { display: none; }
}

@media (max-width: 768px) {
  .utility-bar__container { flex-direction: column; align-items: flex-start; gap: var(--space-2); }

  .page-hero__heading, .hero__heading { font-size: var(--font-size-3xl); }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  .cta-section__actions { flex-direction: column; align-items: stretch; }

  .chain-steps { flex-direction: column; align-items: stretch; gap: var(--space-6); }
  .chain-step { flex-direction: row; text-align: left; gap: var(--space-4); }
  .chain-step:not(:last-child)::after { top: 2.5rem; left: 1.25rem; width: 2px; height: var(--space-6); }

  .contact-form__row { grid-template-columns: 1fr; }

  .site-footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero__actions, .cta-section__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn, .cta-section__actions .btn { width: 100%; }
}