/* Sistema de blocos de lição — 5 temas (stem, linguagem, mundo, idiomas,
   pessoal), cada um só muda as variáveis de cor. Os blocos (lb-*) são os
   "elementos pré-prontos" que o conteúdo gerado referencia pelo `type`:
   hook, lead, example-list, grid, quote, tip, checklist, summary, image.
   Criar uma lição nova nunca precisa de CSS novo — só escolher o bloco. */

.lesson-content{
  --lb-accent:#1e90ff; --lb-accent-dark:#1263b8; --lb-accent-2:#2f6b4f;
  --lb-tip-bg:#e7f2ff; --lb-quote-bg:#eaf2fb; --lb-paper:#ffffff; --lb-line:#dde6ef;
  font-family:'Ubuntu',sans-serif;
}
.lesson-content p, .lesson-content li, .lesson-content .lb-hook{font-family:'Ubuntu',sans-serif;}
.lesson-content h2, .lesson-content h3{
  font-family:'Ubuntu',sans-serif;font-weight:700;color:#1a5fb4;
}
.lesson-content[data-theme="stem"]{
  --lb-accent:#2f7dd1; --lb-accent-dark:#1a5a9e; --lb-accent-2:#2f8f6f;
  --lb-tip-bg:#e8f3ff; --lb-quote-bg:#e9f6f0;
}
.lesson-content[data-theme="linguagem"]{
  --lb-accent:#c9793a; --lb-accent-dark:#9a5a24; --lb-accent-2:#8a5a3a;
  --lb-tip-bg:#fbf0e3; --lb-quote-bg:#f7ede0;
}
.lesson-content[data-theme="mundo"]{
  --lb-accent:#a9822f; --lb-accent-dark:#7a5c1e; --lb-accent-2:#6b5230;
  --lb-tip-bg:#f6f0e0; --lb-quote-bg:#f1e9d4;
}
.lesson-content[data-theme="idiomas"]{
  --lb-accent:#1f9c8a; --lb-accent-dark:#136f61; --lb-accent-2:#c9683a;
  --lb-tip-bg:#e4f5f2; --lb-quote-bg:#eaf7f5;
}
.lesson-content[data-theme="pessoal"]{
  --lb-accent:#8a5cb0; --lb-accent-dark:#623c84; --lb-accent-2:#b0608a;
  --lb-tip-bg:#f2ecf9; --lb-quote-bg:#f6eef7;
}

/* Hero pixelado (inspirado no exp.html) — 1 SVG reaproveitável, recolorido
   por tema via CSS. Fica só na página de lição, não no resto do site. */
.lesson-hero{
  position:relative;text-align:center;padding:48px 20px 34px;overflow:hidden;
  border-radius:0;margin:0 0 32px;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  --lh-sky:#cfe6ff; --lh-hill1:#8fd19e; --lh-hill2:#5fb37a; --lh-block:#c9793a;
  --lh-line1:#4a7bbf; --lh-line2:#2f8f6f; --lh-line3:#d99a3d; --lh-line4:#8a56c9;
}
.lesson-hero[data-theme="stem"]{
  --lh-sky:#cfe6ff; --lh-hill1:#9fd4c8; --lh-hill2:#5fa38c; --lh-block:#3a7fc9;
  --lh-line1:#3a7fc9; --lh-line2:#2f9e6f; --lh-line3:#e0a030; --lh-line4:#7a56c9;
}
.lesson-hero[data-theme="linguagem"]{
  --lh-sky:#f7e6d3; --lh-hill1:#e0b483; --lh-hill2:#c9793a; --lh-block:#8a5a3a;
  --lh-line1:#d1703a; --lh-line2:#3a8f7a; --lh-line3:#d9a23a; --lh-line4:#9a4a6a;
}
.lesson-hero[data-theme="mundo"]{
  --lh-sky:#ede1bf; --lh-hill1:#d2bd79; --lh-hill2:#a9822f; --lh-block:#6b5230;
  --lh-line1:#c9963a; --lh-line2:#5a7a4a; --lh-line3:#a65a3a; --lh-line4:#3a7a8a;
}
.lesson-hero[data-theme="idiomas"]{
  --lh-sky:#d7f0ec; --lh-hill1:#6cc9b8; --lh-hill2:#1f9c8a; --lh-block:#c9683a;
  --lh-line1:#1f9c8a; --lh-line2:#e0703a; --lh-line3:#3a6fc9; --lh-line4:#d9b23a;
}
.lesson-hero[data-theme="pessoal"]{
  --lh-sky:#ecdcf5; --lh-hill1:#cc9fdd; --lh-hill2:#8a5cb0; --lh-block:#b0608a;
  --lh-line1:#8a5cb0; --lh-line2:#d9578a; --lh-line3:#3a8fc9; --lh-line4:#3aa88a;
}

