/* Start custom CSS *//* ---------- DIRECTORS (page 1340 + every director page). Page 1340's Custom CSS is this file as is; a director page's is
   this file + css/directors/<slug>.css (its media), built by tools/build-css.mjs into tools/directors-<slug>.built.css ---------- */

/* ---------- DIRECTORS PAGE (page 1340) — DIRECTORS_no_select (closed list) + hover open ---------- */

:root body.elementor-page-1400 .ms-directors-page {
  padding-top: var(--bar-h);   /* clear the pinned bar */
  background: var(--cream); color: var(--ink);
}

/* page title: centred ExtraWide, under the bar */
:root body.elementor-page-1400 .ms-directors-h1 {
  display: block; width: 100%; text-align: center; margin: 0;
  padding: calc(7 * var(--u)) calc(var(--g) + var(--m)) calc(5 * var(--u));
  font-family: var(--display); font-weight: var(--display-w); text-transform: uppercase;
  font-size: max(28px, calc(5.6 * var(--u))); line-height: .95; letter-spacing: -.02em;
}

/* black band of names: pixel edge on top (widget .msx-edge), then the four rows.
   Force edge clearance — Elementor's e-div-block margin:0 beats the kit .ms-edge-top rule. */
:root body.elementor-page-1400 .ms-directors-list.ms-edge-top {
  position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  width: 100%; max-width: none;   /* its parent (main) is already full width: the kit's "+ 2 --g" break-out made the page
                                     2 x --g wider than the screen above 1600 px (found 2026-10-17) */
  margin: var(--edge-h) 0 0;
  padding: calc(5 * var(--u)) 0 calc(7 * var(--u));
  background: var(--ink); color: var(--cream);
  min-height: max(320px, calc(42 * var(--u)));
}

/* one director row: closed = name only; open/hover = a centred card (DIRECTORS_select): portrait, the site's scroll-built
   cream tiles along its bottom (site-chrome), the name on a cream bar under it. The card is 12 whole tiles wide. */
:root body.elementor-page-1400 .ms-director {
  --card-w: min(100%, calc(12 * var(--tile)));
  display: block; position: relative; width: 100%; margin: 0; padding: 0;
  color: inherit; text-decoration: none; cursor: pointer;
  transition: padding .45s cubic-bezier(.2, .7, .2, 1);
}
:root body.elementor-page-1400 .ms-director-media {
  display: block; position: relative; width: var(--card-w); min-width: 0; height: 0; margin: 0 auto; overflow: hidden; padding: 0;
  /* shared placeholder until each director gets their own --ms-director-photo */
  background-color: #2a2728;
  background-image: var(--ms-director-photo, url("https://minutestreet.tv/wp-content/uploads/2026/10/directors-placeholder-still.jpg"));
  background-position: center; background-size: cover; background-repeat: no-repeat;
  transition: height .45s cubic-bezier(.2, .7, .2, 1);
}
:root body.elementor-page-1400 .ms-director-name {
  position: relative; z-index: 2; display: block; width: var(--card-w); margin: 0 auto;
  padding: calc(2.8 * var(--u)) 0;
  font-family: var(--display); font-weight: var(--display-w); text-transform: uppercase;
  font-size: max(13px, calc(2.3 * var(--u))); line-height: 1; letter-spacing: -.01em; text-align: center;
  color: var(--cream); background: transparent;
  transition: color .2s ease, background-color .2s ease, padding .45s cubic-bezier(.2, .7, .2, 1);
}
:root body.elementor-page-1400 .ms-director:is(:hover, :focus-visible, .is-open) { padding: calc(2.4 * var(--u)) 0; }
:root body.elementor-page-1400 .ms-director:is(:hover, :focus-visible, .is-open) .ms-director-media { height: calc(5 * var(--tile)); }
:root body.elementor-page-1400 .ms-director:is(:hover, :focus-visible, .is-open) .ms-director-name {
  padding: calc(.9 * var(--u)) 0; color: var(--ink); background: var(--cream);
}

