/* Fase 8 — Performance + UX */
:root{
  --guia-touch-target:48px;
  --guia-mobile-gutter:16px;
}

html{scroll-padding-top:76px}
img,video,iframe{max-width:100%}
img{height:auto}
iframe{border:0}

/* Estabilidade de mídia e embeds. */
.guia-picture{display:block;max-width:100%}
.guia-picture>img{display:block;width:100%;height:auto}
.empresa-cover,.hero-media,.card-media,.ggp-v25-card-image{overflow:hidden}

/* Áreas de toque: aplica apenas a controles, sem inflar links de texto corrido. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
select,
.mobile-menu-toggle,
.pagination a,
.pagination span,
.nav-links a,
.guia-filter,
.filter-btn,
.chip-button{
  min-height:var(--guia-touch-target);
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.mobile-menu-toggle{
  min-width:var(--guia-touch-target);
}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid rgba(10,94,217,.34);
  outline-offset:3px;
}

/* Evita zoom involuntário em iOS e melhora leitura. */
@media (max-width:767px){
  input,select,textarea{font-size:16px}
  .site-header .container,
  .site-footer .container,
  .footer-container{
    padding-left:max(var(--guia-mobile-gutter),env(safe-area-inset-left));
    padding-right:max(var(--guia-mobile-gutter),env(safe-area-inset-right));
  }
}

/* Respeita preferências do sistema e reduz custo de animações. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* Reserva geométrica correta para <picture> e evita CLS/seleção de imagem pelo tamanho intrínseco. */
.guia-picture{display:block;max-width:100%}
.guia-event-media>.guia-picture{width:100%;height:100%}
.guia-event-media>.guia-picture>img{display:block;width:100%;height:100%;object-fit:cover}