/**
 * Hero section
 *
 * Design ref: design-preferences/css-exports/Home Page/hero.css
 * Banner photo includes the left white fade — no CSS fade overlay.
 */

.hero {
	position: relative;
	width: 100%;
	min-height: var(--hero-height);
	overflow: hidden;
	/* Fallback only when Banner Image is empty */
	background: linear-gradient(
		99.71deg,
		var(--color-hero-gradient-start) 1.25%,
		var(--color-hero-gradient-end) 100.86%
	);
	box-sizing: border-box;
}

.hero__background {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.hero__background-image {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.hero__background-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * Biased to the top of the banner. Between 1025 and ~1536 the aspect-ratio
	 * on .hero leaves nothing to crop and this is a no-op; below and above that
	 * range it decides what is lost — 15% keeps the models' heads and gives up
	 * the base of the pedestals instead.
	 */
	object-position: center 15%;
}

.hero__bottom-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 77%;
	max-height: 396px;
	background: linear-gradient(
		180deg,
		rgba(67, 45, 39, 0) 0%,
		rgba(67, 45, 39, 0.32) 100%
	);
	opacity: 0.4;
	z-index: 2;
}

/* --------------------------------------------------------------------------
   Ultrawide
   -------------------------------------------------------------------------- */

/*
 * The banner is the constraint, not a 513px box: the band takes the photo's own
 * ratio so `cover` has nothing left to crop and the whole composed scene — both
 * models, the pedestals, the product still-life — stays in frame at any width.
 *
 * This replaces the fixed 513px box (plus a 620px min-height at 1600+), which
 * between them kept about two thirds of the banner's height, scaled up: the
 * zoomed-in framing this section had.
 *
 * Scoped to 1025+ deliberately. Below it the ratio computes a height under the
 * 513px the copy needs, and aspect-ratio does not grow to fit overflowing
 * content.
 */
@media screen and (min-width: 1025px) {
	.hero {
		aspect-ratio: var(--hero-banner-aspect);
		/*
		 * The copy keeps its own 513px block — the Figma frame's vertical
		 * rhythm, including the 100px top padding — and that block is centred
		 * in the taller band rather than pinned to its top.
		 */
		display: flex;
		align-items: center;
	}

	.hero__inner {
		width: 100%;
		height: var(--hero-height);
	}
}

/* --------------------------------------------------------------------------
   Tablet — banner ratio
   -------------------------------------------------------------------------- */

/*
 * The same treatment as the 1025+ band above, extended down over the iPads:
 * take the banner's own ratio so `cover` has nothing left to crop.
 *
 * The 1025+ note says this cannot be done lower because the ratio computes a
 * height under the 513px the copy needs — but that 513px is the *desktop*
 * block. The max-width:1024px rules below already shrink the copy to 387px
 * (283px of content plus 104px of padding), and the ratio gives 418px at 783px
 * and more above it, so it fits with room to spare.
 *
 * Without this the band stayed a fixed 513px box. At an iPad Air's 820px that
 * is 1.6:1 against the banner's 1.871:1, and `cover` paid the difference out of
 * the *width* — 7.3% off each side, which is where the male model standing at
 * the right edge of the frame was going.
 */
@media screen and (min-width: 783px) and (max-width: 1024px) {
	.hero {
		aspect-ratio: var(--hero-banner-aspect);
		/* The 513px floor would outgrow the ratio and bring the crop back. */
		min-height: 0;
		display: flex;
		align-items: center;
	}

	.hero__inner {
		width: 100%;
		/* Not the desktop block's fixed 513px: the band is shorter than that
		   here, so the copy fills it rather than overflowing it. */
		height: 100%;
		min-height: 0;
	}
}

.hero__inner {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: flex-start;
	max-width: var(--header-content-max);
	min-height: var(--hero-height);
	margin: 0 auto;
	padding: 100px 64px 40px;
	box-sizing: border-box;
}

.hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	width: 100%;
	max-width: 481px;
	flex-shrink: 0;
	z-index: 4;
}

.hero__eyebrow {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--eyebrow-size);
	line-height: 1.2;
	letter-spacing: -0.18px;
	text-transform: uppercase;
	color: var(--color-accent);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.hero__title {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	font-weight: 400;
}

.hero__title-line-one,
.hero__title-line-two {
	display: block;
	font-family: var(--font-heading);
	font-weight: 400;
	text-transform: uppercase;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.hero__title-line-one {
	font-size: 64px;
	line-height: 67px;
	letter-spacing: -0.64px;
	color: var(--color-heading);
}

.hero__title-line-two {
	font-size: 57px;
	line-height: 67px;
	letter-spacing: -0.57px;
	color: var(--color-accent);
}

.hero__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	max-width: 419px;
	height: 12px;
	line-height: 0;
}

.hero__divider svg {
	display: block;
	width: 100%;
	max-width: 419px;
	height: 12px;
}

.hero__description {
	margin: 0 0 4px; /* parent gap 20 + 4 = 24px to CTA (Figma) */
	width: 100%;
	max-width: 481px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 30px;
	color: var(--color-body-88);
}