/* footer: the kit's, as on the homepage (user 2026-10-28: all contact footers the same; the directors pages had CONTACT
   on the left, icons only, no e-mail / phone, from the DIRECTORS_no_select mockup) */

/* ---------- DIRECTOR PAGE (one per director, DIRECTOR_SUB_PAGE, 269 px wide) — reuses the project page hero, dropdowns and
   alternating rows from the kit; the "see more / DIRECTORS" list and the footer are the ones above ---------- */

/* hero: the director's reel, a wide strip under the bar, "REEL" tag in the bottom-right corner */
:root body.elementor-page-1400 .ms-director-page .ms-p-hero { position: relative; aspect-ratio: 16 / 5; }
:root body.elementor-page-1400 .ms-dir-reel {
  position: absolute; right: 0; bottom: 0; z-index: 3; margin: 0;
  padding: .45em .9em;
  font-family: var(--body); font-weight: var(--body-w); text-transform: none; letter-spacing: .01em;
  font-size: var(--fs-body); line-height: 1;   /* "Reel", as large as the surname under the name (user 2026-10-28; was REEL 1.5u) */
  color: var(--ink); background: var(--cream);
}

/* director page body (user 2026-10-17): from the name down to the last project row the site's 3-column grid
   (margin 5.76 · column 26.69 · gutter 4.2) is measured in vw with --g 0, so it is NOT held in the site's 1600 px frame:
   on wide monitors the body keeps the grid's proportional margins (~115 px at 2000) instead of a centred 1600 px block.
   Up to 1600 px it equals the site grid. Text sizes keep their --u cap. (Tried the same day and dropped: half / quarter
   margins — too tight.) Hero, directors list and footer keep the site grid. The derived widths are redeclared here: a
   custom property is resolved where it is declared, so the :root --span2 / --content would keep the root values. */
@media (min-width: 768px), (orientation: landscape) {
  :root body.elementor-page-1400 .ms-dir-intro, :root body.elementor-page-1400 .ms-director-page .ms-steps {
    --g: 0px; --m: 5.76vw; --col: 26.69vw; --gut: 4.2vw;
    --span2: calc(2 * var(--col) + var(--gut)); --content: calc(3 * var(--col) + 2 * var(--gut));
  }
}

/* name (first name big, surname under it in the body font), then portrait | bio + dropdowns */
:root body.elementor-page-1400 .ms-dir-intro {
  display: grid; grid-template-columns: var(--col) var(--span2); column-gap: var(--gut); row-gap: 0; align-items: start;
  padding: calc(3 * var(--u)) calc(var(--g) + var(--m)) 0;
}
:root body.elementor-page-1400 .ms-dir-h1 {
  grid-column: 1 / -1; grid-row: 1; margin: 0 0 calc(4 * var(--u));
  font-family: var(--display); font-weight: var(--display-w); text-transform: uppercase;
  font-size: max(34px, calc(7 * var(--u))); line-height: .9; letter-spacing: -.01em;
}
:root body.elementor-page-1400 .ms-dir-h1 span {
  display: block; margin-top: calc(1.2 * var(--u));
  font-family: var(--body); font-weight: var(--body-w); text-transform: none; letter-spacing: .01em;
  font-size: var(--fs-body); line-height: 1.2;
}
:root body.elementor-page-1400 .ms-dir-photo { grid-column: 1; grid-row: 2; position: relative; aspect-ratio: 73 / 44; overflow: hidden; padding: 0; background: #2a2728; }
:root body.elementor-page-1400 .ms-dir-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 30%; filter: grayscale(1); margin: 0; display: block; }
:root body.elementor-page-1400 .ms-dir-intro .ms-p-desc { grid-column: 2; grid-row: 2; }

