/* ═══════════════════════════════════════════════════════════
   ALEX MOTORS — SISTEMA RESPONSIVO UNIFICADO
   ───────────────────────────────────────────────────────────
   Filosofia mobile-first:
   - Tokens fluidos via clamp() em todas as escalas
   - Breakpoints consistentes em TODO o projeto
   - Safe-area do iOS respeitada
   - Touch targets ≥ 44px (Apple HIG / Material)
   - Sem horizontal scroll em qualquer device
   ═══════════════════════════════════════════════════════════ */

/* ─────────── BREAKPOINTS (tokens documentados) ───────────
   mobile-sm:  ≤ 360px  (iPhone SE / dispositivos antigos)
   mobile:     ≤ 480px  (smartphones em portrait)
   tablet:     ≤ 768px  (tablets em portrait / phones em landscape)
   desktop-sm: ≤ 1024px (tablets em landscape / notebooks pequenos)
   desktop:    ≤ 1280px (notebooks padrão)
   desktop-lg: > 1280px (monitores)
*/

:root {
  --bp-mobile-sm: 360px;
  --bp-mobile:    480px;
  --bp-tablet:    768px;
  --bp-desktop-sm: 1024px;
  --bp-desktop:   1280px;

  /* Container fluido: padding sempre proporcional + safe-area no iOS */
  --container-px: clamp(1rem, 4vw, 5rem);
  --container-px-safe: calc(var(--container-px) + env(safe-area-inset-left, 0));
}

/* ─────────── BASE: sem horizontal overflow em LUGAR NENHUM ─────────── */
html, body {
  overflow-x: clip;        /* clip > hidden — previne scroll lateral sem afetar sticky */
  max-width: 100%;
}

/* ─────────── CONTAINER PADRÃO ─────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* ─────────── TIPOGRAFIA FLUIDA UNIVERSAL ───────────
   Todos os tamanhos escalam suavemente entre mobile e desktop.
   Sem media queries — o clamp() faz tudo. */
:root {
  --fs-xs:    clamp(0.7rem,   0.65rem + 0.25vw, 0.75rem);
  --fs-sm:    clamp(0.78rem,  0.74rem + 0.2vw,  0.8125rem);
  --fs-base:  clamp(0.95rem,  0.92rem + 0.15vw, 1rem);
  --fs-lg:    clamp(1.05rem,  1rem + 0.25vw,    1.125rem);
  --fs-xl:    clamp(1.15rem,  1.1rem + 0.3vw,   1.25rem);
  --fs-2xl:   clamp(1.3rem,   1.2rem + 0.6vw,   1.5rem);
  --fs-3xl:   clamp(1.55rem,  1.4rem + 0.8vw,   1.875rem);
  --fs-4xl:   clamp(1.85rem,  1.6rem + 1.2vw,   2.25rem);
  --fs-5xl:   clamp(2.25rem,  1.9rem + 1.8vw,   3rem);
  --fs-6xl:   clamp(2.75rem,  2.2rem + 2.5vw,   3.75rem);
  --fs-7xl:   clamp(3rem,     2.4rem + 3vw,     4.5rem);

  /* Spacing fluido (apenas tamanhos grandes — pequenos ficam fixos) */
  --space-12: clamp(2rem,   1.5rem + 2vw,   3rem);
  --space-16: clamp(2.5rem, 2rem + 2.5vw,   4rem);
  --space-20: clamp(3rem,   2.5rem + 2.5vw, 5rem);
  --space-24: clamp(3.5rem, 3rem + 2.5vw,   6rem);

  /* Padding de seção também fluido */
  --section-padding-y: clamp(3rem, 8vw, 8rem);
  --section-padding-x: var(--container-px);
}

/* ─────────── TOUCH TARGETS — mínimo 44×44 (HIG / Material) ─────────── */
button,
a.btn,
.btn,
.navbar__link,
.filter-chip,
.mode-toggle__btn,
input[type="button"],
input[type="submit"],
input[type="checkbox"],
input[type="radio"],
select,
[role="button"] {
  min-height: 44px;
  min-width: 44px;
}

/* Exceções controladas — elementos pequenos que NÃO devem ser 44×44:
   - Links inline em parágrafos (não são CTAs)
   - Dots de paginação/galeria (visual decorativo, alvo expandido via padding)
   - Color dots dos product cards */
p a,
.product-card__color,
.product-card__color-more,
.modal-gallery__dot,
.hero-logo__feather,
.cookie-banner__link,
.section__desc a {
  min-height: unset;
  min-width: unset;
}

/* ─────────── IMAGENS RESPONSIVAS POR PADRÃO ─────────── */
img,
video,
picture,
iframe {
  max-width: 100%;
  height: auto;
}

/* ─────────── MOBILE QUERIES — ajustes finos ─────────── */

/* Mobile (até 480px) */
@media (max-width: 480px) {
  :root {
    --section-padding-y: clamp(2.5rem, 10vw, 4rem);
  }

  /* Cards de seção ocupam 100% width */
  .destaques__grid,
  .voice-grid {
    grid-template-columns: 1fr !important;
  }

  /* Mode toggle quebra linha se necessário */
  .mode-toggle {
    flex-wrap: wrap;
  }

  /* Modal de produto: 1 coluna full width */
  .product-modal__body {
    grid-template-columns: 1fr !important;
    padding: var(--space-4) !important;
    gap: var(--space-4) !important;
  }
  .product-modal__media {
    position: static !important;
    max-height: 60vh !important;
  }

  /* Atacado banner: stack vertical */
  .atacado-banner__layout {
    grid-template-columns: 1fr !important;
  }
  .atacado-banner__stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Lifestyle mosaic vira coluna única */
  .lifestyle__mosaic {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
  .lifestyle__tile--large,
  .lifestyle__tile--tall {
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 4 / 3 !important;
  }
}

/* Mobile pequeno (até 360px) */
@media (max-width: 360px) {
  :root {
    --container-px: 0.875rem;
  }

  /* Navbar wordmark ainda menor */
  .navbar__wordmark {
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
  }
  .navbar__logo { width: 30px !important; }
}

/* Tablet (481-768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .destaques__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .lifestyle__mosaic {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ─────────── LANDSCAPE MOBILE ─────────── */
@media (max-width: 900px) and (orientation: landscape) {
  /* Hero em landscape: KPIs ficam horizontais */
  .hero-institutional__kpis {
    flex-direction: row !important;
    gap: var(--space-3) !important;
  }
  /* Intro loader em landscape: reduzir altura do título */
  .intro-loader__title {
    font-size: clamp(2rem, 8vw, 4rem) !important;
  }
}

/* ─────────── PRINT (preserva legibilidade) ─────────── */
@media print {
  .navbar,
  .intro-loader,
  .toast,
  .product-modal { display: none !important; }
  body { background: white; color: black; }
}