/* =========================================================
   TR Slider / Page Gallery / Lightbox
   Consolidated from style.css + actor.css
   Fade transition, no swipe movement, no page jump
========================================================= */


/* =========================================================
   Shared Slider Base
========================================================= */

.credit-detail-slider,
.credit-detail__video,
.credit-detail__featured-image,
.credit-detail__placeholder {
	width: 100%;
	max-width: 1120px;
	margin-inline: auto;
}

.credit-detail-slider {
	position: relative;
}

.credit-detail-slider__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.credit-detail-slider__track {
	position: relative;
	display: block !important;
	width: 100%;
	transform: none !important;
	transition: none !important;
	will-change: auto !important;
}

.credit-detail-slider__button,
.credit-gallery__button,
.credit-detail__featured-image-button {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.credit-detail-slider__slide {
	display: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: none !important;
	transition:
		opacity 320ms ease,
		visibility 0ms linear 320ms;
}

.credit-detail-slider__slide.is-active {
	display: block;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none !important;
	transition:
		opacity 320ms ease,
		visibility 0ms;
}

.credit-detail-slider__slide img,
.credit-detail__featured-image img,
.credit-gallery__button img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	object-position: center center;
	background: transparent;
}

.credit-detail-slider__caption,
.page-hero-gallery__caption {
	display: block;
	position: relative;
	z-index: 30;
	width: min(100% - 2rem, 760px);
	min-height: 1.45em;
	margin: 0.85rem auto 0;
	padding: 0;

	color: var(--tr-off-white);
	font-family: var(--font-display);
	font-size: clamp(18px, 2vw, 28px);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
	text-align: center;

	opacity: 1;
	visibility: visible;
}

.credit-detail-slider__caption.is-empty,
.page-hero-gallery__caption.is-empty {
	display: none !important;
}

.credit-detail-slider__caption span + span::before,
.credit-gallery__caption span + span::before,
.credit-lightbox__caption span + span::before {
	content: " / ";
}


/* =========================================================
   Page-Style / Hero Slider
   Stable height prevents page jump
========================================================= */

.credit-detail-slider--page-style,
.page-hero-gallery {
	--credit-slider-image-height: min(72vh, 760px);
	--page-gallery-image-height: min(72vh, 760px);

	position: relative;
	width: min(100%, 1120px);
	max-width: 1120px;
	margin: 0 auto clamp(3rem, 6vw, 5rem);
	overflow: visible;
}

.page-hero-gallery {
	width: min(100%, 1180px);
}

.page-hero-gallery__slider,
.credit-detail-slider--page-style {
	position: relative;
	height: auto;
	min-height: 0;
	overflow: visible;
}

.credit-detail-slider--page-style .credit-detail-slider__viewport {
	position: relative !important;
	width: 100% !important;
	height: var(--credit-slider-image-height, var(--page-gallery-image-height, 520px)) !important;
	min-height: var(--credit-slider-image-height, var(--page-gallery-image-height, 520px)) !important;
	overflow: visible !important;
}

.page-hero-gallery__slider .credit-detail-slider__slides {
	position: relative !important;
	width: 100% !important;
	height: var(--page-gallery-image-height, 520px) !important;
	min-height: var(--page-gallery-image-height, 520px) !important;
	overflow: hidden !important;
}

.page-hero-gallery__slider .credit-detail-slider__slides {
	height: var(--page-gallery-image-height, 520px) !important;
	min-height: var(--page-gallery-image-height, 520px) !important;
}

.credit-detail-slider--page-style .credit-detail-slider__track {
	overflow: hidden !important;
}

.credit-detail-slider--page-style .credit-detail-slider__track,
.page-hero-gallery__slider .credit-detail-slider__track {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	transform: none !important;
	transition: none !important;
	will-change: auto !important;
}

.credit-detail-slider--page-style .credit-detail-slider__slide,
.page-hero-gallery__slide {
	position: absolute !important;
	inset: 0 !important;

	display: flex !important;
	align-items: center;
	justify-content: center;

	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;

	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transform: none !important;
	transition:
		opacity 320ms ease,
		visibility 0ms linear 320ms !important;
	animation: none !important;
	grid-area: auto !important;
}

