/*
 * Shared video chip — sidebar (large) + hero card (small).
 */

.tourbin-video-chip {
	--video-chip-toggle-w: 22px;
	--video-chip-toggle-h: 25px;
	--video-chip-progress-w: 130px;
	--video-chip-progress-bottom: 14px;

	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: inherit;
	background: transparent;
}

.tourbin-video-chip--hero {
	--video-chip-toggle-w: 10px;
	--video-chip-toggle-h: 11px;
	--video-chip-progress-w: 56px;
	--video-chip-progress-bottom: 10%;
}

.tourbin-video-chip__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: none;
	border-radius: inherit;
	background: transparent;
	-webkit-tap-highlight-color: transparent;
}

.tourbin-video-chip__media::-webkit-media-controls {
	display: none !important;
}

.tourbin-video-chip__media::-webkit-media-controls-enclosure {
	display: none !important;
}

.tourbin-video-chip__media::-webkit-media-controls-panel {
	display: none !important;
}

.tourbin-video-chip__media::-webkit-media-controls-start-playback-button,
.tourbin-video-chip__media::-webkit-media-controls-overlay-play-button {
	display: none !important;
	-webkit-appearance: none;
}

.tourbin-video-chip__toggle {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: var(--video-chip-toggle-w);
	height: var(--video-chip-toggle-h);
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	z-index: 2;
}

.tourbin-video-chip__icon-slot {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--video-chip-toggle-w);
	height: var(--video-chip-toggle-h);
}

.tourbin-video-chip__icon {
	display: block;
	grid-area: 1 / 1;
	width: var(--video-chip-toggle-w);
	height: var(--video-chip-toggle-h);
	pointer-events: none;
}

.tourbin-video-chip__icon--pause {
	display: none;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}

.tourbin-video-chip.is-playing .tourbin-video-chip__icon--play {
	display: none;
}

.tourbin-video-chip.is-playing .tourbin-video-chip__icon--pause {
	display: block;
}

.tourbin-video-chip__progress {
	position: absolute;
	left: 50%;
	bottom: var(--video-chip-progress-bottom);
	transform: translateX(-50%);
	width: var(--video-chip-progress-w);
	height: 2px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	z-index: 2;
	direction: ltr;
}

.tourbin-video-chip__progress[hidden] {
	display: none !important;
}

.tourbin-video-chip__progress-track,
.tourbin-video-chip__progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 0;
	pointer-events: none;
}

.tourbin-video-chip__progress-track {
	width: 100%;
	border-top: 2px solid rgba(255, 255, 255, 0.44);
}

.tourbin-video-chip--hero .tourbin-video-chip__progress-track,
.tourbin-video-chip--hero .tourbin-video-chip__progress-fill {
	border-top-width: 1.5px;
}

.tourbin-video-chip__progress-fill {
	width: 0;
	border-top: 2px solid #fff428;
}

.tourbin-video-chip__expand {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	z-index: 3;
	opacity: 0;
	transition: opacity 0.16s ease;
	position: absolute;
	top: 8%;
	inset-inline-end: 8%;
}

.tourbin-video-chip__expand-icon {
	display: block;
	grid-area: 1 / 1;
	width: 12px;
	height: 12px;
	pointer-events: none;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}

.tourbin-video-chip__expand-icon--collapse {
	display: none;
}

.tourbin-video-chip.is-expanded .tourbin-video-chip__expand-icon--expand {
	display: none;
}

.tourbin-video-chip.is-expanded .tourbin-video-chip__expand-icon--collapse {
	display: block;
}

.tourbin-video-chip--carousel-stage {
	--video-chip-toggle-w: 22px;
	--video-chip-toggle-h: 25px;
	--video-chip-progress-w: 130px;
	--video-chip-progress-bottom: 12%;
}

.tourbin-video-chip--carousel-stage .tourbin-video-chip__expand {
	width: 22px;
	height: 22px;
	opacity: 0;
}

.tourbin-video-carousel__chip-slot:hover .tourbin-video-chip--carousel-stage .tourbin-video-chip__expand,
.tourbin-video-carousel__chip-slot .tourbin-video-chip--carousel-stage.is-playing .tourbin-video-chip__expand,
.tourbin-video-carousel__chip-slot .tourbin-video-chip--carousel-stage:focus-within .tourbin-video-chip__expand {
	opacity: 1;
}

.tourbin-video-chip--hero .tourbin-video-chip__expand-icon {
	width: 10px;
	height: 10px;
}

.tourbin-video-chip--stage .tourbin-video-chip__expand-icon {
	width: 14px;
	height: 14px;
}

.tourbin-video-chip--hero .tourbin-video-chip__expand {
	width: 16px;
	height: 16px;
}

.tourbin-video-chip--hero:hover .tourbin-video-chip__expand,
.tourbin-video-chip--hero:focus-within .tourbin-video-chip__expand,
.tourbin-video-chip--hero.is-playing .tourbin-video-chip__expand,
.tourbin-video-chip--stage .tourbin-video-chip__expand {
	opacity: 1;
}

.tourbin-video-chip--stage {
	--video-chip-toggle-w: 22px;
	--video-chip-toggle-h: 25px;
	--video-chip-progress-w: 130px;
	--video-chip-progress-bottom: 14px;
}

.tourbin-video-chip--stage .tourbin-video-chip__progress-track,
.tourbin-video-chip--stage .tourbin-video-chip__progress-fill {
	border-top-width: 2px;
}

.tourbin-video-chip-placeholder {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background-color: #1a1a1a;
	background-size: cover;
	background-position: center;
}

.tourbin-video-chip-stage {
	position: fixed;
	inset: 0;
	/* Above hero card-active / front-layer (53) and header chrome (80) */
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.tourbin-video-chip-stage[hidden] {
	display: none !important;
}

.tourbin-video-chip-stage__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.78);
}

.tourbin-video-chip-stage__dialog {
	position: relative;
	z-index: 1;
	width: min(90vw, 640px);
	aspect-ratio: 308 / 221;
	max-height: min(80vh, 480px);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 22px 44px rgba(0, 0, 0, 0.2);
}

.tourbin-video-chip-stage__slot {
	width: 100%;
	height: 100%;
}

.tourbin-video-chip-stage__slot > .tourbin-video-chip {
	width: 100%;
	height: 100%;
	border-radius: 20px;
}

body.is-hero-video-stage-open {
	overflow: hidden;
}

@media (max-width: 900px) {
	.tourbin-video-chip__expand {
		display: none;
	}
}