/* ==========================================================================
   CAFÉ TRÊS LOBOS — RESPONSIVIDADE
   Ajustes finos que não cabem nos componentes individuais.
   Breakpoints do projeto:
   mobile: até 599px | tablet: 600–1023px | notebook: 1024–1439px | desktop: 1440px+
   Mobile first: todo componente já nasce ajustado para mobile;
   este arquivo cobre exceções e refinamentos por faixa.
   ========================================================================== */

/* ---------- Mobile (até 599px) ---------- */
@media (max-width: 599px) {
  .ctl-container { padding-inline: 1.25rem; }

  h1 { font-size: var(--ctl-fs-2xl); }

  .ctl-footer__grid { text-align: center; }
  .ctl-footer__social { justify-content: center; }
  .ctl-testimonial { padding: var(--ctl-space-2); }

  /* Grids de card viram carrossel horizontal com scroll-snap em mobile */
  .ctl-scroll-mobile {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--ctl-space-2);
    padding-bottom: var(--ctl-space-1);
    -webkit-overflow-scrolling: touch;
  }

  .ctl-scroll-mobile::-webkit-scrollbar { display: none; }

  .ctl-scroll-mobile > * {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
}

/* ---------- Tablet (600–1023px) ---------- */
@media (min-width: 600px) and (max-width: 1023px) {
  .ctl-instagram-grid { grid-template-columns: repeat(3, 1fr); }
  .ctl-mega-menu__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Notebook (1024–1439px) ---------- */
@media (min-width: 1024px) and (max-width: 1439px) {
  .ctl-container { padding-inline: 3rem; }
}

/* ---------- Desktop grande (1440px+) ---------- */
@media (min-width: 1440px) {
  .ctl-container { padding-inline: 4rem; }
  .ctl-banner { min-height: 78vh; }
}

/* ---------- Telas muito largas (evita esticar demais o layout) ---------- */
@media (min-width: 1920px) {
  .ctl-container { max-width: 1440px; }
}

/* ---------- Orientação paisagem em mobile (evita hero cortado) ---------- */
@media (max-width: 900px) and (orientation: landscape) {
  .ctl-banner { min-height: 100vh; }
}

/* ---------- Telas de alta densidade — reforço leve de nitidez em bordas finas ---------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .ctl-border-hairline-crisp {
    border-width: 0.5px;
  }
}