/*
---
tags: [template, EDU, aulas, cursos]
criado: 2026-09-24
dominio: EDU
status: em-construcao
autoria: gerado-com-Codex
prd: null
solicitacao: "Conversa — Aula 2.0 e Curso 2.0 autorizados com faça"
---
Apresentação reutilizável; dados e ações permanecem no Core.
*/
.jj-lesson-v2 { background:var(--jj-color-background); color:var(--jj-color-text); }
.jj-lesson-v2 .jj-lesson-detail-hero { padding:28px 0 34px; border-bottom:1px solid var(--jj-refresh-line); }
.jj-lesson-v2 .jj-lesson-detail-hero--context { padding-bottom:24px; }
.jj-lesson-v2 .jj-lesson-detail-hero--context .jj-lesson-detail-tags { margin-top:14px; }
.jj-lesson-v2 .jj-lesson-navigation-jump { display:inline-block; font-size:13px; padding-block:12px; text-underline-offset:4px; }
.jj-lesson-v2 .jj-lesson-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:28px; font-size:12px; color:var(--jj-color-text-muted); }
.jj-lesson-v2 .jj-lesson-crumbs a { min-height:30px; padding-block:6px; text-underline-offset:4px; overflow-wrap:anywhere; }
.jj-lesson-v2 .jj-lesson-detail-hero>.jj-container--wide>.jj-kicker { color:var(--jj-color-primary); max-width:85ch; margin:0; }
.jj-lesson-v2 h1 { max-width:28ch; font:400 clamp(2rem,4vw,3.5rem)/1.13 var(--jj-font-display); letter-spacing:-.035em; margin:14px 0 18px; text-wrap:balance; overflow-wrap:anywhere; }
.jj-lesson-v2 .jj-lesson-detail-lead { max-width:76ch; color:var(--jj-color-text-muted); font-size:16px; line-height:1.75; margin:0 0 20px; }
.jj-lesson-v2 .jj-lesson-detail-tags { display:flex; flex-wrap:wrap; gap:8px; }
.jj-lesson-v2 .jj-lesson-detail-tags>span { display:inline-flex; align-items:center; padding:7px 11px; border:1px solid var(--jj-refresh-line); border-radius:6px; font-size:12px; line-height:1.5; }
.jj-lesson-v2 .jj-lesson-detail-tags .jj-lesson-completion-status { color:var(--jj-color-primary); background:var(--jj-color-surface-1); }
.jj-lesson-v2 .jj-lesson-course-choice { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:28px; padding:22px; border:1px solid var(--jj-refresh-line); border-radius:12px; background:var(--jj-color-surface-1); }
.jj-lesson-v2 .jj-lesson-course-choice>div { flex:1 1 280px; }
.jj-lesson-v2 .jj-lesson-course-choice label { font-size:14px; font-weight:600; }
.jj-lesson-v2 .jj-lesson-course-choice p { font-size:12px; line-height:1.7; color:var(--jj-color-text-muted); margin:6px 0 0; }
.jj-lesson-v2 .jj-lesson-course-choice select { min-width:0; width:280px; max-width:100%; min-height:46px; border:1px solid var(--jj-color-border); border-radius:7px; padding:10px; color:var(--jj-color-text); background:var(--jj-color-background); font-size:16px; }
.jj-lesson-v2 .jj-lesson-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:48px; align-items:start; padding-block:38px 64px; }
.jj-lesson-v2 .jj-lesson-detail-layout>* { min-width:0; }
.jj-lesson-v2 .jj-lesson-detail-body { grid-column:1; grid-row:1; scroll-margin-top:110px; }
.jj-lesson-v2 .jj-lesson-detail-sidebar { grid-column:2; grid-row:1; display:grid; gap:16px; scroll-margin-top:95px; }
.jj-lesson-v2 .jj-lesson-detail-section { padding:0 0 30px; margin:0 0 30px; border-bottom:1px solid var(--jj-refresh-line); }
.jj-lesson-v2 .jj-lesson-detail-section h2 { margin:0 0 20px; font:400 clamp(1.65rem,2.5vw,2.2rem)/1.2 var(--jj-font-display); letter-spacing:-.02em; scroll-margin-top:110px; }
.jj-lesson-v2 .jj-lesson-detail-section>p,.jj-lesson-v2 .jj-lesson-detail-section>ul { font-size:16px; line-height:1.85; }
.jj-lesson-v2 .jj-lesson-detail-section>ul { padding-left:22px; }
.jj-lesson-v2 .jj-lesson-detail-section>ul li+li { margin-top:9px; }
.jj-lesson-v2 .jj-lesson-detail-section>p:last-child { margin-bottom:0; }
.jj-lesson-v2 .jj-lesson-detail-section a { text-underline-offset:4px; overflow-wrap:anywhere; }
.jj-lesson-v2 .jj-lesson-content .entry-content { width:100%; max-width:100%; line-height:1.85; overflow-wrap:anywhere; }
.jj-lesson-v2 .jj-lesson-content :where(img,video,iframe,svg) { max-width:100%; }
.jj-lesson-v2 .jj-lesson-content :where(pre,.wp-block-table) { max-width:100%; overflow-x:auto; }
.jj-lesson-v2 .jj-lesson-content :where(.alignwide,.alignfull) { width:100%; max-width:100%; margin-inline:0; }
/* Aulas importadas usam abertura própria e largura de tela: respeitar a coluna do leitor. */
#conteudo.jj-lesson-v2 .entry-content > [id^="aula-"] { width:100%; max-width:100%; margin-inline:0; border:1px solid var(--jj-refresh-line); border-radius:12px; overflow:clip; container-type:inline-size; }
#conteudo.jj-lesson-v2 .entry-content > [id^="aula-"] .hero { display:block; padding:0; margin:0; min-height:0; }
#conteudo.jj-lesson-v2 .entry-content > [id^="aula-"] .hero-grid { grid-template-columns:minmax(0,1fr); gap:24px; padding-block:32px; }
#conteudo.jj-lesson-v2 .entry-content > [id^="aula-"] .hero-figure { order:0; max-width:300px; margin-inline:auto; }
#conteudo.jj-lesson-v2 .entry-content > [id^="aula-"] .hero h1 { font-size:clamp(2rem,4vw,3.1rem); }
#conteudo.jj-lesson-v2 .entry-content > [id^="aula-"] .wrap { max-width:100%; }
@container (max-width:600px) {
 #conteudo.jj-lesson-v2 .entry-content > [id^="aula-"] .endgrid { grid-template-columns:minmax(0,1fr); }
}
.jj-lesson-v2 .jj-lesson-preparation { padding:26px; border:1px dashed var(--jj-color-border); border-radius:12px; margin-bottom:30px; background:var(--jj-color-surface-1); }
.jj-lesson-v2 .jj-lesson-preparation h2 { font:400 1.85rem/1.2 var(--jj-font-display); margin:12px 0; }
.jj-lesson-v2 .jj-lesson-preparation p { font-size:14px; line-height:1.75; }
.jj-lesson-v2 .jj-lesson-preparation a { display:inline-block; padding-block:10px; text-underline-offset:4px; }
.jj-lesson-v2 .jj-lesson-course-panel { border-radius:12px; padding:25px; background:#193e30; color:#fff8e8; }
.jj-lesson-v2 .jj-lesson-course-panel .jj-kicker { color:#e4ce98; margin:0; }
.jj-lesson-v2 .jj-lesson-course-panel h2 { font:400 1.55rem/1.25 var(--jj-font-display); margin:16px 0; }
.jj-lesson-v2 .jj-lesson-course-panel h2 a { color:inherit; text-decoration:none; }
.jj-lesson-v2 .jj-lesson-course-panel h2 a:hover { text-decoration:underline; text-underline-offset:4px; }
.jj-lesson-v2 .jj-lesson-course-panel p:not(.jj-kicker) { font-size:12px; line-height:1.75; color:#d4e1d8; }
.jj-lesson-v2 .jj-lesson-course-panel progress { display:block; width:100%; height:8px; overflow:hidden; border:0; border-radius:8px; background:#ffffff30; accent-color:#e4ce98; }
.jj-lesson-v2 .jj-lesson-course-panel progress::-webkit-progress-bar { background:#ffffff30; }
.jj-lesson-v2 .jj-lesson-course-panel progress::-webkit-progress-value { background:#e4ce98; }
.jj-lesson-v2 .jj-lesson-course-panel progress::-moz-progress-bar { background:#e4ce98; }
.jj-lesson-v2 .jj-lesson-progress-label { margin-bottom:0; }
.jj-lesson-v2 .jj-lesson-course-back { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:44px; padding:14px 0 0; border-top:1px solid #ffffff30; margin-top:20px; color:#fff8e8; font-size:12px; text-decoration:none; }
.jj-lesson-v2 .jj-lesson-course-back:hover { text-decoration:underline; }
.jj-lesson-v2 .jj-lesson-detail-sidebar>details { border:1px solid var(--jj-refresh-line); border-radius:12px; background:var(--jj-color-surface-1); }
.jj-lesson-v2 .jj-lesson-detail-sidebar>details>summary { display:flex; align-items:center; justify-content:space-between; gap:12px; list-style:none; padding:19px 22px; cursor:pointer; font-size:14px; font-weight:600; }
.jj-lesson-v2 .jj-lesson-detail-sidebar>details>summary::-webkit-details-marker { display:none; }
.jj-lesson-v2 .jj-lesson-detail-sidebar>details[open]>summary>span { transform:rotate(45deg); }
.jj-lesson-v2 .jj-lesson-outline ol { padding:0 22px 12px; list-style:none; margin:0; }
.jj-lesson-v2 .jj-lesson-outline a { display:block; padding:11px 0; border-top:1px solid var(--jj-refresh-line); font-size:13px; line-height:1.6; text-decoration:none; }
.jj-lesson-v2 .jj-lesson-outline a:hover { text-decoration:underline; text-underline-offset:4px; }
.jj-lesson-v2 .jj-lesson-program nav { padding:0 16px 16px; }
.jj-lesson-v2 .jj-lesson-program nav summary { padding:13px 5px; border-top:1px solid var(--jj-refresh-line); font-size:13px; font-weight:600; cursor:pointer; }
.jj-lesson-v2 .jj-lesson-program ol { list-style:none; padding:0; margin:0 0 12px; }
.jj-lesson-v2 .jj-lesson-program li a { display:block; padding:12px; border-radius:6px; text-decoration:none; font-size:12px; line-height:1.65; overflow-wrap:anywhere; }
.jj-lesson-v2 .jj-lesson-program li a:hover { text-decoration:underline; }
.jj-lesson-v2 .jj-lesson-program [aria-current="page"] { background:var(--jj-color-surface-3); color:var(--jj-color-primary); font-weight:600; border-left:3px solid var(--jj-color-primary); }
.jj-lesson-v2 .jj-lesson-program small { display:block; font-weight:400; color:var(--jj-color-text-muted); }
.jj-lesson-v2 .jj-lesson-facts-panel dl { margin:0; padding:0 22px 22px; }
.jj-lesson-v2 .jj-lesson-facts-panel dl>div { padding-block:12px; border-top:1px solid var(--jj-refresh-line); }
.jj-lesson-v2 .jj-lesson-facts-panel dt { font-size:11px; font-weight:600; color:var(--jj-color-text-muted); margin-bottom:5px; }
.jj-lesson-v2 .jj-lesson-facts-panel dd { font-size:12px; line-height:1.75; margin:0; overflow-wrap:anywhere; }
.jj-lesson-v2 .jj-lesson-finish { display:flex; flex-direction:column; gap:20px; align-items:flex-start; padding:28px; border:1px solid var(--jj-refresh-line); border-radius:12px; background:var(--jj-color-surface-1); }
.jj-lesson-v2 .jj-lesson-finish .jj-kicker { margin:0; }
.jj-lesson-v2 .jj-lesson-finish h2 { font:400 1.8rem/1.2 var(--jj-font-display); margin:12px 0; }
.jj-lesson-v2 .jj-lesson-finish p:not(.jj-kicker) { font-size:14px; line-height:1.75; margin:0; color:var(--jj-color-text-muted); }
.jj-lesson-v2 .jj-lesson-neighbors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-block:20px 38px; }
.jj-lesson-v2 .jj-lesson-neighbors a { display:block; padding:20px; border:1px solid var(--jj-refresh-line); border-radius:10px; text-decoration:none; }
.jj-lesson-v2 .jj-lesson-neighbors a:hover { background:var(--jj-color-surface-1); }
.jj-lesson-v2 .jj-lesson-neighbors small { display:block; font-size:11px; color:var(--jj-color-text-muted); margin-bottom:8px; }
.jj-lesson-v2 .jj-lesson-neighbors strong { font-size:14px; font-weight:500; line-height:1.6; overflow-wrap:anywhere; }
.jj-lesson-v2 .jj-lesson-context-hint { font-size:14px; line-height:1.8; color:var(--jj-color-text-muted); border-top:1px solid var(--jj-refresh-line); padding-top:20px; }
@media(max-width:950px) {
 .jj-lesson-v2 .jj-lesson-detail-layout { grid-template-columns:minmax(0,1fr) 250px; gap:28px; }
}
@media(max-width:760px) {
 .jj-lesson-v2 .jj-lesson-detail-layout { display:flex; flex-direction:column; gap:28px; padding-top:28px; }
 .jj-lesson-v2 .jj-lesson-detail-layout>* { width:100%; }
 .jj-lesson-v2 .jj-lesson-course-panel { padding:22px; }
 .jj-lesson-v2 .jj-lesson-course-panel h2 { font-size:1.35rem; margin-block:10px; }
 .jj-lesson-v2 .jj-lesson-detail-hero { padding:18px 0 28px; }
 .jj-lesson-v2 .jj-lesson-crumbs { margin-bottom:18px; }
 .jj-lesson-v2 h1 { font-size:clamp(1.9rem,7.5vw,2.7rem); }
 .jj-lesson-v2 .jj-lesson-detail-lead { font-size:15px; }
 .jj-lesson-v2 .jj-lesson-course-choice { padding:20px; }
 .jj-lesson-v2 .jj-lesson-course-choice select,.jj-lesson-v2 .jj-lesson-course-choice button { width:100%; }
 .jj-lesson-v2 .jj-lesson-detail-section>p,.jj-lesson-v2 .jj-lesson-detail-section>ul { font-size:15px; line-height:1.8; }
 .jj-lesson-v2 .jj-lesson-finish { padding:23px; }
}
@media(max-width:450px) {
 .jj-lesson-v2 .jj-lesson-neighbors { grid-template-columns:1fr; }
 .jj-lesson-v2 .jj-learning-action,.jj-lesson-v2 .jj-learning-action button { width:100%; }
}
@media print {
 .jj-lesson-v2 .jj-lesson-detail-layout { display:block; }
 .jj-lesson-v2 .jj-lesson-detail-sidebar,.jj-lesson-v2 .jj-lesson-course-choice,.jj-lesson-v2 .jj-learning-action,.jj-lesson-v2 .jj-lesson-neighbors { display:none; }
}