/*
 * Fase 10.2 — Responsive Fluid
 * Camada de layout orientada pelo espaço disponível em vez de modelos/resoluções.
 * Carregada depois de app.css para consolidar e suavizar breakpoints históricos.
 */

:root {
  --fluid-gutter: clamp(.65rem, 2.8vw, 1.5rem);
  --fluid-section-gap: clamp(1rem, 2.5vw, 1.75rem);
  --fluid-card-gap: clamp(.65rem, 1.7vw, 1rem);
  --fluid-radius: clamp(18px, 2.2vw, 28px);
}

html {
  width: 100%;
  min-width: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}

body.site-body {
  width: 100%;
  min-width: 0;
  overflow-x: clip;
}

/* Caixa previsível em qualquer aparelho/zoom. */
body.site-body *,
body.site-body *::before,
body.site-body *::after {
  box-sizing: border-box;
}

/* Os gutters passam a ser fluidos. As classes px-* dos templates não mandam mais. */
.page-shell {
  width: min(calc(100% - (2 * var(--fluid-gutter))), 1120px);
  max-width: 1120px;
  padding-inline: 0 !important;
  margin-inline: auto;
}

.site-nav .page-shell {
  width: min(calc(100% - (2 * var(--fluid-gutter))), 1560px);
  max-width: 1560px;
}

.content-shell {
  width: min(100%, 900px);
  max-width: 900px;
  padding-inline: 0;
}

/* Flex/grid filhos precisam poder encolher; sem isso um texto ou botão força overflow. */
body.site-body :where(
  main, section, article, aside, header, footer, nav,
  .row, .row > *,
  .card, .card-body,
  [class*="-grid"], [class*="-grid"] > *,
  [class*="-card"], [class*="-copy"], [class*="-hero"],
  [class*="-panel"], [class*="-section"], [class*="-actions"],
  [class*="-strip"], [class*="-summary"]
) {
  min-width: 0;
}

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

input,
select,
textarea,
button,
.form-control,
.form-select,
.input-group {
  max-width: 100%;
  min-width: 0;
}

pre,
code,
.math-expression,
.f1-question,
.f1-example-box,
.ensino-medio-example-box,
.fundamental2-example-box {
  max-width: 100%;
  overflow-wrap: anywhere;
}

pre,
code { overflow-x: auto; }

/* Tipografia cresce por faixa, não por modelo de tela. */
.hero h1,
.math-hero h1,
.fundamental-hero h1,
.learning-hub-hero h1,
.article-hero h1,
.competition-hero h1,
.times-hero h1 {
  font-size: clamp(1.85rem, 4.5vw, 4.4rem);
  line-height: 1.04;
  text-wrap: balance;
}

.section-title,
.site-body h2,
.site-body h3 {
  text-wrap: balance;
}

.site-body p,
.site-body li,
.site-body small {
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Menu: breakpoint próprio. Fica recolhido até realmente haver espaço.
   -------------------------------------------------------------------------- */
.site-nav .navbar-expand-fluid {
  flex-wrap: wrap;
}

.site-nav .navbar-expand-fluid .navbar-toggler {
  display: block;
  flex: 0 0 auto;
}

.site-nav .navbar-expand-fluid .navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
}

.site-nav .navbar-expand-fluid .navbar-collapse:not(.show):not(.collapsing) {
  display: none !important;
}

.site-nav .navbar-expand-fluid .navbar-nav {
  width: 100%;
  align-items: stretch !important;
  gap: .2rem !important;
}

.site-nav .navbar-expand-fluid .nav-link,
.site-nav .navbar-expand-fluid .nav-cta {
  width: 100%;
  white-space: normal;
}

.site-nav .navbar-expand-fluid .nav-cta {
  margin: .25rem 0 0 !important;
  text-align: center;
}

