/*
Theme Name: Film Portfolio
Description: Cinematic film portfolio WordPress theme with hover video previews.
Version: 7.0
*/

@import url('https://fonts.cdnfonts.com/css/magz');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root{--black:#000000;--red:#ff0000;--red-muted:#b30000;--line:#330000}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--red);font-family:'Roboto',sans-serif;font-weight:300}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* Header spacing fix */
.site-header{
position:absolute;
top:0;
left:0;
right:0;
width:100%;
z-index:100;
padding:28px 4vw;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:30px;
min-height:95px;
}

.logo{
display:block;
flex:0 0 auto;
width:220px;
line-height:0;
margin:0;
padding:0;
}

.site-logo-image{
display:block;
width:220px;
height:auto;
max-width:32vw;
}

.main-nav{
position:absolute;
top:30px;
right:4vw;
display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
align-items:flex-start;
justify-content:flex-end;
gap:32px;
width:auto !important;
min-width:0 !important;
margin:0;
padding:0;
white-space:nowrap !important;
}

.main-nav a{
display:inline-block !important;
position:static;
flex:0 0 auto !important;
width:auto !important;
max-width:none !important;
margin:0;
padding:0;
font-family:'Magz',sans-serif;
font-size:12px;
line-height:1 !important;
letter-spacing:2px;
text-transform:uppercase;
white-space:nowrap !important;
word-break:keep-all;
overflow:visible;
transition:opacity .3s;
}

.main-nav a:hover{opacity:.5}

.hero{min-height:90vh;display:flex;align-items:flex-end;padding:8vw 5vw;position:relative;overflow:hidden;background-size:cover;background-position:center;background-color:#111}
.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.95),rgba(0,0,0,.15)),linear-gradient(to right,rgba(0,0,0,.45),transparent)}
.hero-content{position:relative;z-index:2;max-width:900px}
.hero h1{font-family:'Roboto',sans-serif;font-size:clamp(50px,9vw,130px);line-height:.95;font-weight:400;margin:0 0 25px}
.hero p{max-width:600px;color:var(--red);line-height:1.8;font-size:16px}

.films-section{padding:140px 5vw 180px;position:relative}
.films-heading{display:flex;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid var(--line);color:var(--red-muted);font-size:10px;letter-spacing:2px;text-transform:uppercase}
.film-list{width:100%}
.film-list-item{position:relative;display:grid;grid-template-columns:80px 1fr 100px 40px;align-items:center;min-height:115px;border-bottom:1px solid var(--line);transition:padding-left .4s ease,opacity .4s ease}
.film-list-item:hover{padding-left:20px}
.film-number,.film-year,.film-arrow{color:var(--red-muted);font-size:11px;letter-spacing:1px}
.film-name{font-family:'Roboto',sans-serif;font-size:clamp(32px,4vw,60px);font-weight:400;line-height:1;transition:color .3s ease}
.film-list-item:hover .film-name{color:var(--red)}
.film-year{text-align:right}
.film-arrow{text-align:right;font-size:20px;transition:transform .3s ease,color .3s ease}
.film-list-item:hover .film-arrow{color:var(--red);transform:translate(4px,-4px)}

