/* ---------------------------------------------------------------------------
 * Phone layout for the home banner, and smoother shelves everywhere.
 *
 * The banner painted one landscape still. Cropping a 16:9 frame to a 375px
 * screen throws away the middle of the shot, which is where the subject is, so
 * the slide read as a washed-out strip. Every film also ships a 2:3 poster, and
 * banner.blade.php now hands that over as --bg-mobile; this uses it below the
 * theme's own phone breakpoint and leaves the wide still to desktop.
 *
 * The shelves felt sticky because each slide is a full-size background image
 * being repainted on the main thread as the track moves. Promoting the track to
 * its own layer and telling the browser it is about to move hands the scroll to
 * the compositor instead.
 * ------------------------------------------------------------------------- */

/* ---- shelves: make the horizontal drag feel free-running ---------------- */

.slick-track,
.slick-list {
  /* the track is what actually translates; giving it a layer keeps the drag off
     the main thread */
  backface-visibility: hidden;
  transform: translateZ(0);
}

.slick-list {
  will-change: transform;
}

.slick-slider .slick-track {
  /* slick animates this itself; declaring it avoids a layer being created and
     thrown away on every drag */
  will-change: transform;
}

.entainment-slick-card .image-box img,
.slick-item img {
  /* a decode on the main thread mid-drag is what shows up as a stutter */
  content-visibility: auto;
}

/* off-screen shelves do not need to be laid out until they are near */
.slick-banner ~ section,
.card-style-slider {
  contain: layout style paint;
}

@media (prefers-reduced-motion: no-preference) {
  .slick-slider .slick-track {
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

/* ---- the banner on phones ----------------------------------------------- */

@media (max-width: 767.98px) {

  /* the poster is 2:3, so give it a shape close to that rather than a strip */
  .main-banner .slick-item {
    background-position: center center !important;
    background-size: cover !important;
    height: 78vh !important;
    max-height: 660px !important;
    min-height: 500px !important;
  }

  /* the portrait poster, where the film has one; the wide still stays the
     fallback so a film without a poster still shows something */
  .main-banner .slick-item[style*="--bg-mobile"] {
    background-image: var(--bg-mobile) !important;
  }

  /* text over a photograph needs its own ground, otherwise legibility depends
     on which frame the film happens to open with */
  .main-banner .slick-item::before {
    background: linear-gradient(to top,
                rgba(0, 0, 0, 0.94) 0%,
                rgba(0, 0, 0, 0.78) 26%,
                rgba(0, 0, 0, 0.28) 54%,
                rgba(0, 0, 0, 0) 76%) !important;
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
  }

  .main-banner .slick-item .movie-content {
    padding: 32px 0 44px !important;
    position: relative;
    z-index: 2;
  }

  .main-banner .movie-info {
    padding-inline: 4px;
  }

  /* 22px is a body heading, not a hero title */
  .main-banner .movie-info h4,
  .main-banner .movie-info .h4 {
    font-size: clamp(1.6rem, 7.5vw, 2.15rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    margin-bottom: 0.5rem !important;
  }

  .main-banner .movie-info p {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    opacity: 0.92;
    overflow: hidden;
  }

  /* the genre chips were 14px text in a 24px row - easy to miss, easy to
     mis-tap */
  .main-banner .movie-tag-list {
    gap: 8px !important;
  }

  .main-banner .movie-tag-list .tag {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    font-size: 0.82rem !important;
    padding: 4px 12px !important;
  }

  /* year / language / runtime / rating */
  .main-banner .movie-info .list-inline {
    font-size: 0.9rem !important;
    margin-top: 0.9rem !important;
  }

  .main-banner .btn {
    font-size: 1rem !important;
    padding: 12px 24px !important;
  }

  .main-banner .slick-dots {
    bottom: 1rem !important;
    z-index: 3;
  }
}

/* Very small phones - keep the title off a fourth line */
@media (max-width: 380px) {
  .main-banner .movie-info h4,
  .main-banner .movie-info .h4 {
    font-size: 1.5rem !important;
  }

  .main-banner .slick-item {
    min-height: 460px !important;
  }
}