/* «Latest from the channel» (channel.js): últimos episodios de YouTube en la portada y en About.
   El diseño depende del ancho de la caja (container queries), no de la pantalla: lista en el móvil y en cajas
   estrechas, 2 columnas en About y 4 en la portada de escritorio. Las tarjetas vacías del HTML miden lo mismo
   que las de verdad (nada salta al llegar los vídeos). */
.ch-box { container-type: inline-size; }
.ch-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ch-grid > li { display: flex; min-width: 0; }

/* lista: miniatura a la izquierda y el título al lado */
.ch-card {
  flex: 1; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; min-height: 101px;
  padding: 8px 12px 8px 8px; background: var(--white); color: var(--ink); text-decoration: none;
  border: var(--line) solid var(--ink); border-radius: 16px; box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease;
}
a.ch-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.ch-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-3); border: 2px solid var(--ink); border-radius: 9px; }
.ch-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
a.ch-card:hover .ch-thumb img { transform: scale(1.04); }
/* botón de play con el rojo del sello (no el logo de YouTube), en la esquina: no tapa el gancho de la miniatura */
.ch-play {
  position: absolute; right: 6px; bottom: 6px; width: 34px; height: 24px; display: grid; place-items: center;
  background: var(--seal); border: 2px solid var(--ink); border-radius: 9px; box-shadow: 2px 2px 0 var(--ink); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.ch-play svg { width: 14px; height: 14px; fill: #fff; }
a.ch-card:hover .ch-play { transform: scale(1.14) rotate(-5deg); }
.ch-txt { display: grid; gap: 6px; align-content: start; min-width: 0; padding-top: 2px; }
.ch-title { font: 700 15px/1.3 var(--f-display); overflow-wrap: break-word; }
.ch-date { font: 700 12px/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }

/* tarjeta vacía mientras llega channel.json */
.ch-skel .ch-card { box-shadow: var(--shadow-sm); }
.ch-skel .ch-txt i { display: block; height: 14px; margin-top: 3px; border-radius: 7px; background: var(--paper-2); }
.ch-skel .ch-txt i:first-child { width: 92%; }
.ch-skel .ch-txt i:last-child { width: 55%; }
.ch-none { justify-content: flex-start; }

.ch-more { margin-top: 26px; }
.ch-more .btn svg { width: 1.35em; height: 1.35em; flex: none; }

/* caja ancha: tarjetas con la miniatura arriba (2 columnas; 4 si cabe) */
@container (min-width: 540px) {
  .ch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .ch-card { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; border-radius: 18px; min-height: 0; }
  .ch-thumb { border: 0; border-bottom: var(--line) solid var(--ink); border-radius: 0; }
  .ch-txt { gap: 8px; padding: 12px 14px 14px; min-height: 106px; } /* tres líneas de título + la fecha */
  .ch-play { right: 10px; bottom: 10px; width: 46px; height: 32px; border-width: 3px; box-shadow: 3px 3px 0 var(--ink); }
  .ch-play svg { width: 18px; height: 18px; }
}
@container (min-width: 880px) {
  .ch-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .ch-thumb img, .ch-play { transition: none; } }