/* ==================================================
   FILM PAGE
   videos · infos · credits · stills carousel
   ================================================== */

.film-page {
  width: 100%;
}


/* ==================================================
   THEMES
   ================================================== */

body.film-theme-black {
  background: #000;
  color: #fff;
}

body.film-theme-grey {
  background: #777;
  color: #fff;
}


/* --------------------------------------------------
   DARK THEME LIGHTBOX
   -------------------------------------------------- */

body.film-theme-black .lightbox,
body.film-theme-grey .lightbox {
  background: #000;
  color: #fff;
}

body.film-theme-black .lightbox-caption,
body.film-theme-grey .lightbox-caption,
body.film-theme-black .lightbox-close,
body.film-theme-grey .lightbox-close {
  color: #fff;
}


/* --------------------------------------------------
   DARK THEME TYPOGRAPHY
   -------------------------------------------------- */

body.film-theme-black .film-page,
body.film-theme-grey .film-page,
body.film-theme-black .film-details,
body.film-theme-grey .film-details,
body.film-theme-black .detail-row,
body.film-theme-grey .detail-row,
body.film-theme-black .detail-label,
body.film-theme-grey .detail-label,
body.film-theme-black .detail-content,
body.film-theme-grey .detail-content,
body.film-theme-black .detail-text,
body.film-theme-grey .detail-text,
body.film-theme-black .credits-list,
body.film-theme-grey .credits-list,
body.film-theme-black .credit-role,
body.film-theme-grey .credit-role,
body.film-theme-black .credit-name,
body.film-theme-grey .credit-name,
body.film-theme-black .scroll-hint,
body.film-theme-grey .scroll-hint {
  color: #fff;
}


/* --------------------------------------------------
   DARK THEME LINKS
   -------------------------------------------------- */

body.film-theme-black .film-page a,
body.film-theme-grey .film-page a {
  color: #fff;
}


/* --------------------------------------------------
   DARK THEME NAVIGATION
   -------------------------------------------------- */

body.film-theme-black header,
body.film-theme-grey header,
body.film-theme-black header a,
body.film-theme-grey header a,
body.film-theme-black nav,
body.film-theme-grey nav,
body.film-theme-black nav a,
body.film-theme-grey nav a {
  color: #fff;
}

body.film-theme-black header a:hover,
body.film-theme-grey header a:hover,
body.film-theme-black nav a:hover,
body.film-theme-grey nav a:hover,
body.film-theme-black header a.is-active,
body.film-theme-grey header a.is-active,
body.film-theme-black nav a.is-active,
body.film-theme-grey nav a.is-active,
body.film-theme-black header .is-active a,
body.film-theme-grey header .is-active a,
body.film-theme-black nav .is-active a,
body.film-theme-grey nav .is-active a {
  color: #aaa;
}


/* --------------------------------------------------
   DARK THEME PAGE LOGOS
   -------------------------------------------------- */

body.film-theme-black .page-logo,
body.film-theme-grey .page-logo,
body.film-theme-black .page-logo a,
body.film-theme-grey .page-logo a,
body.film-theme-black .page-logo--project,
body.film-theme-grey .page-logo--project,
body.film-theme-black .page-logo--name,
body.film-theme-grey .page-logo--name {
  color: #fff;
}


/* --------------------------------------------------
   DARK THEME TEXT COLLAPSE
   -------------------------------------------------- */

body.film-theme-black .text-collapse-toggle,
body.film-theme-grey .text-collapse-toggle {
  color: #fff;
}


/* ==================================================
   VIDEOS
   ================================================== */

.film-video .video-wrapper {
  --rw: 16;
  --rh: 9;

  position: relative;

  /*
   * DESKTOP
   *
   * Maximum 65% of viewport width.
   *
   * Height is additionally limited so there is
   * enough room above for the navigation and
   * below for the scroll arrow / bottom area.
   */
  width: min(
    65vw,
    calc((100svh - 150px) * var(--rw) / var(--rh))
  );

  aspect-ratio: var(--rw) / var(--rh);

  margin: 20px auto 0;
}