/* projects: image over 2 columns + title/text in 1, sides alternating (kit .ms-step); the mockup's frames are wider than 16:9 */
:root body.elementor-page-1400 .ms-director-page .ms-steps { padding-top: calc(10 * var(--u)); padding-bottom: 0; gap: calc(8 * var(--u)); }
:root body.elementor-page-1400 .ms-director-page .ms-step-media { aspect-ratio: 157 / 72; }
:root body.elementor-page-1400 .ms-director-page .ms-step .ms-h3 { font-size: max(13px, calc(1.7 * var(--u))); }   /* "PROJECT THREE" on one line in the column */
:root body.elementor-page-1400 .ms-director-page .ms-step .ms-h3 { font-family: var(--display-wide); }   /* film titles in the dropdown titles' bold (Roc Grotesk Wide), not ExtraWide (user 2026-10-28) */
/* awards / press: the group titles (bold film names) in the dropdown titles' full ink, the items stay at the dimmed 80 %
   (user 2026-10-28). The dimming moves from the paragraph's opacity to the items' colour, so the titles can be full ink. */
:root body.elementor-page-1400 .ms-director-page .ms-acc-text { opacity: 1; color: color-mix(in srgb, currentColor 80%, transparent); }
:root body.elementor-page-1400 .ms-director-page .ms-acc-text > strong { color: var(--ink); }

/* "see more" + DIRECTORS above the black list */
:root body.elementor-page-1400 .ms-dir-more {
  align-items: center; text-align: center;
  padding: calc(16 * var(--u)) calc(var(--g) + var(--m)) calc(4.5 * var(--u));
}
:root body.elementor-page-1400 .ms-dir-more .ms-sub { font-size: var(--fs-small); }
:root body.elementor-page-1400 .ms-dir-more .ms-h2 { margin-top: calc(.4 * var(--u)); font-size: max(24px, calc(4.6 * var(--u))); line-height: .95; letter-spacing: -.01em; }

@media (prefers-reduced-motion: reduce) {
  /* keep the open/close; Elementor zeroes transitions here */
  :root body.elementor-page-1400 .ms-director, :root body.elementor-page-1400 .ms-director-media { transition-duration: .45s !important; }
  :root body.elementor-page-1400 .ms-director-name { transition-duration: .2s, .2s, .45s !important; }
}

@media (max-width: 767px) and (orientation: portrait) {
  :root body.elementor-page-1400 .ms-directors-h1 { font-size: 9vw; padding: 40px calc(var(--g) + var(--m)) 28px; }
  :root body.elementor-page-1400 .ms-directors-list.ms-edge-top { min-height: 0; padding: 28px 0 40px; }
  :root body.elementor-page-1400 .ms-director-name { font-size: 3.4vw; padding: 18px 0; }
  :root body.elementor-page-1400 .ms-director:is(:hover, :focus-visible, .is-open) { padding: 14px 0; }
  :root body.elementor-page-1400 .ms-director:is(:hover, :focus-visible, .is-open) .ms-director-name { padding: 8px 0; }
  /* director page */
  :root body.elementor-page-1400 .ms-director-page .ms-p-hero { aspect-ratio: 16 / 9; }
  :root body.elementor-page-1400 .ms-dir-intro { grid-template-columns: 1fr; row-gap: 24px; padding-top: 28px; }
  :root body.elementor-page-1400 .ms-dir-h1 { grid-row: auto; margin: 0; font-size: 11vw; }
  :root body.elementor-page-1400 .ms-dir-h1 span { margin-top: 8px; }
  :root body.elementor-page-1400 .ms-dir-photo, :root body.elementor-page-1400 .ms-dir-intro .ms-p-desc { grid-column: 1; grid-row: auto; }
  :root body.elementor-page-1400 .ms-director-page .ms-steps { padding-top: 56px; gap: 48px; }
  :root body.elementor-page-1400 .ms-dir-more { padding: 72px calc(var(--g) + var(--m)) 24px; }
  :root body.elementor-page-1400 .ms-dir-more .ms-h2 { font-size: 7.5vw; margin-top: 4px; }
}