.floating-film-preview{position:fixed;width:420px;height:236px;pointer-events:none;z-index:100;background:#111;overflow:hidden;opacity:0;transform:scale(.92) translateY(10px);transition:opacity .25s ease,transform .3s ease;box-shadow:0 25px 80px rgba(255,0,0,.18)}
.floating-film-preview.is-visible{opacity:1;transform:scale(1) translateY(0)}
.floating-film-preview video{width:100%;height:100%;object-fit:cover;display:block}

.film-single{padding:180px 5vw 100px}
.film-single-header{max-width:1000px;margin-bottom:70px}
.film-single h1{font-family:'Roboto',sans-serif;font-weight:400;font-size:clamp(55px,9vw,120px);line-height:.95;margin:0 0 25px}
.film-meta{display:flex;gap:35px;color:var(--gray);font-size:12px;text-transform:uppercase;letter-spacing:1px}
.film-featured{margin-bottom:70px}
.film-featured img{width:100%;max-height:75vh;object-fit:cover}
.film-content{max-width:1000px}
.film-content h2{font-family:'Roboto',sans-serif;font-size:35px;font-weight:400;margin-top:80px}
.film-content p,.film-content li{max-width:750px;color:var(--red);font-size:17px;line-height:1.9}
.film-content ul{padding-left:20px}
.project-link{display:inline-block;margin:25px 0;padding:15px 25px;border:1px solid #555;font-size:12px;letter-spacing:2px;text-transform:uppercase;transition:background .3s,color .3s}
.project-link:hover{background:var(--red);color:var(--black)}

.contact{padding:140px 5vw;border-top:1px solid var(--line)}
.contact h2{font-family:'Roboto',sans-serif;font-size:clamp(50px,8vw,110px);font-weight:400;margin:0 0 40px}
.contact-email{font-size:20px;border-bottom:1px solid #555;padding-bottom:8px}
.contact-socials{display:flex;gap:30px;margin-top:50px}
.contact-socials a{color:var(--gray);font-size:12px;text-transform:uppercase;letter-spacing:2px}
.site-footer{border-top:1px solid var(--line);padding:30px 5vw;display:flex;justify-content:space-between;color:var(--red-muted);font-size:11px;text-transform:uppercase;letter-spacing:1px}

@media(max-width:700px){
.site-header{padding:22px 25px;gap:20px;align-items:flex-start;min-height:80px}
.logo{width:155px}
.site-logo-image{width:155px;max-width:45vw}
.main-nav{top:25px;right:25px;gap:14px}
.main-nav a{font-size:10px;letter-spacing:1.5px}
.hero{min-height:80vh;padding:40px 25px}
.films-section{padding:90px 25px 120px}
.film-list-item{grid-template-columns:40px 1fr 50px;min-height:90px}
.film-name{font-size:30px}.film-year{font-size:10px}.film-arrow{display:none}
.floating-film-preview{display:none}
.film-single{padding:140px 25px 70px}
.film-meta{flex-wrap:wrap;gap:15px}
.contact{padding:90px 25px}
.site-footer{padding:25px}
}



/* Homepage film gallery — short video clips */
.film-gallery-section{padding:80px 5vw 60px}
.gallery-header{display:flex;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid var(--line);color:var(--red-muted);font-family:'Magz',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase}
.film-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:70px 30px;margin-top:35px}
.gallery-card{display:block;min-width:0}
.gallery-video-wrap{position:relative;aspect-ratio:16/9;overflow:hidden;background:#090909}
.gallery-video,.gallery-video-fallback{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.gallery-card:hover .gallery-video,.gallery-card:hover .gallery-video-fallback{transform:scale(1.035);filter:brightness(.72)}
.gallery-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;padding:22px;opacity:0;transition:opacity .35s ease;background:linear-gradient(to top,rgba(0,0,0,.65),transparent 45%);pointer-events:none}
.gallery-card:hover .gallery-overlay{opacity:1}
.gallery-number,.gallery-view{font-family:'Magz',sans-serif;color:var(--red);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}
.gallery-title-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-top:16px}
.gallery-title-row h2{font-family:'Roboto',sans-serif;font-size:clamp(24px,3vw,44px);font-weight:400;line-height:1;margin:0}
.gallery-title-row span{flex:none;color:var(--red-muted);font-size:11px;letter-spacing:1px}
.gallery-video-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--red-muted);font-family:'Magz',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase}
.gallery-empty{grid-column:1/-1;padding:80px 0;color:var(--red-muted);font-size:15px;line-height:1.8}
.gallery-empty strong{color:var(--red);font-weight:400}
@media (max-width:700px){
.film-gallery-section{padding-top:60px}
.film-gallery{grid-template-columns:1fr;gap:45px}
.gallery-overlay{opacity:1}
.gallery-title-row h2{font-size:28px}
}


