/* =========================================================
   VIDEOS PAGE
========================================================= */

.videos-page {
    min-height: 100vh;
    background: var(--background);
    color: var(--text-primary);
}

.videos-page > .page-return {
    margin-left: max(2rem, calc((100% - 1180px) / 2 + 3rem));
}


/* =========================================================
   HERO
========================================================= */

.videos-hero {
    min-height: 56vh;
    display: flex;
    align-items: center;
    padding: 5rem 2rem 6rem;
}

.videos-hero-inner {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 0 3rem;
    box-sizing: border-box;
}

.videos-hero h1 {
    max-width: 900px;
    margin: 0.65rem 0 1.4rem;

    color: #f4f2ec;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(3.5rem, 8vw, 7rem);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.035em;
}

.videos-introduction {
    max-width: 700px;
    margin: 0;

    color: #b8becf;
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.8;
}


/* =========================================================
   COLLECTION
========================================================= */

.videos-section {
    width: min(1180px, calc(100% - 4rem));
    margin: 0 auto;
    padding: 7rem 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
}

.videos-section-heading {
    max-width: 720px;
}

.videos-section-heading h2 {
    margin: 0 0 1rem;

    color: #f4f2ec;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(2.4rem, 4.2vw, 3.8rem);
    font-weight: 400;
    line-height: 1.05;
}

.videos-section-heading p {
    margin: 0;
    color: #b8becf;
    line-height: 1.8;
}

.video-editions {
    margin-top: 3.5rem;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

    .videos-page > .page-return {
        margin-left: 3.25rem;
    }

    .videos-hero {
        min-height: auto;
        padding: 4rem 1.5rem 5rem;
    }

    .videos-hero-inner {
        padding: 0 1.75rem;
    }

    .videos-section {
        width: calc(100% - 3rem);
        padding: 5.5rem 1.75rem;
    }
}

@media (max-width: 650px) {

    .videos-page > .page-return {
        margin-left: 1.75rem;
    }

    .videos-hero-inner {
        padding: 0;
    }

    .videos-section {
        width: calc(100% - 2rem);
        padding: 4.5rem 1.25rem;
    }
}

.lyrics-edition-video {
    width: 100%;
    max-width: 920px;
    display: block;
    margin: 2rem auto 0;
    border-radius: 16px;
}
/* =========================================================
   DYNAMIC LYRICS EDITIONS
========================================================= */

.lyrics-edition {
    padding: 3.75rem 0 5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lyrics-edition:first-child {
    padding-top: 0;
}

.lyrics-edition:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.lyrics-edition-heading {
    max-width: 760px;
    margin: 0 auto;
}

.lyrics-edition-heading h2 {
    margin: 0;
    color: #f4f2ec;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(2.5rem, 5vw, 4.2rem);
    font-weight: 400;
    line-height: 1;
}

.edition-number {
    margin: 0.8rem 0 0;
    color: #c7b37a;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.edition-description {
    max-width: 680px;
    margin: 1.2rem 0 0;
    color: #b8becf;
    line-height: 1.8;
}

.video-editions-empty {
    margin: 3rem 0 0;
    color: #b8becf;
    line-height: 1.8;
}