/*==================================================
    WEDDING FILMS
==================================================*/

.films{

    padding:var(--space-section) 0;

    background:var(--color-white);

}

/*==================================================
    SECTION HEADER
==================================================*/

.films .section-header{

    width:100%;

    max-width:760px;

    margin-left:auto;

    margin-right:auto;

    margin-bottom:var(--space-3xl);

    text-align:center !important;

}

.films .section-subtitle{

    display:block;

    margin-bottom:22px;

    font-family:var(--font-body);

    font-size:.80rem;

    font-weight:500;

    letter-spacing:.35em;

    text-transform:uppercase;

    color:var(--color-gold);

}

.films .section-title{

    font-family:var(--font-title);

    font-size:clamp(2.8rem,5vw,4.8rem);

    font-weight:400;

    line-height:1.15;

    color:var(--color-black);

}

.films .section-description{

    max-width:620px;

    margin:28px auto 0;

    font-family:var(--font-body);

    font-size:1rem;

    line-height:1.9;

    color:var(--color-light);

}

/*==================================================
    FILM POSTER
==================================================*/

.film-poster{

    position:relative;

    overflow:hidden;

    max-width:var(--editorial-width);

    margin:0 auto;

    background:var(--color-editorial);

    border-radius:var(--radius-sm);

    cursor:pointer;

    user-select:none;

    -webkit-user-select:none;

    box-shadow:

        0 20px 60px rgba(0,0,0,.08);

    transition:

        box-shadow

        var(--duration-normal)

        var(--ease-smooth);

}

/*==================================================
    IMAGE
==================================================*/

.film-poster img{

    display:block;

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    opacity:1;

    transform:scale(1);

    transition:

        transform var(--duration-normal) var(--ease-smooth),

        filter var(--duration-normal) var(--ease-smooth),

        opacity .45s ease;

}
/*==================================================
    FILM OVERLAY
==================================================*/

.film-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            rgba(0,0,0,.08),

            rgba(0,0,0,.30)

        );

    opacity:1;

    transition:

        opacity var(--duration-normal)

        var(--ease-smooth);

}

/*==================================================
    FILM BADGE
==================================================*/

.film-badge{

    position:absolute;

    top:28px;

    right:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border:1px solid rgba(255,255,255,.22);

    border-radius:var(--radius-round);

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    font-family:var(--font-body);

    font-size:.72rem;

    font-weight:500;

    letter-spacing:.28em;

    text-transform:uppercase;

    color:var(--color-white);

    opacity:0;

    transform:translateY(-10px);

    transition:

        opacity var(--duration-normal) var(--ease-smooth),

        transform var(--duration-normal) var(--ease-smooth);

    z-index:3;

}

/*==================================================
    PLAY BUTTON
==================================================*/

.film-play{

    position:absolute;

    top:50%;

    left:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    width:96px;

    height:96px;

    border:1px solid rgba(255,255,255,.28);

    border-radius:50%;

    background:rgba(255,255,255,.14);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    cursor:pointer;

    opacity:0;

    transform:

        translate(-50%,-50%)

        scale(.92);

    transition:

        opacity var(--duration-fast) ease,

        transform var(--duration-normal) var(--ease-smooth),

        background var(--duration-fast) ease;

    z-index:4;
	
	box-shadow:

    0 12px 35px rgba(0,0,0,.18);

}

/*==================================================
    PLAY ICON
==================================================*/

.film-play-icon{

    width:26px;

    height:26px;

    fill:var(--color-white);

    margin-left:3px;

    transition:

        transform var(--duration-normal)

        var(--ease-smooth);

}

/*==================================================
    HOVER
==================================================*/

.film-poster:hover{

    box-shadow:

        0 24px 60px rgba(0,0,0,.10);

}

.film-poster:hover img{

    transform:scale(1.03);

    filter:brightness(1.04);

}

.film-poster:hover .film-overlay{

    opacity:.55;

}

.film-poster:hover .film-badge{

    opacity:1;

    transform:translateY(0);

}

.film-poster:hover .film-play{

    opacity:1;

    transform:

        translate(-50%,-50%)

        scale(1);

    background:

        rgba(255,255,255,.22);

}

.film-poster:hover .film-play-icon{

    transform:

        translateX(2px)

        scale(1.05);

}

.film-play:hover{

    background:

        rgba(255,255,255,.28);

}

/*==================================================
    FILM META
==================================================*/

.film-meta{

    width:100%;

    max-width:760px;

    margin-left:auto;

    margin-right:auto;

    margin-top:90px;

    text-align:center !important;

}

/*==================================================
    FILM TITLE
==================================================*/

.film-title{

    margin-bottom:0;

    font-family:var(--font-title);

    font-size:clamp(3rem,5vw,4.8rem);

    font-weight:400;

    line-height:1;

    color:var(--color-black);

}

.film-title::after{

    content:"";

    display:block;

    width:60px;

    height:1px;

    margin:24px auto 28px;

    background:var(--color-gold);

}

/*==================================================
    FILM CAPTION
==================================================*/

.film-caption{

    font-family:var(--font-body);

    font-size:.92rem;

    font-weight:500;

    letter-spacing:.24em;

    text-transform:uppercase;

    color:var(--color-light);

    opacity:.75;

}

/*==================================================
    FILM PLAYER
==================================================*/

.film-player{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    z-index:5;

    transition:

        opacity .6s ease,

        visibility .6s ease;

}

.film-player iframe{

    width:100%;

    height:100%;

    border:0;

}

/*==================================================
    PLAYING STATE
==================================================*/

.film-poster.is-playing{

    box-shadow:

        0 18px 40px rgba(0,0,0,.08);

}

.film-poster.is-playing img{

    opacity:0;

    transform:scale(1);

    filter:none;

}

.film-poster.is-playing .film-overlay{

    opacity:0;

}

.film-poster.is-playing .film-badge{

    opacity:0;

    transform:translateY(-10px);

}

.film-poster.is-playing .film-play{

    opacity:0;

    transform:

        translate(-50%,-50%)

        scale(.85);

    pointer-events:none;

}

.film-poster.is-playing .film-player{

    opacity:1;

    visibility:visible;

}

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

@media (max-width:992px){

    .films{

        padding:140px 0;

    }

    .film-meta{

        margin-top:48px;

    }

    .film-title{

        font-size:clamp(2.6rem,6vw,4rem);

    }

}

@media (max-width:768px){
	
	    .films{

        padding:90px 0;

    }

    .film-badge{

        top:20px;

        right:20px;

        padding:8px 14px;

        font-size:.65rem;

        letter-spacing:.20em;

    }

    .film-play{

        width:78px;

        height:78px;

    }

    .film-play-icon{

        width:22px;

        height:22px;

    }

    .film-meta{

        margin-top:40px;

        padding:0 20px;

    }

    .film-title{

        font-size:clamp(2.3rem,9vw,3.4rem);

    }

    .film-caption{

        font-size:.82rem;

        letter-spacing:.18em;

    }

}

@media (max-width:480px){

    .films{

        padding:90px 0;

    }

    .films .section-title{

        font-size:clamp(2.2rem,10vw,3.2rem);

    }

    .film-play{

        width:68px;

        height:68px;

    }

    .film-play-icon{

        width:18px;

        height:18px;

    }

}