/* ==========================================================================
   Nilkanth Farm: responsive layout adjustments
   Breakpoints: 1180 · 1080 (navigation) · 900 · 720 · 560 · 380
   ========================================================================== */

/* Large laptops ---------------------------------------------------------- */
@media (max-width: 1180px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-col--contact { grid-column: 1 / -1; }
  .footer-col--contact .footer-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Navigation collapses into the mobile menu ----------------------------- */
@media (max-width: 1080px) {
  .nav-toggle { display: inline-grid; }

  /* The header's backdrop-filter makes it the containing block for this
     fixed panel, so position it from the header's bottom edge with an
     explicit viewport height instead of using bottom: 0. */
  .site-nav {
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 24px var(--gutter) 40px;
    overflow-y: auto;
    background: var(--white) url('../images/decor/leaf-pattern.svg');
    background-size: 140px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  }
  .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-list li { border-bottom: 1px solid var(--line); }
  .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 4px;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
  }
  .nav-link::after { display: none; }
  .nav-link[aria-current='page'] { color: var(--green); }
  .nav-link[aria-current='page']::before {
    content: '';
    order: 2;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sun);
  }

  .nav-cta { margin-top: 28px; min-height: 56px; }

  .nav-mobile-extras {
    display: grid;
    gap: 12px;
    margin-top: 12px;
  }
  .nav-mobile-extras p {
    margin: 12px 0 0;
    font-size: 0.9rem;
    text-align: center;
    color: var(--muted);
  }

  /* Hero: text first, product showcase below */
  .hero { min-height: 0; }
  .hero-container { grid-template-columns: 1fr; row-gap: 56px; }
  .showcase { max-width: 540px; margin-inline: auto; }
}

/* Tablets --------------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --header-h: 76px; }

  .split,
  .why__grid,
  .contact-layout,
  .vm-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .split--reverse .split__media { order: 0; }
  .split__media { max-width: 620px; width: 100%; margin-inline: auto; }

  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .category-card { aspect-ratio: 4 / 4.4; }

  .why__photo { aspect-ratio: 21 / 9; }

  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .principles { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }

  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .steps::before { display: none; }

  .gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }

  .photo-strip { grid-template-columns: repeat(2, 1fr); }
  .photo-strip figure:nth-child(even) { margin-top: 32px; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

  .section-head--split { flex-direction: column; align-items: flex-start; }

  /* Stacked popup: photo band on top, then the text; the whole popup scrolls */
  .modal__inner { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; max-height: inherit; overflow-y: auto; }
  .modal__media { height: 46vh; }
  .modal__body { overflow: visible; }
  .modal__nav { top: 16px; bottom: auto; }
  .modal__nav--prev { left: 16px; }
  .modal__nav--next { left: 70px; }
}

