/**
 * Lowist Hero Slider
 *
 * Values here are lifted from the Slider Revolution deck this replaces, so the
 * rebuild lands on the same design rather than an approximation:
 *
 *   canvas          1350 x 872 (desktop)
 *   text colour     #2b2b2b
 *   eyebrow         16px / 400 / 4px letter-spacing, bg rgba(255,255,255,.45)
 *   heading         70px / 900 / 73px line-height, bg rgba(255,255,255,.53)
 *   buttons         158-171 x 47px, 14px / 700, 2px solid rgba(43,43,43,.63)
 *   slide duration  4500ms
 *
 * The original positioned every layer absolutely at fixed pixel offsets inside a
 * 1350px canvas, with a separate hand-tuned set per breakpoint. That is what made
 * it fragile. Here the same visual result comes from normal flow inside a
 * max-width container, so it holds together at any viewport.
 */

.lowist-hero {
	--lowist-hero-height: 872px;
	--lowist-hero-max: 1350px;
	--lowist-hero-ink: #2b2b2b;
	--lowist-hero-veil: rgba(255, 255, 255, 0.53);
	--lowist-hero-veil-soft: rgba(255, 255, 255, 0.45);
	--lowist-hero-veil-btn: rgba(255, 255, 255, 0.49);
	--lowist-hero-edge: rgba(43, 43, 43, 0.63);
	--lowist-hero-gutter: 15px;

	position: relative;
	width: 100%;
	height: var(--lowist-hero-height);
	overflow: hidden;
	background-color: #e9e9e9;
	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* ---------------------------------------------------------------- slides -- */

.lowist-hero__slides {
	position: absolute;
	inset: 0;
}

.lowist-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 800ms ease-in-out;
}

.lowist-hero__slide.is-active {
	opacity: 1;
}

/* Without JS every slide would stack at opacity 0 except the first, which is
   already marked .is-active server-side — so the hero still shows an image. */

.lowist-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The original anchored its background at x:100% / y:0%. That is deliberate:
	   it pushes the subject of both photos to the right so the copy on the left
	   sits over the calmer part of the frame. Centring it makes the heading hard
	   to read. */
	object-position: right top;
	display: block;
}

/* --------------------------------------------------------------- content -- */

.lowist-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--lowist-hero-max);
	height: 100%;
	margin: 0 auto;
	padding: 0 var(--lowist-hero-gutter);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	box-sizing: border-box;
}

.lowist-hero__content {
	max-width: 731px;
}

.lowist-hero__eyebrow {
	display: inline-block;
	margin: 0;
	padding: 3px 10px;
	background: var(--lowist-hero-veil-soft);
	color: var(--lowist-hero-ink);
	font-size: 16px;
	font-weight: 400;
	line-height: 25px;
	letter-spacing: 4px;
	text-transform: uppercase;
}

.lowist-hero__heading {
	display: inline-block;
	margin: 6px 0 0;
	padding: 10px 15px;
	background: var(--lowist-hero-veil);
	color: var(--lowist-hero-ink);
	font-size: 70px;
	font-weight: 900;
	line-height: 73px;
	letter-spacing: 0;
	text-transform: uppercase;
}

.lowist-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 28px;
}

.lowist-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 158px;
	height: 47px;
	padding: 0 25px;
	border: 2px solid var(--lowist-hero-edge);
	border-radius: 0;
	background: var(--lowist-hero-veil-btn);
	color: var(--lowist-hero-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	box-sizing: border-box;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.lowist-hero__btn:hover,
.lowist-hero__btn:focus-visible {
	background: var(--lowist-hero-ink);
	border-color: var(--lowist-hero-ink);
	color: #fff;
	text-decoration: none;
}

/* ------------------------------------------------------------------ dots -- */
/* The original numbered its bullets 01, 02 via a CSS counter. Same idea, but
   the numbers are real text so screen readers and copy/paste see them too. */

.lowist-hero__dots {
	position: absolute;
	left: var(--lowist-hero-gutter);
	bottom: 48px;
	display: flex;
	gap: 8px;
	z-index: 3;
}

.lowist-hero__dot {
	appearance: none;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--lowist-hero-ink);
	font: inherit;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: box-shadow 300ms ease, background-color 300ms ease;
}

.lowist-hero__dot:hover {
	box-shadow: inset 0 0 0 1px var(--lowist-hero-edge);
}

.lowist-hero__dot.is-active {
	box-shadow: inset 0 0 0 1px var(--lowist-hero-edge);
	background: var(--lowist-hero-veil-btn);
}

.lowist-hero__dot-num {
	pointer-events: none;
}

/* ---------------------------------------------------------------- arrows -- */

.lowist-hero__arrows {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 2px;
	z-index: 3;
}

.lowist-hero__arrow {
	appearance: none;
	width: 50px;
	height: 60px;
	padding: 0;
	border: 0;
	background: var(--lowist-hero-veil-btn);
	color: var(--lowist-hero-ink);
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

.lowist-hero__arrow:hover,
.lowist-hero__arrow:focus-visible {
	background: var(--lowist-hero-ink);
	color: #fff;
}

/* Keyboard focus must stay visible against both light and dark photography. */
.lowist-hero__dot:focus-visible,
.lowist-hero__arrow:focus-visible,
.lowist-hero__btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.lowist-hero .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------ responsive -- */
/* Breakpoints mirror the original's: 1350 / 1024 / 778 / 480. */

@media (max-width: 1350px) {
	.lowist-hero {
		--lowist-hero-height: 768px;
	}

	.lowist-hero__heading {
		font-size: 56px;
		line-height: 60px;
	}
}

@media (max-width: 1024px) {
	.lowist-hero {
		--lowist-hero-height: 640px;
	}

	.lowist-hero__heading {
		font-size: 46px;
		line-height: 50px;
	}

	.lowist-hero__arrows {
		display: none;
	}
}

@media (max-width: 778px) {
	.lowist-hero {
		--lowist-hero-height: 560px;
	}

	.lowist-hero__inner {
		align-items: center;
		text-align: center;
	}

	/* The copy centres at this width, so anchoring the photo right no longer
	   buys clear space where the text is. */
	.lowist-hero__img {
		object-position: center top;
	}

	.lowist-hero__heading {
		font-size: 42px;
		line-height: 44px;
	}

	.lowist-hero__eyebrow {
		font-size: 16px;
		letter-spacing: 2px;
	}

	.lowist-hero__actions {
		justify-content: center;
	}

	.lowist-hero__btn {
		min-width: 170px;
		height: 40px;
	}

	.lowist-hero__dots {
		left: 50%;
		transform: translateX(-50%);
		bottom: 24px;
	}
}

@media (max-width: 480px) {
	.lowist-hero {
		--lowist-hero-height: 520px;
	}

	.lowist-hero__heading {
		font-size: 32px;
		line-height: 36px;
		padding: 8px 12px;
	}
}

/* Autoplay is motion the user did not ask for. JS also checks this, so the
   slider simply becomes a static first slide with working manual controls. */
@media (prefers-reduced-motion: reduce) {
	.lowist-hero__slide {
		transition-duration: 1ms;
	}
}