.gallery-youtube-wrap{position:absolute;inset:0;overflow:hidden;background:#090909}
.gallery-youtube{position:absolute;top:50%;left:50%;width:177.78%;height:100%;transform:translate(-50%,-50%);border:0;pointer-events:none;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.gallery-card:hover .gallery-youtube{transform:translate(-50%,-50%) scale(1.035);filter:brightness(.72)}
@media (max-width:700px){
.gallery-youtube{width:177.78%;height:100%}
}


/* Editable homepage copy */
.homepage-editor-content{color:var(--red);max-width:700px;font-size:16px;line-height:1.8}
.homepage-editor-content p{margin:0 0 18px}
.homepage-editor-content h2,.homepage-editor-content h3,.homepage-editor-content h4{font-family:'Roboto',sans-serif;font-weight:400;color:var(--red);margin:30px 0 15px}
.homepage-editor-content a{text-decoration:underline;text-underline-offset:4px}


.cumulative-reel-section{padding:70px 5vw 30px}
.cumulative-reel-header{display:flex;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--line);color:var(--red-muted);font-family:'Magz',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase}
.cumulative-reel-frame{position:relative;margin-top:35px;width:100%;aspect-ratio:16/9;overflow:hidden;background:#090909}
.cumulative-reel-video,.cumulative-reel-youtube{display:block;width:100%;height:100%;border:0;object-fit:cover}
.cumulative-reel-youtube{position:absolute;inset:0}
@media (max-width:700px){
.cumulative-reel-section{padding:55px 5vw 20px}
.cumulative-reel-frame{margin-top:25px}
}


.project-slider-section{padding:50px 5vw 40px;width:100% !important;max-width:none !important;margin-left:0 !important;margin-right:0 !important}
.project-slider-header{display:flex;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--line);color:var(--red-muted);font-family:'Magz',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase}
.project-slider{position:relative;margin-top:30px;overflow:hidden;background:#090909;outline:none}
.project-slider-track{display:flex;width:100%;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.project-slide{flex:0 0 100%;width:100%;min-width:100%}
.project-slide-link{display:block}
.project-slide-media{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#090909}
.project-slide-image,.project-slide-video,.project-slide-youtube{display:block;width:100%;height:100%;object-fit:cover;border:0}
.project-slide-youtube{position:absolute;inset:0}
.project-slide-caption{position:absolute;left:0;right:0;bottom:0;padding:55px 28px 24px;background:linear-gradient(to top,rgba(0,0,0,.78),transparent);font-family:'Magz',sans-serif;color:var(--red);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}
.project-slider-prev,.project-slider-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid rgba(255,0,0,.45);background:rgba(0,0,0,.65);color:var(--red);font-family:'Magz',sans-serif;font-size:18px;cursor:pointer;z-index:3}
.project-slider-prev{left:20px}
.project-slider-next{right:20px}
.project-slider-prev:hover,.project-slider-next:hover{background:var(--red);color:#000}
.project-slider-count{position:absolute;right:24px;bottom:20px;z-index:3;color:var(--red);font-family:'Magz',sans-serif;font-size:10px;letter-spacing:1.5px}
@media (max-width:700px){
.project-slider-section{padding:35px 5vw 25px;width:100% !important;max-width:none !important;margin-left:0 !important;margin-right:0 !important}
.project-slider-header{font-size:9px}
.project-slider{margin-top:22px}
.project-slider-prev,.project-slider-next{width:38px;height:38px}
.project-slider-prev{left:12px}
.project-slider-next{right:12px}
.project-slide-caption{padding:45px 18px 18px}
.project-slider-count{right:15px;bottom:15px}
}

/* Native WordPress page editing */
.editor-page{
    padding:180px 5vw 110px;
    min-height:60vh;
}
.editor-page-header{
    max-width:1200px;
    margin:0 auto 70px;
}
.editor-page-header h1{
    font-family:'Roboto',sans-serif;
    font-weight:400;
    font-size:clamp(55px,9vw,120px);
    line-height:.95;
    margin:0;
    color:var(--red);
}
.editor-page-content{
    max-width:1200px;
    margin:0 auto;
    color:var(--red);
    font-size:16px;
    line-height:1.75;
}
.editor-page-content > *:first-child{margin-top:0}
.editor-page-content h2,
.editor-page-content h3,
.editor-page-content h4,
.editor-page-content h5,
.editor-page-content h6{
    font-family:'Roboto',sans-serif;
    font-weight:400;
    color:var(--red);
    line-height:1.05;
}
.editor-page-content h2{font-size:clamp(42px,6vw,80px)}
.editor-page-content h3{font-size:clamp(32px,4.5vw,58px)}
.editor-page-content a{color:var(--red);text-decoration:underline;text-underline-offset:5px}
.editor-page-content img{max-width:100%;height:auto}
.editor-page-content .wp-block-image{margin-top:2.5em;margin-bottom:2.5em}
.editor-page-content .wp-block-columns{gap:clamp(30px,5vw,90px)}
.editor-page-content .wp-block-button__link{
    background:var(--red);
    color:#000;
    border-radius:0;
    font-family:'Magz',sans-serif;
    letter-spacing:1.5px;
    text-transform:uppercase;
}
.editor-page-content .wp-block-separator{border-color:var(--line)}
.editor-page-content .alignwide{max-width:1400px;margin-left:auto;margin-right:auto}
.editor-page-content .alignfull{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.editor-page-content .wp-block-cover,
.editor-page-content .wp-block-group.has-background{padding:clamp(30px,5vw,80px)}

/* Make the Contact page completely native-editor driven. */
.editor-page-contact .editor-page-content{max-width:1200px}

@media(max-width:700px){
    .editor-page{padding:130px 25px 70px}
    .editor-page-header{margin-bottom:45px}
    .editor-page-header h1{font-size:clamp(48px,15vw,80px)}
    .editor-page-content .wp-block-columns{display:block}
    .editor-page-content .wp-block-column{margin-bottom:35px}
    .editor-page-content .alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
}

/* Native Project Sliding Gallery */
.homepage-editor-content:has(.film-native-project-slider){max-width:none;width:100%;}
.homepage-editor-content .film-native-project-slider{width:100%;margin-left:0;margin-right:0;}
.film-native-project-slider .project-slider{width:100%;}
.film-native-project-slider .project-slider-track{gap:0;}

/* Project slider is intentionally full-bleed; do not constrain it with the global content-width control. */
.project-slider-section{width:100% !important;max-width:none !important;margin-left:0 !important;margin-right:0 !important}
.film-native-project-slider{width:100% !important}

/* Final native slider layout + playback fixes */
.hero:has(.film-native-project-slider) .hero-content{max-width:none;width:100%;}
.hero:has(.film-native-project-slider){padding-left:5vw;padding-right:5vw;}
.hero .homepage-editor-content:has(.film-native-project-slider){max-width:none;width:100%;}
.hero .homepage-editor-content .film-native-project-slider{width:100%;max-width:none;margin-left:0;margin-right:0;}
.film-native-project-slider .project-slider{width:100%;max-width:none;}
.film-native-project-slider .project-slider-track{gap:0;}
.film-native-project-slider .project-slide-media{width:100%;}
.project-slider{touch-action:pan-y;}
.project-slider iframe{pointer-events:auto;}

/* Block-specific sizing controls */
.film-native-project-slider{width:var(--project-slider-width,100%) !important;max-width:none !important;margin-left:0 !important;margin-right:0 !important;padding-top:var(--project-slider-top,35px) !important;padding-bottom:var(--project-slider-bottom,25px) !important;}
.film-native-project-slider .project-slide-media{height:var(--project-slider-height,560px);aspect-ratio:auto;}
.film-native-project-slider .project-slide-media,.film-native-project-slider .project-slide-image,.film-native-project-slider .project-slide-video,.film-native-project-slider .project-slide-youtube{border-radius:var(--project-slider-radius,0);}
@media(max-width:700px){.film-native-project-slider{width:100% !important}.film-native-project-slider .project-slide-media{height:min(var(--project-slider-height,560px),62vw);}}