/**
 * The Home page slideshow.
 *
 * The frame, the black field and the caption card already come from the
 * Home page's own styles (.fa-journey-gallery, .fa-slide, .fa-caption,
 * .gold, .line). Nothing here changes them. This file only adds what the
 * dynamic version needs: quiet controls, a position indicator, a settled
 * height so the page never jumps, and calmer behaviour on small screens
 * and for people who prefer less motion.
 */

.fa-home-slideshow {
	--fa-home-gold: #d9b761;
}


/* The Home page's own look, restated here scoped to this slideshow only,
   so the presentation survives even if the page snippet is ever changed.
   The values are the ones already in use on the Home page. */
.fa-home-slideshow.fa-journey-gallery {
	position: relative;
	background: #090909;
	border: 4px solid transparent;
	border-radius: 22px;
	padding: 16px;
	background:
		linear-gradient( #090909, #090909 ) padding-box,
		linear-gradient( 135deg, #6d5115, #f5d98c, #b98b34, #fff1bc, #6d5115 ) border-box;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.5 ), inset 0 0 30px rgba( 214, 177, 73, 0.08 );
	overflow: hidden;
}

.fa-home-slideshow .fa-slide {
	position: absolute;
	inset: 16px;
	opacity: 0;
	transition: opacity 1.6s ease;
}

.fa-home-slideshow .fa-slide.active {
	opacity: 1;
	z-index: 2;
}

.fa-home-slideshow .fa-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #090909;
}

.fa-home-slideshow .fa-caption {
	position: absolute;
	left: 28px;
	bottom: 28px;
	max-width: 380px;
	background: rgba( 8, 8, 8, 0.52 );
	backdrop-filter: blur( 10px );
	padding: 16px 18px;
	border-left: 3px solid #d8b45f;
	border-radius: 10px;
}

.fa-home-slideshow .gold {
	font: 600 11px Inter, Arial, sans-serif;
	letter-spacing: 4px;
	color: #d9b761;
	text-transform: uppercase;
}

.fa-home-slideshow .line {
	width: 54px;
	height: 2px;
	background: #d9b761;
	margin: 8px 0 12px;
}

.fa-home-slideshow .fa-caption h2.fa-home-slideshow__name {
	margin: 0;
	padding: 0;
	font: italic 400 32px Georgia, serif;
	line-height: 1.15;
	color: #fff;
}

.fa-home-slideshow .fa-caption p.fa-home-slideshow__sub {
	margin: 6px 0 0;
	color: #eee;
	font: 14px Inter, Arial, sans-serif;
}

.fa-home-slideshow .fa-caption .gold.fa-home-slideshow__label {
	font: 600 11px Inter, Arial, sans-serif;
	letter-spacing: 4px;
	color: #d9b761;
	text-transform: uppercase;
}

/* A settled shape, so nothing shifts while the first photograph arrives. */
.fa-home-slideshow.fa-journey-gallery {
	aspect-ratio: 16 / 10;
	min-height: 0;
}

.fa-home-slideshow .fa-slide {
	pointer-events: none;
}

.fa-home-slideshow .fa-slide.active {
	pointer-events: auto;
}

.fa-home-slideshow .fa-caption--link {
	display: block;
	text-decoration: none;
	transition: border-color 400ms ease, transform 500ms ease;
}

.fa-home-slideshow .fa-caption--link:hover,
.fa-home-slideshow .fa-caption--link:focus-visible {
	border-left-color: #f4e3b4;
	transform: translateY( -2px );
}

.fa-home-slideshow .fa-caption--link h2,
.fa-home-slideshow .fa-caption--link p {
	color: inherit;
}

.fa-home-slideshow__cta {
	display: inline-block;
	margin-top: 10px;
	font: 600 10px Inter, Arial, sans-serif;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --fa-home-gold );
}

.fa-home-slideshow__cta::after {
	content: " \2192";
}

/* Arrows: barely there until the slideshow is hovered or focused. */
.fa-home-slideshow__arrow {
	position: absolute;
	top: 50%;
	z-index: 4;
	width: 44px;
	height: 44px;
	padding: 0;
	transform: translateY( -50% );
	border: 0;
	border-radius: 50%;
	background: rgba( 8, 8, 8, 0.45 );
	color: #f3e7cb;
	font: 300 26px/1 Georgia, serif;
	cursor: pointer;
	opacity: 0;
	transition: opacity 300ms ease, background 300ms ease;
}

.fa-home-slideshow__arrow.is-prev {
	left: 22px;
}

.fa-home-slideshow__arrow.is-next {
	right: 22px;
}

.fa-home-slideshow:hover .fa-home-slideshow__arrow,
.fa-home-slideshow:focus-within .fa-home-slideshow__arrow {
	opacity: 1;
}

