/* /pages/shows/css/featured-window.css */

/* Section wrapper */
.shows-featured-section {
    background: #000;
    padding: 3.2rem 0 3.8rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.shows-featured-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.75rem;
    text-align: center;
    box-sizing: border-box;
}

.shows-featured-title {
    font-family: 'Algerian', var(--header-font, serif);
    font-size: 2.5rem;
    color: #f1d79a;
    margin-bottom: 0.6rem;
    text-shadow:
        0 3px 6px rgba(0,0,0,0.7),
        0 12px 28px rgba(0,0,0,0.9);
}

.shows-featured-subtitle {
    font-family: sans-serif;
    color: #e6e6e6;
    opacity: 0.88;
    font-size: 1rem;
    margin: 0 0 2.1rem;
}

/* Group headings */
.shows-featured-group {
    margin-bottom: 2.4rem;
}

.shows-featured-heading {
    font-family: 'Algerian', var(--header-font, serif);
    font-size: 1.45rem;
    color: #c8a763;
    margin: 0 0 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Base: all featured lists are single-column on mobile */
.shows-featured-list {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

/* "Later This Month" list gets 2 columns on desktop */
@media (min-width: 1100px) {
    .shows-featured-list--month {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .shows-featured-list--month .show-card {
        flex: 0 0 calc(50% - 0.8rem);
    }
}

/* "This Weekend" uses .shows-featured-list WITHOUT --month,
   so it stays single-column at all widths. */


/* FEATURED WEEKEND CARDS – extra emphasis */
.show-card--featured {
    border-width: 2px;
    border-color: rgba(241,215,154,0.9);
    box-shadow:
        0 0 30px rgba(241,215,154,0.16),
        0 14px 32px rgba(0,0,0,0.95);
    background: radial-gradient(circle at top left,
        rgba(241,215,154,0.24),
        rgba(0,0,0,0.98));
    transform: translateY(var(--hover-translate)) scale(calc(var(--scroll-scale) + 0.02));
}

.show-card--featured .show-card-date {
    background: rgba(241,215,154,0.22);
    border-color: rgba(241,215,154,0.7);
}

.show-card--featured .show-card-btn.primary {
    box-shadow: 0 7px 18px rgba(241,215,154,0.5);
}

/* THIS MONTH (non-weekend) – slightly toned down but still special */
.show-card--month-highlight {
    border-width: 1.5px;
    border-color: rgba(200,167,99,0.8);
    background: radial-gradient(circle at top left,
        rgba(200,167,99,0.16),
        rgba(0,0,0,0.96));
}

/* Small layout tweaks when section collapses to single-column */
@media (max-width: 768px) {
    .shows-featured-inner {
        padding: 0 1.2rem;
    }

    .shows-featured-title {
        font-size: 2.1rem;
    }

    .shows-featured-subtitle {
        font-size: 0.96rem;
        margin-bottom: 1.7rem;
    }

    .shows-featured-list .show-card {
        width: 100%;
    }

    .show-card--featured,
    .show-card--month-highlight {
        padding: 0.9rem 0.95rem 1.1rem;
    }

    .show-card-btn {
        width: 100%;
        text-align: center;
    }
}

/* Make anchor jump play nicely with fixed header */
.shows-featured-section {
    scroll-margin-top: 120px; /* tweak to match header height */
}

/* Desktop: enlarge photos for "This Week" featured shows */
@media (min-width: 1100px) {
    .show-card--featured .show-card-photo {
        max-width: 100%;
        height: auto;
        max-height: 420px; /* adjust as needed */
        border-radius: 8px;
        object-fit: cover;

        /* stronger shadow so it feels premium */
        box-shadow: 0 10px 28px rgba(0,0,0,0.65);
    }

    .show-card--featured .show-card-photo-wrap {
        width: 100%;
        margin-top: 1rem;
        margin-bottom: 1.4rem;
    }
}

.show-card--soonest {
    border: 2px solid #c8a763;
    box-shadow: 0 0 18px rgba(200,167,99,0.55), 0 0 32px rgba(200,167,99,0.35);
    position: relative;
}

/* Optional glowing ring */
.show-card--soonest::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 28px rgba(200,167,99,0.75);
}

/* ============================================
   NEXT SHOW BADGE — styled like the date bubble
   ============================================ */

.show-card-next-badge {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;

    padding: 0.15rem 0.75rem;
    font-family: 'Algerian', serif;
    font-size: 1rem;           /* matches date size */
    letter-spacing: 0.03em;
    text-transform: uppercase;

    border-radius: 999px;
    border: 1px solid rgba(200,167,99,0.55);
    background: rgba(200,167,99,0.12);   /* same faint gold haze used by date bubble */
    color: #c8a763;

    box-shadow:
        0 1px 4px rgba(0,0,0,0.45),
        inset 0 0 4px rgba(200,167,99,0.25);

    pointer-events: none;
    z-index: 10;
}

@media (max-width: 1200px) {
    .show-card-next-badge {
        left: auto;              /* cancel horizontal centering */
        transform: none;
        right: 0.5rem;           /* position at top right */
        top: 0.5rem;
        margin-top: 6px;
    }
}