/**
 * Responsividade — Modo Cliente (FRONT-002)
 * Breakpoint oficial de troca de navegação: 1024px (documentado em
 * tokens.css). Mobile é a referência principal (320-430px); acima de
 * 1024px o conteúdo é centralizado com largura máxima, nunca esticando
 * cards para a largura total, preservando a mesma hierarquia de navegação.
 */

html, body {
  overflow-x: hidden;
}

.cliente-pagina {
  overflow-x: hidden;
}

/* Abaixo de 1024px: navegação mobile (bottom nav), sem barra desktop. */
@media (max-width: 1023.98px) {
  .cliente-nav-desktop {
    display: none !important;
  }
}

/*
 * A partir de 1024px: navegação desktop (barra superior) substitui a bottom
 * nav; o MESMO conteúdo (.cliente-header + .cliente-conteudo) só reflui —
 * nunca duplicamos markup por breakpoint. Cabeçalho vira uma faixa de
 * título (sem "position: sticky", já que a barra superior assume esse
 * papel) e o conteúdo ganha largura máxima centralizada, nunca esticando
 * cards para a largura total da tela.
 */
@media (min-width: 1024px) {
  .cliente-nav-mobile {
    display: none !important;
  }

  .cliente-nav-desktop {
    display: flex;
  }

  .cliente-header {
    position: static;
    max-width: var(--cliente-largura-conteudo-desktop);
    margin: 0 auto;
    width: 100%;
    padding: var(--cliente-space-6) var(--cliente-space-7) 0;
  }

  .cliente-conteudo {
    max-width: var(--cliente-largura-conteudo-desktop);
    margin: 0 auto;
    padding: var(--cliente-space-4) var(--cliente-space-7) 60px;
  }

  .cliente-toasts {
    bottom: var(--cliente-space-6);
  }
}

/* Duas colunas só a partir daqui — espaço real garantido; abaixo disso
   (mobile e tablet) .cliente-colunas fica em 1 coluna (padrão em layout.css). */
@media (min-width: 1240px) {
  .cliente-colunas {
    grid-template-columns: 1.6fr 1fr;
  }
}

/* Overlay "auto": bottom sheet em mobile, modal centralizado em desktop —
   mesmo conteúdo, comportamento de apresentação adaptado ao tamanho de tela. */
@media (min-width: 768px) {
  .cliente-overlay--auto {
    align-items: center;
    justify-content: center;
    padding: var(--cliente-space-4);
  }

  .cliente-overlay--auto .cliente-sheet {
    max-width: 420px;
    border-radius: var(--cliente-raio-modal);
  }

  .cliente-overlay--auto .cliente-sheet__alca {
    display: none;
  }
}

/* Telas muito estreitas (320px) — reduz margens laterais para não apertar
   demais o conteúdo. */
@media (max-width: 359.98px) {
  .cliente-conteudo,
  .cliente-header,
  .cliente-status-bar {
    padding-left: var(--cliente-space-4);
    padding-right: var(--cliente-space-4);
  }

  .cliente-u-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet (768-1023px): mesma navegação mobile, mas com um pouco mais de
   respiro lateral e grids de 2 colunas onde a versão mobile usava 1. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .cliente-conteudo {
    max-width: 600px;
    margin: 0 auto;
  }
}

/* PORTAL-002 — grid de cards: 2 colunas a partir do tablet (768px), 3 no
   desktop quando o modificador --3-desktop estiver presente (1240px,
   mesmo breakpoint de .cliente-colunas — nenhum breakpoint novo). */
@media (min-width: 768px) {
  .cliente-grid-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1240px) {
  .cliente-grid-cards--3-desktop {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ESC-001 — card da Escolinha na Home: mesmo grid, um card a mais. */
  .cliente-grid-cards--4-desktop {
    grid-template-columns: repeat(4, 1fr);
  }
}