/*
 * 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;
	}
}

/* ─── Shared section furniture ───────────────────────────────────────────── */

/*
 * Every section below the hero is headed the same way: the serif display face,
 * centred, 32px on a wide screen and 24px on a narrow one. Sampled from the
 * reference rather than chosen.
 */
.section-title {
	margin: 0 0 30px;
	font-family: var(--font-heading);
	font-size: var(--fs-section-title);
	font-weight: 400;
	letter-spacing: 0.03em;
	line-height: 1.2;
	text-align: center;
	color: var(--color-ink);
}

/* ─── Tile rows: departments, and the seasonal row ───────────────────────── */

.tile-row {
	padding-block: var(--section-gap);
}

.tile-row__list {
	display: grid;
	gap: var(--tile-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Square artwork, six across — the rooms. */
.tile-row--square .tile-row__list {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Portrait artwork, four across — the season. */
.tile-row--portrait .tile-row__list {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tile__photo {
	display: block;
	overflow: hidden;
	background: var(--color-surface);
}

.tile__image {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.45s ease;
}

.tile-row--square .tile__image {
	aspect-ratio: 1;
	object-fit: cover;
}

.tile-row--portrait .tile__image {
	aspect-ratio: 450 / 560;
	object-fit: cover;
}

@media (hover: hover) {
	.tile__photo:hover .tile__image {
		transform: scale(1.04);
	}
}

.tile__label {
	display: block;
	margin-block-start: 15px;
	color: var(--color-ink);
	font-size: var(--fs-tile-label);
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
}

.tile__label:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.tile__chevron {
	margin-inline-start: 4px;
	/* The reference sets this in the body face at the label's size; the glyph
	   sits high, so nudge it back onto the baseline. */
	display: inline-block;
	transform: translateY(-1px);
}

/* ─── Feature row: three cards, the middle one inverted ──────────────────── */

.feature-row {
	padding-block: var(--section-gap);
}

.feature-row__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tile-gap);
	/* Top-aligned, so the inverted middle card hangs below the other two the
	   way the design staggers them rather than stretching to match. */
	align-items: start;
}

.feature-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/*
 * The middle card puts its text above the photograph. Done by reversing the
 * flex direction rather than reordering, so the DOM order — and what a screen
 * reader reads — still matches the design.
 */
.feature-card--inverted {
	flex-direction: column-reverse;
	justify-content: flex-end;
}

.feature-card__photo {
	display: block;
	overflow: hidden;
	background: var(--color-surface);
}

.feature-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 450 / 560;
	object-fit: cover;
	transition: transform 0.45s ease;
}

@media (hover: hover) {
	.feature-card__photo:hover .feature-card__image {
		transform: scale(1.03);
	}
}

.feature-card__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.feature-card__title {
	margin: 0 0 13px;
	font-size: var(--fs-tile-label);
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

.feature-card__copy {
	max-width: 42ch;
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

.feature-card__cta {
	margin-block-start: 22px;
}

/* ─── Promotion band ─────────────────────────────────────────────────────── */

.promo-band {
	margin-block: var(--section-gap);
	padding-block: 30px;
	background: var(--color-surface);
}

.promo-band__inner {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	align-items: center;
	gap: 30px;
}

.promo-band__figures {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tile-gap);
}

.promo-band__figure {
	display: block;
	overflow: hidden;
}

.promo-band__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 450 / 604;
	object-fit: cover;
}

.promo-band__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.promo-band__title {
	margin-block-end: 18px;
}

.promo-band__copy {
	max-width: 44ch;
	margin: 0 0 26px;
	font-size: 16px;
	line-height: 1.5;
}

/* ─── Lookbook ───────────────────────────────────────────────────────────── */

.lookbook {
	margin-block: var(--section-gap);
	padding-block: 44px;
	background: var(--color-surface);
}

.lookbook__copy {
	max-width: 66ch;
	margin: -12px auto 0;
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
}

.lookbook__cta {
	display: flex;
	justify-content: center;
	margin-block-start: 26px;
}

.lookbook__content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 34px;
	margin-block-start: 36px;
	align-items: start;
}

.lookbook__content--image-only {
	grid-template-columns: minmax(0, 1fr);
	max-width: 720px;
	margin-inline: auto;
}

.lookbook__products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px var(--tile-gap);
}

.lookbook__figure {
	display: block;
	overflow: hidden;
}

.lookbook__image {
	display: block;
	width: 100%;
	height: auto;
	/* Square artwork, but it stands beside two rows of cards — let it fill
	   that height rather than leaving a gap under it. */
	aspect-ratio: 1;
	object-fit: cover;
}

/* ─── Narrow screens ─────────────────────────────────────────────────────── */

@media (max-width: 899px) {
	.section-title {
		margin-block-end: 15px;
	}

	/* Three across on a phone, which is what the reference does — the tiles
	   stay big enough to read at 125px. */
	.tile-row--square .tile-row__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tile-row--portrait .tile-row__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tile__label {
		margin-block-start: 10px;
	}

	.feature-row__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	/* Stacked, so there is no middle column left to invert. */
	.feature-card--inverted {
		flex-direction: column;
	}

	.promo-band__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.lookbook__content {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	.lookbook__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The photograph comes first on a phone: it is the thing that makes the
	   section make sense, and scrolling past six cards to reach it does not. */
	.lookbook__figure {
		order: -1;
	}


}