@media (min-width: 1580px) {
  .site-nav .navbar-expand-fluid {
    flex-wrap: nowrap;
  }
  .site-nav .navbar-expand-fluid .navbar-toggler {
    display: none;
  }
  .site-nav .navbar-expand-fluid .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    flex-grow: 1;
    align-items: center;
  }
  .site-nav .navbar-expand-fluid .navbar-nav {
    width: auto;
    margin-left: auto;
    flex-direction: row;
    align-items: center !important;
    gap: .1rem !important;
  }
  .site-nav .navbar-expand-fluid .nav-link,
  .site-nav .navbar-expand-fluid .nav-cta {
    width: auto;
    white-space: nowrap;
  }
  .site-nav .navbar-expand-fluid .nav-cta {
    margin: 0 0 0 .45rem !important;
  }
}

/* --------------------------------------------------------------------------
   Grids fluidos: cabem quantos cards o CONTAINER suportar.
   -------------------------------------------------------------------------- */
.feature-grid,
.learning-card-grid,
.home-learning-grid,
.related-guide-grid,
.education-level-grid,
.fundamental-topic-grid,
.exercise-preset-grid,
.exercise-preset-grid-6,
.exercise-preset-grid-8,
.supporters-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
  gap: var(--fluid-card-gap);
}

.performance-grid,
.performance-grid-f1,
.performance-grid-f2,
.performance-grid-em,
.game-mode-launch-grid,
.times-card-grid,
.times-card-grid.is-long {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
  gap: var(--fluid-card-gap);
}

.teacher-stat-grid,
.local-progress-grid,
.math-philosophy,
.summary-kpi-grid,
.fundamental2-focus-strip,
.ensino-medio-focus-strip,
.competition-live-stats,
.competition-result-stats,
.times-summary-strip {
  grid-template-columns: repeat(auto-fit, minmax(min(145px, 100%), 1fr)) !important;
  gap: var(--fluid-card-gap);
}

.operation-grid-v2,
.exercise-operation-grid,
.competition-mode-grid,
.f1-options,
.times-compact-grid,
.times-compact-grid.is-long {
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)) !important;
  gap: var(--fluid-card-gap);
}

.learning-path {
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)) !important;
}

/* Formulários deixam o próprio espaço definir 1/2/3/4 colunas. */
.times-builder-form {
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)) !important;
}

.exercise-range-grid,
.game-config-controls {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
}

.exercise-actions {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
}

/* Seletor numérico: o número de colunas nasce do espaço, não de 4/5/10 fixos. */
.exercise-table-selector,
.exercise-table-selector-20 {
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)) !important;
}

/* --------------------------------------------------------------------------
   Heros/duas colunas: auto-fit evita zona quebrada entre tablet e desktop.
   -------------------------------------------------------------------------- */
.learning-hub-hero,
.learning-hub-hero-v2,
.math-hero,
.fundamental-hero,
.home-math-expansion,
.competition-hero,
.teacher-hero,
.support-grid,
.article-layout {
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)) !important;
  gap: var(--fluid-section-gap);
}

.pix-box {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
}

/* Bootstrap row: cards de formulários não deixam coluna irmã esmagada. */
.site-body .row {
  --bs-gutter-x: clamp(.75rem, 2vw, 1.5rem);
}

/* Ações se rearranjam sem estourar ou criar botão microscópico. */
.summary-actions,
.performance-actions,
.seo-action-strip,
.competition-promo-action,
.exercise-table-shortcuts,
.times-builder-presets {
  flex-wrap: wrap;
  min-width: 0;
}

.summary-actions > *,
.performance-actions > *,
.seo-action-strip > *,
.exercise-table-shortcuts > *,
.times-builder-presets > * {
  max-width: 100%;
}

.game-config-v2 .btn-group {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: .45rem;
}

.game-config-v2 .btn-group > .btn {
  flex: 1 1 9rem !important;
  min-width: 0;
  border-radius: 13px !important;
}

