/* ═══════════════════════════════════════════════════════════════
   sondar-layout.css — respiro e layout do Sondar no mobile

   Arquivo ADITIVO, no mesmo padrão do sondar-promo.css e do
   sondar-motion.css: não toca em styles.css nem em styles.src.css.
   Carregado depois deles no index.html, então vence pela cascata.
   Reverter é remover a tag do index.html.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* O respiro lateral do celular era 12px — o conteúdo encostava na
       tela. O tablet já usava 20px; 18px aproxima os dois sem comer
       largura demais numa tela de 375px. */
    --lay-respiro: 18px;
}

/* ═══ 1. Respiro nas bordas ═════════════════════════════════════ */

/* O banner era o único bloco sem recuo nesta faixa: .section,
   .breadcrumbs e .seo-h1 ganham 20px em até 1200px, e ele só recebia
   algo em até 900px. Entre 901px e 1128px ficava colado nas duas
   bordas enquanto todo o resto da página respirava. */
@media (max-width: 1200px) {
    .hero-banner {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ═══ 1b. Colunas no monitor intermediário ══════════════════════ */

/* Nesta faixa o grid ficava travado em duas colunas de 360px fixos e
   centralizadas, sobrando uns 280px de tela vazia dos dois lados.
   Com auto-fit o número de colunas passa a sair da largura que existe:
   cabem três por volta de 1000px, duas abaixo disso.

   O teto da coluna precisa ser 1fr, e não 360px: quando o máximo do
   minmax é um valor fixo, o auto-fit conta quantas colunas cabem
   usando esse máximo, e três de 360px nunca cabiam aqui. Com 1fr a
   conta passa a usar o mínimo de 300px. O tamanho do card volta a ser
   limitado pelo max-width abaixo, que o segura nos 360px originais.

   O limite inferior de 769px é obrigatório: em até 768px o CSS base
   passa para coluna única, e sem ele esta regra venceria pela ordem
   de carregamento e devolveria o grid ao celular. */
@media (min-width: 769px) and (max-width: 1200px) {
    .eventos-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        justify-items: center;
    }

    .evento-card,
    .skeleton-card {
        width: 100%;
        max-width: 360px;
    }
}

@media (max-width: 480px) {

    .breadcrumbs,
    .seo-h1,
    .hero-banner,
    .active-filters,
    .section {
        padding-left: var(--lay-respiro);
        padding-right: var(--lay-respiro);
    }

    /* O topo também estava grudado: 10px acima do logo. */
    .header-container {
        padding: 15px var(--lay-respiro);
    }
}

/* ═══ 2. Linha de filtros ═══════════════════════════════════════ */

/* A barra é filha direta do .main-content, que centraliza os filhos
   (align-items: center). Sem largura declarada ela encolhia até o
   tamanho do conteúdo e sobrava tela dos dois lados. */
@media (max-width: 480px) {
    .compact-filters {
        width: 100%;
        box-sizing: border-box;
        padding: 0 var(--lay-respiro);
    }

    /* Os dois botões dividem a linha em vez de ficarem no meio.
       Continuam lado a lado — só passam a ocupar o que sobrava. */
    .compact-filters>.compact-location,
    .compact-filters>.compact-filtros-btn {
        flex: 1 1 0;
        justify-content: center;
    }
}

/* ═══ 3. Faixa de lojas do topo ═════════════════════════════════ */

/* A faixa "Baixe o app" do topo deu lugar à barra inferior, que vive
   em /assets/appbar.css e é compartilhada com a /fds/.

   O corte é 900px, e não 480px: é a partir dali que o styles.css tira
   os botões de loja do header e põe a faixa no topo. Com 480px, a
   faixa voltava entre 481 e 900px — celular deitado, celular grande com
   a fonte do sistema reduzida, dobrável aberto, tablet em pé. */
@media (max-width: 900px) {
    .header-stores-row {
        display: none;
    }
}

/* ═══ 4. Header ═════════════════════════════════════════════════ */

/* O header é sticky e carregava uma sombra fixa, visível o tempo todo
   como um risco cinza entre ele e o conteúdo, mesmo com a página no
   topo. O fundo branco já se separa do cinza da página sozinho. */
.header {
    box-shadow: none;
}

/* O header é fixo no topo. Sem folga de rolagem, o Tab de trás para a
   frente parava o foco escondido atrás dele. A altura muda com a tela
   (80px no desktop, até 127px quando a busca desce para a segunda
   linha), então a folga acompanha, com 12px de respiro. */
html {
    scroll-padding-top: 92px;
}

@media (max-width: 900px) {
    html {
        scroll-padding-top: 139px;
    }
}