/*
 * A5 consolidated band-content template (/stringtheory, /strikingachord,
 * /thesoundofwarped, /big-sound). Page-namespaced BEM (.bandc-*). Brand accents
 * via var(--brand-*). Product-card + grid styles inherited from catalog.css
 * (loaded first). One stylesheet drives every section type; sections a page
 * lacks simply aren't emitted.
 */

.bandc {
    color: #212529;
}

/* -- Hero ---------------------------------------------------------------- */

.bandc-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62vh;
    max-height: 80svh;
    padding: 4rem 0;
    color: #fff;
    text-align: center;
    background-color: #111;
    background-image:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0.7) 100%),
        var(--bandc-hero-image, none);
    background-size: cover;
    background-position: center;
}

.bandc-hero__inner {
    max-width: 720px;
}

.bandc-hero__logo {
    max-width: 460px;
    width: 100%;
    height: auto;
    margin: 0 auto 1.25rem;
}

.bandc-hero__title {
    margin: 0 0 1rem;
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bandc-hero__subtitle {
    margin: 0 auto 1.75rem;
    max-width: 40em;
    font-size: 1.1875rem;
    line-height: 1.45;
}

.bandc-hero__cta {
    margin-top: 0.5rem;
}

/* -- Richtext ------------------------------------------------------------ */

.bandc-richtext {
    padding: 3.5rem 0;
}

/* The richtext body is always a centered, max-width column (below), so its
   heading must center to match it. Without this rule `.section-title` has no
   declaration of its own and falls back to a full-width, left-aligned block —
   the header-left / copy-centered misalignment reported on The Sound Of Warped
   (#26). Centering the heading is the page-agnostic default for EVERY
   band-content richtext block, not a per-page look, so it lives on the base
   selector. */
.bandc-richtext .section-title {
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
}

.bandc-richtext__body {
    max-width: 46rem;
    margin: 0 auto;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #333;
}

.bandc-richtext .section-title + .bandc-richtext__body {
    margin-top: 1.25rem;
}

.bandc-richtext__image {
    display: block;
    width: 100%;
    height: auto;
    margin: 2rem auto 0;
    border-radius: 4px;
}

/* -- Roster (grid of cards) ---------------------------------------------- */

.bandc-roster {
    padding: 3.5rem 0;
    background: #f9f9f9;
}

.bandc-roster__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem 1.25rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.bandc-card {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.bandc-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.bandc-card__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background-color: #e6e6e6;
    background-image: var(--bandc-card-image, none);
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    overflow: hidden;
}

.bandc-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.28);
    transition: background 0.2s ease;
}

.bandc-card__link:hover .bandc-card__thumb,
.bandc-card__link:focus-visible .bandc-card__thumb {
    transform: translateY(-4px);
}

.bandc-card__thumb {
    transition: transform 0.2s ease;
}

.bandc-card__link:hover .bandc-card__play {
    background: rgba(0, 0, 0, 0.12);
}

.bandc-card__name {
    margin-top: 0.6rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25;
}

.bandc-card__band {
    font-size: 0.8125rem;
    color: #6b6b75; /* 5.27:1 on white; #777 was 4.48:1 (WAVE, 2026-09-21) */
}

.bandc-card--episode .bandc-card__thumb--static {
    aspect-ratio: 1;
}

.bandc-card__links {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 0.55rem;
    font-size: 1.15rem;
}

.bandc-card__links a {
    color: #333;
}

.bandc-card__links a:hover,
.bandc-card__links a:focus-visible {
    color: var(--brand-accent-text, var(--brand-primary));
}

/* -- Feature list (story bands) ------------------------------------------ */

.bandc-features {
    padding: 3.5rem 0;
}

/* Give the features heading (e.g. "The Artists") room to breathe above the
   grid — noticeable now that thesoundofwarped opens without its hero. */
.bandc-features .section-title {
    margin: 1rem 0 2.5rem;
}

