/* Didaskalia · ajustes de responsividade
   Carregado depois de style.css. Mantém o desenho original e só atua
   onde o layout quebrava em telas pequenas, tablets e dispositivos de toque.
   Medidas de design (como a altura do cabeçalho) vêm dos tokens do tema
   em assets/css/themes/. */

/* 1. Em layouts de uma coluna, palavras longas não podem alargar grids e flex
      (era o que empurrava títulos e painéis para fora da tela) */
@media (max-width: 900px) {
  .project-index a > *,
  .about-section > *,
  .discipline-list div > *,
  .ecosystem-grid > *,
  .plus-section > *,
  .course-lines a > *,
  .editorial-events > *,
  .article-grid > *,
  .contact-section > *,
  .page-interest > *,
  .field-row > *,
  .footer-lead > h2,
  .footer-grid > *,
  .content-card-grid > *,
  .card-top > *,
  .statement > *,
  .faq-section > *,
  .detail-grid > *,
  .detail-body > *,
  .fact-grid div > *,
  .not-found-page > * {
    min-width: 0;
  }

  .feature-panel > *,
  .plus-copy > *,
  .about-copy > *,
  .detail-grid aside > *,
  .not-found-copy > * {
    max-width: 100%;
  }
}

@media (max-width: 620px) {
  .section-heading-row > * {
    max-width: 100%;
  }
}

/* Entre 901 e 1100px o painel da conferência saía pela direita */
@media (min-width: 901px) and (max-width: 1100px) {
  .editorial-events {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  }
  .feature-panel > * {
    max-width: 100%;
  }
}

.detail-prose,
.content-card p,
.faq-list p,
.article-grid p,
.cookie-banner p {
  overflow-wrap: break-word;
}

/* 2. Sem JavaScript, títulos gigantes quebram a palavra em vez de estourar a tela.
      Com JavaScript, site.js reduz a fonte só o necessário para caber. */
html:not(.js) :is(h1, h2, h3, .conference-word, .plus-stat strong, .event-date strong) {
  overflow-wrap: break-word;
}

/* 3. Capas dos livros acompanham a largura do painel */
.cover {
  width: min(33vw, 250px, calc(50% + 2px));
}

@media (max-width: 620px) {
  .cover {
    width: min(180px, calc(50% + 4px));
  }
}

/* 4. Navegadores sem suporte a svh */
@supports not (height: 100svh) {
  .hero { min-height: calc(100vh - var(--altura-header)); }
  .not-found-page { min-height: 80vh; }
}

@media (max-width: 620px) {
  @supports not (height: 100svh) {
    .hero { min-height: calc(100vh - var(--altura-header-mobile)); }
  }
}

/* 5. Menu mobile: área de toque maior sem mudar o desenho e rolagem em telas baixas */
.mobile-nav summary {
  margin: -14px -12px;
  padding: 14px 12px;
}

@media (max-width: 900px) {
  .mobile-nav nav {
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* 6. Dispositivos de toque: links do rodapé com alvo confortável */
@media (pointer: coarse) {
  .footer-grid > div { gap: 0; }
  .footer-grid strong { margin-bottom: 8px; }
  .footer-grid a,
  .footer-grid button { padding: 7px 0; }
}

/* 7. iPhone/iPad: fonte mínima de 16px nos campos evita o zoom automático ao focar */
@supports (-webkit-touch-callout: none) {
  .interest-form input:not([type=checkbox]),
  .interest-form select,
  .interest-form textarea,
  .search-form input {
    font-size: 16px;
  }
}