/* ==========================================================================
   About Page
   Jay Anderson Art — jay-anderson-art theme
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero banner — full-bleed paper-dk-bg
   -------------------------------------------------------------------------- */

.jaa-about-hero {
	background-color: var(--color-paper-dk-bg);
	padding-block: var(--space-md);
}

.jaa-about-hero__label {
	margin-block-end: var(--space-xs);
}

.jaa-about-hero__heading {
	font-size: var(--text-3xl);
	line-height: 1.05;
	margin-block-end: var(--space-xs);
}

.jaa-about-hero__accent {
	font-style: italic;
	color: var(--color-brown-accent);
}

.jaa-about-hero__subtitle {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: var(--text-lg);
	font-weight: 500;
	color: var(--color-black);
	margin: 0;
}

/* --------------------------------------------------------------------------
   2. Portrait grid + bio — two-column
   -------------------------------------------------------------------------- */

.jaa-about-bio {
	background-color: var(--color-paper-bg);
	padding-block: var(--space-lg);
}

.jaa-about-bio__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
	align-items: start;
}

/* --- Portrait grid: 3x2 --- */

.jaa-about-bio__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.375rem;
}

.jaa-about-bio__grid-item {
	overflow: hidden;
	aspect-ratio: 1;
}

.jaa-about-bio__grid-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Bio copy --- */

.jaa-about-bio__heading {
	font-size: var(--text-xl);
	line-height: 1.15;
	margin-block-end: var(--space-sm);
}

.jaa-about-bio__accent {
	font-style: italic;
	color: var(--color-brown-accent);
}

.jaa-about-bio__content p {
	font-size: var(--text-sm);
	line-height: 1.7;
	color: var(--color-black);
	margin-block-end: var(--space-sm);
}

/* --- Facts grid --- */

.jaa-about-bio__facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem var(--space-md);
	margin-block-start: var(--space-md);
	padding-block-start: var(--space-sm);
	border-top: var(--border-thin);
}

.jaa-about-bio__fact {
	display: contents;
}

.jaa-about-bio__fact dt {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--color-brown-accent);
	white-space: nowrap;
	align-self: baseline;
}

.jaa-about-bio__fact dd {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-black);
	margin: 0;
	align-self: baseline;
}

/* --------------------------------------------------------------------------
   3. Collect CTA
   -------------------------------------------------------------------------- */

.jaa-about-collect {
	background-color: var(--color-paper-bg);
	padding-block: var(--space-lg);
	border-top: var(--border-thin);
}

.jaa-about-collect__inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-lg);
}

.jaa-about-collect__label {
	margin-block-end: var(--space-xs);
}

.jaa-about-collect__heading {
	font-size: var(--text-2xl);
	line-height: 1.1;
	margin-block-end: var(--space-xs);
}

.jaa-about-collect__accent {
	font-style: italic;
	color: var(--color-brown-accent);
}

.jaa-about-collect__body {
	font-size: var(--text-sm);
	color: var(--color-black);
	max-width: 44ch;
	margin: 0;
}

.jaa-about-collect__btn {
	white-space: nowrap;
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   4. Responsive — tablet (≤ 900px)
   -------------------------------------------------------------------------- */

@media (width <= 900px) {
	.jaa-about-hero__heading {
		font-size: var(--text-2xl);
	}

	.jaa-about-bio__inner {
		grid-template-columns: 1fr;
	}

	.jaa-about-collect__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-md);
	}
}

/* --------------------------------------------------------------------------
   5. Responsive — mobile (≤ 600px)
   -------------------------------------------------------------------------- */

@media (width <= 600px) {
	.jaa-about-hero__heading {
		font-size: var(--text-xl);
	}

	.jaa-about-bio__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.jaa-about-bio__facts {
		grid-template-columns: 1fr;
	}

	.jaa-about-bio__fact dt {
		margin-block-end: 0;
	}

	.jaa-about-collect__heading {
		font-size: var(--text-xl);
	}
}