/* ==========================================================================
   AfriGrow Home — Responsive rules
   Breakpoints reviewed for 1920 / 1440 / 1024 / 768 / 390 / 360
   ========================================================================== */

/* ----- Large desktop refinement (>1440) ----- */
@media (min-width: 1440px) {
  :root {
    --max-width: 1320px;
  }
}

/* ----- Tablet landscape / small desktop (<=1180) ----- */
@media (max-width: 1180px) {
  .basket-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

/* ----- Tablet (<=1024) ----- */
@media (max-width: 1024px) {
  .intro,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .intro__media {
    order: -1;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 2.5rem;
  }

  .basket-detail {
    grid-template-columns: 1fr;
  }

  .basket-detail__media img {
    max-height: 320px;
    object-fit: cover;
  }
}

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

  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--forest-deep);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.25rem;
    transform: translateX(100%);
    transition: transform var(--dur-med) var(--ease-in-out);
  }

  .nav-links.is-open {
    transform: translateX(0);
  }

  .main-nav {
    flex-direction: column;
    align-items: center;
    gap: 2.1rem;
  }

  .main-nav a:not(.btn) {
    color: var(--cream) !important;
    font-size: 1.15rem;
  }

  .site-header.is-scrolled .nav-toggle span,
  .nav-toggle span {
    background: var(--cream);
  }

  .site-header:not(.is-scrolled) .nav-toggle span {
    background: var(--cream);
  }

  .site-header.is-scrolled .nav-toggle.is-open span,
  .nav-toggle.is-open span {
    background: var(--cream);
  }
}

/* ----- Small tablet / large mobile (<=768) ----- */
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

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

  .timeline-item,
  .timeline-item:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .timeline-item:nth-child(even) .timeline-media {
    order: 0;
  }

  .hero__stats {
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .product-modal__panel {
    grid-template-columns: 1fr;
  }

  .product-modal__media {
    min-height: 220px;
  }

  .cta-band {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ----- Mobile (<=480) ----- */
@media (max-width: 480px) {
  .values-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }

  .product-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-box {
    min-width: 0;
  }

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

  .hero__actions .btn {
    width: 100%;
  }

  .basket-card__footer {
    flex-direction: column;
  }

  .basket-detail__contents {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .cursor-dot,
  .cursor-ring {
    display: none;
  }
}

/* ----- Very small (<=360) ----- */
@media (max-width: 360px) {
  :root {
    --gutter: 1rem;
  }

  .hero h1 {
    font-size: 2.35rem;
  }

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

/* ----- Touch devices: disable custom cursor & hover-only affordances ----- */
@media (hover: none), (pointer: coarse) {
  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
}

/* ----- Landscape phones: shrink hero min-height so content fits ----- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero {
    min-height: 620px;
  }
}

/* ----- Short viewports (small laptops): keep the scroll cue clear of
   the stats row instead of letting them collide near the bottom ----- */
@media (max-height: 820px) {
  .hero__stats {
    margin-top: 1.5rem;
    padding-top: 1.1rem;
  }

  .hero__scroll {
    display: none;
  }
}

@media (max-height: 700px) {
  .hero__stats {
    display: none;
  }
}

/* Prevent any horizontal overflow globally */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}