/*
 * Home page. Front-page only — anything here that turns out to be shared with
 * another page type moves to a site-wide stylesheet rather than being copied.
 */

/* ─── Banner slider ──────────────────────────────────────────────────────── */

/*
 * Full-bleed: the artwork runs edge to edge, so the band escapes the
 * container's gutters rather than sitting inside them.
 *
 * `position: relative` is for the arrows and dots, which are laid over it.
 */
.hero {
	position: relative;
	/* No page-level horizontal scroll: the section is exactly the viewport's
	   width, taken from the element's own box rather than 100vw, which on
	   Windows and Linux includes the scrollbar and overflows by 15px. */
	width: 100%;
}

/*
 * The viewport clips the track. Both axes are declared: a lone overflow-x
 * makes the browser compute overflow-y as `auto` too, which turns the band
 * into a vertical scroller and, on the page, a sideways-draggable box.
 */
.hero__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.hero__viewport::-webkit-scrollbar {
	display: none;
}

.hero__track {
	display: flex;
}

.hero__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	/* Without this a flex item floors at its content's width, and a 3000px
	   image would push the track wider than the page. */
	min-width: 0;
}

.hero__link {
	display: block;
}

.hero__image {
	display: block;
	width: 100%;
	height: auto;
	/* The artwork's own proportions — the offer, the script line and the
	   "conditions apply" note are all inside the image, so cropping it would
	   cut the message. Two shapes, because the landscape and portrait
	   artworks are different compositions, not crops of each other. */
	aspect-ratio: var(--hero-ratio);
	object-fit: cover;
}

/* ─── Arrows ─────────────────────────────────────────────────────────────── */

.hero__arrow {
	position: absolute;
	inset-block-start: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.82);
	color: var(--color-ink);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.18s ease, opacity 0.22s ease;
}

.hero__arrow:hover {
	background: var(--color-white);
}

/*
 * Hidden until the pointer is over the banner — the artwork is the message,
 * and a control parked on top of it competes with the offer.
 *
 * Only where a pointer can actually hover: on a touch screen there is no
 * hover state, so the arrows would fade out and never come back. (Below 900px
 * they are gone entirely; this covers a touch laptop or tablet above it.)
 *
 * `:focus-within` keeps them reachable by keyboard — focus lands on a button
 * at opacity 0, which reveals it. That is why this is opacity rather than
 * visibility, which would make the button unfocusable.
 */
@media (hover: hover) {
	.hero__arrow {
		opacity: 0;
	}

	.hero:hover .hero__arrow,
	.hero:focus-within .hero__arrow {
		opacity: 1;
	}
}

.hero__arrow--prev {
	inset-inline-start: 18px;
}

.hero__arrow--next {
	inset-inline-end: 18px;
}

/* One chevron icon, rotated — the same path pointing left and right. */
.hero__arrow .icon {
	width: 22px;
	height: 22px;
}

.hero__arrow--prev .icon {
	transform: rotate(90deg);
}

.hero__arrow--next .icon {
	transform: rotate(-90deg);
}

/* ─── Dots ───────────────────────────────────────────────────────────────── */

/*
 * The dots sit over the artwork, which is a light beige panel at one end and a
 * photograph at the other — no single dot colour reads against both. Put them
 * on their own translucent pill and the contrast stops depending on what is
 * behind them.
 */
.hero__dots {
	position: absolute;
	inset-block-end: 16px;
	inset-inline-start: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	transform: translateX(-50%);
}

.hero__dot {
	position: relative;
	width: 9px;
	height: 9px;
	padding: 0;
	border: 1px solid rgba(35, 31, 32, 0.55);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.hero__dot[aria-selected="true"] {
	background: var(--color-ink);
	border-color: var(--color-ink);
}

/*
 * The tap target is the dot's 9px circle, which is far below the 24px
 * minimum. Grow the hit area without growing the dot.
 */
.hero__dot::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: 26px;
	height: 26px;
	transform: translate(-50%, -50%);
}

@media (max-width: 899px) {
	.hero__image {
		aspect-ratio: var(--hero-ratio-mobile);
	}

	/*
	 * No arrows on a phone: a swipe is the gesture the device offers, and
	 * there is no hover to reveal them with. The dots stay, so position is
	 * still visible.
	 */
	.hero__arrow {
		display: none;
	}

	.hero__dots {
		inset-block-end: 9px;
		gap: 7px;
		padding: 5px 10px;
	}
}