/* =========================================================
   Mi Piano — el cartel de la pieza
   ---------------------------------------------------------
   La imagen que puede traer un ejercicio o una canción, entre la barra de
   botones y el pentagrama. Ver docs/Cartel de la pieza.md.

   Dos reglas mandan aquí:
   · NUNCA se come la partitura. Alto máximo en `vh`, no en píxeles: en una
     tablet tumbada el alto es lo escaso, y una imagen alta dejaría el
     pentagrama fuera de pantalla.
   · Reserva su sitio desde el primer momento (aspect-ratio): si creciera al
     cargar la imagen, el pentagrama daría un salto justo cuando el niño va
     a tocar.

   QUE CUALQUIER IMAGEN ENCAJE (2026-09-15)
   El cartel es apaisado y las imágenes que trae la gente no lo son: una
   foto casi cuadrada recortada a lo ancho pierde justo lo que importa
   (las cabezas, el título). Por eso `contain` + una copia BORROSA de la
   propia imagen de fondo: la imagen se ve entera y el hueco que sobra a
   los lados queda relleno con sus mismos colores. Es el truco de las
   carátulas, y ahorra tener que recortar nada a mano.
   ========================================================= */

.cartel{display:block;margin:0 0 10px;padding:0;position:relative;
  border-radius:14px;overflow:hidden;background:#f4efe4;
  border:1px solid #e3ded2}
.cartel[hidden]{display:none}

/* El fondo borroso. Lo pone el JS con --cartel-fondo; si no hay imagen,
   se queda el color de siempre y no se nota nada. */
.cartel::before{content:"";position:absolute;inset:-8%;
  background-image:var(--cartel-fondo,none);
  background-size:cover;background-position:center;
  filter:blur(22px) saturate(1.25) brightness(1.05);
  transform:scale(1.15);z-index:0}

.cartel img{display:block;position:relative;z-index:1;
  width:100%;height:auto;
  max-height:44vh;object-fit:contain;object-position:center;
  /* mientras la imagen no ha llegado, el hueco ya tiene esta forma */
  aspect-ratio:1200/520;background:transparent}

/* `cover` para las imágenes que SÍ son apaisadas y se han hecho a medida:
   una cabecera de 1200×520 debe llenar el marco de lado a lado, sin
   franjas. Se pide con imgAjuste:"cover" en los datos de la pieza. */
.cartel img[data-ajuste="cover"]{object-fit:cover}

/* El pie es opcional y va ENCIMA de la imagen, no debajo: debajo empujaría
   el pentagrama hacia abajo, que es justo lo que no queremos. */
.cartel figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:14px 14px 8px;font-size:.82rem;font-weight:600;color:#fff;
  background:linear-gradient(transparent,rgba(24,20,14,.72));
  text-shadow:0 1px 3px rgba(0,0,0,.5)}
.cartel figcaption:empty{display:none}

/* Si la imagen no carga (sin conexión, ruta mal escrita), el hueco vacío
   con su borde parece un fallo. Mejor que no haya nada: lo apaga el JS
   con el onerror, esto es solo el respaldo visual. */
.cartel img[data-rota]{display:none}

/* ---------- modo enfoque ----------
   El ⛶ existe para dejar SOLO el pentagrama. Aquí el cartel sobra. */
body.focus .cartel{display:none!important}

/* ---------- móvil ----------
   Se ve, pero más bajito: en una pantalla de teléfono el alto es oro y
   la partitura manda. */
@media (max-width:640px){
  .cartel{margin-bottom:8px;border-radius:12px}
  .cartel img{max-height:28vh;aspect-ratio:1200/400}
  .cartel figcaption{padding:10px 10px 6px;font-size:.76rem}
}

/* En apaisado y bajito (tablet tumbada) el alto es aún más escaso.
   Aquí el cartel NO dobla: con 500 px de pantalla, 44vh dejarían el
   pentagrama fuera, que es lo único que no se negocia. */
@media (max-height:520px){
  .cartel img{max-height:22vh;aspect-ratio:1200/300}
}