/* ==========================================================================
   Crossfade slider (js/slider.js): home page hero and room gallery
   ========================================================================== */
@layer components {
	.slider {
		position: relative;
		touch-action: pan-y;
	}
	.slider button {
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}
	.slider-slides {
		position: absolute;
		inset: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	/* Slides stack on top of each other; only the ones next in line are rendered. */
	.slider-slide {
		position: absolute;
		inset: 0;
		display: none;
		opacity: 0;
		transition: opacity .5s;
	}
	.slider-slide.is-ready { display: block; }
	.slider-slide.is-active { opacity: 1; z-index: 2; }
	.slider-slide.is-leaving { opacity: 1; z-index: 1; transition: none; }
	.slider picture { display: contents; }
	.slider-slide img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		user-select: none;
		-webkit-user-drag: none;
	}
	@media (prefers-reduced-motion: reduce) {
		.slider-slide { transition: none; }
	}

	/* Home page hero
	   ========================================================================== */
	.hero {
		/* The 1400 x 800 design size, capped at 800px tall. The explicit width stops
		   max-height from also capping the width through the aspect ratio. */
		width: 100%;
		aspect-ratio: 7 / 4;
		max-height: 800px;
		overflow: hidden;
	}
	.hero .slider-slide img { object-position: center top; }

	.hero .slider-bullets,
	.hero .slider-arrow {
		position: absolute;
		z-index: 3;
		opacity: 0;
		transition: opacity .2s ease-out;
	}
	.hero:hover :is(.slider-bullets, .slider-arrow),
	.hero:focus-within :is(.slider-bullets, .slider-arrow),
	.hero.is-touched .slider-bullets {
		opacity: 1;
	}
	.hero .slider-bullets {
		display: flex;
		left: 50%;
		bottom: 5%; /* 40px at full size, scaled with the hero */
		translate: -50% 0;
	}
	.hero .slider-bullet {
		width: 19px;
		height: 19px;
		background: url(../img/slider/bullet.png) no-repeat left bottom;
	}
	.hero .slider-bullet:hover,
	.hero .slider-bullet.is-active {
		background-position: left top;
	}
	.hero .slider-arrow {
		top: 50%;
		width: 40px;
		height: 40px;
		margin-top: -20px;
		background: no-repeat left top;
	}
	.hero .slider-arrow:hover { background-position: left bottom; }
	.hero .slider-prev { left: 20px; background-image: url(../img/slider/arrow-left.png); }
	.hero .slider-next { right: 20px; background-image: url(../img/slider/arrow-right.png); }
	.hero .slider-timer {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
		width: 0;
		height: 10px;
		background: url(../img/slider/timer.png);
	}
	@media (hover: none) {
		.hero .slider-arrow { display: none; }
	}
	@media (max-width: 479px) {
		.hero :is(.slider-bullets, .slider-arrow) { display: none; }
	}

	/* Room gallery
	   ========================================================================== */
	.gallery .slider-stage {
		position: relative;
		aspect-ratio: 960 / 500;
		overflow: hidden;
	}
	.gallery .slider-arrow {
		position: absolute;
		top: 50%;
		z-index: 3;
		width: 20px;
		height: 30px;
		margin-top: -15px;
		opacity: 0;
		transition: opacity .5s;
	}
	.gallery .slider-stage:hover .slider-arrow,
	.gallery .slider-arrow:focus-visible {
		opacity: 1;
	}
	.gallery .slider-prev { left: 20px; }
	.gallery .slider-next { right: 20px; }
	/* Chevrons drawn from two skewed bars */
	.gallery .slider-arrow::before,
	.gallery .slider-arrow::after {
		content: '';
		position: absolute;
		width: 50%;
		height: 50%;
		background-color: #fff;
	}
	.gallery .slider-arrow::before { top: 0; }
	.gallery .slider-arrow::after { top: 50%; }
	.gallery .slider-prev::before { left: 30%; transform: skew(145deg, 0deg); }
	.gallery .slider-prev::after { left: 30%; transform: skew(-145deg, 0deg); }
	.gallery .slider-next::before { right: 30%; transform: skew(35deg, 0deg); }
	.gallery .slider-next::after { right: 30%; transform: skew(-35deg, 0deg); }

	.gallery .slider-thumbs {
		display: flex;
		gap: 4px;
		margin-top: 4px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.gallery .slider-thumbs::-webkit-scrollbar { display: none; }
	/* Centered while the strip fits, start-aligned and scrollable once it doesn't */
	.gallery .slider-thumb:first-child { margin-left: auto; }
	.gallery .slider-thumb:last-child { margin-right: auto; }
	.gallery .slider-thumb {
		flex: none;
		width: 100px;
		height: 80px;
		overflow: hidden;
	}
	.gallery .slider-thumb.is-active { border: 2px solid #86b535; }
	.gallery .slider-thumb img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}