/* Camada mobile da aluna e das telas publicas - Mobile V15, Etapa 2.
   Breakpoint unico 767/768; fonte dos valores: docs/mobile/BREAKPOINTS.md.
   var() nao funciona dentro de @media, por isso o 767 aqui e literal.
   Cor e tipografia somente por token de base.html. Nenhum hex novo.

   Este arquivo e linkado em base.html DEPOIS de {% block head %}, de proposito:
   os templates declaram o layout de desktop no proprio <style> do bloco head, e a
   camada mobile precisa vir por ultimo para vencer sem !important.
   As regras do player de fluxo NAO moram aqui - moram em player_estudo.css, que e
   linkado no corpo de fluxo_aula.html e portanto vence esta folha. */

/* Layout de desktop movido para ca porque estava em atributo style= inline,
   onde nenhuma @media alcanca. Valor identico ao que estava no template. */
.bloco-2col { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: .9rem 0; }
.audio-aula { width: 100%; max-width: 420px; }

/* Grade de desktop de trail_fundamentos.html movida para ca porque estava em
   atributo style= inline, onde nenhuma @media alcanca. Valor identico. */
.tf-grade { display: grid; grid-template-columns: 1fr 260px; gap: 1.5rem; align-items: start; }

@media (max-width: 767px) {

  /* ---- fluxo_aula.html: grade principal vira uma coluna ---- */
  #tela-fluxo-aula .fluxo-grade { grid-template-columns: 1fr; gap: 1.1rem; }
  #tela-fluxo-aula .fluxo-grade > * { min-width: 0; }

  /* a coluna "Jornada" deixa de grudar quando vira bloco empilhado */
  #tela-fluxo-aula .fluxo-jornada { position: static; top: auto; }

  /* ---- lesson.html congelado: so o empilhamento (5.2) ---- */
  .lesson-layout { grid-template-columns: 1fr; gap: 1.1rem; }
  .lesson-layout > * { min-width: 0; }

  /* ---- blocos da aula: uma coluna, midia fluida ---- */
  .bloco-2col { grid-template-columns: 1fr; }
  .audio-aula { max-width: 100%; }
  .bloco-imagem img,
  .bloco-conteudo img,
  .bloco-conteudo video { max-width: 100%; height: auto; }

  /* tabela de autoteste vira cartoes empilhados com rotulo a esquerda.
     Nao usar overflow-x em tabela de conteudo (5.3): o wrapper perde a rolagem. */
  .tabela-rolavel { overflow-x: visible; }
  .bloco-tabela,
  .bloco-tabela tbody,
  .bloco-tabela tr,
  .bloco-tabela td { display: block; width: 100%; }
  .bloco-tabela thead { position: absolute; left: -9999px; }
  .bloco-tabela tr {
    border: 1px solid var(--br);
    border-radius: var(--rsm);
    padding: .55rem .7rem;
    margin-bottom: .5rem;
  }
  .bloco-tabela td { border: none; padding: .2rem 0; }
  .bloco-tabela td[data-rotulo]::before {
    content: attr(data-rotulo) ": ";
    font-weight: 500;
    color: var(--ts);
  }

  /* alternativas de quiz e enquete ocupam a largura toda e sao tocaveis */
  .quiz-alt,
  .bl-enquete button {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
  }

  /* =================== ETAPA 2b - funil da aluna e telas publicas ===================
     Cada secao e escopada pelo id da tela (5.4). A causa raiz e comum e vale registrar:
     .g2, .g3 e .g4 de base.html fixam o numero de colunas e nao tem @media. Nao sao
     corrigidas na origem de proposito - base.html esta fechado nesta etapa (D-M10) e as
     telas de professora usam as mesmas classes, que so entram na Etapa 3.
     minmax(0,1fr) libera a trilha; min-width:0 no filho libera o item de grade, que por
     padrao nao encolhe abaixo do proprio conteudo. Os dois sao necessarios. */

  /* ---- dashboard.html (/dashboard) ---- */
  #tela-dashboard .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }

  /* ---- evolution.html (/evolucao) ---- */
  #tela-evolucao .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }

  /* ---- profile.html (/perfil) ---- */
  /* 16px evita o zoom automatico do iOS ao focar o campo (5.3) */
  #tela-perfil input:not([type="checkbox"]):not([type="radio"]),
  #tela-perfil select,
  #tela-perfil textarea { font-size: 16px; width: 100%; box-sizing: border-box; }

  /* ---- instructors.html (/avaliadoras) ----
     Sem regra propria desde a 3a: a unica coisa que #tela-avaliadoras
     precisava era a .g3 em uma coluna, e isso agora vem da origem. */

  /* ---- privacidade.html (/privacidade) ---- */
  /* o interruptor mede 38x22 e o span interno e absoluto com inset 0: crescer o rotulo
     esticaria o desenho. A area de toque cresce por pseudo-elemento transparente, que
     continua acionando o proprio rotulo. Alvo final 50x44. */
  #tela-privacidade .pref-switch::after {
    content: "";
    position: absolute;
    top: -11px;
    bottom: -11px;
    left: -6px;
    right: -6px;
  }

  /* ---- planos.html (/planos) ---- */
  /* Plano Estudio e o destacado no desktop, entao sobe para o topo da pilha (5.3).
     E o terceiro cartao no documento; a ordem do DOM nao muda. */
  #tela-planos .g3 > .card:nth-child(3) { order: -1; }
  #tela-planos .g3 .btn { width: 100%; min-height: 44px; box-sizing: border-box; }

  /* ---- trail_fundamentos.html (/trilha/fundamentos) ---- */
  #tela-trilha-fundamentos .tf-grade { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  #tela-trilha-fundamentos .tf-grade > * { min-width: 0; }

  /* ---- landing.html (/) ---- */
  #tela-landing .land-hero { grid-template-columns: minmax(0, 1fr); }
  /* o circulo decorativo .hr:before mede 400px e fica em right:-100px; empilhado
     ele passaria a puxar a pagina para o lado. Aqui ele e recortado. */
  #tela-landing .hr { overflow: hidden; }
  #tela-landing .land-hero > * { min-width: 0; }
}