/**
 * Home promo band — "Style for Every Moment"
 *
 * No Figma frame; measured off docs/design/home-revised.png against the
 * unchanged 1376px grid (see the --home-promo-* tokens). Same container width
 * and gutters as
 * the App Download band directly beneath it, so the two align.
 */

.home-promo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(var(--home-promo-max), calc(100% - (2 * var(--section-inline-pad))));
	max-width: var(--home-promo-max);
	/*
	 * 340px at the band's full 1376 width — a little shorter than a Featured
	 * Products card, as the reference shows — and proportionally shorter below
	 * that rather than cropping the artwork's sides.
	 */
	aspect-ratio: var(--home-promo-aspect);
	min-height: var(--home-promo-min-height);
	margin: var(--home-section-gap) auto 0;
	border-radius: var(--home-promo-radius);
	overflow: hidden;
	box-sizing: border-box;
	/* Holds the band's shape before the artwork is set, and backs it after. */
	background: linear-gradient(
		90deg,
		var(--color-bg-cream-1) 0%,
		var(--color-bg-cream-2) 50%,
		var(--color-bg-cream-1) 100%
	);
}

/*
 * `cover` rather than `contain` so the band is always filled, but the artwork
 * is cut to the band's own 4.047:1, so in practice nothing is cropped: the
 * whole scene shows at every width the aspect-ratio holds.
 */
.home-promo__image {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.home-promo__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--home-promo-stack-gap);
	padding: 0 24px;
	text-align: center;
	box-sizing: border-box;
}

.home-promo__title {
	margin: 0;
	font-family: var(--font-heading);
	font-style: normal;
	font-weight: 400;
	font-size: var(--home-promo-title-size);
	line-height: var(--home-promo-title-lh);
	letter-spacing: var(--home-promo-title-tracking);
	text-transform: uppercase;
	color: var(--color-heading);
}

.home-promo__title-line {
	display: block;
}

.home-promo__title-line--accent {
	color: var(--color-accent);
}

.home-promo__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--home-promo-btn-width);
	height: var(--home-promo-btn-height);
	padding: 0 28px;
	background: var(--color-accent);
	border-radius: var(--radius-button);
	font-family: var(--font-body);
	font-size: var(--home-promo-btn-text);
	font-weight: var(--button-text-weight);
	line-height: 1;
	letter-spacing: var(--button-letter-spacing);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-white);
	box-sizing: border-box;
	transition: background-color 0.2s ease;
}

/*
 * Colour only, and kept in its own rule: a bare `a:visited` in another sheet is
 * (0,1,1) and beats a plain `.home-promo__cta`, which left the label the
 * browser's default purple once the link had been followed. Folding these
 * pseudo-classes into the rule above instead would raise it to (0,2,0) and put
 * it out of reach of the media queries below.
 */
.home-promo__cta:link,
.home-promo__cta:visited {
	color: var(--color-white);
}

.home-promo__cta:hover,
.home-promo__cta:focus {
	background: var(--color-accent-hover);
	color: var(--color-white);
}

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

@media (max-width: 1200px) {
	.home-promo {
		width: min(var(--home-promo-max), calc(100% - 48px));
	}
}

/* --------------------------------------------------------------------------
   Tablet — artwork ratio
   -------------------------------------------------------------------------- */

/*
 * The band's --home-promo-min-height floor (240px, sized for the desktop copy)
 * outgrows the 4.047:1 aspect-ratio once the band is narrower than ~971px, i.e.
 * below a ~1019px viewport. The band then renders squarer than the artwork and
 * `object-fit: cover` pays for it out of the artwork's *width* — at an 820px
 * iPad only ~79% of the frame survives, ~10% off each side.
 *
 * That is the worst thing it could crop: the scene stands its two models hard
 * against the left and right edges with an empty middle, so trimming the sides
 * is exactly what removes them.
 *
 * So let aspect-ratio govern here and drop the floor. The copy still has to fit
 * the shorter band, so the title and the stack gap scale with the viewport
 * instead of holding their desktop size — both reach their desktop values at
 * 1024px, where this block hands back over.
 */
@media (min-width: 783px) and (max-width: 1023px) {
	.home-promo {
		min-height: 0;
	}

	.home-promo__title {
		/* 4.9vw hits the desktop 50px exactly at 1024px. */
		font-size: clamp(30px, 4.9vw, 50px);
	}

	.home-promo__content {
		gap: clamp(14px, 2.2vw, 22px);
	}
}

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

@media screen and (max-width: 782px) {
	/*
	 * The band stacks on a phone: artwork on top at its own ratio, copy beneath
	 * on the cream. Overlaying the two does not work at this width — the wide
	 * band artwork keeps only its empty middle, and the mobile photo the
	 * template swaps in has a model at each edge with barely 110px of clear
	 * backdrop between them, far less than the heading needs.
	 */
	.home-promo {
		flex-direction: column;
		/* the base rule centres its single overlay child; here both children
		   run full width */
		align-items: stretch;
		width: min(var(--home-promo-max), calc(100% - 32px));
		aspect-ratio: auto;
		min-height: 0;
		margin-top: 32px;
		padding-bottom: 28px;
	}

	.home-promo__image {
		position: static;
		width: 100%;
		height: auto;
		aspect-ratio: var(--home-promo-aspect-mobile);
	}

	.home-promo__content {
		gap: 16px;
		padding: 24px 20px 0;
	}

	.home-promo__title {
		font-size: 30px;
	}

	.home-promo__cta {
		min-width: 0;
		height: 48px;
		padding: 0 22px;
		/* 17px runs the label the full width of a 358px band */
		font-size: 15px;
	}
}