.credit-detail-slider--page-style .credit-detail-slider__slide.is-active,
.page-hero-gallery__slide.is-active {
	position: absolute !important;
	inset: 0 !important;
	z-index: 2;

	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: none !important;
	transition:
		opacity 320ms ease,
		visibility 0ms !important;
}

.credit-detail-slider--page-style .credit-detail-slider__slide.is-entering,
.page-hero-gallery__slide.is-entering {
	z-index: 3;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: none !important;
}

.credit-detail-slider--page-style .credit-detail-slider__slide.is-leaving,
.page-hero-gallery__slide.is-leaving {
	z-index: 1;
	opacity: 0 !important;
	visibility: visible !important;
	pointer-events: none !important;
	transform: none !important;
}

.credit-detail-slider--page-style .credit-detail-slider__slide:not(.is-active):not(.is-entering):not(.is-leaving),
.page-hero-gallery__slide:not(.is-active):not(.is-entering):not(.is-leaving) {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transform: none !important;
}

.credit-detail-slider--page-style .credit-detail-slider__button,
.page-hero-gallery__button,
.credit-gallery__button.page-hero-gallery__button {
	display: flex !important;
	align-items: center;
	justify-content: center;

	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;

	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	cursor: pointer;
}

.credit-detail-slider--page-style .credit-detail-slider__slide img,
.page-hero-gallery__button img,
.page-hero-gallery__slide img {
	display: block !important;

	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: var(--credit-slider-image-height, var(--page-gallery-image-height, 760px)) !important;

	aspect-ratio: auto !important;
	object-fit: contain !important;
	object-position: center center;
	background: transparent !important;
	filter: grayscale(0);
	transform: none !important;
	transition: filter 180ms ease;
}

.page-hero-gallery__button:hover img,
.page-hero-gallery__button:focus-visible img {
	filter: grayscale(1);
	transform: none !important;
}

.photos-collection__description {
	margin-bottom: 30px;
	max-width: 960px;
}
/* Kill all old swipe/slide direction transforms */

.is-sliding-next .credit-detail-slider__slide,
.is-sliding-prev .credit-detail-slider__slide,
.is-prepping-next .credit-detail-slider__slide,
.is-prepping-prev .credit-detail-slider__slide,
.page-hero-gallery__slider.is-sliding-next .page-hero-gallery__slide,
.page-hero-gallery__slider.is-sliding-prev .page-hero-gallery__slide,
.page-hero-gallery__slider.is-prepping-next .page-hero-gallery__slide,
.page-hero-gallery__slider.is-prepping-prev .page-hero-gallery__slide {
	transform: none !important;
}


/* =========================================================
   Slider Controls / Arrows / Dots
========================================================= */

.credit-detail-slider__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1rem;
}

.credit-detail-slider__dots,
.page-hero-gallery__dots,
.page-hero-gallery__slider .credit-detail-slider__dots {
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.55rem;

	width: 100%;
	margin: clamp(1rem, 2vw, 1.5rem) auto 0;
	padding: 0;
}

.credit-detail-slider__dot {
	width: 13px;
	height: 13px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(242, 240, 234, 0.5);
	cursor: pointer;
}

.credit-detail-slider__dot.is-active,
.credit-detail-slider__dot[aria-current="true"] {
	background: var(--tr-brown);
}

.credit-detail-slider__dot:hover,
.credit-detail-slider__dot:focus-visible {
	background: var(--tr-brown);
}

.credit-detail-slider--page-style .credit-detail-slider__dot,
.page-hero-gallery__slider .credit-detail-slider__dot {
	width: 13px;
	height: 13px;
	background: rgba(242, 240, 234, 0.5);
}

.credit-detail-slider--page-style .credit-detail-slider__dot.is-active,
.credit-detail-slider--page-style .credit-detail-slider__dot[aria-current="true"],
.page-hero-gallery__slider .credit-detail-slider__dot.is-active,
.page-hero-gallery__slider .credit-detail-slider__dot[aria-current="true"] {
	background: var(--tr-brown);
}