.fa-home-slideshow__arrow:hover,
.fa-home-slideshow__arrow:focus-visible {
	background: rgba( 8, 8, 8, 0.75 );
	outline: 1px solid rgba( 217, 183, 97, 0.7 );
}

/* Pause and the position dots, resting in the lower right corner. */
.fa-home-slideshow__bar {
	position: absolute;
	right: 26px;
	bottom: 26px;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 14px;
}

.fa-home-slideshow__pause {
	position: relative;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.fa-home-slideshow__pause::before,
.fa-home-slideshow__pause::after {
	content: "";
	position: absolute;
	top: 4px;
	width: 3px;
	height: 14px;
	background: var( --fa-home-gold );
	opacity: 0.85;
	transition: opacity 250ms ease;
}

.fa-home-slideshow__pause::before {
	left: 6px;
}

.fa-home-slideshow__pause::after {
	left: 13px;
}

/* Paused: the two bars become a single play triangle. */
.fa-home-slideshow__pause[aria-pressed="true"]::before {
	left: 7px;
	width: 0;
	height: 0;
	background: none;
	border-left: 11px solid var( --fa-home-gold );
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
}

.fa-home-slideshow__pause[aria-pressed="true"]::after {
	display: none;
}

.fa-home-slideshow__dots {
	display: flex;
	gap: 8px;
}

.fa-home-slideshow__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 1px solid rgba( 217, 183, 97, 0.6 );
	border-radius: 50%;
	background: none;
	cursor: pointer;
	transition: background 300ms ease, transform 300ms ease;
}

.fa-home-slideshow__dot.is-on {
	background: var( --fa-home-gold );
	transform: scale( 1.25 );
}

.fa-home-slideshow__dot:focus-visible,
.fa-home-slideshow__pause:focus-visible {
	outline: 1px solid rgba( 217, 183, 97, 0.9 );
	outline-offset: 3px;
}

.fa-home-slideshow:focus-visible {
	outline: 1px solid rgba( 217, 183, 97, 0.6 );
	outline-offset: 4px;
}

/* Phones: a taller frame, a caption that spans the width, smaller type. */
@media screen and ( max-width: 782px ) {
	.fa-home-slideshow.fa-journey-gallery {
		aspect-ratio: 4 / 5;
		padding: 10px;
	}

	.fa-home-slideshow .fa-slide {
		inset: 10px;
	}

	.fa-home-slideshow .fa-caption {
		left: 12px;
		right: 12px;
		bottom: 12px;
		max-width: none;
		padding: 12px 14px;
	}

	.fa-home-slideshow .fa-caption h2.fa-home-slideshow__name {
		font-size: 24px;
	}

	.fa-home-slideshow .fa-caption p.fa-home-slideshow__sub {
		font-size: 13px;
	}

	.fa-home-slideshow__arrow {
		width: 38px;
		height: 38px;
		opacity: 1;
		background: rgba( 8, 8, 8, 0.35 );
	}

	.fa-home-slideshow__arrow.is-prev {
		left: 8px;
	}

	.fa-home-slideshow__arrow.is-next {
		right: 8px;
	}

	.fa-home-slideshow__bar {
		right: 14px;
		bottom: auto;
		top: 14px;
	}
}

/* Less motion: no crossfade, and autoplay stays off. */
@media ( prefers-reduced-motion: reduce ) {
	.fa-home-slideshow .fa-slide {
		transition: none;
	}

	.fa-home-slideshow .fa-caption--link {
		transition: none;
	}

	.fa-home-slideshow .fa-caption--link:hover,
	.fa-home-slideshow .fa-caption--link:focus-visible {
		transform: none;
	}
}

/* Legibility over a bright photograph: a soft scrim rising from the foot
   of the frame, and a slightly firmer caption card. The look is the same,
   the words just always read. */
.fa-home-slideshow .fa-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba( 4, 4, 5, 0.74 ) 0%,
		rgba( 4, 4, 5, 0.38 ) 26%,
		rgba( 4, 4, 5, 0 ) 56%
	);
}

.fa-home-slideshow .fa-caption {
	z-index: 2;
	background: rgba( 8, 8, 8, 0.68 );
}

.fa-home-slideshow .fa-caption h2.fa-home-slideshow__name {
	text-shadow: 0 2px 14px rgba( 0, 0, 0, 0.55 );
}

.fa-home-slideshow .fa-caption p.fa-home-slideshow__sub,
.fa-home-slideshow .fa-caption .gold.fa-home-slideshow__label {
	text-shadow: 0 1px 8px rgba( 0, 0, 0, 0.5 );
}