/* Tabelas continuam usáveis sem empurrar a página inteira. */
.table-responsive {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.table-responsive > table {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Container queries: componentes reagem à própria largura.
   -------------------------------------------------------------------------- */
@supports (container-type: inline-size) {
  .f1-practice-card,
  .exercise-form-section,
  .competition-panel,
  .performance-section,
  .f1-performance-section,
  .f2-performance-section,
  .em-performance-section,
  .support-main-card,
  .times-builder,
  .game-config-v2 {
    container-type: inline-size;
  }

  @container (max-width: 680px) {
    .f1-options,
    .competition-mode-grid,
    .competition-live-stats,
    .competition-result-stats,
    .summary-kpi-grid,
    .operation-grid-v2,
    .exercise-operation-grid,
    .exercise-range-grid,
    .exercise-actions,
    .game-config-controls {
      grid-template-columns: 1fr !important;
    }

    #competition-answer-form {
      grid-template-columns: 1fr !important;
      max-width: 100%;
    }

    #competition-answer-form .btn {
      width: 100%;
      min-width: 0;
    }
  }

  @container (min-width: 681px) and (max-width: 980px) {
    .operation-grid-v2,
    .competition-live-stats,
    .competition-result-stats,
    .summary-kpi-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
}

/* --------------------------------------------------------------------------
   Mobile real / zoom alto: poucas exceções sem perseguir modelos.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  :root { --fluid-gutter: clamp(.55rem, 3vw, .9rem); }

  .site-nav .navbar { min-height: 60px; }
  .site-brand { gap: .5rem; min-width: 0; }
  .site-brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
  .site-brand > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero-content,
  .exercise-hero,
  .learning-hub-hero,
  .math-hero,
  .fundamental-hero,
  .home-math-expansion,
  .competition-hero,
  .teacher-hero {
    padding: clamp(1rem, 4vw, 1.4rem) !important;
  }

  .hero,
  .exercise-hero,
  .learning-hub-hero,
  .math-hero,
  .fundamental-hero > div:first-child,
  .home-math-expansion,
  .competition-hero,
  .performance-hero {
    border-radius: clamp(18px, 5vw, 24px) !important;
  }

  .btn-lg {
    font-size: clamp(.95rem, 4vw, 1.05rem);
    padding-inline: clamp(.8rem, 4vw, 1.25rem);
  }

  .quick-card { margin-top: clamp(-24px, -4vw, -12px); }
  .times-hero-visual,
  .teacher-hero-visual,
  .learning-hub-symbol { display: none !important; }

  .exercise-preview-grid.cols-2,
  .exercise-preview-grid.cols-3 {
    grid-template-columns: 1fr !important;
  }

  .article-aside { position: static !important; }
}

@media (max-width: 420px) {
  .site-brand > span:last-child { max-width: 11rem; }
  .hero h1,
  .math-hero h1,
  .fundamental-hero h1,
  .competition-hero h1,
  .times-hero h1 { font-size: clamp(1.75rem, 9vw, 2.15rem); }

  .f1-topic-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .teacher-preset-list a,
  .ranking-newcomer-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .teacher-preset-list a > :last-child,
  .ranking-newcomer-card > :last-child {
    grid-column: 2;
  }
}

/* Landscape de celular/tablet: evita altura desperdiçada e deixa scroll natural. */
@media (max-height: 520px) and (orientation: landscape) {
  .site-nav { position: relative; }
  .hero-content,
  .math-hero,
  .fundamental-hero,
  .competition-hero { padding-block: 1rem !important; }
}

/* Respeita acessibilidade e reduz efeitos que podem causar jitter em aparelhos móveis. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* --------------------------------------------------------------------------
   Fase 10.3 — auditoria mobile/interativa
   Corrige estados que a auditoria de URLs estáticas não enxerga: controles,
   jogos em andamento, formulários e componentes que mudam de eixo no mobile.
   -------------------------------------------------------------------------- */

/* Nunca deixe um controle de jogo herdar altura por flex-basis ao mudar de eixo. */
.game-config-control,
.game-config-control .btn-group,
.game-config-control .form-select,
.game-config-operations,
.operation-grid-v2 {
  min-inline-size: 0;
  min-block-size: 0;
}

.game-config-v2 .btn-group {
  flex-direction: row;
  align-items: stretch;
}

.game-config-v2 .btn-group > .btn {
  block-size: auto;
  min-block-size: 52px;
  align-content: center;
  justify-content: center;
  line-height: 1.2;
}

/* Componentes interativos devem crescer pelo conteúdo, nunca por uma razão fixa. */
.game-mode-launch-card,
.competition-mode-card,
.operation-grid-v2 .btn,
.f1-option,
.exercise-check-card,
.exercise-toggle-card {
  height: auto;
  max-height: none;
  aspect-ratio: auto;
}

/* Estados de jogo/resultados: largura sempre governada pelo container. */
.game-shell,
.game-shell-wide,
.question-card,
.game-card,
.training-summary-card,
.training-report-card,
.competition-shell,
.competition-question-card,
.competition-final-table-wrap,
.f1-practice-card,
.f1-learning-card {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
}

/* Textos matemáticos longos podem quebrar sem empurrar a viewport. */
.question-card,
.competition-question-card,
.f1-question-wrap,
.f1-example-box,
.fundamental2-example-box,
.ensino-medio-example-box,
.training-report-card,
.review-expression {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Evita o micro-overflow de arredondamento observado em 320–375px. */
.hero,
.hero-content,
.quick-card,
.performance-hero,
.math-hero,
.fundamental-hero,
.learning-hub-hero,
.competition-hero,
.exercise-hero,
.teacher-hero,
.home-math-expansion {
  max-inline-size: 100%;
}

@supports (overflow: clip) {
  .site-main,
  .hero,
  .hero-content,
  .performance-hero,
  .math-hero,
  .fundamental-hero,
  .learning-hub-hero,
  .competition-hero {
    overflow-x: clip;
  }
}

/* O botão flutuante não deve cobrir alternativas/CTAs em celulares. */
@media (max-width: 700px) {
  .back-to-top {
    width: 42px;
    height: 42px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .game-config-controls {
    align-items: stretch;
    gap: .85rem;
    padding: .85rem;
  }

  .game-config-v2 .btn-group {
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
  }

  /* CRÍTICO: em coluna o flex-basis antigo de 9rem virava ALTURA. */
  .game-config-v2 .btn-group > .btn {
    flex: 0 0 auto !important;
    inline-size: 100%;
    min-block-size: 54px;
    block-size: auto !important;
    padding: .78rem 1rem;
  }

  .operation-grid-v2 .btn {
    min-block-size: 56px;
    block-size: auto !important;
    padding: .8rem .9rem;
  }

  .competition-mode-card {
    min-block-size: 0;
  }

  .f1-options {
    align-items: stretch;
  }

  .f1-option {
    min-block-size: 54px;
  }

  /* Tabelas/resultados podem rolar dentro do próprio componente. */
  .competition-final-table-wrap,
  .table-responsive {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 420px) {
  .back-to-top {
    width: 40px;
    height: 40px;
    right: 10px;
  }

  .game-config-controls {
    padding: .75rem;
    border-radius: 16px;
  }

  .game-config-v2 .btn-group > .btn,
  .operation-grid-v2 .btn,
  .f1-option {
    font-size: .96rem;
  }

  /* Botões de ação não criam uma largura mínima artificial. */
  .summary-actions > *,
  .performance-actions > *,
  .seo-action-strip > *,
  .competition-promo-action > *,
  .exercise-actions > * {
    min-inline-size: 0;
    max-inline-size: 100%;
  }
}

/* Mesma proteção orientada pelo container: funciona em painel estreito até em desktop. */
@supports (container-type: inline-size) {
  @container (max-width: 560px) {
    .game-config-v2 .btn-group {
      flex-direction: column;
      align-items: stretch;
    }

    .game-config-v2 .btn-group > .btn {
      flex: 0 0 auto !important;
      inline-size: 100%;
      min-block-size: 54px;
      block-size: auto !important;
    }

    .operation-grid-v2 {
      grid-template-columns: 1fr !important;
    }
  }
}