/* ==========================================================================
   Conteúdo da etapa do aluno — Plano 11, Fase 3.4
   Componente: Components/PaginasAluno/Curso/EtapaConteudoCorpo.razor

   Renomeada de EtapaConteudo.css quando a página EtapaConteudo.razor deixou de
   existir: o corpo da etapa virou componente sem rota, montado pelo
   CursoWorkspace (inline no painel da direita no desktop, tela cheia no mobile).
   As classes .etapa-conteudo-* continuam as mesmas — só o dono mudou de nome.

   Uma folha para os três tipos (Aula, Pergunta, Avaliação): o que muda entre
   eles é o miolo do cartão, não a casca.

   Sóbrio de propósito — sem moldura decorativa, sem fundo de onda, sem overlay
   de celebração. O feedback de acerto/erro é cor semântica do MudAlert.

   Cor sempre por token do tema (var(--mud-palette-*)) — nunca hex literal,
   senão o modo escuro vira texto invisível.
   ========================================================================== */

.etapa-conteudo {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    max-width: 960px;
    margin: 0 auto;
}

/* ------------------------------- Cabeçalho ------------------------------- */

.etapa-conteudo-cabecalho {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.etapa-conteudo-titulo {
    color: var(--mud-palette-text-primary);
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.etapa-conteudo-chip-tipo {
    flex: 0 0 auto;
}

/* --------------------------------- Cartão -------------------------------- */

.etapa-conteudo-cartao {
    background-color: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius);
}

.etapa-conteudo-corpo {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.etapa-conteudo-secao {
    color: var(--mud-palette-text-primary);
}

/* ---------------------------------- Aula --------------------------------- */

/* O VideoPlayer já traz .video-player-container com aspect-ratio 16/9; aqui só
   se limita a largura e se troca o "cover" por "contain", para não cortar
   quadro de vídeo cuja proporção não seja 16/9. */
.etapa-conteudo-video {
    width: 100%;
}

.etapa-conteudo-video .video-element {
    object-fit: contain;
    background-color: var(--mud-palette-dark);
}

.etapa-conteudo-texto {
    color: var(--mud-palette-text-primary);
}

.etapa-conteudo-arquivos {
    padding-top: 0;
    padding-bottom: 0;
}

.etapa-conteudo-arquivo-linha {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.etapa-conteudo-arquivo-dica {
    color: var(--mud-palette-text-secondary);
    margin-left: auto;
    white-space: nowrap;
}

/* -------------------------- Pergunta / Avaliação -------------------------- */

.etapa-conteudo-questao {
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

/* Uma alternativa por linha — requisito de leitura, não estética.
   ⚠️ Por que precisa de !important (medido, não chutado): o MudRadioGroup não
   é um elemento só. O `Class` do componente cai no wrapper externo
   (.mud-input-control.mud-input-control-boolean-input) e as alternativas moram
   num filho .mud-radio-group, para o qual o MudBlazor 8.3.0 declara

       .mud-input-control.mud-input-control-boolean-input .mud-radio-group
       { display: inherit; flex-direction: row; align-items: center; flex-wrap: wrap }

   Ou seja: a regra `flex-direction: column` que existia aqui caía no elemento
   errado — o wrapper, cujo único filho flex é o próprio .mud-radio-group — e
   nunca chegava nas alternativas, que continuavam em linha. E a regra do
   MudBlazor tem 3 classes de especificidade num arquivo carregado DEPOIS desta
   folha no App.razor, então nem repetir o seletor resolveria sem !important.

   `display: inherit` no .mud-radio-group também explica por que o wrapper
   precisa continuar sendo `display: flex`: o grupo herda o display do pai — se
   o pai virasse block, os .mud-radio (inline-flex) voltariam a fluir lado a lado.

   Os dois seletores abaixo cobrem as duas hipóteses de onde o `Class` aterrissa
   (no wrapper ou no próprio grupo), então o empilhamento vale nos dois casos. */
.etapa-conteudo-alternativas,
.etapa-conteudo-alternativas .mud-radio-group {
    display: flex;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 4px;
}

/* Alvo de toque confortável no mobile e alternativa legível em duas linhas. */
.etapa-conteudo-alternativa {
    align-items: flex-start;
    padding: 4px 0;
}

.etapa-conteudo-nota-corte {
    color: var(--mud-palette-text-secondary);
}

/* Separador entre as questões da avaliação — todas ficam na mesma tela, então
   a divisa precisa ser clara sem virar caixa dentro de caixa. */
.etapa-conteudo-pergunta-bloco {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.etapa-conteudo-pergunta-bloco:last-of-type {
    padding-bottom: 0;
    border-bottom: none;
}

/* -------------------------------- Feedback ------------------------------- */

.etapa-conteudo-feedback {
    width: 100%;
}

/* --------------------------------- Ações --------------------------------- */

.etapa-conteudo-acoes {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px;
}

.etapa-conteudo-pendencia {
    color: var(--mud-palette-text-secondary);
    flex: 1 1 auto;
    min-width: 0;
}

.etapa-conteudo-concluida {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mud-palette-text-secondary);
}

/* -------------------------------- Mobile --------------------------------- */
@media (max-width: 599.98px) {

    .etapa-conteudo {
        padding: 12px;
    }

    .etapa-conteudo-acoes {
        padding: 12px;
    }

    /* No mobile o botão primário ocupa a linha inteira: é a ação única da tela. */
    .etapa-conteudo-acoes .mud-button-root {
        width: 100%;
    }
}