.bandc-feature {
    margin-bottom: 3rem;
}

.bandc-feature:last-child {
    margin-bottom: 0;
}

/* split: media beside copy (The Sound Of Warped) */
.bandc-feature--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}

.bandc-feature__name {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Band names, eyebrows and focus text on this page use the AA accent-text
   token: the raw accent is 3.58:1 as text on white (WAVE on
   .bandc-feature__band, 2026-09-21). The raw accent stays for the rule bars,
   hero underline and pagination bullets, which are not text. */
.bandc-feature__band {
    margin: 0 0 1rem;
    font-weight: 700;
    color: var(--brand-accent-text, var(--brand-primary));
}

.bandc-feature__body {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

.bandc-feature__pack {
    max-width: 220px;
    margin-top: 1.25rem;
}

/* lead: large centered video + copy (Big Sound) */
.bandc-feature--lead {
    max-width: 60rem;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.bandc-feature--lead .bandc-feature__name {
    font-size: 2.25rem;
    margin-bottom: 1.25rem;
}

.bandc-feature--lead .bandc-feature__body {
    max-width: 46rem;
    margin: 1.5rem auto 0;
    text-align: left;
}

/* video facades */
.bandc-feature__video {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    overflow: hidden;
    background-color: #111;
    background-image: var(--bandc-feature-poster, none);
    background-size: cover;
    background-position: center;
}

.bandc-feature__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.75rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
    transition: background 0.2s ease;
}

.bandc-feature__play--lg {
    font-size: 3.5rem;
}

.bandc-feature__video:hover .bandc-feature__play,
.bandc-feature__video:focus-visible .bandc-feature__play {
    background: rgba(0, 0, 0, 0.12);
}

.bandc-video__embed {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    overflow: hidden;
}

.bandc-video__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* -- Quote --------------------------------------------------------------- */

.bandc-pullquote {
    padding: 2.5rem 0;
}

.bandc-quote {
    margin: 1.5rem 0 0;
    padding-left: 1.25rem;
    border-left: 3px solid var(--brand-primary);
}

.bandc-quote p {
    margin: 0 0 0.5rem;
    font-size: 1.1875rem;
    font-style: italic;
    line-height: 1.5;
}

.bandc-quote cite {
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 700;
    color: #555;
}

.bandc-quote--standalone {
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
    border-left: 0;
    padding-left: 0;
}

.bandc-feature--lead .bandc-quote {
    max-width: 46rem;
    margin: 1.75rem auto 0;
    text-align: left;
}

/* -- Featured episode ---------------------------------------------------- */

/*
 * A single spotlighted episode (a video interview on String Theory, or an
 * audio podcast episode with an inline SoundCloud player on Striking A Chord):
 * media on one side, the guest + copy + listen options on the other. Generic
 * and shared — the page config decides whether the media is a video facade or
 * a still, and whether an audio player and/or streaming links appear.
 */
.bandc-featured {
    padding: 3.5rem 0;
}

.bandc-featured__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

.bandc-featured__eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-accent-text, var(--brand-primary));
}

.bandc-featured__name {
    margin: 0 0 0.15rem;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.bandc-featured__band {
    margin: 0 0 1rem;
    font-weight: 700;
    color: var(--brand-accent-text, var(--brand-primary));
}

/* The legacy "pink accent" rule under the guest name. */
.bandc-featured__rule {
    width: 3.5rem;
    height: 4px;
    margin: 0 0 1.25rem;
    background: var(--brand-primary);
    border-radius: 2px;
}

.bandc-featured__body {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #333;
}

.bandc-featured__media {
    position: relative;
}

/* Still image (audio episodes) — a background box so an unseeded/404 CDN
   object degrades to a neutral panel instead of a broken <img>. */
.bandc-featured__still {
    display: block;
    aspect-ratio: 1;
    background-color: #e6e6e6;
    background-image: var(--bandc-featured-image, none);
    background-size: cover;
    background-position: center;
    border-radius: 4px;
}

.bandc-featured__player {
    margin-top: 1.5rem;
}

.bandc-featured__player iframe {
    display: block;
    width: 100%;
    border: 0;
}

.bandc-featured__listen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b6b75; /* 5.27:1 on white; #777 was 4.48:1 (WAVE, 2026-09-21) */
}

