/**
 * Homepage body (Figma: Home-Desktop-V2, Home-Tablet-V2, Home-Mobile-V2): Home/Main band, Home/Welcome
 * panel, Section title, Intro panel, Home/CategoryLinks band and Label pill. The Slideshow and Section
 * tile blocks are styled in assets/css/blocks/.
 * Tokens only. Figma has two layouts, switching at custom.breakpoint.tablet (768px); the desktop
 * spacing and the Home/Main texture start at custom.breakpoint.nav (1024px), with the desktop header.
 * Media queries repeat those values as literals (decision 1).
 */

/* The bands sit edge to edge, as in Figma: no site-level gap above or below the homepage, and no
   flow-layout gaps inside it. Each band sets its own spacing. */
.wp-site-blocks > .aa-home,
.wp-site-blocks > .aa-home + * {
	margin-block-start: 0;
}
.aa-home .wp-block-post-content > *,
:is(.aa-home-main, .aa-welcome, .aa-intro, .aa-intro__block, .aa-category-band, .aa-tiles) > * {
	margin-block: 0;
}

/* ---------- Home/Main: the band behind the welcome panel ---------- */
.aa-home-main {
	padding-inline: var(--wp--preset--spacing--margin);
	background-color: var(--wp--custom--color--bg--page);
}
/* Figma Home-Desktop-V2 fills this band with the paper texture (decision 32). The texture file is still to be
   exported (docs/placeholders.md); until --aa-main-texture is set, the band stays solid bg/page. */
/* custom.breakpoint.nav = 1024px */
@media (min-width: 1024px) {
	.aa-home-main {
		background: var(--aa-main-texture, none) center top / max(100%, var(--wp--custom--breakpoint--desktop)) auto no-repeat var(--wp--custom--color--bg--page);
	}
}

/* ---------- Home/Welcome panel ---------- */
.aa-welcome {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--32) var(--wp--preset--spacing--12);
	background: var(--wp--preset--gradient--welcome-panel);
}
/* custom.breakpoint.tablet = 768px */
@media (min-width: 768px) {
	.aa-welcome {
		gap: var(--wp--preset--spacing--32);
		padding: var(--wp--preset--spacing--32) var(--wp--preset--spacing--24);
	}
}
/* custom.breakpoint.nav = 1024px */
@media (min-width: 1024px) {
	.aa-welcome {
		padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--32);
	}
}

/* ---------- Section title: the page's H1 between double gold rules (rules hidden on mobile) ---------- */
.aa-section-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--16);
	text-align: center;
	color: var(--wp--custom--color--accent--gold-light);
}
/* Gold-text gradient where background-clip: text works (decision 10: large-text exception). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.aa-section-title {
		background-image: var(--wp--preset--gradient--gold-text);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}
.aa-section-title::before,
.aa-section-title::after {
	content: "";
	display: none;
	flex: 1 1 0;
	height: calc(var(--wp--preset--spacing--4) + var(--wp--custom--border-width--hairline));
	background:
		linear-gradient(var(--wp--custom--color--accent--gold) 0 0) top / 100% var(--wp--custom--border-width--hairline) no-repeat,
		linear-gradient(var(--wp--custom--color--border--gold-subtle) 0 0) bottom / 100% var(--wp--custom--border-width--hairline) no-repeat;
}
/* custom.breakpoint.tablet = 768px */
@media (min-width: 768px) {
	.aa-section-title::before,
	.aa-section-title::after { display: block; }
}

/* ---------- Intro panel (Figma: Intro panel, Layout=Stacked below 768px, Side by Side from 768px) ---------- */
.aa-intro {
	--aa-rough-color: var(--wp--custom--color--bg--panel-deep);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--24);
	margin-block: var(--wp--custom--rough-edge--top) var(--wp--custom--rough-edge--bottom);
	padding: var(--wp--preset--spacing--48);
	background-color: var(--aa-rough-color);
	text-align: center;
}
/* Rough top and bottom edges: decorative, token colour. The SVG mask stretches with the panel but is never drawn
   narrower than its desktop width (custom.rough-edge.min-width); narrower panels crop it from the centre (decision 55). */