/* Large phones ---------------------------------------------------------- */
@media (max-width: 720px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  .product-card { border-radius: 18px; }
  .product-card__media { padding: 8px; }
  .product-card__media img { border-radius: 12px; }
  .product-card__zoom { display: none; }
  /* Pack size moves to the bottom so it never collides with the organic badge */
  .product-card .pack-badge { top: auto; bottom: 14px; left: 14px; padding: 4px 10px; font-size: 0.75rem; }
  .product-card__body { padding: 14px 14px 16px; }
  .product-card__category { font-size: 0.72rem; letter-spacing: 0.06em; }
  .product-card__title { font-size: 1.04rem; }
  .product-card__text { font-size: 0.84rem; margin-bottom: 14px; }
  .product-card__actions { grid-template-columns: 1fr; }

  /* On phones the full toolbar would take too much of the screen if pinned */
  .catalogue-toolbar { position: static; padding-block: 14px; }
  .catalogue-toolbar__row { flex-direction: column; align-items: stretch; gap: 12px; }
  .search { flex: none; }
  .search input { height: 50px; }
  .filter-chips { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .chip { height: 42px; padding: 0 14px; font-size: 0.85rem; }
  .catalogue-meta { margin-top: 10px; font-size: 0.85rem; }

  .catalogue-group__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .catalogue-group__icon { width: 48px; height: 48px; }

  .contact-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .contact-card { padding: 22px 18px; }

  .form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Phones ---------------------------------------------------------------- */
@media (max-width: 560px) {
  :root { --header-h: 70px; }

  body { font-size: 0.98rem; }
  .brand img { height: 48px; }
  .nav-toggle { width: 46px; height: 46px; }
  .nav-toggle span:nth-child(1) { top: 15px; }
  .nav-toggle span:nth-child(2) { top: 22px; }
  .nav-toggle span:nth-child(3) { top: 29px; }

  .hero { padding-block: 56px 120px; }
  .hero-container { row-gap: 40px; }
  .showcase__item { padding: 5px; border-radius: 16px; }
  .showcase__item img { border-radius: 12px; }
  .showcase__caption { bottom: -13%; font-size: 0.8rem; padding: 8px 14px; }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(4, 44, 16, 0.8) 0%, rgba(4, 44, 16, 0.62) 55%, rgba(4, 44, 16, 0.78) 100%);
  }
  .hero__bg img { object-position: 30% center; }
  .hero__eyebrow { font-size: 0.72rem; letter-spacing: 0.06em; line-height: 1.4; padding-right: 0.9em; border-radius: 20px; }
  .hero .btn-row .btn { flex: 1 1 100%; }

  .page-hero { min-height: 340px; padding-block: 64px 96px; }
  .page-hero::before { background: linear-gradient(0deg, rgba(4, 44, 16, 0.88) 0%, rgba(4, 44, 16, 0.55) 100%); }

  .btn { min-height: 50px; }
  .btn-row .btn { flex: 1 1 auto; }

  /* Category cards become a swipeable row */
  .category-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 16px;
    scroll-padding-inline: var(--gutter);
  }
  .category-grid::-webkit-scrollbar { display: none; }
  .category-card { aspect-ratio: 3 / 4; scroll-snap-align: start; }
  .category-card:hover { transform: none; }

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

  .media-stack { padding-bottom: 36px; }
  .media-badge { left: 0; bottom: 4px; font-size: 0.8rem; }
  .media-badge .icon { width: 34px; height: 34px; padding: 7px; }

  .mosaic { gap: 10px; }

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

  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 10px; }
  .gallery__item--wide { grid-column: span 2; }
  .gallery__caption { opacity: 1; transform: none; font-size: 0.95rem; left: 14px; bottom: 10px; }
  .gallery__item::after { opacity: 1; }

  .glance div { grid-template-columns: 1fr; gap: 2px; }

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

  .form-foot .btn { width: 100%; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .footer-col--contact .footer-contact { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .cta-band { border-radius: 24px; }
  .cta-band .btn-row .btn { flex: 1 1 100%; }

  /* Product details modal becomes a bottom sheet */
  .modal {
    width: 100%;
    max-height: 92svh;
    margin: auto 0 0;
    border-radius: 24px 24px 0 0;
  }
  .modal__media { height: 40svh; }
  .modal__close { top: 12px; right: 12px; width: 42px; height: 42px; }
  .modal__nav { top: 12px; width: 42px; height: 42px; }
  .modal__nav--prev { left: 12px; }
  .modal__nav--next { left: 62px; }

  .lightbox .modal__nav--prev { left: 6px; }
  .lightbox .modal__nav--next { right: 6px; }
  .lightbox .modal__close { top: -56px; }
}

@media (max-width: 380px) {
  /* Very narrow phones: long button labels wrap instead of being cut off */
  .btn { white-space: normal; }
  .contact-cards { grid-template-columns: 1fr; }
}


/* Organic emphasis components */
@media (max-width: 1180px) {
  .principles--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .principles.principles--4 { grid-template-columns: repeat(2, 1fr); max-width: none; }
}
@media (max-width: 720px) {
  .organic-badge { top: 12px; right: 12px; padding: 4px 9px 4px 7px; font-size: 0.72rem; }
  .organic-badge .icon { width: 11px; height: 11px; }
  .organic-badge--inline { font-size: 0.7rem; }
}
@media (max-width: 560px) {
  .principles.principles--4 { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .media-duo__main { border-radius: 120px 120px var(--r-lg) var(--r-lg); }
  .media-duo__row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .wa-float { height: 54px; min-width: 54px; padding: 0 14px; }
  .wa-float .icon { width: 25px; height: 25px; }
}

/* Smallest phones (320px): one product per row */
@media (max-width: 340px) {
  .product-grid { grid-template-columns: 1fr; }
}