.bandc-featured__listen a {
    font-size: 1.35rem;
    color: #333;
    line-height: 1;
}

.bandc-featured__listen a:hover,
.bandc-featured__listen a:focus-visible {
    color: var(--brand-accent-text, var(--brand-primary));
}

/* -- Opt-in page themes -------------------------------------------------- */

/*
 * Per-page look, applied only when a page's config declares `page_class`. The
 * shared template/partials stay page-agnostic — they merely echo the class —
 * and each page opts into its own treatment here. No page's styling leaks onto
 * another because every rule is scoped under its page class.
 */

/* Striking A Chord — black hero + hot-pink accent (matches the legacy
   green-duotone-mics / pink-lightning art direction). */
.bandc--strikingachord .bandc-hero {
    background-color: #000;
    background-image:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.8) 100%),
        var(--bandc-hero-image, none);
}

.bandc--strikingachord .bandc-hero__title {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

.bandc--strikingachord .bandc-hero__title::after {
    content: "";
    display: block;
    width: 4rem;
    height: 4px;
    margin: 1.1rem auto 0;
    background: var(--brand-primary);
    border-radius: 2px;
}

/* String Theory — subtle stronger scrim so the centered wordmark reads over a
   busy photographic header. */
.bandc--stringtheory .bandc-hero {
    background-image:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.75) 100%),
        var(--bandc-hero-image, none);
}

/* -- Gallery ------------------------------------------------------------- */

.bandc-gallery {
    padding: 1rem 0 3.5rem;
}

.bandc-gallery__swiper {
    margin-top: 1.75rem;
    padding-bottom: 2.5rem;
}

.bandc-gallery__slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 4px;
}

.bandc-gallery .swiper-button-prev,
.bandc-gallery .swiper-button-next,
.bandc-gallery .swiper-pagination-bullet-active {
    color: var(--brand-primary);
    --swiper-theme-color: var(--brand-primary);
}

/* No-JS / pre-init fallback: stack the slides so they never collapse. */
.bandc-gallery__swiper:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* -- Responsive ---------------------------------------------------------- */

@media (max-width: 991.98px) {
    .bandc-roster__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .bandc-hero__title {
        font-size: 2.25rem;
    }
}

@media (max-width: 767.98px) {
    .bandc-hero {
        background-image:
            linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0.7) 100%),
            var(--bandc-hero-image-tablet, var(--bandc-hero-image, none));
    }

    .bandc--strikingachord .bandc-hero {
        background-image:
            linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.8) 100%),
            var(--bandc-hero-image-tablet, var(--bandc-hero-image, none));
    }

    .bandc-roster__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bandc-feature--split,
    .bandc-featured__inner {
        grid-template-columns: 1fr;
    }

    .bandc-featured__name {
        font-size: 1.6rem;
    }

    .bandc-gallery__swiper:not(.swiper-initialized) .swiper-wrapper {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .bandc-hero {
        background-image:
            linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0.7) 100%),
            var(--bandc-hero-image-mobile, var(--bandc-hero-image-tablet, var(--bandc-hero-image, none)));
    }

    .bandc--strikingachord .bandc-hero {
        background-image:
            linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.8) 100%),
            var(--bandc-hero-image-mobile, var(--bandc-hero-image-tablet, var(--bandc-hero-image, none)));
    }

    .bandc-hero__title {
        font-size: 1.75rem;
    }

    .bandc-hero__subtitle {
        font-size: 1.0625rem;
    }
}