.aa-intro::before,
.aa-intro::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	background-color: var(--aa-rough-color);
	pointer-events: none;
}
.aa-intro::before {
	bottom: 100%;
	height: var(--wp--custom--rough-edge--top);
	-webkit-mask: url("../svg/rough-panel-top.svg") center top / max(100%, var(--wp--custom--rough-edge--min-width)) 100% no-repeat;
	mask: url("../svg/rough-panel-top.svg") center top / max(100%, var(--wp--custom--rough-edge--min-width)) 100% no-repeat;
}
.aa-intro::after {
	top: 100%;
	height: var(--wp--custom--rough-edge--bottom);
	-webkit-mask: url("../svg/rough-panel-bottom.svg") center top / max(100%, var(--wp--custom--rough-edge--min-width)) 100% no-repeat;
	mask: url("../svg/rough-panel-bottom.svg") center top / max(100%, var(--wp--custom--rough-edge--min-width)) 100% no-repeat;
}
@media (forced-colors: active) {
	.aa-intro::before,
	.aa-intro::after { display: none; }
}
.aa-intro__block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--12);
	width: 100%;
}
/* Script/Heading: Caveat, regular, gold-light (hard rule 2's one script exception). */
.aa-intro .aa-intro__heading {
	font-family: var(--wp--preset--font-family--script);
	font-size: var(--wp--preset--font-size--script);
	font-style: normal;
	font-weight: 400;
	line-height: var(--wp--custom--line-height--script);
	color: var(--wp--custom--color--accent--gold-light);
}
.aa-intro__block p {
	color: var(--wp--custom--color--text--primary);
}
.aa-intro > .aa-intro__divider {
	flex: none;
}
/* custom.breakpoint.tablet = 768px */
@media (min-width: 768px) {
	.aa-intro {
		flex-direction: row;
		align-items: stretch;
		padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--24);
	}
	.aa-intro__block {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
	}
	/* Side by Side: the Ornament divider stands vertically between the two blocks (Figma: rotated -90°). */
	.aa-intro > .aa-intro__divider {
		--aa-ornament-rule: calc(50% - var(--wp--custom--ornament--fleuron) / 2 - var(--wp--preset--spacing--12));
		align-self: stretch;
		width: var(--wp--custom--ornament--height);
		height: auto;
		background: linear-gradient(
			to bottom,
			var(--wp--custom--color--border--gold-subtle) calc(50% - var(--wp--custom--ornament--fleuron) / 2),
			var(--wp--custom--color--accent--gold) 0 calc(50% + var(--wp--custom--ornament--fleuron) / 2),
			var(--wp--custom--color--border--gold-subtle) 0
		);
		-webkit-mask:
			linear-gradient(currentColor 0 0) center top / var(--wp--custom--border-width--hairline) var(--aa-ornament-rule) no-repeat,
			linear-gradient(currentColor 0 0) center bottom / var(--wp--custom--border-width--hairline) var(--aa-ornament-rule) no-repeat,
			var(--aa-fleuron) center / var(--wp--custom--ornament--fleuron) var(--wp--custom--ornament--fleuron) no-repeat;
		mask:
			linear-gradient(currentColor 0 0) center top / var(--wp--custom--border-width--hairline) var(--aa-ornament-rule) no-repeat,
			linear-gradient(currentColor 0 0) center bottom / var(--wp--custom--border-width--hairline) var(--aa-ornament-rule) no-repeat,
			var(--aa-fleuron) center / var(--wp--custom--ornament--fleuron) var(--wp--custom--ornament--fleuron) no-repeat;
	}
}

/* ---------- Home/CategoryLinks band ---------- */
.aa-category-band {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--32);
	padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--margin) var(--wp--preset--spacing--16);
	background-color: var(--wp--custom--color--bg--nav);
}
/* The page-to-band torn edge is as wide as the welcome panel above it and takes its bottom colour. */
.aa-category-band.is-style-torn-page-to-band {
	--aa-torn-color: var(--wp--preset--color--brown-600);
}
.aa-category-band.is-style-torn-page-to-band::before {
	inset-inline: 0;
	width: min(var(--wp--style--global--content-size), 100% - 2 * var(--wp--preset--spacing--margin));
	margin-inline: auto;
}
/* custom.breakpoint.tablet = 768px */
@media (min-width: 768px) {
	.aa-category-band { padding-bottom: var(--wp--preset--spacing--24); }
}
/* custom.breakpoint.nav = 1024px */
@media (min-width: 1024px) {
	.aa-category-band { padding-bottom: var(--wp--preset--spacing--48); }
}

/* Label pill (Figma: Label pill): static text, not a link. */
.aa-label-pill {
	box-sizing: border-box;
	width: 100%;
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
	border: var(--wp--custom--border-width--hairline) solid var(--wp--custom--color--border--gold);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--custom--color--bg--nav);
	color: var(--wp--custom--color--text--primary);
	font-size: var(--wp--preset--font-size--caption);
	font-style: italic;
	line-height: var(--wp--custom--line-height--caption);
	text-align: center;
}
/* custom.breakpoint.tablet = 768px */
@media (min-width: 768px) {
	.aa-label-pill {
		width: auto;
		padding-inline: var(--wp--preset--spacing--48);
	}
}

/* Tiles: one column on phones, three across from 768px; a Featured tile takes its own centred row. */
.aa-tiles {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--8);
	width: 100%;
	max-width: var(--wp--style--global--content-size);
}
/* custom.breakpoint.tablet = 768px */
@media (min-width: 768px) {
	.aa-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--24);
	}
	.aa-tiles > .is-featured {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - 2 * var(--wp--preset--spacing--24)) / 3 * 2 + var(--wp--preset--spacing--24));
	}
}

/* RD3: homepage category cards - one row of 4 on desktop (tablet stays 2x2, mobile 1-up) */
@media (min-width: 1024px) {
	.aa-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.aa-tiles > .is-featured {
		width: calc((100% - 3 * var(--wp--preset--spacing--24)) / 4 * 2 + var(--wp--preset--spacing--24));
	}
}