/* Descripción del video (/<lang>/videos/<id>/): entera en el HTML, plegada a cinco líneas.
   js/video-descripcion.js muestra el botón › solo si hay más texto y anima la altura. */
.hero-description p { margin: 0 0 0.8rem; }
.hero-description p:last-child { margin-bottom: 0; }
.hero-description a { color: var(--bs-primary); overflow-wrap: anywhere; }
.hero-description {
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.hero-description[data-collapsed] {
  max-height: calc(1.7em * 5);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.hero-description:has(+ .hero-desc-toggle:not([hidden])) { margin-bottom: 0.25rem; }

/* Discreto: solo el chevrón, sin caja; el área táctil sigue siendo cómoda. */
.hero-desc-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 0 1.25rem -6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--bs-text-2);
  cursor: pointer;
}
.hero-desc-toggle[hidden] { display: none; }
.hero-desc-toggle:hover,
.hero-desc-toggle:focus-visible { color: var(--bs-primary); }
.hero-desc-toggle svg { transition: transform 0.3s ease; }
.hero-desc-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

/* Desplegada, la descripción es mucho más alta que el video: el video se queda
   arriba y acompaña el scroll en vez de quedar centrado a media columna. La clase
   la pone el JS y la quita al terminar de plegar, para que no salte a mitad. */
@media (min-width: 901px) {
  .video-hero.desc-open { align-items: start; }
  .video-hero.desc-open .hero-video { position: sticky; top: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-description,
  .hero-desc-toggle svg { transition: none; }
}