/* Film page (single-film.php). Builds on home.css (.lh tokens, buttons, section heads, posters).
   Neutrals lean yellow here instead of the home's blue-grey. */
.lf {
  --lh-sky: #fcf5e0;
  --lh-muted: #615645;
  --lh-line: #e4dac1;
  background: #fff;
}
#labrff-film.container-wrap { padding-top: 0 !important; padding-bottom: 0 !important; }
.lf h1, .lf h2, .lf h3 { font-family: inherit; font-weight: 900; letter-spacing: 0; text-transform: none; color: var(--lh-ink); margin: 0; padding: 0; text-wrap: balance; }
.lf h1 { font-size: clamp(3rem, 8vw, 5.5rem); line-height: 1.05; }
.lf h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; }
.lf h3 { font-size: 1.1rem; line-height: 1.25; }
.lf ul, .lf ol, .lf dl, .lf dd { list-style: none; margin: 0; padding: 0; }
.lf li { list-style: none; margin: 0; }
.lf .lh-btn { margin: 0; gap: .5rem; }
.lf .lh-btn svg { width: 14px; height: 14px; fill: currentColor; }
.lf-wrap { max-width: 1200px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.lf-band { background: var(--lh-sky); }
.lf-section { padding: clamp(3rem, 7vw, 5rem) 0; }

/* hero: poster beside the title and the screening card */
.lf-hero { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4rem); }
.lf-hero-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(1.75rem, 5vw, 4rem); align-items: start; }
.lf-hero-grid > :only-child { grid-column: 1 / -1; }
.lf-poster img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; box-shadow: 0 24px 50px -26px rgba(8, 31, 49, .6); }
.lf-info { display: grid; gap: 1.4rem; align-content: start; padding-top: .5rem; min-width: 0; }
.lf-byline { font-size: 1.2rem; }
.lf-byline b { font-weight: 900; }
.lf-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.lf-pills li, .lf-order { border: 1.5px solid var(--lh-line); background: #fff; border-radius: 999px; padding: .3rem .85rem; font-size: .88rem; font-weight: 700; line-height: 1.3; color: var(--lh-muted); white-space: nowrap; }
.lf-pills li.lf-pill-night { background: var(--lh-gold); border-color: var(--lh-gold); color: var(--lh-ink); }
@media (max-width: 860px) { .lf-hero-grid { grid-template-columns: minmax(0, 1fr); } .lf-poster { max-width: 320px; } }

/* screening card: the one boxed element on the page */
.lf-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem 1.75rem; padding: 1.4rem 1.5rem; border-radius: 8px; background: #fff; box-shadow: 0 1px 0 var(--lh-line), 0 18px 40px -30px rgba(8, 31, 49, .45); }
.lf-when { display: grid; align-content: start; padding-right: 1.75rem; border-right: 1px solid var(--lh-line); }
.lf-when-day { font-weight: 700; color: var(--lh-muted); }
.lf-when-date { font-weight: 900; font-size: 1.6rem; line-height: 1.1; }
.lf-when-time { font-weight: 900; font-size: 2.2rem; line-height: 1.1; color: var(--lh-amber-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lf-where { display: grid; gap: .55rem; align-content: start; min-width: 0; }
.lf-venue { font-weight: 700; }
.lf-venue a, .lf-shared a { text-decoration: none; }
.lf-venue a:hover, .lf-shared a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lf-aud { color: var(--lh-teal); font-weight: 700; font-size: .92rem; }
.lf-shared { color: var(--lh-muted); font-size: .94rem; }
.lf-shared a { color: var(--lh-ink); font-weight: 700; }
.lf-ctas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; padding-top: 1.2rem; border-top: 1px solid var(--lh-line); }
.lf .lf-cal { margin-left: auto; font-size: .9rem; font-weight: 700; color: var(--lh-muted); text-decoration: none; }
.lf .lf-cal:hover { color: var(--lh-ink); }
@media (max-width: 520px) {
  .lf-card { grid-template-columns: minmax(0, 1fr); padding: 1.2rem; }
  .lf-when { grid-template-columns: auto auto; justify-content: start; align-items: baseline; column-gap: .6rem; padding: 0 0 1rem; border-right: 0; border-bottom: 1px solid var(--lh-line); }
  .lf-when-day { grid-column: 1 / -1; }
  .lf .lf-cal { margin-left: 0; }
}

/* synopsis + credits beside the trailer */
.lf-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.5rem clamp(2rem, 5vw, 4rem); align-items: start; }
.lf-about > :only-child { grid-column: 1 / -1; max-width: 900px; }
.lf-about h2 { margin-bottom: 1.2rem; }
.lf-synopsis { font-size: 1.1rem; max-width: 36rem; }
.lf-synopsis p { margin: 0 0 1em; padding: 0; }
.lf-credits { display: grid; margin-top: 2rem; }
.lf-credits div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--lh-line); }
.lf-credits div:last-child { border-bottom: 1px solid var(--lh-line); }
.lf-credits dt { font-weight: 700; color: var(--lh-muted); font-size: .94rem; }
.lf-credits dd { font-weight: 700; }
.lf-trailer { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--lh-ink); }
.lf-trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lf-caption { margin-top: .7rem; color: var(--lh-muted); font-size: .9rem; }
@media (max-width: 860px) { .lf-about { grid-template-columns: minmax(0, 1fr); } }

/* in this session */
.lf-session { display: grid; gap: 1rem; }
.lf-sfilm { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; padding: 1rem; border-radius: 8px; background: #fff; }
.lf-sfilm img, .lf-noposter { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; }
.lf-noposter { background: var(--lh-sky); }
.lf-sfilm h3 { font-size: 1.3rem; line-height: 1.2; }
.lf-sfilm h3 a { text-decoration: none; }
.lf-sfilm h3 a:hover { color: var(--lh-amber-ink); }
.lf-sfilm p { margin-top: .2rem; color: var(--lh-muted); font-size: .92rem; }
.lf-order { justify-self: start; }
.lf-sfilm.is-current { box-shadow: inset 0 0 0 2px var(--lh-ink); }
.lf-sfilm.is-current .lf-order { background: var(--lh-ink); border-color: var(--lh-ink); color: #fff; }
.lf-total { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; color: var(--lh-muted); }
.lf-total b { color: var(--lh-ink); }
@media (max-width: 520px) {
  .lf-sfilm { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .lf-order { grid-column: 2; }
}

/* more films ([film_posters]) */
.lf .lh-poster h3 { font-size: 1.1rem; }