.credit-detail-slider__arrow,
.credit-detail-slider__nav,
.page-hero-gallery__slider > .credit-detail-slider__nav,
.page-hero-gallery__slider .credit-detail-slider__nav {
	position: absolute !important;
	top: calc(var(--credit-slider-image-height, var(--page-gallery-image-height, 500px)) / 2) !important;
	z-index: 25 !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: clamp(34px, 4vw, 54px) !important;
	height: clamp(34px, 4vw, 54px) !important;
	min-width: 0 !important;
	min-height: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;

	color: var(--tr-off-white);
	font-size: 0 !important;
	line-height: 1 !important;
	text-indent: -9999px !important;

	cursor: pointer;
	transform: translateY(-50%) !important;
}

.credit-detail-slider__arrow--prev,
.credit-detail-slider__nav--prev,
.page-hero-gallery__slider > .credit-detail-slider__nav--prev,
.page-hero-gallery__slider .credit-detail-slider__nav--prev,
.credit-detail-slider__arrow[data-slider-prev] {
	left: clamp(-4rem, -4vw, -2rem) !important;
	right: auto !important;
}

.credit-detail-slider__arrow--next,
.credit-detail-slider__nav--next,
.page-hero-gallery__slider > .credit-detail-slider__nav--next,
.page-hero-gallery__slider .credit-detail-slider__nav--next,
.credit-detail-slider__arrow[data-slider-next] {
	right: clamp(-4rem, -4vw, -2rem) !important;
	left: auto !important;
}

/* Page hero nav buttons use pseudo arrows. 
   Credit detail arrow buttons use .credit-detail-slider__arrow-mark instead. */

.credit-detail-slider__nav::before {
	content: "" !important;
	display: block !important;

	width: 42% !important;
	height: 42% !important;

	border-top: 2px solid currentColor !important;
	border-left: 2px solid currentColor !important;

	text-indent: 0 !important;
}

.credit-detail-slider__nav--prev::before {
	transform: rotate(-45deg) !important;
}

.credit-detail-slider__nav--next::before {
	transform: rotate(135deg) !important;
}

.credit-detail-slider__arrow::before {
	content: none !important;
	display: none !important;
}

.credit-detail-slider__nav:hover,
.credit-detail-slider__nav:focus-visible,
.credit-detail-slider__arrow:hover,
.credit-detail-slider__arrow:focus-visible {
	color: var(--tr-yellow);
}


/* Actor feature slider arrows */

.actor-feature-slider.credit-detail-slider--page-style {
	position: relative;
}

.actor-feature-slider.credit-detail-slider--page-style .credit-detail-slider__controls {
	position: static;
}

.actor-feature-slider.credit-detail-slider--page-style .credit-detail-slider__arrow {
	width: clamp(48px, 5vw, 76px) !important;
	height: clamp(48px, 5vw, 76px) !important;
}

.actor-feature-slider.credit-detail-slider--page-style .credit-detail-slider__arrow[data-slider-prev] {
	left: clamp(-3.75rem, -5vw, -2.25rem) !important;
	right: auto !important;
}

.actor-feature-slider.credit-detail-slider--page-style .credit-detail-slider__arrow[data-slider-next] {
	right: clamp(-3.75rem, -5vw, -2.25rem) !important;
	left: auto !important;
}


/* =========================================================
   Fullscreen Lightbox
========================================================= */

html.has-lightbox-open,
html.has-lightbox-open body,
.has-lightbox-open {
	overflow: hidden !important;
}

.credit-lightbox {
	position: fixed !important;
	inset: 0 !important;
	z-index: 9999 !important;

	display: none !important;
	align-items: center !important;
	justify-content: center !important;

	width: 100vw !important;
	height: 100vh !important;
	padding: clamp(1rem, 3vw, 3rem) !important;

	background: rgba(5, 5, 5, 0.94) !important;
}

.credit-lightbox.is-open {
	display: flex !important;
}

.credit-lightbox__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
}

.credit-lightbox__dialog {
	position: relative !important;
	z-index: 2;

	width: min(100%, 1180px) !important;
	height: min(100%, 88vh) !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	outline: none !important;
}

