/* Home. Desktop reproduces the Wix desktop layout (980px stage at x=150 in a 1280 window);
   mobile (< 768px) reproduces the Wix mobile layout, 1 Wix mobile px = 1 var(--u). */

/* ---------- Hero: background video, title, welcome line ---------- */
.home-hero {
  position: relative;
  height: 700px;
  overflow: hidden;
  background: #000;
}
/* Wix VideoPlayer box: 2652x1202 starting 732px left of the stage and 172px above the section,
   video letterboxed (contain) inside it, which leaves the 16:9 picture at 2137x1202. */
.home-hero__media {
  position: absolute;
  top: -172px;
  left: min(calc(50% - 964.5px), 0px);
  width: 2137px;
  height: 1202px;
}
/* The poster is a CSS background so phones (no video on mobile) never download it. */
@media (min-width: 768px) {
  .home-hero__media { background: #000 url(/assets/img/index/hero-poster.webp) center / cover no-repeat; }
}
.home-hero__video { width: 100%; height: 100%; object-fit: cover; }
.home-hero__stage { height: 100%; }
.home-hero__text {
  position: relative;
  width: 579px;
  max-width: calc(100% - 20px);
  margin-left: 20px;
  padding-top: 175px;
  color: #fff;
}
.home-hero__title {
  font: 700 62px/1.125em var(--font-body);
  letter-spacing: normal;
}
.home-hero__welcome {
  margin-top: 60px;
  font: 400 19px/1.125em var(--font-body);
}
.home-hero__title,
.home-hero__welcome { animation: home-fade-in .8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 1ms both; }
@keyframes home-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Awards row + featured scores strip ---------- */
.home-works { position: relative; overflow: hidden; background: #fff; }
.home-awards {
  position: relative;
  width: 419px;
  height: 41px;
  margin: 23px 0 0 calc(50% - 209px);
}
.home-awards img { position: absolute; top: 0; }
.home-awards .aw-oscars { left: 0; top: 3px; width: 91px; height: 26px; }
.home-awards .aw-bafta { left: 112px; top: 4px; width: 90px; height: 32px; }
.home-awards .aw-goya { left: 225px; width: 78px; height: 41px; }
.home-awards .aw-annie { left: 337px; width: 82px; height: 41px; }

/* Wix repeater: 4 items of 311px, 23px apart, starting 179px left of the stage (cut at the window edge at 1280). */
.works {
  display: flex;
  gap: 23px;
  width: 1313px;
  margin: 26px 0 0 calc(50% - 669px);
}
.work { flex: 0 0 311px; width: 311px; overflow: hidden; background: #fff; }
.work__in {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 948px;
}
.work__poster { width: 311px; height: 388px; object-fit: cover; }
.work__btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 171px; height: 34px;
  margin: -8px 0 0 72px;
  background: #000; color: #fff;
  padding-top: 2px;
  font: 400 15px/1.55em var(--font-ui);
  letter-spacing: -0.012em;
  text-decoration: none;
  transition: background-color .4s ease, color .4s ease;
}
.work__btn:hover { background: rgba(0, 0, 0, .7); }
.work__btn:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.work__title {
  width: 304px;
  min-height: 34px;
  margin: 30px 0 0 3px;
  font: 650 22px/24.442px var(--font-heavy); /* 650: same ink weight as Avenir 85 Heavy (measured) */
  letter-spacing: -0.01em;
  text-align: center;
  color: #000;
}
.work__title--normal { padding-top: 2px; line-height: 25px; }
.work__desc {
  width: 219px;
  min-height: 91px;
  margin: 17px 0 10px 48px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  color: #000;
}
.work__desc--loose { line-height: 25px; }
.work__desc .nowrap { white-space: nowrap; } /* keeps "8-year-old" from breaking after the hyphen */
.work__desc--tight { line-height: 22.5px; }
.work__watch {
  width: 303px;
  min-height: 85px;
  margin: auto 0 0 6px;
  position: relative;
  top: -2px;
  padding-right: 5px;
  font: 750 25px/29px var(--font-wide); /* 750: same ink weight as Lulo Clean Bold (measured) */
  letter-spacing: -0.11em;
  word-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
  color: #292929;
}
.work__watch--normal { top: 0; line-height: 36px; }

/* Spanish home (/es/): its copy runs longer than the English. When a card needs more than the Wix 948px,
   every card in the row takes the height of the tallest and the platform line stays at the bottom of each,
   so the columns stay aligned. While the copy fits, nothing moves. The English home is not affected. */
@media (min-width: 768px) {
  .lang-es .work { display: flex; flex-direction: column; }
  .lang-es .work__in { flex: 1 0 auto; }
}

/* Below a 1280px window the full-bleed strip cuts text at the edges (at 1260-1279 the first "WATCH IT ON"
   line loses up to 10px): two centred columns. 1280 and wider keep the Wix strip. */
@media (min-width: 768px) and (max-width: 1279px) {
  .works { flex-wrap: wrap; width: 645px; margin: 26px auto 0; row-gap: 23px; }
}

/* ---------- Mobile: Wix mobile layout (320px design) ---------- */
@media (max-width: 767px) {
  .home-hero { height: auto; overflow: visible; background: none; }
  .home-hero__media { display: none; }
  .home-hero__stage { width: calc(320 * var(--u)); height: auto; margin-inline: auto; }
  .home-hero__text {
    width: calc(300 * var(--u));
    max-width: none;
    margin-left: calc(7 * var(--u));
    padding: calc(23 * var(--u)) 0 calc(24 * var(--u));
    color: #000;
  }
  /* Wix hides the title and the video on mobile; the title stays available to screen readers. */
  .home-hero__title {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .home-hero__welcome {
    margin-top: 0;
    font-size: calc(16 * var(--u));
    line-height: calc(18 * var(--u));
    text-align: center;
  }

  /* DELIBERATE DEVIATION (orchestrator decision): the Wix mobile home is broken. It leaves a ~1,875px blank
     gap under the welcome line, pins each poster to the left edge, cuts the descriptions at the right edge
     and at the bottom, and hides the four "WATCH IT ON ..." lines under the next film. The clone keeps the
     Wix mobile sizes, fonts, colours and the order per film (poster, black button, title, description,
     "WATCH IT ON ..." line) but centres every element on the 320 grid and gives the four films one rhythm:
     poster > 16 > button > 30 > title > 17 > description > 24 > "WATCH IT ON" > 48 > next poster,
     with the same 48 between the welcome line and the first poster. Desktop is untouched. */
  .home-works { width: calc(320 * var(--u)); margin-inline: auto; padding: calc(24 * var(--u)) 0 calc(40 * var(--u)); }
  .home-awards { display: none; }
  .works { display: block; width: auto; margin: 0; }
  .work { width: 100%; overflow: visible; }
  .work + .work { margin-top: calc(48 * var(--u)); }
  .work__in { min-height: 0; align-items: center; }
  .work__poster { width: calc(220 * var(--u)); height: calc(274 * var(--u)); }
  .work__btn {
    width: calc(200 * var(--u)); height: calc(42 * var(--u));
    margin: calc(16 * var(--u)) 0 0;
    font-size: calc(14 * var(--u));
    padding-top: 0;
  }
  .work__title {
    width: calc(280 * var(--u));
    min-height: 0;
    margin: calc(30 * var(--u)) 0 0;
    font-size: calc(18 * var(--u));
    line-height: calc(19.998 * var(--u));
  }
  .work__title--normal { padding-top: 0; line-height: calc(22 * var(--u)); }
  .work__desc {
    width: calc(280 * var(--u));
    min-height: 0;
    margin: calc(17 * var(--u)) 0 0;
    font-size: calc(17 * var(--u));
  }
  .work__desc--loose { line-height: calc(23.4 * var(--u)); }
  .work__desc--tight { line-height: calc(21.25 * var(--u)); }
  .work__watch {
    width: calc(280 * var(--u)); /* same column as title and description: every line breaks after "WATCH IT ON" */
    min-height: 0;
    margin: calc(24 * var(--u)) 0 0;
    top: 0;
    padding: 0;
    font-size: calc(19.8 * var(--u));
    line-height: calc(22.4 * var(--u));
    word-spacing: calc(2.4 * var(--u));
  }
  .work__watch--normal { line-height: calc(28 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__title, .home-hero__welcome { animation: none; }
}

/* Keyboard-only pause control for the background video (shown when focused). */
.home-hero__pause {
  position: absolute; right: 24px; bottom: 24px; z-index: 3;
  padding: 8px 14px; border: 1px solid #fff; background: rgba(0, 0, 0, .6); color: #fff;
  font: 400 13px/1 var(--font-ui); cursor: pointer;
  clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap;
}
.home-hero__pause:focus-visible { clip-path: none; width: auto; height: auto; outline: 2px solid #fff; outline-offset: 2px; }
.home-hero { cursor: default; }
@media (max-width: 767px) { .home-hero__pause { display: none; } }
@media (prefers-reduced-motion: reduce) { .home-hero__pause { display: none; } }