/*
 * Episode Grid Card — shared tile styles for podcast episode grids.
 * Used by podcast-episode-grid and podcast-show-section blocks.
 *
 * Structure:
 *   .episode-grid__card     — flex wrapper
 *   .episode-grid__link     — square tile with aspect-ratio
 *   .episode-grid__artwork  — cover image
 *   .episode-grid__overlay  — hover overlay with label + title
 *   .episode-grid__label    — episode number / trailer tag
 *   .episode-grid__title    — episode title
 */

/* Cancel global li + li margin-top inside grid layouts */

.episode-grid__list li + li {
    margin-top: 0;
}

/* Card — square tile */

.episode-grid__card {
    display: flex;
}

.episode-grid__link {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    text-decoration-line: none;
}

/* Artwork fills the square */

.episode-grid__artwork {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hover overlay — dims artwork, reveals info */

.episode-grid__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--space-5);
    gap: var(--space-2);
    background: rgba(0, 74, 174, 0.85); /* --color-blue-medium at 85% */
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.episode-grid__link:hover .episode-grid__overlay,
.episode-grid__link:focus-visible .episode-grid__overlay {
    opacity: 1;
}

/* Overlay text */

.episode-grid__label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-blue-light);
}

.episode-grid__title {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-snug);
    color: var(--color-white);
    margin: 0;
}

/* Fallback artwork — season or show art as background, dark overlay always visible */

.episode-grid__link--fallback-art .episode-grid__overlay {
    opacity: 1;
    background: rgba(1, 1, 51, 0.75); /* --color-blue-dark at 75% */
    transition: background-color var(--transition-slow);
}

.episode-grid__link--fallback-art:hover .episode-grid__overlay,
.episode-grid__link--fallback-art:focus-visible .episode-grid__overlay {
    background: rgba(0, 74, 174, 0.85); /* --color-blue-medium at 85% */
}

/* No artwork fallback — dark blue tile, overlay always visible */

.episode-grid__link--no-artwork {
    background: var(--color-blue-dark);
}

.episode-grid__link--no-artwork .episode-grid__overlay {
    opacity: 1;
    background: transparent;
    transition: background-color var(--transition-slow);
}

.episode-grid__link--no-artwork:hover .episode-grid__overlay,
.episode-grid__link--no-artwork:focus-visible .episode-grid__overlay {
    background: var(--color-berkeley-blue);
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .episode-grid__overlay,
    .episode-grid__link--fallback-art .episode-grid__overlay,
    .episode-grid__link--no-artwork .episode-grid__overlay {
        transition: none;
    }
}