/* ==========================================================================
   responsive.css — ajustes de responsividade compartilhados pelas 4 páginas
   (index, loja, login e blog Wolverine). Carregado por último para
   refinar as regras de cada página sem quebrá-las.
   Breakpoints: <576 celular, 576–767 celular grande, 768–991 tablet,
   >=992 notebook/PC.
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

img,
video,
iframe,
svg {
  max-width: 100%;
}

p,
li,
h1,
h2,
h3,
h4,
a {
  overflow-wrap: anywhere;
}

/* Cabeçalho */
.meu-cabecalho {
  padding-left: max(22px, env(safe-area-inset-left));
  padding-right: max(22px, env(safe-area-inset-right));
}

.barra-navegacao .link-header,
#nav-conta .link-header {
  display: inline-block;
  min-height: 40px;
  line-height: 1.6;
  white-space: nowrap;
}

/* Botões e campos com área de toque confortável */
.form-comentario button,
.btn-login-principal,
.btn-social,
.login-aba {
  min-height: 44px;
}

.form-comentario input,
.form-comentario textarea,
.login-formulario input {
  font-size: 16px; /* evita o zoom automático do iOS ao focar */
}

/* Tabelas/código largos rolam dentro do próprio bloco */
table,
pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* Celulares */
@media (max-width: 575.98px) {
  .meu-cabecalho {
    padding: 14px 14px;
    flex-direction: column;
    align-items: flex-start !important;
  }

  .barra-navegacao {
    width: 100%;
    gap: 0.4rem !important;
  }

  .barra-navegacao .link-header,
  #nav-conta .link-header {
    font-size: 0.85rem;
    padding: 0.3rem 0.7rem;
  }

  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .carousel-inner img {
    max-height: 220px;
    object-fit: cover;
  }

  .login-wrapper {
    margin: 1rem auto;
    padding: 1.25rem 1rem;
    border-radius: 12px;
  }

  .wolv-hero {
    padding: 1.75rem 1rem;
  }

  .wolv-secao,
  .wolv-fontes {
    padding: 1.1rem 1rem;
  }

  .wolv-villain-card {
    flex-basis: 100%;
  }

  .secao-comentarios {
    padding: 1rem;
  }

  .comentario .comentario-cabecalho {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Loja: 2 produtos por linha em telas pequenas */
  #grade-produtos > *,
  #grade-destaques > * {
    padding-left: 6px;
    padding-right: 6px;
  }

  /* Mini player do Spotify sobe para não cobrir o botão do assistente */
  #mini-player-spotify {
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    bottom: 86px;
  }

  #assistente-painel {
    right: 8px;
    left: 8px;
    width: auto;
    bottom: 82px;
    max-height: calc(100dvh - 110px);
  }

  #assistente-botao {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0));
  }
}

/* Celulares grandes / tablets em retrato */
@media (min-width: 576px) and (max-width: 991.98px) {
  #mini-player-spotify {
    bottom: 18px;
    width: 280px;
  }
}

/* Telas baixas (celular deitado): painel do assistente mais compacto */
@media (max-height: 520px) {
  #assistente-painel {
    max-height: calc(100dvh - 100px);
  }

  .assistente-mensagens {
    min-height: 90px;
  }
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}