/**
 * Shared Brand New + Used cinema hero canvas (design-only).
 * Designer templates (both sections):
 *   Desktop: 2400 × 1000 (12:5), framed ≤ 400px tall
 *   Mobile:  1:1 square, full-bleed width (Revibe-style home hero)
 * Scope: .sf-hero-cinema[data-hero-cinema] only
 */

:root {
  /* Lead desktop poster. JS locks one ratio for every slide so the frame does not jump. */
  --rt-hero-ar-desktop: 1600 / 443;
  --rt-hero-ar-mobile: 1 / 1;
  /* Was 353px — too short vs wide viewports, so cover cropped poster text/badge */
  --rt-hero-desk-max-h: 420px;
}

.sf-hero-cinema[data-hero-cinema],
.page-home .sf-hero.sf-hero-cinema[data-hero-cinema],
.page-home .sf-hero.sf-hero-cinema[data-hero-cinema].sf-hero-bleed,
.page-used .sf-hero.sf-hero-cinema[data-hero-cinema],
.page-used .page-used-hero.sf-hero-cinema[data-hero-cinema] {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  /* Light canvas — avoid blank dark half during fades / letterbox */
  background: #f3f5f8 !important;
  box-sizing: border-box !important;
}

.sf-hero-cinema[data-hero-cinema] .sf-hero-stage,
.page-home .sf-hero.sf-hero-cinema[data-hero-cinema] .sf-hero-stage,
.page-home .sf-hero.sf-hero-visual-first.sf-hero-cinema[data-hero-cinema] .sf-hero-stage,
.page-home .sf-hero-cinema[data-hero-cinema].sf-hero-split .sf-hero-stage,
.page-used .page-used-hero.sf-hero-cinema[data-hero-cinema] .sf-hero-stage {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.sf-hero-cinema[data-hero-cinema] .sf-hero-visual,
.page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-visual,
.page-used .page-used-hero.sf-hero-cinema[data-hero-cinema] .sf-hero-visual {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f3f5f8 !important;
  border-radius: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: var(--rt-hero-ar-mobile) !important;
  max-height: none !important;
}

.sf-hero-cinema[data-hero-cinema] .sf-hero-visual::before,
.sf-hero-cinema[data-hero-cinema] .sf-hero-visual::after,
.page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-visual::before,
.page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-visual::after,
.page-used .page-used-hero.sf-hero-cinema[data-hero-cinema] .sf-hero-visual::before,
.page-used .page-used-hero.sf-hero-cinema[data-hero-cinema] .sf-hero-visual::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

/* All shots stacked in the fixed canvas — fade only */
.sf-hero-cinema[data-hero-cinema] .sf-hero-shot,
.sf-hero-cinema[data-hero-cinema] .sf-hero-shot.is-flip,
.page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-shot,
.page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-shot.is-flip,
.page-used .page-used-hero.sf-hero-cinema[data-hero-cinema] .sf-hero-shot {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  transition: opacity 0.45s ease !important;
  background: none !important;
  background-image: none !important;
  border-radius: 0 !important;
  z-index: 1 !important;
}

.sf-hero-cinema[data-hero-cinema] .sf-hero-shot.is-active,
.sf-hero-cinema[data-hero-cinema] .sf-hero-shot.is-flip.is-active,
.page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-shot.is-active,
.page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-shot.is-flip.is-active,
.page-used .page-used-hero.sf-hero-cinema[data-hero-cinema] .sf-hero-shot.is-active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
  max-height: none !important;
  pointer-events: auto !important;
}

/* Whole-slide CTA hit target (active slide only) */
.sf-hero-cinema[data-hero-cinema] .sf-hero-slide-link,
.page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-slide-link,
.page-used .page-used-hero.sf-hero-cinema[data-hero-cinema] .sf-hero-slide-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Inactive slide links must not steal hits (pointer-events:auto on child bypasses parent:none) */
.sf-hero-cinema[data-hero-cinema] .sf-hero-shot:not(.is-active) .sf-hero-slide-link,
.page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-shot:not(.is-active) .sf-hero-slide-link,
.page-used .page-used-hero.sf-hero-cinema[data-hero-cinema] .sf-hero-shot:not(.is-active) .sf-hero-slide-link {
  pointer-events: none !important;
}

.sf-hero-cinema[data-hero-cinema] .sf-hero-shot picture,
.page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-shot picture,
.page-used .page-used-hero.sf-hero-cinema[data-hero-cinema] .sf-hero-shot picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

/*
 * Fill frame edge-to-edge. Prefer cover when asset matches canvas AR.
 * object-position biased slightly toward top so baked-in headline/badge stay visible
 * when a short max-height forces a wider crop than the template 12:5.
 */
.sf-hero-cinema[data-hero-cinema] .sf-hero-shot img,
.page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-shot img,
.page-used .page-used-hero.sf-hero-cinema[data-hero-cinema] .sf-hero-shot img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  /* One frame for every slide. Cover keeps a shorter poster the same size as the first. */
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  pointer-events: none !important;
}

