/* FILM PAGE STYLES (film/film.css): sections of the "A Lesson in Diplomacy" page; .f-wgvu controls the PBS block spacing. Bump ?v= in film/index.html after editing. */
@font-face{font-family:"Lato";font-style:normal;font-weight:300;font-display:swap;src:url(/film/fonts/lato-300.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:italic;font-weight:300;font-display:swap;src:url(/film/fonts/lato-300i.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url(/film/fonts/lato-700.woff2) format("woff2")}
.film{font:300 16px/1.8 Lato,sans-serif;color:#c4c4c4;background:#191919}
.film h1,.film h2,.film h3{font-family:Lato,sans-serif;font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1.2}
.film h2{font-size:clamp(1.7rem,3vw,2.3rem)}.film h3{font-size:1.9rem}
.film strong{font-weight:700;color:#fff}
.f-wrap{max-width:1200px;margin:auto;padding:0 32px}.f-center{text-align:center}
.f-hero,.f-sec{background-size:cover;background-position:center}
.f-hero{padding:300px 0}
.f-heropanel{width:50%;background:rgba(0,0,0,.7);padding:22px;border-radius:30px;color:#fff;font-size:15px}
.f-heropanel h1{text-align:center;font-size:60px;margin:0}.f-heropanel h2{text-align:center;font-size:1.35rem;margin:0 0 .8em}
.f-sec{padding:120px 0}.f-trailer{padding:200px 0}.f-dark{background-color:#191919}
.f-silver{background-color:#2b2b2b}.f-fence{background-color:#3a3a3a}.f-last{padding:70px 0 0;background-color:#f4f4f4}
.f-video{position:relative;padding-top:56.25%;max-width:900px;margin:30px auto 0;background:#000}
.f-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.f-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.f-text{background:rgba(0,0,0,.55);padding:26px;border-radius:6px}.f-cause .f-text{background:none;padding:0}
.f-img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 4px 20px rgba(0,0,0,.5)}
.f-gray{filter:grayscale(1)}
.f-banner{max-width:960px;margin:auto;border-radius:6px 6px 0 0}
.f-people{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:30px}
.f-people h3{text-align:center;margin:.5em 0 .3em}.f-people p{font-size:.9rem}
.f-btn{display:inline-block;margin-top:14px;padding:.6em 1.1em;border:2px solid #1e73be;color:#fff;text-decoration:none;text-transform:uppercase;font-size:.85rem;border-radius:3px}
.f-btn:hover{background:#1e73be}
@media(max-width:900px){.f-hero{padding:140px 0}.f-heropanel{width:auto}.f-heropanel h1{font-size:42px}.f-sec,.f-trailer{padding:60px 0}.f-split,.f-people{grid-template-columns:1fr;gap:28px}.f-wrap{padding:0 20px}.f-last{padding-top:40px}}
.f-wgvu{background:#fff;color:#333;padding:35px 0}.f-wgvu h3{color:#272727;margin:0 0 .3em}.f-wgvu p{margin:0 0 18px}
.f-logo{max-width:450px;width:100%;height:auto;margin:auto;display:block}
.f-pbs{max-width:220px}.f-cap{margin:14px 0 0;font-size:1.1em;color:#333}
.f-wgvu{padding:21px 0}.f-wgvu .f-cap{margin:0 0 11px}

/* ===== BIGGER TEXT (Oct 2026): larger, responsive sizes closer to the old site. ===== */
/* ===== Only the hero, trailer, story and cause sections are touched. The filmmakers section and the PBS caption keep their old sizes. ===== */
.f-heropanel{font-size:clamp(1rem,0.85rem + 0.6vw,1.25rem)}
.f-heropanel h1{font-size:clamp(2.6rem,1.6rem + 4vw,4.75rem)}
.f-heropanel h2{font-size:clamp(1.3rem,1rem + 1.2vw,1.9rem)}
.f-trailer h3{font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem)}
.f-split h2{font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem)}
.f-split p{font-size:clamp(1.05rem,0.9rem + 0.6vw,1.3rem)}
.f-split .f-btn{font-size:clamp(.9rem,.8rem + .3vw,1.05rem)}

/* ===== WIDER IMAGES: the photo and text sections may grow past the 1200px page width so photos show larger. ===== */
/* ===== Images stay at max-width 100% of their column, so phones are unchanged. ===== */
.f-wrap.f-split{max-width:1440px}
.f-banner{max-width:min(1200px,100%)}
.f-img{max-width:100%}

/* ===== TRAILER FIX: a true 16:9 box with no padding hack, so no extra black space under the video. Less padding around the section. ===== */
.f-video{padding-top:0;aspect-ratio:16/9;width:100%;max-width:1000px;height:auto}
.f-video iframe{position:static;display:block;width:100%;height:100%}
.f-trailer{padding:120px 0}
@media(max-width:900px){.f-trailer{padding:44px 0}}

/* ===== SHORT SUBTITLE ON PHONES: under 900px (the page's mobile breakpoint) show "GVSU" instead of the full name. ===== */
/* ===== The full name is hidden visually but still read by screen readers; the GVSU copy is aria-hidden. ===== */
.f-short{display:none}
@media(max-width:900px){
  .f-short{display:inline}
  .f-long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}