/*
        separate film page
    */

    .film-edition-notice {
        grid-column: 1 / -1;
        margin-bottom: var(--space-lg);
        padding: var(--space-sm) var(--space-md);
        background: var(--bg-main);
        color: var(--accent);
    }

    .film-edition-notice p {
        margin: 0;
        font-size: var(--fs-sm);
        letter-spacing: .01em;
    }
    
    .gallery-container {
        grid-column: 1 / -1;
        position: relative;
        margin-bottom: var(--space-5xl);
    }

    #film-shots {
        position: relative;
        background: var(--bg-main);
        overflow: hidden;
        aspect-ratio: 16 / 9;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    #film-shots::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
        pointer-events: none;
        z-index: 1;
    }

    #film-shots img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 0.4s var(--transition);
    }

    #film-shots img.active {
        opacity: 1;
    }

    #film-shots img:first-child {
        opacity: 1;
    }

    .film-info {
        position: absolute;
        bottom: var(--space-xl);
        left: var(--space-xl);
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        max-width: 80%;
    }

    @media (max-width: 768px) {
        .film-info {
            max-width: 100%;
        }
        div.gallery-container div.film-info div.film-details.readeable-text{
            margin-block: 0;
        }
    }

    .film-title {
        font-size: var(--fs-xxl);
        font-weight: normal;
        color: var(--accent);
        margin: 0;
        line-height: 1.1;
        text-shadow: var(--shadow)
    }

    .film-details {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .film-details h3 {
        font-weight: normal;
        color: var(--accent);
        text-shadow: var(--shadow);
    }

    .film-details p {
        color: var(--accent);
        text-shadow: var(--shadow);
    }

    .film-details * {
        font-size: var(--fs-sm);
        vertical-align: baseline;
        margin-right: var(--space-sm);
    }
    
    .film-details * {
        border-right: 2px solid var(--accent);
        padding-right: var(--space-sm);
    }
    .film-details *:last-child{
        border: none;
        padding: 0;
    }

    .film-description {
        grid-column: 1 / 5;
        margin-bottom: var(--space-4xl);
    }

    .film-description p {
        font-size: var(--fs-md);
        color: var(--bg-main);
        line-height: 1.4;
        max-width: 75ch;
    }

    .film-screening-info {
        padding-left: var(--space-5xl);
        grid-column: 5 / -1;
        display: flex;
        flex-direction: column;
        gap: var(--space-xl);
        align-self: start;
    }

    .film-screening-info ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
    }

    .film-screening-info li {
        font-size: var(--fs-md);
        color: var(--bg-main);
        font-weight: normal;
    }

    .film-screening-info button {
        background: transparent;
        border: 2px solid var(--bg-main);
        color: var(--bg-main);
        padding: var(--space-md) var(--space-xl);
        border-radius: var(--radius-medium);
        font-family: inherit;
        font-size: var(--fs-md);
        font-weight: normal;
        cursor: pointer;
        transition: all 0.2s var(--transition);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .film-screening-info button:hover {
        background: var(--bg-main);
        color: var(--accent);
    }

    .film-screening-info a {
        font-size: var(--fs-md);
        text-decoration: none;
    }

    @media (max-width: 768px) {
        .gallery-container {
            margin-bottom: var(--space-xl);
        }

        #film-shots {
            aspect-ratio: 4 / 3;
        }

        .film-info {
            position: inherit;
            top: 0;
            left: 0;
            /* max-width: 70%; */
        }

        .film-title {
            font-size: var(--fs-lg);
            text-shadow: none;
        }

        .film-details *{
            text-shadow: none !important;
        }

        .film-details h3 {
            font-size: var(--fs-sm);
        }

        .film-details p {
            font-size: var(--fs-sm);
        }

        .film-description {
            grid-column: 1 / -1;
            margin-bottom: var(--space-2xl);
        }

        .film-description p {
            font-size: var(--fs-md);
        }

        .film-screening-info {
            grid-column: 1 / -1;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            gap: var(--space-lg);
            padding-left: 0;
        }

        .film-screening-info ul {
            flex: 1;
            align-items: center;
        }

        .film-screening-info button {
            padding: var(--space-sm) var(--space-lg);
            font-size: var(--fs-base);
            white-space: nowrap;
        }

        div.film-screening-info a#nav-tickets.tickets-button{
            margin: 1rem;
            width: 90%;
        }
    }

/*
        FILM PAGES CONTENTS
*/
.gallery-navigation {
    z-index: 200;
    position: absolute;
    display: flex;
    gap: var(--space-md);
    align-items: center;
    bottom: var(--space-lg);
    right: var(--space-lg);
}

/* slideshow counter */
.gallery-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50%;
    color: var(--accent);
    text-shadow: var(--shadow);
        font-size: var(--fs-base);
}

/* slideshow counter */
.gallery-counter {
    font-family: "necto", monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50%;
    color: var(--accent);
    text-shadow: var(--shadow);
        font-size: var(--fs-base);
}

/* slideshow counter */
.gallery-counter {
    display: flex;
    align-items: center;
    height: 50%;
    color: var(--accent);
    text-shadow: var(--shadow);
        font-size: var(--fs-base);
}

.gallery-arrow {
    width: 3rem;
    height: 3rem;
    background: transparent;
    border: none !important;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s var(--transition);
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}

.gallery-arrow:hover {
    background: var(--text-main);
    transform: scale(1.1);
    outline: 2px solid var(--accent);
}

.gallery-arrow:focus {
    outline: 2px solid var(--accent);
    /* outline-offset: 1px; */
    background-color: var(--bg-main-overlay);
    box-shadow: var(--shadow);
}

.gallery-arrow.disabled {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--transition);
}

.gallery-arrow {
    color: var(--accent);
    stroke: var(--accent);
}

.gallery-arrow svg {
    stroke: var(--accent);
    color: var(--accent);
    width: 2rem;
    height: 2rem;
}

#previous {
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    .gallery-navigation {
        bottom: 0;
        right: 0;
        padding: var(--space-sm);
        width: 100%;
        justify-content: space-between;
    }
}