/* Pagination — small, equal dots, bottom-centered */
.sf-hero-cinema[data-hero-cinema] .sf-hero-dots,
.page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-dots,
.page-used .page-used-hero.sf-hero-cinema[data-hero-cinema] .sf-hero-dots {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 10px !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(11, 18, 32, 0.28) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

.sf-hero-cinema[data-hero-cinema] .sf-hero-dots[hidden],
.sf-hero-cinema[data-hero-cinema] .sf-hero-dots.is-single,
.page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-dots[hidden],
.page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-dots.is-single {
  display: none !important;
}

.sf-hero-cinema[data-hero-cinema] .sf-hero-dots button,
.page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-dots button {
  width: 6px !important;
  height: 6px !important;
  min-width: 6px !important;
  min-height: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28) !important;
  cursor: pointer !important;
  appearance: none !important;
  transform: none !important;
}

.sf-hero-cinema[data-hero-cinema] .sf-hero-dots button.is-active,
.page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-dots button.is-active {
  width: 6px !important;
  height: 6px !important;
  min-width: 6px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  transform: scale(1.15) !important;
}

/* Desktop prev/next */
.sf-hero-cinema[data-hero-cinema] .sf-hero-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 6 !important;
  width: 36px !important;
  height: 36px !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(11, 18, 32, 0.38) !important;
  color: #fff !important;
  cursor: pointer !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  opacity: 0.72 !important;
  transition: opacity 0.2s ease, background 0.2s ease !important;
}

.sf-hero-cinema[data-hero-cinema] .sf-hero-nav:hover,
.sf-hero-cinema[data-hero-cinema] .sf-hero-nav:focus-visible {
  opacity: 1 !important;
  background: rgba(11, 18, 32, 0.55) !important;
  outline: none !important;
}

.sf-hero-cinema[data-hero-cinema] .sf-hero-nav svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

.sf-hero-cinema[data-hero-cinema] .sf-hero-nav-prev {
  left: 10px !important;
  right: auto !important;
}

.sf-hero-cinema[data-hero-cinema] .sf-hero-nav-next {
  right: 10px !important;
  left: auto !important;
}

.sf-hero-cinema[data-hero-cinema].is-multi .sf-hero-nav {
  display: none !important;
}

@media (min-width: 1024px) {
  .sf-hero-cinema[data-hero-cinema] .sf-hero-visual,
  .page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-visual,
  .page-used .page-used-hero.sf-hero-cinema[data-hero-cinema] .sf-hero-visual {
    /* Live ratio is set from the poster file so cover/contain cannot clip it */
    aspect-ratio: var(--rt-hero-ar-live, var(--rt-hero-ar-desktop)) !important;
    max-height: none !important;
  }

  .page-home .sf-hero.sf-hero-cinema[data-hero-cinema] .sf-hero-stage,
  .page-home .sf-hero.sf-hero-visual-first.sf-hero-cinema[data-hero-cinema] .sf-hero-stage,
  .page-home .sf-hero-cinema[data-hero-cinema].sf-hero-split .sf-hero-stage,
  .page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-shot.is-active,
  .page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-shot picture,
  .page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-shot img {
    max-height: none !important;
  }

  .sf-hero-cinema[data-hero-cinema].is-multi .sf-hero-nav {
    display: inline-flex !important;
  }

  .sf-hero-cinema[data-hero-cinema] .sf-hero-dots,
  .page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-dots {
    bottom: 12px !important;
  }
}

@media (max-width: 1023px) {
  .sf-hero-cinema[data-hero-cinema] .sf-hero-visual,
  .page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-visual,
  .page-used .page-used-hero.sf-hero-cinema[data-hero-cinema] .sf-hero-visual {
    aspect-ratio: var(--rt-hero-ar-live, var(--rt-hero-ar-mobile)) !important;
    max-height: none !important;
    height: auto !important;
  }

  .page-home .sf-hero.sf-hero-cinema[data-hero-cinema] .sf-hero-stage,
  .page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-visual,
  .page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-shot.is-active,
  .page-used .page-used-hero.sf-hero-cinema[data-hero-cinema] .sf-hero-stage,
  .page-used .page-used-hero.sf-hero-cinema[data-hero-cinema] .sf-hero-visual,
  .page-used .page-used-hero.sf-hero-cinema[data-hero-cinema] .sf-hero-shot.is-active {
    height: auto !important;
    max-height: none !important;
    aspect-ratio: var(--rt-hero-ar-live, var(--rt-hero-ar-mobile)) !important;
  }

  .page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-stage,
  .page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-shot.is-active,
  .page-used .page-used-hero.sf-hero-cinema[data-hero-cinema] .sf-hero-stage,
  .page-used .page-used-hero.sf-hero-cinema[data-hero-cinema] .sf-hero-shot.is-active {
    aspect-ratio: auto !important;
  }

  .sf-hero-cinema[data-hero-cinema] .sf-hero-nav {
    display: none !important;
  }

  .sf-hero-cinema[data-hero-cinema] .sf-hero-dots,
  .page-home .sf-hero-cinema[data-hero-cinema] .sf-hero-dots,
  .page-used .page-used-hero.sf-hero-cinema[data-hero-cinema] .sf-hero-dots {
    bottom: 8px !important;
    padding: 3px 7px !important;
  }
}

.page-used .page-used-hero[data-hero-cinema] .page-used-hero-badge {
  z-index: 4 !important;
  bottom: 28px !important;
}

@media (max-width: 1023px) {
  .page-used .page-used-hero[data-hero-cinema] .page-used-hero-badge {
    bottom: 26px !important;
  }
}