/* historias.css — Histórias infantis */
.dc-historia { max-width: 72ch; margin: 0 auto; }
.dc-historia-controles { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.dc-historia-controles .ativo { background: var(--dc-coral); color:#fff; border-color: var(--dc-coral); }
.dc-historia-capa-wrap { text-align: center; margin: .5rem 0 1rem; }
.dc-historia-capa { max-width: 320px; width: 60%; height: auto; border-radius: 14px; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.dc-historia-texto { font-size: 1.15rem; line-height: 1.8; color: var(--dc-texto); }
.dc-historia-texto p { margin-bottom: 1rem; }
.dc-historia-texto p.lendo { background: #fff3b0; border-radius: 8px; box-shadow: 0 0 0 6px #fff3b0; transition: background .2s; }
/* Índice de histórias */
.dc-historias-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 14px; }
.dc-historia-card { background:#fff; border:1px solid var(--dc-borda); border-radius:12px; overflow:hidden; text-decoration:none; color:var(--dc-texto); display:flex; flex-direction:column; }
.dc-historia-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.12); }
.dc-historia-card img { width:100%; aspect-ratio:3/4; object-fit:cover; background:#eef3ff; }
.dc-historia-card span { padding:.5rem .6rem; font-size:.9rem; font-weight:600; }

/* Capa ao lado do texto (desktop); no celular fica em cima, centralizada */
.dc-historia { display: flow-root; }
@media (min-width: 768px) {
  .dc-historia-capa-wrap { float: left; width: auto; margin: 0 1.5rem .75rem 0; text-align: left; }
  .dc-historia-capa { width: 240px; max-width: 240px; }
}

/* Moral da História (fim de cada história) */
.dc-historia-moral{
  margin-top:1.6rem;margin-bottom:.4rem;font-size:1.15rem;font-weight:800;
  color:var(--dc-primaria,#3367d6);display:flex;align-items:center;gap:.45rem;
}
.dc-historia-moral::before{content:"\2728";font-size:1.1em;}
.dc-historia-texto .dc-historia-moral + p{
  background:#fff8e6;border-left:4px solid var(--dc-terciaria,#efa817);
  padding:.7rem .9rem;border-radius:.4rem;font-style:italic;
}

/* Vídeo da história (YouTube) */
.dc-historia-video{ margin:1.6rem 0; clear:both; }
.dc-historia-video-titulo{ display:flex; align-items:center; gap:.45rem; margin-bottom:.6rem; }
.dc-historia-video-titulo .bi-youtube{ color:#ff0000; font-size:1.3em; }
.dc-video-wrap{ position:relative; width:100%; padding-bottom:56.25%; height:0; overflow:hidden;
  border-radius:var(--dc-raio-medio,12px); box-shadow:var(--dc-sombra-card,0 2px 10px rgba(0,0,0,.12)); background:#000; }
.dc-video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Selo "tem vídeo" nos cards da lista de histórias */
.dc-historia-card { position:relative; }
.dc-card-video-badge{ position:absolute; top:6px; right:6px; z-index:2; display:inline-flex;
  align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%;
  background:rgba(0,0,0,.6); box-shadow:0 1px 4px rgba(0,0,0,.35); }
.dc-card-video-badge .bi-youtube{ color:#ff2d2d; font-size:1.1rem; line-height:1; }

/* Card com capa de vídeo: mostra a miniatura 16:9 inteira */
.dc-historia-card img[data-capa-video="1"] { aspect-ratio:16/9; object-fit:cover; background:#000; }

/* Card com vídeo ocupa 2 colunas para a capa 16:9 caber inteira */
.dc-historia-card.tem-video { grid-column: span 2; }
@media (max-width: 380px){ .dc-historia-card.tem-video { grid-column: span 1; } }