/*
 * FIRST VIDEO
 *
 * Vertically centred inside the available
 * viewport area.
 *
 * 70px reserved above.
 * 80px reserved below.
 */

.film-video .video-wrapper:first-child {
  margin-top: max(
    70px,
    calc(
      70px
      +
      (
        100svh
        - 150px
        - (
          min(
            70vw,
            calc((100svh - 150px) * var(--rw) / var(--rh))
          )
          * var(--rh) / var(--rw)
        )
      ) / 2
    )
  );
}


.video-wrapper iframe,
.video-wrapper video {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  border: 0;
}


/* --------------------------------------------------
   OPACITY
   film.js controls desktop + tablet + mobile
   -------------------------------------------------- */

.js .film-video .video-wrapper {
  opacity: 0;
  pointer-events: none;
}

.js .film-video .video-wrapper.is-active {
  pointer-events: auto;
}


/* ==================================================
   DETAILS
   ================================================== */

.film-details {
  width: var(--content-width);

  margin: 0 auto 140px;

  padding-top: 80px;
}


.js .film-details {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.6s ease,
    visibility 0s linear 0.6s;
}


.js main.is-scrolled .film-details {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity 0.6s ease,
    visibility 0s;
}


/* ==================================================
   CREDITS
   ================================================== */

.credits-list {
  margin: 0;

  font-family: var(--font-text);
}


.credit-row {
  display: grid;

  grid-template-columns: 210px 1fr;
}


.credit-role {
  font-weight: bold;
  text-transform: uppercase;
}


.credit-name {
  margin: 0;
}


/* ==================================================
   STILLS CAROUSEL
   ================================================== */

.stills-carousel {
  position: relative;

  width: 100%;

  overflow: hidden;
}


.stills-track {
  display: flex;

  transition: transform 0.1s ease;
}


.still-slide {
  flex: 0 0 100%;

  margin: 0;

  aspect-ratio: 16 / 9;
}


.still-open {
  display: flex;

  align-items: center;
  justify-content: flex-start;

  width: 100%;
  height: 100%;
}


.still-open picture {
  display: contents;
}


.still-open img {
  width: auto;
  height: auto;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;

  border-radius: var(--radius);
}


.still-open.cursor-left {
  cursor: w-resize;
}


.still-open.cursor-center {
  cursor: zoom-in;
}


.still-open.cursor-right {
  cursor: e-resize;
}


/* ==================================================
   TABLET
   ================================================== */

@media (max-width: 900px) {

  /*
   * Return to normal content width.
   */

  .film-video .video-wrapper {
    width: var(--content-width);
  }


  /*
   * Tablet vertical centring.
   */

  .film-video .video-wrapper:first-child {
    margin-top: max(
      0px,
      calc(
        (
          100svh
          - (var(--content-width) * var(--rh) / var(--rw))
        ) / 2
      )
    );
  }


  .credit-row {
    grid-template-columns: 170px 1fr;
  }

}


/* ==================================================
   MOBILE
   same video behaviour as desktop
   ================================================== */

@media (max-width: 650px) {

  /*
   * Almost full viewport width on mobile.
   *
   * This gives embedded Vimeo players more
   * horizontal space for their native controls.
   */

  .film-video .video-wrapper {
    width: calc(100vw - 24px);
  }


  /*
   * First video centred in the remaining
   * visible viewport below the mobile header.
   */

  .film-video .video-wrapper:first-child {
    margin-top: max(
      0px,
      calc(
        (
          100dvh
          - 72px
          - (
            (100vw - 24px)
            * var(--rh) / var(--rw)
          )
        ) / 2
      )
    );
  }


  /*
   * Following videos stay directly underneath.
   */

  .film-video .video-wrapper:not(:first-child) {
    margin-top: 20px;
  }


  /* DETAILS */

  .film-details {
    padding-top: 50px;
  }


  /* CREDITS */

  .credit-row {
    grid-template-columns: 45% 55%;
  }

}