.hero__button,
.hero__button:link,
.hero__button:visited {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	height: 46px;
	/* Not var(--button-padding) (14px 28px): that vertical value plus the
	   30px text line-height totals 58px. Text height is unchanged here —
	   only the vertical padding shrinks (8px) so the box totals 46px. */
	padding: 8px 28px;
	background: var(--color-accent);
	border-radius: var(--radius-button);
	text-decoration: none;
	color: var(--color-white);
	box-sizing: border-box;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.hero__button:hover,
.hero__button:focus,
.hero__button:active {
	background: var(--color-accent-muted);
	color: var(--color-white);
	outline: none;
}

.hero__button-text {
	font-family: var(--font-body);
	font-weight: var(--button-text-weight);
	font-size: var(--button-text);
	line-height: var(--button-text-lh);
	letter-spacing: var(--button-letter-spacing);
	text-transform: uppercase;
	color: var(--color-white);
}

.hero__button-icon {
	width: 12px;
	height: 24px;
	color: var(--color-white);
	flex-shrink: 0;
	display: block;
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
	.hero__inner {
		padding: 72px 40px 32px;
	}

	.hero__content {
		max-width: 400px;
		gap: 16px;
	}

	.hero__title-line-one {
		font-size: 48px;
		line-height: 52px;
	}

	.hero__title-line-two {
		font-size: 42px;
		line-height: 48px;
	}

	.hero__description {
		font-size: 15px;
		line-height: 26px;
	}
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media screen and (max-width: 782px) {
	/*
	 * The hero stacks on a phone: banner on top, copy beneath on the band's own
	 * cream. At 390px the box keeps barely half the banner's width and every
	 * part of that half is subject — models, bag, pedestals, the still-life —
	 * so an overlay has nothing empty to sit on, and the SHOP NOW button lands
	 * on the shoes and the foot of the bag whatever the crop. Same treatment as
	 * the promo band.
	 */
	.hero {
		min-height: 0;
		/*
		 * The desktop fallback gradient is a mid-tone tan — fine behind a photo,
		 * but here it is the copy's own ground, and body text at 88% black does
		 * not carry on it. Same cream the promo band's stacked copy sits on.
		 */
		background: var(--color-bg-cream-2);
	}

	.hero__background {
		position: relative;
		height: var(--hero-height-mobile);
	}

	.hero__background-image {
		position: absolute;
	}

	.hero__inner {
		padding: 48px 20px 40px;
		min-height: 0;
	}

	.hero__content {
		max-width: 100%;
		gap: 14px;
	}

	.hero__eyebrow {
		font-size: 14px;
	}

	.hero__title-line-one {
		font-size: 40px;
		line-height: 44px;
	}

	.hero__title-line-two {
		font-size: 34px;
		line-height: 40px;
	}

	.hero__divider {
		max-width: 200px;
	}

	.hero__description {
		font-size: 15px;
		line-height: 26px;
	}

	/* No copy sits on the photo now, so the darkening band has nothing to do. */
	.hero__bottom-overlay {
		display: none;
	}

	.hero__inner {
		padding-top: 32px;
	}

	/*
	 * At 390px the box keeps only ~56% of the banner's width, so the crop has to
	 * be biased to frame the pair rather than the empty wall on the left.
	 * Anchored hard right: at 78% the still-life in front of the male model was
	 * still losing its right-hand edge.
	 *
	 * Vertical position is a no-op here: cover overflows on width only, so the
	 * full height of the banner is always in frame.
	 */
	.hero__background-img {
		object-position: 100% center;
	}

	.hero__eyebrow,
	.hero__title-line-one,
	.hero__title-line-two,
	.hero__description {
		text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
	}
}

/* --------------------------------------------------------------------------
   Tablet portrait — stacked banner ratio
   -------------------------------------------------------------------------- */

/*
 * The stacked banner is a fixed 300px block, and the note above sizes it for a
 * phone: there the box is narrower than the banner (390/300 = 1.3 against
 * 1.871), so `cover` overflows on width only and the full height stays in
 * frame — which is what lets `object-position: 100% center` frame the pair.
 *
 * On an iPad Mini it is the other way round. 768/300 is 2.56, *wider* than the
 * banner, so cover overflows on height instead and takes 13.4% off the top and
 * the same off the bottom, cutting the models' heads. `object-position` cannot
 * rescue that; it only steers the axis that is already exact.
 *
 * The crossover is exact: the 300px block stops being narrower than the banner
 * at 300 x 1.871 = 561px, so from 562px up let the block take the banner's
 * ratio instead. Both axes then match and the crop is nothing. Below that,
 * phones keep the 300px block and its right-anchored crop as designed — and
 * because the two rules agree on height at the boundary, nothing jumps.
 */
@media screen and (min-width: 562px) and (max-width: 782px) {
	.hero__background {
		height: auto;
		aspect-ratio: var(--hero-banner-aspect);
	}
}