/* =========================================================
   RESPONSIVIDADE — correções de auditoria (mobile-first)
   Carregado por último em todas as páginas. Contém apenas
   correções pontuais encontradas testando de 320px a 1920px.
   ========================================================= */

/* ---------------------------------------------------------
   1. Guardas gerais contra estouro horizontal
   --------------------------------------------------------- */
img, video, canvas, svg { max-width: 100%; }
/* itens de grid/flex não encolhem abaixo do conteúdo por padrão: em telas
   estreitas isso empurra a página inteira e cria scroll lateral */
.contato .wrap > *,
.form, .field, .form-card { min-width: 0; }
.field .input,
.field textarea,
.field select { width: 100%; min-width: 0; max-width: 100%; }
/* <select> herda a largura da opção mais longa ("Só pesquisando por
   enquanto") — sem isto a página de contato rola lateralmente a 320px */
.field select { text-overflow: ellipsis; }
/* e-mails longos não podem empurrar o card de contato */
.info-row .v, .footer__info a { overflow-wrap: anywhere; }

/* ---------------------------------------------------------
   2. Legibilidade — pisos de tamanho de fonte
   Rótulos micro ficavam entre 11,5px e 12,2px no celular.
   --------------------------------------------------------- */
@media (max-width: 600px) {
  .cyc__age,
  .cyc__hover .cyc__tag,
  .rcard__tag,
  .area__title .k,
  .blog-card__date { font-size: 0.8125rem; letter-spacing: .1em; }
  .eyebrow { font-size: 0.8125rem; }
}

/* ---------------------------------------------------------
   3. Áreas de toque
   Links de contato tinham 21–26px de altura; o mínimo
   confortável no toque é ~44px.
   --------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  .footer__info a { padding-block: .45rem; }
  .footer__policies a { padding-block: .3rem; }
  .info-row a.v { padding-block: .35rem; display: inline-block; }
  .nav__links a { padding-block: .7rem; }
}

/* ---------------------------------------------------------
   4. Cartões de linguagens (proposta) — o texto revelado no
   hover estourava o max-height fixo em telas médias.
   --------------------------------------------------------- */
.xcard:hover .xcard__reveal,
.xcard:focus-within .xcard__reveal { max-height: 420px; }
@media (max-width: 520px) { .xcard__reveal { max-height: 420px; } }

/* ---------------------------------------------------------
   5. Sementes responde — o max-height do CSS é só o caminho
   de degradação (sem JS). Com JS a altura exata é medida a
   partir do conteúdo, então este teto nunca corta nada.
   --------------------------------------------------------- */
.faq__item.open .faq__a { max-height: 2200px; }

/* ---------------------------------------------------------
   6. Ciclos (proposta) — no acordeão vertical a altura do
   card aberto passa a ser calculada por JS (main.js).
   Este valor é só o ponto de partida da animação.
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .cyc.is-active { transition: min-height .5s cubic-bezier(.4,0,.2,1); }
  .cyc__hover { overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------
   7. Telas muito estreitas (≤360px): respiro e escala
   --------------------------------------------------------- */
@media (max-width: 360px) {
  :root { --gutter: 16px; }
  .btn { padding-inline: 1.1em; }
  .matricula__cta .btn,
  .hero-cine__cta .btn { width: 100%; justify-content: center; }
  .form-card { padding: 20px; }
  .info-card { padding: 20px; }
}

/* ---------------------------------------------------------
   8. Blocos de galeria ainda sem foto
   Enquanto a escola não envia as imagens, o cartão vazio sai
   da grade em vez de aparecer como um retângulo cinza. Assim
   que o slot ganhar uma foto, ele volta sozinho.
   --------------------------------------------------------- */
/* [hidden] tem que vencer as regras de display dos componentes */
[hidden] { display: none !important; }

/* Esconde o cartao so quando o bloco NAO TEM foto atribuida. Usar [data-filled]
   aqui era um erro: esse atributo so aparece depois que a imagem baixa, entao
   todo cartao nascia display:none — e imagem sem caixa de layout ignora o
   loading=lazy. Resultado: a galeria inteira baixava no primeiro paint. */
.masonry-card:has(image-slot:not([src]):not([data-src]):not([data-filled])) { display: none; }
/* galeria inteira sem nenhuma foto: a seção sai junto com o título e o botão */
#registros:not(:has(image-slot[src], image-slot[data-src], image-slot[data-filled])) { display: none; }
.masonry-gallery:not(:has(image-slot[src], image-slot[data-src], image-slot[data-filled])) { display: none; }

/* ---------------------------------------------------------
   9. Vídeo do manifesto — o poster precisa cobrir a área
   inteira enquanto o arquivo não é carregado.
   --------------------------------------------------------- */
.video-box .video-local { background: var(--ink); }
.video-box.paused .video-ctl { opacity: 1; }