/**
 * "Page with title band" template and the About Us page (Figma: About-Desktop, About-Tablet, About- Mobile).
 * Title band with the generated breadcrumb, then the page content: photo, intro panel, and the
 * Authenticity and Visit panels. Dark surfaces throughout (bg/nav), no torn edges.
 * Tokens only. Media queries repeat custom.breakpoint values as literals (decision 1).
 */

.aa-page {
	padding-inline: var(--wp--preset--spacing--margin);
	background-color: var(--wp--custom--color--bg--nav);
}

/* The bands sit edge to edge: no flow gaps inside the page, and no site-level gap around it.
   Ordered by specificity; the rules target different elements. */
.aa-page > *,
:is(.aa-about, .aa-about__panels, .aa-panel) > * {
	margin-block: 0;
}

.aa-page .wp-block-post-content > * {
	margin-block: 0;
}

.wp-site-blocks > .aa-page,
.wp-site-blocks > .aa-page + * {
	margin-block-start: 0;
}

/* ---------- Title band (Figma: About/TitleBand): the breadcrumb on the dark page ---------- */
.aa-title-band {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--16);
}

/* ---------- About Us body ---------- */
.aa-about {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-block-end: var(--wp--preset--spacing--32);
	color: var(--wp--custom--color--text--primary);
}

/* Photo: client image from the Media Library (replace in the editor); cropped to Figma's frame. */
.aa-about__photo {
	margin: 0;
}

.aa-about__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--wp--custom--about--photo-ratio-mobile);
	object-fit: cover;
}

/* Panels: 1px border/gold on the dark page (Figma: About/Container › Frame, Authenticity/Panel, Visit panel). */
.aa-panel {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
	padding: var(--wp--preset--spacing--32);
	border: var(--wp--custom--border-width--hairline) solid var(--wp--custom--color--border--gold);
}

.aa-panel :is(h1, h2) {
	color: var(--wp--custom--color--accent--gold-light);
}

/* Intro: the page's H1 centred over a left-aligned reading column. */
.aa-about__intro {
	align-items: center;
	gap: var(--wp--preset--spacing--24);
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--32);
}

.aa-about__title {
	text-align: center;
}

.aa-about__lede {
	width: 100%;
	max-width: var(--wp--custom--about--reading-width);
}

.aa-about__panels {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--24);
}

/* Appointment line: Caption (italic). */
.aa-about__appointment {
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--line-height--caption);
}

/* Actions: Filled "Call …" and Outline "Email Us", 56px (tap-target xl). Full width and stacked on phones. */
.aa-about__actions {
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--16);
	padding-block-start: var(--wp--preset--spacing--8);
}

.aa-about__actions .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--wp--custom--tap-target--xl);
}

/* Phones: the buttons are full width with centred labels, so 16px side padding changes nothing visible
   at 390px but keeps "Call (443) 786-4486" on one line down to 320px. */

/* custom.breakpoint.tablet = 768px */
@media (max-width: 767.98px) {

	.aa-about__actions .wp-block-button__link {
		padding-inline: var(--wp--preset--spacing--16);
	}
}

/* custom.breakpoint.tablet = 768px */
@media (min-width: 768px) {

	.aa-about {
		padding-block-end: var(--wp--preset--spacing--48);
	}

	.aa-about__photo img {
		aspect-ratio: var(--wp--custom--about--photo-ratio);
	}

	.aa-about__actions {
		flex-direction: row;
		align-items: center;
	}

	.aa-about__actions .wp-block-button__link {
		width: auto;
	}
}

/* Desktop spacing and the two panels side by side (custom.breakpoint.nav = 1024px, as the header). */
@media (min-width: 1024px) {

	.aa-about {
		gap: var(--wp--preset--spacing--32);
	}

	.aa-about__intro {
		gap: var(--wp--preset--spacing--32);
		padding: var(--wp--preset--spacing--32);
	}

	/* Figma: 32px from the photo to the intro, 24px from the intro to the panels. */
	.aa-about__panels {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-block-start: calc(var(--wp--preset--spacing--24) - var(--wp--preset--spacing--32));
	}
}

/* custom.breakpoint.tablet = 768px: the first crumb gives back its 4px focus/tap padding, so the breadcrumb
   text starts on the title band's content edge (as on the piece page). Phones keep the back link on the margin. */
@media (min-width: 768px) {

	.aa-title-band .aa-breadcrumbs li:first-child a {
		margin-inline-start: calc(-1 * var(--wp--preset--spacing--4));
	}
}