/* ============================================================
   JABAL AGRO LIMITED — responsive.css
   Breakpoints: 1100px / 900px / 640px (+ large screens)
   ============================================================ */

/* ---------- Large desktops ---------- */
@media (min-width: 1500px) {
  :root { --container: 1280px; }
  body { font-size: 17px; }
}

/* ---------- Laptop / small desktop ---------- */
@media (max-width: 1100px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-card { min-height: 300px; }
  .cat-grid .cat-card:nth-child(4),
  .cat-grid .cat-card:nth-child(5) { grid-column: span 1; }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .value-grid { grid-template-columns: repeat(3, 1fr); }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .perk-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .intro__grid, .split, .pd-grid, .network-layout,
  .contact-grid, .net-preview, .cta-band { grid-template-columns: 1fr; }
  .cta-band__action { text-align: left; }
  .net-preview__map { border-left: none; border-top: 1px solid rgba(255,255,255,0.1); }
  .pd-media { position: static; }
  .pd-media img { height: 340px; }
  .news-featured { grid-template-columns: 1fr; }
  .news-featured img { min-height: 260px; max-height: 320px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
}

/* ---------- Tablet / mobile nav switch ---------- */
@media (max-width: 900px) {
  .header__cta { display: none; }
  .nav-toggle { display: flex; }
  .header__inner { gap: 0.7rem; }

  /* Mobile drawer */
  .main-nav {
    position: fixed; top: 0; right: 0; height: 100dvh; width: min(86vw, 350px);
    background: #fff; z-index: 115; display: block; overflow-y: auto;
    padding: 1rem 1.1rem 2rem; transform: translateX(105%);
    transition: transform 0.3s ease; box-shadow: -20px 0 60px rgba(0,0,0,0.2);
  }
  .main-nav.open { transform: none; }
  .main-nav > ul { flex-direction: column; align-items: stretch; height: auto; gap: 0.1rem; }
  .main-nav > ul > li { display: block; }
  .nav-link { padding: 0.85rem 0.8rem; border-radius: 10px; font-size: 1rem; width: 100%; justify-content: space-between; }
  .nav-link:hover { background: var(--offwhite); }
  .nav-link::after { display: none; }
  .nav-link.active { background: var(--dark); color: #fff; }
  .drawer-cta { display: flex; margin-top: 1rem; }
  .drawer-cta .btn { flex: 1; }

  /* Mega becomes accordion */
  .has-mega { flex-direction: column; align-items: stretch !important; }
  .mega { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-radius: 10px; background: var(--offwhite); margin: 0.2rem 0 0.4rem; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0; }
  .has-mega.open .mega { max-height: 1800px; }
  .mega__inner, .mega__inner.mega--rich { grid-template-columns: 1fr; gap: 0.7rem; padding: 0.9rem; }
  .mega__intro { padding: 0.2rem 0.2rem 0.6rem; }

  .search-panel { padding: 1.8rem 1.2rem 1.3rem; }
  .search-panel form { flex-direction: column; }
  .search-panel form .btn { width: 100%; }

  .section { padding: 3.5rem 0; }
  .sec-head { margin-bottom: 1.8rem; }
  .trust__inner { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .job-card { grid-template-columns: 1fr; }
  .intro__media img.main { height: 360px; }
  .split img.rounded { height: 320px; }
  .commit-band { grid-template-columns: 1fr; padding: 2rem 1.5rem; }

  /* Catalogue: sidebar -> dropdown */
  .catalog { grid-template-columns: 1fr; }
  .catalog__side { display: none; }
  .mobile-cat-select { display: block; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  body { font-size: 15px; -webkit-tap-highlight-color: transparent; }
  .container { width: min(100% - 2rem, var(--container)); }
  /* Prevent iOS auto-zoom on form fields */
  input, select, textarea { font-size: 16px !important; }
  .brand__logo { height: 44px; }
  .section { padding: 3rem 0; }
  .hero { min-height: auto; padding: 3.5rem 0; }
  .hero__stats { gap: 1.2rem; }
  .cat-grid { grid-template-columns: 1fr; }
  .cat-card { min-height: 240px; }
  .feat-grid { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; }
  .catalog-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .perk-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .g-item img { height: 230px; }
  .trust__inner { grid-template-columns: 1fr; padding: 1.6rem 0; }
  .stat-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form-card, .contact-info { padding: 1.5rem 1.2rem; }
  .net-preview__content { padding: 2rem 1.5rem; }
  .net-stat strong { font-size: 2.5rem; }
  .cta-band { padding: 2.2rem 1.5rem; border-radius: 18px; }
  .footer__top { grid-template-columns: 1fr; gap: 1.8rem; padding: 2.5rem 0 1.5rem; }
  .page-hero { padding: 3rem 0 2.4rem; }
  .intro__media img.main { height: 300px; border-radius: 4px 48px 4px 48px; }
  .intro__media img.small { right: 0.5rem; height: 140px; }
  .intro__badge { left: 0.5rem; }
  .hero__buttons .btn { flex: 1; justify-content: center; }
  .hero__brand { letter-spacing: 0.18em; }
  .pd-media img { height: 260px; }
  .commit-band { padding: 1.6rem 1.2rem; }
  .back-to-top { right: 0.9rem; bottom: 0.9rem; }
  .footer__bottom-inner { justify-content: center; text-align: center; }
  /* Mobile polish */
  .mega-card__photo { height: 92px; }
  .mega__intro h3 { font-size: 1.15rem; }
  .spec-table { font-size: 0.86rem; }
  .spec-table th, .spec-table td { padding: 0.6rem 0.65rem; }
  .lightbox img { max-height: 62vh; }
  .lightbox figcaption { font-size: 0.84rem; padding: 0 0.5rem; }
  .lb-btn { width: 40px; height: 40px; }
  .product-card__img { height: 170px; }
  .news-card img { height: 170px; }
  .crumbs { flex-wrap: wrap; }
  .page-hero p { font-size: 0.98rem; }
  .main-nav { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
}