/* ============================================================
   MARGARINE EXPORT PLATFORM — responsive.css
   Breakpoints: 480 / 768 / 1024 / 1280. No horizontal overflow,
   no broken nav, no overlapping elements at any width.
   ============================================================ */

/* ---------- ≤ 1280 ---------- */
@media (max-width: 1280px) {
  .dropdown--mega { width: min(600px, calc(100vw - 32px)); }
}

/* ---------- ≤ 1024 ---------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .region-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .industry-list { grid-template-columns: repeat(2, 1fr); }
  .trust-bar-inner { grid-template-columns: repeat(2, 1fr); }
  .quality-layout, .export-layout { grid-template-columns: 1fr; }
  .rfq-layout { grid-template-columns: 1fr; }
  .rfq-aside { position: static; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }

  /* Navigation collapses into drawer */
  .nav-toggle { display: flex; }
  .header-cta .btn { min-height: 44px; padding-inline: var(--s-4); }
  .header-inner { min-height: 76px; }
  .brand-logo { height: 56px; }

  .primary-nav {
    position: fixed;
    inset: 76px 0 0 0;
    z-index: 99;
    background: var(--surface);
    overflow-y: auto;
    padding: var(--s-5) var(--gutter) var(--s-8);
    transform: translateX(100%);
    transition: transform 220ms ease-out;
  }
  body.nav-open .primary-nav { transform: none; }
  body.nav-open { overflow: hidden; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--line); }
  .nav-link { width: 100%; justify-content: space-between; padding: var(--s-4) 0; font-size: var(--fs-md); }

  .dropdown, .dropdown--mega {
    position: static;
    width: 100%;
    min-width: 0;
    border: none;
    box-shadow: none;
    padding: 0 0 var(--s-3) var(--s-4);
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
  }
  .nav-item.is-open > .dropdown,
  .nav-item.is-open > .dropdown--mega { display: block; transform: none; }
  .mega-grid { grid-template-columns: 1fr; }

  .nav-item--cta { display: block; border-bottom: none; padding-top: var(--s-4); }
  .nav-item--cta .btn { width: 100%; justify-content: center; }

  .hero-inner { grid-template-columns: 1fr; padding-block: var(--s-8); }
  .hero-visual { min-height: 320px; }
}

/* ---------- ≤ 768 ---------- */
@media (max-width: 768px) {
  :root { --gutter: 18px; }
  .section { padding-block: var(--s-7); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .why-grid, .industry-list, .region-grid, .trust-bar-inner, .export-facts { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); }

  .hero-actions .btn { width: 100%; }
  .cta-actions { flex-direction: column; align-items: stretch; }

  /* Hero visual enters normal document flow on mobile (badge →
     Bulk Food-Fat Supply panel → 5 product rows). No overlap,
     no clipping, no overflow:hidden — the absolutely positioned
     desktop composition is simply switched to a stacked column. */
  .hero-visual { position: static; display: flex; flex-direction: column; gap: var(--s-4); min-height: 0; }
  .hero-panel { position: static; }
  .hero-panel--main { inset: auto; }
  .hero-panel--badge { inset: auto; align-self: flex-end; }

  /* Spec tables stack on small screens */
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td { display: block; }
  .spec-table thead { display: none; }
  .spec-table tr { border-bottom: 1px solid var(--line); padding: var(--s-3) 0; }
  .spec-table td { border: none; padding: var(--s-1) var(--s-2); }
  .spec-table td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-500);
  }
}

/* ---------- ≤ 480 ---------- */
@media (max-width: 480px) {
  .brand-sub { display: none; }
  /* Mobile logo enlarged from 44px to 54px — full lockup kept,
     aspect ratio preserved via object-fit: contain (no crop). */
  .brand-logo { height: 54px; }
  .header-inner { min-height: 72px; }
  .primary-nav { inset: 72px 0 0 0; }
  .header-cta { display: none; } /* CTA remains reachable in drawer + page sections */
  .hero-panel-list li { flex-direction: column; gap: 2px; }
  /* WhatsApp float stays clear of full-width CTAs on phones */
  .whatsapp-float { right: var(--s-4); width: 52px; height: 52px; bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); }
}