/* ============================================================
   responsive.css — TODOS os breakpoints do projeto
   ------------------------------------------------------------
   Os outros arquivos são mobile-first: valem para celular.
   Aqui só existe min-width, ou seja, tudo é melhoria para telas
   maiores. Nunca há regra de celular neste arquivo.

   Ter um arquivo só de breakpoints é uma escolha: você audita
   o comportamento em todas as larguras num lugar, em vez de
   procurar media query espalhada por quatro arquivos.

   Escada usada:
     560px   celular grande / dois cartões confortáveis
     760px   tablet em pé
     1024px  tablet deitado e notebook
     1280px  telas largas

   Fora da escada:
     altura baixa em paisagem (celular deitado)
     dispositivos sem hover (não gastar efeito de mouse)
     modo de alto contraste e movimento reduzido
     impressão
   ============================================================ */

/* ============================================================
   560px — o primeiro respiro
   ============================================================ */
@media (min-width: 560px){
  :root{ --gutter:20px }

  /* a partir daqui cabe tudo numa linha só, com a navegação à direita */
  .top-in{ flex-direction:row; align-items:center; gap:16px; min-height:64px; padding-block:0 }
  .logo{ font-size:22px; justify-content:flex-start }
  .top-nav{ margin-left:auto; margin-top:0; justify-content:flex-end }
  /* daqui para cima cabe o texto completo dos itens do menu */
  .hide-xs{ display:inline }
  .logo-mark{ width:30px; height:30px }
  .top-nav{ gap:5px }
  .top-nav button{ padding:9px 13px; font-size:13.5px }

  .hero{ padding:44px 0 36px }
  .hero-sub{ margin-top:18px }
  .counter{ margin-top:26px }

  /* as duas portas lado a lado */
  .choice{ grid-template-columns:1fr 1fr; gap:16px; margin-top:32px }
  .choice-btn{ padding:24px 22px 22px; min-height:172px }
  .choice-btn .k{ padding-right:52px }

  .sect{ padding:40px 0 }
  .sect-head p{ font-size:14.5px }

  .grid{ gap:16px; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)) }
  .flyer-name{ font-size:22px }
  .flyer-photo .initial{ font-size:58px }

  .partners{ grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) }

  /* barra de localização em uma linha */
  .locbar{
    flex-direction:row; align-items:center;
    border-radius:999px; padding:8px 8px 8px 18px;
  }
  .locbar-t{ flex:1; min-width:0 }
  .locbar .btn{ flex:none }

  .sheet-body{ padding:20px }
  .sheet-head{ padding:16px 20px }
  .sheet-foot{ padding:16px 20px calc(16px + var(--safe-b)) }
  .steps{ padding:16px 20px 0 }
}

/* ============================================================
   760px — tablet em pé: a folha vira janela
   ============================================================ */
@media (min-width: 760px){
  .sect-head{
    display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
    margin-bottom:24px;
  }
  .sect-head p{ margin:0 }
  .toggle{ margin:0 0 0 auto; flex-wrap:nowrap }

  .grid{ grid-template-columns:repeat(auto-fill,minmax(206px,1fr)); gap:18px }

  .foot-in{ flex-direction:row; justify-content:space-between; align-items:flex-start; gap:28px }
  .foot nav{ gap:8px }

  /* modal centralizado, com sombra de brinquedo */
  .modal-bg{ background:rgba(62,51,88,.55) }
  .sheet{
    inset:50% auto auto 50%;
    transform:translate(-50%,-50%);
    width:min(640px, calc(100vw - 48px));
    max-height:min(88dvh, 900px);
    border:3px solid var(--ink);
    border-radius:24px;
    box-shadow:0 10px 0 rgba(62,51,88,.2);
    animation:sheet-pop .2s cubic-bezier(.2,.9,.3,1.3);
  }
  /* sem folha vindo de baixo, a alça não faz sentido */
  .sheet::before{ display:none }
  @keyframes sheet-pop{
    from{ transform:translate(-50%,-46%) scale(.96); opacity:0 }
  }

  /* cartaz com a coluna de compartilhamento ao lado */
  .poster-stage{ grid-template-columns:minmax(0,1fr) 232px; gap:18px }

  .detail{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px }
  .detail .flyer-name{ font-size:34px }
  .detail-photo .initial{ font-size:96px }

  .geo span{ flex:1 1 auto }
}

/* ============================================================
   1024px — mapa e lista lado a lado
   ============================================================ */
@media (min-width: 1024px){
  .hero{ padding:56px 0 44px }
  .sect{ padding:46px 0 }

  .maparea{
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:20px; align-items:start;
  }
  /* com as duas colunas emparelhadas, a lista rola por dentro
     para acompanhar a altura do mapa em vez de esticar a página */
  .nearlist{ max-height:540px; overflow-y:auto; padding-right:4px }

  .grid{ grid-template-columns:repeat(auto-fill,minmax(214px,1fr)) }

  .mapbtn{ top:12px; right:12px; padding:9px 15px }

  .sheet{ width:min(660px, calc(100vw - 64px)) }
}

/* ============================================================
   1280px — telas largas
   ============================================================ */
@media (min-width: 1280px){
  :root{ --gutter:24px }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(224px,1fr)); gap:20px }
  .nearlist{ max-height:600px }
}

/* ============================================================
   Celular deitado: sobra largura e falta altura
   ============================================================ */
@media (max-height: 560px) and (orientation: landscape){
  .hero{ padding:22px 0 18px }
  .choice-btn{ min-height:0; padding:16px 16px 14px }
  .choice-btn .d{ padding-top:6px }

  /* o mapa quadrado ocuparia a tela inteira; achata */
  .radar,.realmap{ aspect-ratio:16/9 }

  .sheet{
    inset:0; transform:none;
    width:100%; max-width:none; max-height:100dvh;
    border-radius:0; border:0; border-left:0;
    animation:none;
  }
  .sheet::before{ display:none }
  .poster-stage{ grid-template-columns:minmax(0,1fr) 220px }
}

/* ============================================================
   Sem hover (dedo): efeito de mouse só atrapalha
   ============================================================ */
@media (hover: none){
  .btn:hover,
  .flyer:hover,
  .choice-btn:hover,
  .partner:hover,
  .near:hover,
  .pin:hover,
  .mapbtn:hover,
  .chips button:hover{
    transform:none;
  }
  .drop:hover{ border-color:var(--ink-45); background:var(--card) }
  /* alvo de toque um pouco maior no dedo */
  .toggle button,.chips button{ padding-block:11px }
}

/* ============================================================
   Preferências do sistema
   ============================================================ */
@media (prefers-contrast: more){
  :root{
    --ink-70:rgba(62,51,88,.9);
    --ink-45:rgba(62,51,88,.7);
    --ink-14:rgba(62,51,88,.35);
  }
  body{ background-image:none }
}

/* ============================================================
   Impressão — a página do site, não o cartaz.
   O cartaz tem janela de impressão própria em js/poster.js.
   ============================================================ */
@media print{
  body{ background:#fff }
  .top,.foot,.toast,.modal,.choice,.toggle,.locbar,.mapbtn,.adslot{ display:none !important }
  .sect{ padding:12px 0; border:0 }
  .flyer,.near,.partner{ box-shadow:none; break-inside:avoid }
  .grid{ grid-template-columns:repeat(3,1fr) }
}