/* ==========================================================================
   Portadas de evento — marcador, fundido y el lugar vacío con el deporte.

   La cargan _Layout y el home (Layout = null). Vive en su propia hoja y no en
   gallery.css porque la misma tarjeta se dibuja en la galería, el home y el
   404: una regla que sólo carga una página renderiza las otras dos con el
   HTML correcto y sin ningún efecto (la lección de .pbar en el panel).

   Los colores llevan su valor de respaldo porque el home no carga el tema.
   ========================================================================== */

/* Dos capas: el envoltorio pinta el color y la miniatura borrosa (inline, desde
   CoverImageTagHelper) y la foto entra encima con un fundido cuando termina de
   cargar. Ocupa el contenedor de la portada, que ya reserva la proporción. */
.ps-cover {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
}

/* La especificidad de dos clases es a propósito: .ga-frame__cover img y sus
   hermanas declaran su propio transition para el zoom del hover, y con una
   sola clase el fundido se perdía sin ningún error. Se repite el transform
   para no apagarles ese zoom. */
.ps-cover .ps-cover__img {
    opacity: 0;
    transition: opacity .3s ease-out, transform .35s ease;
}
.ps-cover .ps-cover__img.is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .ps-cover .ps-cover__img { transition: none; }
}

/* ---------- Sin portada: el deporte sobre carbón ---------- */
.ps-nocover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--charcoal, #111118);
    color: var(--muted, #6B6B80);
}
.ps-nocover__glyph {
    width: 44px;
    height: 44px;
}
.ps-nocover__label {
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    /* El texto necesita más contraste que el trazo: el apagado sobre carbón
       no llega a 4.5:1 en 11 px. */
    color: var(--text-secondary, #9898A8);
}

/* ---------- Cabecera sin portada: la pista del deporte ----------
   _TrackBackdrop.cshtml. Llena la banda de la ficha del evento cuando no hay
   portada: calles en línea fina, el ícono en grande y un resplandor violeta
   difuminado. Va detrás del velo de .ps-band / .pvx-hero. */
.ps-trackdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 70% at 78% 62%, rgba(59, 51, 128, .75) 0%, rgba(59, 51, 128, .18) 45%, rgba(17, 17, 24, 0) 75%),
        var(--charcoal, #111118);
    color: var(--border-light, #2E2E3A);
}
.ps-trackdrop__lanes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.ps-trackdrop__lane { stroke: var(--ice-bright, #9589F0); opacity: .55; }
.ps-trackdrop__glyph {
    position: absolute;
    right: clamp(12px, 9vw, 150px);
    top: clamp(72px, 14%, 120px);
    width: clamp(120px, 20vw, 280px);
    aspect-ratio: 1;
    color: var(--ice-bright, #9589F0);
    opacity: .85;
}
.ps-trackdrop__glyph .ps-nocover__glyph {
    width: 100%;
    height: 100%;
    stroke-width: .6;
}
@media (max-width: 767px) {
    .ps-trackdrop__glyph { opacity: .6; }
}
/* En la banda de un evento publicado (más baja que la de la preventa) el
   ícono se acota a su alto, y el velo general de .ps-band se aliviana: está
   pensado para fotos, y sobre el carbón apagaba la pista entera. */
.ps-band .ps-trackdrop__glyph {
    width: auto;
    height: 72%;
    top: 50%;
    transform: translateY(-50%);
}
.ps-band:has(.ps-trackdrop)::after {
    background: linear-gradient(to top, var(--black) 0%, rgba(10, 10, 15, .5) 30%, transparent 70%);
}