/* ==========================================================================
   responsive.css — Breakpoints: UltraWide, Desktop, Laptop, Tablet, Mobile
   Mobile-first overrides layered on top of the desktop-default components.
   ========================================================================== */

/* ---- UltraWide (>1920px): cap content, breathe more ---- */
@media (min-width: 1921px) {
  :root { --container-max: 1440px; }
  .hero__visual { aspect-ratio: 16 / 10; }
}

/* ---- Laptop (≤1180px) ---- */
@media (max-width: 1180px) {
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-grid { grid-template-columns: repeat(4, 1fr); }
  .hero__badges { grid-template-columns: repeat(2, auto); row-gap: var(--sp-5); }
}

/* ---- Tablet (≤980px) ---- */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .navbar.is-menu-open .nav-links {
    display: flex;
    position: fixed;
    inset: 0;
    top: 72px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--c-black-soft);
    padding: var(--sp-6) var(--container-pad);
    border-top: 1px solid var(--c-line);
  }
  .navbar.is-menu-open .nav-links a { padding-block: var(--sp-4); width: 100%; border-bottom: 1px solid var(--c-line); }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: -1; aspect-ratio: 16/10; }
  .hero { padding-top: var(--sp-8); padding-bottom: var(--sp-8); min-height: auto; }

  .duo { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(2, 1fr); }
  .why { grid-template-columns: 1fr; }
  .why__collage { order: -1; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .testi-track { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; row-gap: var(--sp-7); }
  .brand-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Mobile (≤640px) ---- */
@media (max-width: 640px) {
  :root { --sp-9: 4rem; --sp-10: 5rem; }

  .navbar__phone { display: none !important; }
  .brand__name { display: none; }

  .hero__badges { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; }

  .marquee-strip__head { flex-direction: column; align-items: flex-start; }
  .brand-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }

  .service-grid { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; }

  .duo__panel { padding: var(--sp-6) var(--sp-5); }
  .duo__list { grid-template-columns: 1fr; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery-grid .gitem:nth-child(3n+1) { grid-row: span 1; }

  .why__collage { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 110px); }
  .why__collage .collage-item:first-child { grid-column: span 2; grid-row: span 1; }

  .testi-track { grid-template-columns: 1fr; }

  .cta-banner__inner { flex-direction: column; align-items: stretch; text-align: center; }
  .cta-banner__msg { flex-direction: column; text-align: center; }
  .cta-banner .btn { width: 100%; }

  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .whatsapp-float .whatsapp-float__text { display: none; }
  .whatsapp-float:hover .whatsapp-float__text { max-width: 0; }

  .lightbox__prev, .lightbox__next { width: 38px; height: 38px; }
  .lightbox__close { top: var(--sp-4); right: var(--sp-4); }
  .lightbox__prev { left: var(--sp-3); }
  .lightbox__next { right: var(--sp-3); }
}

/* ---- Small mobile (≤380px) ---- */
@media (max-width: 380px) {
  .hero__badges { grid-template-columns: 1fr; }
  .brand-grid { grid-template-columns: 1fr 1fr; }
}