.lesson-hero-bg{position:absolute;inset:0;width:100%;height:100%;opacity:0.9;}
.lesson-hero-bg .lh-sky{fill:var(--lh-sky);}
.lesson-hero-bg .lh-hill1{fill:var(--lh-hill1);}
.lesson-hero-bg .lh-hill2{fill:var(--lh-hill2);}
.lesson-hero-bg .lh-block rect{fill:var(--lh-block);}
.lesson-hero-bg .lh-mystery{fill:#f2b23c;stroke:#9a6b1f;stroke-width:3;}
.lesson-hero-bg .lh-mystery-mark{fill:#9a6b1f;}
.lesson-hero-inner{position:relative;z-index:1;max-width:760px;margin:0 auto;}

@keyframes lesson-pixel-pop{
  0%{transform:translateY(-14px) scale(0.9);opacity:0;}
  60%{transform:translateY(2px) scale(1.03);opacity:1;}
  100%{transform:translateY(0) scale(1);opacity:1;}
}
.lesson-pixel-title{
  display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;
}
.lesson-pixel-line{
  font-family:'Ubuntu',sans-serif;font-weight:700;font-size:1.7rem;line-height:1.3;
  color:#fff;display:inline-block;padding:12px 26px;border-radius:8px;
  box-shadow:0 4px 0 rgba(0,0,0,0.18);animation:lesson-pixel-pop 0.5s ease backwards;
  max-width:95%;
}
.lesson-pixel-line:nth-child(1){background:var(--lh-line1);animation-delay:0.05s;}
.lesson-pixel-line:nth-child(2){background:var(--lh-line2);animation-delay:0.2s;}
.lesson-pixel-line:nth-child(3){background:var(--lh-line3);animation-delay:0.35s;}
.lesson-pixel-line:nth-child(4){background:var(--lh-line4);animation-delay:0.5s;}
@media (max-width:600px){
  .lesson-pixel-line{font-size:1.2rem;padding:10px 16px;}
  .lesson-meta-tag{font-size:12px;padding:8px 12px;gap:5px;}
  .lesson-meta-tag .material-icons-outlined{font-size:15px;}
  .lesson-share-row{gap:4px;}
  .lesson-share-btn{width:36px;height:36px;}
}

.lb-hook{
  margin:0 0 28px;font-size:1.25rem;font-weight:600;text-align:center;
  color:var(--ink);line-height:1.5;
}

.lb-lead{margin:0 0 28px;text-align:center;}
.lb-lead-icon{display:block;margin:0 0 10px;}
.lb-lead-icon .material-icons-outlined{font-size:42px;color:var(--lb-accent);}
.lb-lead-text{
  font-size:1.2rem;font-weight:700;max-width:620px;margin:0 auto 16px;
  line-height:1.45;color:var(--ink);
}
.lb-lead .lb-truco{text-align:left;}
.lb-truco{
  background:var(--lb-paper);border:1px solid var(--lb-line);
  border-left:4px solid var(--lb-accent);border-radius:4px 16px 16px 4px;
  padding:18px 22px;margin:14px 0 0;font-size:0.98rem;
}
.lb-truco strong{color:var(--lb-accent-dark);}

.lb-example-list{margin:0 0 28px;}
.lb-example-list h3{
  display:flex;align-items:center;gap:10px;font-size:1.3rem;font-weight:700;
  margin:0 0 14px;
}
.lb-example-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.lb-example-list li{
  background:var(--lb-paper);border-left:4px solid var(--lb-accent-2);
  border-radius:4px 12px 12px 4px;padding:13px 17px;font-size:1rem;
}
.lb-example-list .lb-highlight{
  background:color-mix(in srgb, var(--lb-accent) 16%, transparent);
  color:var(--lb-accent-dark);padding:1px 5px;border-radius:4px;font-weight:700;
}
.lb-example-list .lb-note{display:block;margin-top:6px;font-size:0.86rem;color:var(--ink-soft);}

.lb-grid{margin:0 0 28px;}
.lb-grid h3{
  display:flex;align-items:center;gap:10px;font-size:1.3rem;font-weight:700;
  margin:0 0 14px;
}
.lb-grid-items{display:grid;grid-template-columns:1fr;gap:10px;}
@media (min-width:640px){ .lb-grid-items{grid-template-columns:1fr 1fr;} }
.lb-grid-item{background:var(--lb-paper);border:1px solid var(--lb-line);border-radius:12px;padding:13px 17px;}
.lb-grid-item.has-image{padding:0 0 13px;overflow:hidden;}
.lb-grid-item-img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;margin-bottom:12px;background:var(--lb-tip-bg);}
.lb-grid-item.has-image .lb-grid-name, .lb-grid-item.has-image .lb-grid-text{padding-left:17px;padding-right:17px;}
.lb-grid-item .lb-grid-name{font-weight:700;color:var(--lb-accent-dark);display:block;margin-bottom:3px;}
.lb-grid-item .lb-grid-text{font-size:0.95rem;color:var(--ink);}

/* Imagem larga de contexto (abaixo do hook, ou antes do exercício) — foto
   real do Pexels/Pixabay, nunca gerada por IA. */
.lb-photo{margin:0 0 28px;}
.lb-photo img{
  display:block;width:100%;max-height:420px;object-fit:cover;border-radius:18px;
}
.lb-photo-credit{display:block;margin-top:6px;font-size:0.78rem;color:var(--ink-soft);text-align:right;}
.lb-photo-credit a{color:inherit;}

.lb-quote{
  background:var(--lb-quote-bg);border-radius:18px;padding:26px 28px;margin:0 0 28px;
  font-size:1.15rem;font-weight:500;font-style:italic;text-align:center;
}
.lb-quote cite{
  display:block;margin-top:10px;font-style:normal;font-size:0.82rem;font-weight:600;
  letter-spacing:0.03em;color:var(--ink-soft);
}

.lb-tip{
  background:var(--lb-tip-bg);border:2px dashed var(--lb-accent);border-radius:16px;
  padding:18px 20px;margin:0 0 28px;display:flex;gap:14px;align-items:flex-start;
}
.lb-tip .material-icons-outlined{color:var(--lb-accent-dark);flex-shrink:0;margin-top:2px;}
.lb-tip strong{display:block;margin-bottom:4px;font-size:1.02rem;color:var(--ink);}
.lb-tip p{margin:0;font-size:0.98rem;}

.lb-checklist{
  background:var(--lb-paper);border:1px solid var(--lb-line);border-radius:16px;
  padding:20px 22px;margin:0 0 28px;
}
.lb-checklist h3{
  display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:700;margin:0 0 12px;
}
.lb-checklist ol{margin:0;padding-left:20px;}
.lb-checklist li{margin-bottom:9px;font-size:0.98rem;}

.lb-summary{
  text-align:center;background:var(--lb-accent);color:#fff;border-radius:18px;
  padding:26px 22px;margin:0 0 28px;
}
.lb-summary h3{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:1.25rem;font-weight:700;margin:0 0 8px;color:#fff;
}
.lb-summary p{margin:0;font-size:1.05rem;opacity:0.95;color:#fff;}

.lb-section{margin:0 0 28px;}
.lb-section h3{
  display:flex;align-items:center;gap:10px;font-size:1.3rem;font-weight:700;
  margin:0 0 12px;
}
.lb-section p{margin:0;font-size:1rem;}

.lesson-dica-flag{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-family:'Ubuntu',sans-serif;font-size:13px;font-weight:700;
  color:#b4761f;margin:0 0 4px;
}
.lesson-dica-flag .material-icons-outlined{font-size:17px;}

/* Tags clicáveis abaixo do banner (assunto / idade) — cores vivas e
   distintas, fixas (não dependem do tema). Sempre em uma linha só, mesmo
   no celular: são só 2, então nowrap + font/padding menores quando aperta. */
.lesson-meta-row{
  display:flex;gap:10px;flex-wrap:nowrap;justify-content:center;
  margin:18px 0 20px;font-family:'Ubuntu',sans-serif;
}
.lesson-meta-tag{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;
  letter-spacing:0.02em;padding:9px 16px;border-radius:7px;color:#fff;
  text-decoration:none;transition:transform .15s, box-shadow .15s;
  white-space:nowrap;
}
.lesson-meta-tag .material-icons-outlined{font-size:17px;}
a.lesson-meta-tag:hover{transform:translateY(-1px);box-shadow:0 3px 0 rgba(0,0,0,0.12);}
.lmt-subject{background:#2f7dd1;}
.lmt-age{background:#2f9e6f;}

/* Barra social, estilo newwws.today — sempre uma linha só (nowrap), os
   botões encolhem juntos no celular em vez de quebrar linha. */
.lesson-share-row{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:0 0 32px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  flex-wrap:nowrap;
}
.lesson-share-btn{
  display:inline-flex;align-items:center;justify-content:center;background:none;border:none;
  border-radius:7px;width:40px;height:40px;flex:0 0 auto;
  color:var(--ink-soft);cursor:pointer;text-decoration:none;transition:background .15s,color .15s;
}
.lesson-share-btn:hover{background:var(--cream-2);color:var(--ink);}
.lesson-share-btn .material-icons-outlined{font-size:19px;}
.lesson-share-btn svg{display:block;}
.lesson-share-btn.is-liked{color:#e0577a;}
.lsb-facebook{color:#1877f2;}
.lsb-facebook:hover{background:#e8f0fe;color:#1877f2;}
.lsb-x{color:#000;}
.lsb-x:hover{background:#eee;color:#000;}
.lsb-whatsapp{color:#25d366;}
.lsb-whatsapp:hover{background:#e3f9ea;color:#25d366;}

/* Botão "ver fonte original" */
.lesson-source-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;background:var(--lb-accent-dark,#1263b8);color:#fff;font-weight:700;
  font-family:'Ubuntu',sans-serif;padding:16px 20px;border-radius:7px;text-decoration:none;
  margin:0 0 8px;transition:opacity .15s;
}
.lesson-source-btn:hover{opacity:0.9;}

/* Relacionados */
.lesson-related{margin:40px 0 0;padding:28px 0 0;border-top:1px solid var(--line);}
.lesson-related h2{
  font-family:'Ubuntu',sans-serif;font-weight:700;color:#1a5fb4;font-size:1.3rem;margin:0 0 16px;
}
.lesson-related-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width:640px){ .lesson-related-grid{grid-template-columns:repeat(3,1fr);} }
.lesson-related-card{
  display:flex;flex-direction:column;gap:6px;background:var(--lb-paper,#fff);
  border:1px solid var(--line);border-radius:7px;padding:16px 18px;text-decoration:none;
  color:var(--ink);transition:box-shadow .15s,transform .15s;
}
.lesson-related-card:hover{box-shadow:0 4px 14px rgba(0,0,0,0.08);transform:translateY(-2px);}
.lesson-related-subject{
  font-size:11px;text-transform:uppercase;letter-spacing:0.04em;color:var(--lb-accent,#2f7dd1);font-weight:700;
}
.lesson-related-card strong{font-size:0.98rem;line-height:1.35;}
.lesson-related-age{font-size:12px;color:var(--ink-soft);}

/* referência ao post original */
.lesson-source-promo{display:flex;gap:14px;align-items:flex-start;margin:26px 0 8px;padding:18px 20px;border:1px solid var(--lb-accent-dark,#1263b8);border-radius:12px;background:#f1f7fd;}
.lesson-source-promo>.material-icons-outlined{font-size:30px;color:var(--lb-accent-dark,#1263b8);flex:none;}
.lesson-source-promo strong{display:block;font-family:'Ubuntu',sans-serif;font-size:1.05rem;margin-bottom:4px;}
.lesson-source-promo p{margin:0 0 8px;line-height:1.55;}
.lesson-source-promo .lsp-hint{font-size:.9rem;color:var(--ink-soft);}
.lesson-source-promo .lesson-source-btn{width:auto;display:inline-flex;margin:4px 0 0;}
.lesson-source-ref{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:22px 0 4px;font-size:.9rem;color:var(--ink-soft);}
.lesson-source-ref .material-icons-outlined{font-size:18px;}
.lesson-source-ref a{color:var(--lb-accent-dark,#1263b8);}

/* capa original do post: mostra inteira (sem recorte), centralizada */
.lb-photo.is-cover img{object-fit:contain;max-height:560px;background:#f4f8fc;}

/* Topo estilo noticia: foto da postagem no lugar do cenario pixelado, titulo logo abaixo */
.lesson-news-hero{max-width:820px;margin:8px 0 22px}
.lnh-img{position:relative;width:100%;height:340px;border-radius:18px;overflow:hidden;background:var(--cream-2,#efe8dc)}
.lnh-img img{width:100%;height:100%;object-fit:cover;display:block}
.lnh-tag{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:6px;background:rgba(20,26,33,.72);color:#fff;font-size:12px;font-weight:600;padding:6px 14px;border-radius:999px}
.lnh-tag .material-icons-outlined{font-size:16px}
.lnh-credit{font-size:11px;color:var(--ink-soft,#777);margin-top:6px;text-align:right}
.lnh-credit a{color:inherit}
.lnh-title{font-family:'Fraunces',serif;font-weight:500;font-size:34px;line-height:1.2;margin:18px 0 0;max-width:720px}
@media (max-width:640px){.lnh-img{height:210px;border-radius:14px}.lnh-title{font-size:26px}}

/* ajustes do topo: voltar acima da foto, tags quadradas e data ao lado */
.lnh-back{display:inline-flex;margin:6px 0 14px}
.lnh-credit{text-align:left;margin-top:8px}
.lesson-news-hero + .back-link{display:none}
.lesson-meta-row .lesson-meta-tag{border-radius:6px}
.lesson-meta-date{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-soft,#6b7280);font-weight:600}
.lesson-meta-date .material-icons-outlined{font-size:17px}

/* topo mais compacto: menos espaco acima do voltar; tags e data numa linha so, alinhadas */
.detail-hero:has(.lnh-back){padding-top:10px}
.lnh-back{margin:0 0 10px}
.lesson-meta-row{align-items:center;gap:8px;margin:14px 0 16px}
.lesson-meta-date{white-space:nowrap;margin-left:4px}
@media (max-width:600px){
  .lesson-meta-tag{font-size:12px;padding:7px 10px;gap:5px}
  .lesson-meta-tag .material-icons-outlined{font-size:15px}
  .lesson-meta-date{font-size:12px;gap:4px}
  .lesson-meta-date .material-icons-outlined{font-size:15px}
  .lesson-meta-row{gap:6px}
}