/* Vídeo explicativo do item dentro da Central (V.253) — src/scripts/videoItem.js.
   Simulação aprovada: https://claude.ai/artifact/QPWfgBWR4QYrBLrEBa8TkQ (ícone de câmera discreto, sem vermelho, sem texto). */

/* ícone no card: discreto, ao lado da estrela */
.card-video-btn {
  position: absolute; top: 12px; right: 52px; z-index: 3;
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  color: var(--muted); background: transparent; border: 0; border-radius: 9px; cursor: pointer;
  opacity: 0.75; transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.card-video-btn svg { width: 18px; height: 18px; }
.subcat-cell:hover .card-video-btn, .card-video-btn:hover, .card-video-btn:focus-visible { opacity: 1; color: var(--green-900); background: var(--green-050); }
.card-video-btn:focus-visible { outline: 3px solid rgba(38, 38, 38, 0.35); outline-offset: 2px; }

/* modo vídeo: categorias viram trilho de ícones, itens viram quadradinhos, player no lugar da grade */
.content-layout.modo-video { grid-template-columns: 78px minmax(0, 1fr); }
.content-layout.modo-video .sidebar { padding: 14px 10px; }
.content-layout.modo-video .back-button { justify-content: center; padding: 10px 0; font-size: 0; }
.content-layout.modo-video .back-button::before { content: "←"; font-size: 15px; }
.content-layout.modo-video .sidebar-label { display: none; }
.content-layout.modo-video .sidebar-item { justify-content: center; padding-inline: 0; }

.content-layout.modo-video .content-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.content-layout.modo-video .subcategory-card { min-height: 0; padding: 8px 10px; border-radius: 12px; transform: none; }
.content-layout.modo-video .subcategory-card .card-body { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.content-layout.modo-video .subcategory-card .card-top { margin: 0; }
.content-layout.modo-video .subcategory-card .card-icon { width: 28px; height: 28px; border-radius: 8px; }
.content-layout.modo-video .subcategory-card .card-icon img,
.content-layout.modo-video .subcategory-card .card-icon .material-symbols-rounded { width: 18px; height: 18px; font-size: 18px; }
.content-layout.modo-video .subcategory-card .card-copy h3 { margin: 0; font-size: 12px; line-height: 1.25; letter-spacing: 0; }
.content-layout.modo-video .subcategory-card .card-copy p,
.content-layout.modo-video .subcategory-card .card-origem,
.content-layout.modo-video .card-go,
.content-layout.modo-video .card-fav-btn { display: none; }
.content-layout.modo-video .card-video-btn { top: 4px; right: 4px; width: 20px; height: 20px; opacity: 0.55; }
.content-layout.modo-video .card-video-btn svg { width: 13px; height: 13px; }
.content-layout.modo-video .subcat-cell.is-video-atual > .subcategory-card { color: var(--white) !important; background: var(--green-900) !important; border-color: var(--green-900) !important; }
.content-layout.modo-video .subcat-cell.is-video-atual h3 { color: var(--white) !important; }
.content-layout.modo-video .subcat-cell.is-video-atual .card-icon { background: rgba(255, 255, 255, 0.16); color: var(--white); }
.content-layout.modo-video .is-video-atual .card-video-btn { color: var(--white); opacity: 0.9; }

.video-palco { display: grid; gap: 12px; margin-top: 16px; animation: video-sobe 0.45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes video-sobe { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }
.video-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.video-titulo { margin: 0; font-size: 20px; color: var(--green-900); }
.video-voltar {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  font: inherit; font-size: 13px; font-weight: 800; color: var(--green-900);
  background: var(--green-050); border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
}
.video-voltar .material-symbols-rounded { font-size: 18px; }
.video-player { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: #0f1d18; }
.video-capa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 76px; height: 76px; padding: 0;
  color: var(--green-900); background: rgba(255, 255, 255, 0.95); border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); transition: transform 0.16s ease;
}
.video-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.video-play .material-symbols-rounded { font-size: 44px; }
.video-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 1100px) {
  .content-layout.modo-video .sidebar { display: none; }
  .content-layout.modo-video .content-grid { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .content-layout.modo-video .subcat-cell { flex: 0 0 150px; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .video-palco { animation: none; } }