/* Responsive day rail, centered button labels and mobile carousel performance. */

/* Keep text visually centered in all ordinary action buttons without changing
   the intentionally left-aligned rows inside language/cinema dropdowns. */
button:not([role="menuitemradio"]):not([data-hero-card]):not(.hero-carousel__dot) {
  text-align: center;
}

.button,
.menu-toggle,
.filters button,
.showtimes button,
.event-grid button,
.about button,
.back-to-top,
.booking-modal button,
.trailer-modal button {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.button,
.filters button,
.showtimes button,
.event-grid button,
.about button,
.back-to-top {
  display: inline-flex;
}

/* Keep the mobile navigation trigger hidden until the navigation breakpoint.
   This rule lives in the final stylesheet so generic button centering cannot
   accidentally make the trigger visible on desktop. */
.menu-toggle {
  display: none;
}

.showtimes button:not(.showtimes__toggle) {
  flex-direction: column;
}

.showtimes__toggle {
  justify-content: center;
  text-align: center;
}

.showtimes__toggle[hidden] {
  display: none !important;
}

.showtimes__toggle::after {
  display: inline-grid;
  flex: 0 0 22px;
  place-items: center;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transform: none;
}

.movie-card[data-showtimes-expanded="true"] .showtimes__toggle::after {
  transform: none;
}

.hero-carousel__control:active {
  background: var(--surface-control-hover);
  transform: scale(.9);
  transition-duration: .08s;
}

.hero-carousel__dot:active::before {
  transform: translateY(-50%) scaleX(.88) scaleY(1.55);
}

.date-strip {
  scroll-padding-inline: .42rem;
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.date-strip button {
  scroll-snap-align: center;
  scroll-snap-stop: normal;
  text-align: center;
}

.date-strip button:active {
  transform: translateY(0) scale(.97);
  transition-duration: .08s;
}

.date-strip button.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .35rem;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: .44;
  transform: translateX(-50%);
}

@media (max-width: 980px) {
  .menu-toggle {
    display: inline-flex;
  }

  .date-strip {
    display: flex;
    grid-template-columns: none;
    justify-content: flex-start;
    gap: .4rem;
    padding: .4rem;
    scroll-snap-type: x mandatory;
  }

  .date-strip button {
    flex: 0 0 clamp(132px, 24vw, 168px);
    min-width: 0;
  }
}

@media (max-width: 700px) {
  .date-strip {
    width: calc(100vw - 1rem);
    margin-bottom: 2.4rem;
    padding-inline: .35rem;
    scroll-padding-inline: .35rem;
  }

  .date-strip button {
    flex-basis: clamp(118px, 38vw, 148px);
    grid-template-columns: 1fr;
    gap: .18rem;
    min-height: 58px;
    padding: .55rem .72rem;
  }

  /* Mobile mode only animates compositor-friendly properties. */
  .hero-carousel__track {
    transition: transform .58s cubic-bezier(.22, 1, .36, 1) !important;
  }

  .hero-preview-card {
    filter: none !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.38) !important;
    backface-visibility: hidden;
    transition:
      transform .5s cubic-bezier(.22, 1, .36, 1),
      opacity .24s ease !important;
  }

  .hero-preview-card.is-active {
    box-shadow: 0 20px 54px rgba(0,0,0,.48) !important;
  }

  .hero-preview-card img {
    filter: none !important;
    backface-visibility: hidden;
    transition: transform .55s cubic-bezier(.22, 1, .36, 1) !important;
  }

  .hero-preview-card:not(.is-active) {
    opacity: .62;
  }

  /* Avoid expensive live backdrop blur during the slide transition. */
  .hero-carousel__control,
  .hero-preview-card > span:not(.hero-preview-card__caption),
  .hero__copy {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .hero-carousel__control {
    background: rgba(9,13,24,.96) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
  }

  .hero__copy {
    background: rgba(16,23,41,.98) !important;
    box-shadow: 0 14px 38px rgba(0,0,0,.3) !important;
  }

  /* The background stays static on phones, so it no longer needs blur or
     animated scaling. The veil still provides the cinematic atmosphere. */
  .hero__image {
    filter: none !important;
    opacity: .38 !important;
    transform: scale(1.02) !important;
    transition: none !important;
  }

  .hero.is-theme-fading .hero__image {
    opacity: .38 !important;
    transform: scale(1.02) !important;
  }

  .hero__veil {
    transition: none !important;
  }
}

@media (max-width: 420px) {
  .date-strip button {
    flex-basis: 42vw;
  }
}

@media (hover: none) and (pointer: coarse) {
  .hero-carousel__control {
    width: 50px;
    height: 50px;
  }

  .date-strip button:not(.is-active):hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel__control,
  .date-strip button,
  .hero-carousel__dot::before,
  .hero-carousel__track,
  .hero-preview-card,
  .hero-preview-card img {
    transition: none !important;
  }
}