/* Jákob Ladányi Jancsó (page 1400) — this page's own media only; the layout lives in css/directors.css.
   Hero = his reel loop since 2026-10-22 (the same file as his /directors/ card loop: webm 1675, mp4 1680, first frame 1681; the
   upload 1717 is a duplicate); the hero link is still the placeholder reel. Projects (user 2026-10-17): four films, each row
   its loop since 2026-10-22 (user's VP9 WebMs; mp4s made at 1280 px, first frames as the stills under the loops). */
:root body.elementor-page-1400 .ms-p-hero { background-image: url("https://minutestreet.tv/wp-content/uploads/2026/10/jakob-ladanyi-jancso-loop-first-frame.jpg"); --ms-bg-video: "https://minutestreet.tv/wp-content/uploads/2026/10/jakob-ladanyi-jancso-loop.mp4"; --ms-bg-webm: "https://minutestreet.tv/wp-content/uploads/2026/10/Ladanyi_Jancso_Jakob.webm"; --ms-bg-webm-codec: "vp9"; }   /* reel loop */
:root body.elementor-page-1400 .ms-dir-photo { aspect-ratio: 1 / 1; }   /* portrait (media 1661) is square: the frame follows it, never cropped */
:root body.elementor-page-1400 .ms-step:nth-child(1) .ms-step-media { background-image: url("https://minutestreet.tv/wp-content/uploads/2026/10/jakob-living-stones-loop-first-frame.jpg"); --ms-bg-video: "https://minutestreet.tv/wp-content/uploads/2026/10/jakob-living-stones-loop.mp4"; --ms-bg-webm: "https://minutestreet.tv/wp-content/uploads/2026/10/elokovek.webm"; --ms-bg-webm-codec: "vp9"; }   /* Living Stones (Vimeo 1052947470, Berlinale trailer); webm 1715, mp4 1720, first frame 1721 */
:root body.elementor-page-1400 .ms-step:nth-child(2) .ms-step-media { background-image: url("https://minutestreet.tv/wp-content/uploads/2026/10/jakob-love-of-things-loop-first-frame.jpg"); --ms-bg-video: "https://minutestreet.tv/wp-content/uploads/2026/10/jakob-love-of-things-loop.mp4"; --ms-bg-webm: "https://minutestreet.tv/wp-content/uploads/2026/10/The-Love-of-Things-One-Can-Lose.webm"; --ms-bg-webm-codec: "vp9"; }   /* The Love of Things One Can Lose (YouTube g8Reu9fnPdY, trailer); webm 1719, mp4 1722, first frame 1723 */
:root body.elementor-page-1400 .ms-step:nth-child(3) .ms-step-media { background-image: url("https://minutestreet.tv/wp-content/uploads/2026/10/jakob-tarr-bela-loop-first-frame.jpg"); --ms-bg-video: "https://minutestreet.tv/wp-content/uploads/2026/10/jakob-tarr-bela-loop.mp4"; --ms-bg-webm: "https://minutestreet.tv/wp-content/uploads/2026/10/tarrbela-betonhofi.webm"; --ms-bg-webm-codec: "vp9"; }   /* Tarr Béla – Beton.Hofi (YouTube lJRTuCDopMY); webm 1718, mp4 1724, first frame 1725 */
:root body.elementor-page-1400 .ms-step:nth-child(4) .ms-step-media { background-image: url("https://minutestreet.tv/wp-content/uploads/2026/10/jakob-gym-symphony-loop-first-frame.jpg"); --ms-bg-video: "https://minutestreet.tv/wp-content/uploads/2026/10/jakob-gym-symphony-loop.mp4"; --ms-bg-webm: "https://minutestreet.tv/wp-content/uploads/2026/10/gymsym.webm"; --ms-bg-webm-codec: "vp9"; }   /* Gym Symphony (Vimeo 1125278353); webm 1716, mp4 1726, first frame 1727 *//* End custom CSS */