/* ============================================================
   TRANSAGRO 540 — responsive.css
   Mobile-first nos componentes já cobre a base; aqui entram os
   ajustes progressivos para telas maiores.
   Breakpoints testados: 320 / 375 / 390 / 414 / 768 / 1024 / 1280 / 1440 / 1920
   ============================================================ */

/* Nunca permitir rolagem horizontal, em nenhuma largura */
html, body { max-width: 100%; overflow-x: hidden; }

/* ---------- ≥ 560px : telas pequenas grandes / phablets ---------- */
@media (min-width: 560px) {
  .stat-row { grid-template-columns: repeat(4, 1fr); }
  .cta-actions { flex-wrap: nowrap; }
}

/* ---------- ≥ 700px : tablets em pé ---------- */
@media (min-width: 700px) {
  .highlights { grid-template-columns: repeat(2, 1fr); }
  .experience-grid { grid-template-columns: repeat(3, 1fr); }
  .form-row { grid-template-columns: 1fr 1fr; }
}

/* ---------- ≥ 768px : navegação desktop assume ---------- */
@media (min-width: 768px) {
  .main-nav { display: block; }
  .menu-toggle, .mobile-nav { display: none; }
  .nav-cta { display: inline-flex; }

  .about-grid { grid-template-columns: 1.1fr 0.9fr; }
  .fleet-layout { grid-template-columns: 0.9fr 1.1fr; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- ≥ 960px : diferenciais em 4 colunas ---------- */
@media (min-width: 960px) {
  .highlights { grid-template-columns: repeat(4, 1fr); }
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- ≥ 1024px : notebooks ---------- */
@media (min-width: 1024px) {
  .hero-content { padding-top: 10rem; }
  .footer-grid { grid-template-columns: 1.3fr 0.8fr 1fr 1fr; }
}

/* ---------- ≥ 1280px : desktops ---------- */
@media (min-width: 1280px) {
  .lightbox-prev { left: -4.5rem; }
  .lightbox-next { right: -4.5rem; }
}

/* ---------- ≤ 767px : ajustes finos de celular ---------- */
@media (max-width: 767px) {
  .lightbox-prev { left: 0.4rem; top: auto; bottom: -3.4rem; transform: none; }
  .lightbox-next { right: 0.4rem; top: auto; bottom: -3.4rem; transform: none; }
  .lightbox-close { top: -3.4rem; }
  .lightbox-figure { max-height: 82vh; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .cta-actions .btn { width: 100%; justify-content: center; }
}

/* ---------- ≤ 380px : telas muito pequenas (iPhone SE etc.) ---------- */
@media (max-width: 380px) {
  .brand-text { font-size: 1rem; }
  .brand img { height: 34px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .stat-row { grid-template-columns: 1fr 1fr; }
}

/* ---------- Telas muito grandes (≥ 1600px) ---------- */
@media (min-width: 1600px) {
  :root { --max-w: 1360px; }
}