.credit-lightbox__media,
.credit-lightbox__slides {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;

	display: grid !important;
	place-items: center !important;

	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

.credit-lightbox__slide {
	position: absolute !important;
	inset: 0 !important;

	display: grid !important;
	place-items: center !important;

	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;

	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transform: none !important;
	transition:
		opacity 320ms ease,
		visibility 0ms linear 320ms !important;
	animation: none !important;
}

.credit-lightbox__slide.is-active {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: none !important;
	transition:
		opacity 320ms ease,
		visibility 0ms !important;
}

.credit-lightbox__slide.is-entering {
	z-index: 3;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: none !important;
}

.credit-lightbox__slide.is-leaving {
	z-index: 1;
	opacity: 0 !important;
	visibility: visible !important;
	pointer-events: none !important;
	transform: none !important;
}

.credit-lightbox__slide:not(.is-active):not(.is-entering):not(.is-leaving) {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transform: none !important;
}

.credit-lightbox.is-sliding-next .credit-lightbox__slide,
.credit-lightbox.is-sliding-prev .credit-lightbox__slide,
.credit-lightbox.is-prepping-next .credit-lightbox__slide,
.credit-lightbox.is-prepping-prev .credit-lightbox__slide {
	transform: none !important;
}

.credit-lightbox__slide img,
.credit-lightbox__media img {
	display: block !important;

	width: auto !important;
	height: auto !important;

	max-width: calc(100vw - clamp(3rem, 8vw, 8rem)) !important;
	max-height: calc(100vh - clamp(7rem, 12vw, 10rem)) !important;

	margin: auto !important;

	object-fit: contain !important;
	object-position: center center !important;

	background: transparent !important;
}

.credit-lightbox__caption {
	position: fixed !important;
	left: 50% !important;
	right: auto !important;
	bottom: clamp(1rem, 3vw, 2rem) !important;
	z-index: 10002 !important;

	width: min(100% - 2rem, 760px) !important;
	margin: 0 !important;
	padding: 0.45rem 0.75rem !important;

	transform: translateX(-50%) !important;

	color: var(--tr-off-white) !important;
	background: rgba(5, 5, 5, 0.55) !important;

	font-family: var(--font-body) !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	text-align: center !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.credit-lightbox__close,
.credit-lightbox__nav,
.credit-lightbox__arrow {
	position: fixed !important;
	z-index: 10001 !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;

	color: var(--tr-off-white) !important;
	cursor: pointer !important;
}

.credit-lightbox__close {
	top: clamp(1rem, 3vw, 2rem) !important;
	right: clamp(1rem, 3vw, 2rem) !important;

	width: auto !important;
	height: auto !important;

	font-family: var(--font-display) !important;
	font-size: clamp(48px, 6vw, 86px) !important;
	line-height: 0.7 !important;
}

.credit-lightbox__nav,
.credit-lightbox__arrow {
	top: 50% !important;

	width: clamp(34px, 4vw, 54px) !important;
	height: clamp(34px, 4vw, 54px) !important;

	font-size: 0 !important;
	line-height: 1 !important;
	text-indent: -9999px !important;

	transform: translateY(-50%) !important;
}

.credit-lightbox__nav--prev,
.credit-lightbox__arrow--prev,
.credit-lightbox__nav[data-lightbox-prev],
.credit-lightbox__arrow[data-lightbox-prev] {
	left: clamp(1rem, 3vw, 2rem) !important;
	right: auto !important;
}

.credit-lightbox__nav--next,
.credit-lightbox__arrow--next,
.credit-lightbox__nav[data-lightbox-next],
.credit-lightbox__arrow[data-lightbox-next] {
	right: clamp(1rem, 3vw, 2rem) !important;
	left: auto !important;
}

.credit-lightbox__nav::before,
.credit-lightbox__arrow::before {
	content: "" !important;
	display: block !important;

	width: 42% !important;
	height: 42% !important;

	border-top: 2px solid currentColor !important;
	border-left: 2px solid currentColor !important;

	text-indent: 0 !important;
}

.credit-lightbox__nav--prev::before,
.credit-lightbox__arrow--prev::before,
.credit-lightbox__nav[data-lightbox-prev]::before,
.credit-lightbox__arrow[data-lightbox-prev]::before {
	transform: rotate(-45deg) !important;
}

.credit-lightbox__nav--next::before,
.credit-lightbox__arrow--next::before,
.credit-lightbox__nav[data-lightbox-next]::before,
.credit-lightbox__arrow[data-lightbox-next]::before {
	transform: rotate(135deg) !important;
}

.credit-lightbox__close:hover,
.credit-lightbox__close:focus-visible,
.credit-lightbox__nav:hover,
.credit-lightbox__nav:focus-visible,
.credit-lightbox__arrow:hover,
.credit-lightbox__arrow:focus-visible {
	color: var(--tr-yellow) !important;
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 800px) {
	.credit-detail-slider--page-style,
	.page-hero-gallery {
		--credit-slider-image-height: min(58vh, 520px);
		--page-gallery-image-height: min(58vh, 520px);

		width: min(100%, 560px);
	}

	.credit-detail-slider__arrow,
	.credit-detail-slider__nav,
	.page-hero-gallery__slider > .credit-detail-slider__nav,
	.page-hero-gallery__slider .credit-detail-slider__nav {
		width: 38px !important;
		height: 38px !important;
	}

	.credit-detail-slider__arrow--prev,
	.credit-detail-slider__nav--prev,
	.page-hero-gallery__slider > .credit-detail-slider__nav--prev,
	.page-hero-gallery__slider .credit-detail-slider__nav--prev,
	.credit-detail-slider__arrow[data-slider-prev] {
		left: -0.25rem !important;
	}

	.credit-detail-slider__arrow--next,
	.credit-detail-slider__nav--next,
	.page-hero-gallery__slider > .credit-detail-slider__nav--next,
	.page-hero-gallery__slider .credit-detail-slider__nav--next,
	.credit-detail-slider__arrow[data-slider-next] {
		right: -0.25rem !important;
	}

	.page-hero-gallery__dots,
	.page-hero-gallery__slider .credit-detail-slider__dots {
		display: none !important;
	}

	.credit-lightbox {
		padding: 1rem !important;
	}

	.credit-lightbox__dialog {
		height: 82vh !important;
	}

	.credit-lightbox__slide img,
	.credit-lightbox__media img {
		max-height: calc(100vh - 8rem) !important;
	}

	.credit-lightbox__nav,
	.credit-lightbox__arrow {
		width: 38px !important;
		height: 38px !important;
	}

	.credit-lightbox__nav--prev,
	.credit-lightbox__arrow--prev,
	.credit-lightbox__nav[data-lightbox-prev],
	.credit-lightbox__arrow[data-lightbox-prev] {
		left: 0.75rem !important;
	}

	.credit-lightbox__nav--next,
	.credit-lightbox__arrow--next,
	.credit-lightbox__nav[data-lightbox-next],
	.credit-lightbox__arrow[data-lightbox-next] {
		right: 0.75rem !important;
	}
}

@media (max-width: 767px) {
	.page-hero-gallery__caption,
	.credit-detail-slider__caption {
		font-size: clamp(22px, 2vw, 28px) !important;
	}

	.credit-detail-slider__slides img:is([sizes="auto" i], [sizes^="auto," i]) {
		contain-intrinsic-size: auto !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.credit-detail-slider__slide,
	.page-hero-gallery__slide,
	.credit-lightbox__slide {
		transition: none !important;
		animation: none !important;
	}
}

/* Make existing arrow-mark spans visible again */

.credit-detail-slider--page-style .credit-detail-slider__arrow {
	overflow: visible !important;
	text-indent: 0 !important;
}

.credit-detail-slider--page-style .credit-detail-slider__arrow-mark {
	display: block !important;
	width: 42% !important;
	height: 42% !important;

	border-top: 2px solid currentColor !important;
	border-left: 2px solid currentColor !important;

	color: inherit !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.credit-detail-slider--page-style .credit-detail-slider__arrow--prev .credit-detail-slider__arrow-mark,
.credit-detail-slider--page-style .credit-detail-slider__arrow[data-slider-prev] .credit-detail-slider__arrow-mark {
	transform: rotate(-45deg) !important;
}

.credit-detail-slider--page-style .credit-detail-slider__arrow--next .credit-detail-slider__arrow-mark,
.credit-detail-slider--page-style .credit-detail-slider__arrow[data-slider-next] .credit-detail-slider__arrow-mark {
	transform: rotate(135deg) !important;
}

.page-hero-gallery__description {
	text-align: center;
	color: var(--tr-muted);
	font-style: italic;
}