/**
 * Page heads.
 *
 * The archive hero from Category.dc.html: a full-bleed warm band carrying the
 * breadcrumb, title and description, closed with a hairline so the toolbar
 * below it reads as a separate row.
 *
 * The band is full-bleed while its contents are contained, so it is a plain
 * section with an inner .hp-container rather than anything that has to escape a
 * wrapper. WooCommerce's own content wrapper is left at full width by
 * 20-layout.css for exactly this reason.
 */

.hp-archive-hero {
	background: var(--hp-surface-warm);
	border-block-end: 1px solid var(--hp-border);
}

.hp-archive-hero__inner {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-3);
	padding-block: var(--hp-space-10) var(--hp-space-8);
}

.hp-archive-hero__title {
	margin: 0;
	font-size: 2.5rem; /* 40px — the canvas archive title */
	line-height: var(--hp-leading-tight);
}

.hp-archive-hero__description {
	max-width: 35rem;
	font-size: var(--hp-text-base);
	line-height: var(--hp-leading-body);
	color: var(--hp-text-muted);
}

.hp-archive-hero__description p {
	margin-block: 0;
}

.hp-archive-hero__description p + p {
	margin-block-start: var(--hp-space-3);
}

@media (max-width: 45rem) {
	.hp-archive-hero__title {
		font-size: 1.875rem; /* 30px */
	}

	.hp-archive-hero__inner {
		padding-block: var(--hp-space-8) var(--hp-space-6);
	}
}

/* ---- home hero ----
 * Main.dc.html: two columns, copy against a media block, on the same warm
 * ground as the archive head.
 */

/**
 * The hero's ground.
 *
 * Flat `--hp-surface-warm` was correct and inert: a framed portrait sitting on
 * an even sheet of paper, with nothing to say why the band exists. This gives it
 * light instead — a warm wash that lifts towards the top of the band, and a
 * blush glow placed behind the picture so the frame reads as lit from its own
 * side rather than pasted on.
 *
 * The blush is the same colour the footer's call to action is built from, which
 * was measured off the shop's aircraft banner. Using it at both ends makes the
 * page open and close on one hue instead of two unrelated warms.
 *
 * A radial gradient takes a position, not a logical one, so the glow's side is
 * stated twice: the picture is the second grid column, which is on the right in
 * an LTR document and on the left in this RTL one.
 */
.hp-hero {
	background:
		radial-gradient(
			44rem 32rem at 78% 45%,
			rgb(223 194 182 / 0.55) 0%,
			rgb(223 194 182 / 0) 70%
		),
		linear-gradient(180deg, #fbf8f6 0%, var(--hp-surface-warm) 100%);
}

[dir="rtl"] .hp-hero {
	background:
		radial-gradient(
			44rem 32rem at 22% 45%,
			rgb(223 194 182 / 0.55) 0%,
			rgb(223 194 182 / 0) 70%
		),
		linear-gradient(180deg, #fbf8f6 0%, var(--hp-surface-warm) 100%);
}

.hp-hero__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hp-space-12);
	align-items: center;
	padding-block: var(--hp-space-16);
}

.hp-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hp-space-5);
}

.hp-hero__eyebrow {
	padding: var(--hp-space-2) var(--hp-space-4);
	border-radius: var(--hp-radius-pill);
	background: var(--hp-accent-soft);
	color: var(--hp-link);
	font-size: var(--hp-text-xs);
	font-weight: 700;
}

.hp-hero__title {
	margin: 0;
	font-size: var(--hp-text-hero);
	line-height: var(--hp-leading-tight);
}

.hp-hero__text {
	max-width: 27.5rem;
	margin: 0;
	font-size: var(--hp-text-md);
	line-height: var(--hp-leading-body);
	color: var(--hp-text-muted);
}

.hp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hp-space-3);
}

/**
 * The hero's picture frame.
 *
 * Height-led, not width-led, and that is the whole point: with `width: 100%` and
 * `max-height`, the aspect ratio is abandoned the moment the height clamps —
 * the box kept the full 600px of its grid cell and settled at 416px tall, so a
 * 4:5 frame rendered as a 600x416 landscape one. A portrait photograph dropped
 * into that is cropped by `cover` into a horizontal band through the subject's
 * face, which is exactly what it looked like.
 *
 * Fixing the height and letting the width follow makes the declared ratio the
 * one that renders. The frame is then narrower than its cell, so it is centred
 * rather than pinned to an edge — a framed portrait, which is what it is.
 */
.hp-hero__media {
	aspect-ratio: 4 / 5;
	height: min(30rem, 62vh);
	width: auto;
	max-width: 100%;
	margin-inline: auto;
	border-radius: var(--hp-radius-lg);
	background: var(--hp-surface-subtle);
	/* Lifted off the ground rather than lying on it — the shadow is what turns
	 * the glow behind it into depth instead of a stain. */
	box-shadow: var(--hp-shadow-md);
	object-fit: cover;
	/* Held above centre. Whatever the frame's ratio ends up being, the crop keeps
	 * the subject's face rather than the middle of the photograph. */
	object-position: center 28%;
}

@media (max-width: 55rem) {
	.hp-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--hp-space-8);
		padding-block: var(--hp-space-10);
	}

	.hp-hero__title {
		font-size: 2.25rem;
	}

	/* Square, full width. 4:5 at 390px is 487px tall and would take the phone's
	 * whole first screen on its own; 16:9, which this was, cropped a portrait
	 * photograph down to a letterbox slit through the subject. A square is the
	 * compromise that keeps a face recognisable without eating the screen. */
	.hp-hero__media {
		aspect-ratio: 1;
		height: auto;
		width: 100%;
	}
}

/* ---- section head ----
 * A title with an optional "see all" link opposite it, used by every home page
 * section and the related-products row.
 */

.hp-section {
	padding-block: var(--hp-section-space);
}

.hp-section--subtle {
	background: var(--hp-surface-subtle);
}

.hp-section__inner {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-7);
}

.hp-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--hp-space-4);
}

.hp-section__title {
	margin: 0;
	font-size: var(--hp-text-h2);
}

.hp-section__link {
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: nowrap;
}

/* ---- the leading-brands band ----
 *
 * The same circle row as the categories above it, on a coloured ground instead
 * of the page's white. The two sections share a layout on purpose and are told
 * apart by their ground, so they read as a pair — what you are looking for,
 * then who makes it.
 *
 * Built the way the hero's ground is built, and deliberately not in the hero's
 * colour: the hero's blush is the shop's warm end, and repeating it here would
 * make the top third of the page one long wash. This is the accent's cooler,
 * deeper side — the same family, a different note — so the page moves as it
 * goes down instead of restating itself.
 */

.hp-section--brands {
	background:
		radial-gradient(
			38rem 24rem at 88% 12%,
			rgb(194 133 101 / 0.16) 0%,
			rgb(194 133 101 / 0) 68%
		),
		radial-gradient(
			34rem 22rem at 8% 96%,
			rgb(184 138 31 / 0.13) 0%,
			rgb(184 138 31 / 0) 66%
		),
		linear-gradient(180deg, #fdfbfa 0%, #f4efe9 100%);
	border-block: 1px solid var(--hp-border);
}

/* A radial's position is physical, so the two washes swap ends in an RTL
 * document to keep the composition — accent high on the far side, club gold low
 * on the reading side — rather than mirroring into the text. */
[dir="rtl"] .hp-section--brands {
	background:
		radial-gradient(
			38rem 24rem at 12% 12%,
			rgb(194 133 101 / 0.16) 0%,
			rgb(194 133 101 / 0) 68%
		),
		radial-gradient(
			34rem 22rem at 92% 96%,
			rgb(184 138 31 / 0.13) 0%,
			rgb(184 138 31 / 0) 66%
		),
		linear-gradient(180deg, #fdfbfa 0%, #f4efe9 100%);
}

/* Eight brands, so the row is eight across on a desktop rather than the six the
 * category row uses — a brand mark needs less width than a category name. */
.hp-circles--brands {
	grid-template-columns: repeat(8, minmax(0, 1fr));
}

/* A brand mark is a logo on white. It sits on its own disc so the coloured
 * ground never shows through a transparent PNG. */
.hp-section--brands .hp-circle__media {
	background: var(--hp-surface);
	box-shadow: var(--hp-shadow-sm);
}

@media (max-width: 64rem) {
	.hp-circles--brands {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 40rem) {
	.hp-circles--brands {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---- banner slots ----
 *
 * Between the home page's sections. A slot reserves its shape whether or not it
 * has a banner in it, so the page's rhythm is the same before and after the
 * artwork arrives — see Home::banner() and the $banner closure in front-page.php.
 */

.hp-banner {
	padding-block: var(--hp-space-8);
}

.hp-banner__frame {
	display: block;
	aspect-ratio: var(--hp-banner-ratio, 16 / 5);
	overflow: hidden;
	border-radius: var(--hp-radius-xl);
	background: var(--hp-surface-subtle);
}

.hp-banner__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--hp-duration-slow) var(--hp-ease-out);
}

a.hp-banner__frame:hover img {
	transform: scale(1.02);
}

/* The empty state says what it is. A blank grey block would read as a rendering
 * fault; a labelled dashed frame reads as a decision not yet made. */
.hp-banner__frame.is-placeholder {
	display: grid;
	place-items: center;
	background:
		repeating-linear-gradient(
			45deg,
			var(--hp-surface-subtle) 0 12px,
			var(--hp-surface-warm) 12px 24px
		);
	border: 2px dashed var(--hp-border-strong);
	color: var(--hp-text-muted);
	font-size: var(--hp-text-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
}

@media (max-width: 45rem) {
	.hp-banner {
		padding-block: var(--hp-space-6);
	}

	/* A 16:5 strip is 120px tall on a phone — too short to carry anything. The
	 * slot squares up instead, which is the shape a phone banner wants. */
	.hp-banner__frame {
		aspect-ratio: 4 / 3;
	}
}