/* DOB Starter Theme | css/03-layout.css | v0.1.5 | 2026-04-30 | Generated by Claude, DOB-S7 (Phase 4 hero images, reviewer revisions) */
/* Container, grid utilities, two-col layout, generic section padding. */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

.container--narrow {
	max-width: var(--container-narrow);
}

section {
	padding: var(--s-8) 0;
}

section.compact {
	padding: var(--s-6) 0;
}

section.alt {
	background: var(--c-cream-warm);
}

.section-eyebrow {
	font-family: var(--f-label);
	font-size: var(--fs-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-stone);
	margin-bottom: var(--s-4);
	display: block;
	font-weight: 500;
}

.two-col {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-7);
	align-items: center;
}

@media (min-width: 768px) {
	.two-col {
		grid-template-columns: 1fr 1fr;
		gap: var(--s-8);
	}
	.two-col.flip > :first-child { order: 2; }
}

/* Image placeholder block: gradient fill is fallback; <img> child fills when present. */
.figure-block {
	aspect-ratio: 4/5;
	background:
		linear-gradient(135deg,
			var(--c-stone-light) 0%,
			var(--c-cream-warm) 50%,
			var(--c-brick-light) 100%);
	border-radius: 4px;
	position: relative;
	overflow: hidden;
}

.figure-block.wide {
	aspect-ratio: 5/4;
}

/* 3:2 photographic ratio matched to the 'dob-hero' image size. */
.figure-block--hero {
	aspect-ratio: 3/2;
}

/* Decorative data-label badge: only render when [data-label] is actually set,
 * so a real <img> figure with no label does not paint an empty cream rectangle.
 */
.figure-block[data-label]::after {
	content: attr(data-label);
	position: absolute;
	bottom: var(--s-3);
	left: var(--s-3);
	font-family: var(--f-body);
	font-style: italic;
	font-size: var(--fs-label);
	color: var(--c-stone);
	background: var(--c-cream);
	padding: var(--s-1) var(--s-2);
	border-radius: 2px;
	max-width: calc(100% - 2rem);
}

/* When a real <img> is placed inside figure-block, fill the container. */
.figure-block__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}

.figure-block__cap {
	position: absolute;
	bottom: var(--s-3);
	left: var(--s-3);
	font-family: var(--f-body);
	font-style: italic;
	font-size: var(--fs-label);
	color: var(--c-stone);
	background: var(--c-cream);
	padding: var(--s-1) var(--s-2);
	border-radius: 2px;
	max-width: calc(100% - 2rem);
	margin: 0;
	z-index: 2;
}

figure.figure-block {
	margin: 0;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tt-min);
	padding: 0 var(--s-5);
	font-family: var(--f-body);
	font-size: var(--fs-ui);
	font-weight: 500;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: 4px;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	cursor: pointer;
	letter-spacing: -0.005em;
}

.btn-primary {
	background: var(--c-brick);
	color: var(--c-cream);
	border-color: var(--c-brick);
}

.btn-primary:hover {
	background: var(--c-brick-dark);
	border-color: var(--c-brick-dark);
	color: var(--c-cream);
}

.btn-secondary {
	background: transparent;
	color: var(--c-brick);
	border-color: var(--c-brick);
}

.btn-secondary:hover {
	background: var(--c-brick);
	color: var(--c-cream);
}

.btn-dark {
	background: var(--c-cream);
	color: var(--c-brick-dark);
	border-color: var(--c-cream);
}

.btn-dark:hover {
	background: var(--c-cream-warm);
	color: var(--c-brick-dark);
	border-color: var(--c-cream-warm);
}

/* Arrow link */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-weight: 500;
	text-decoration: none;
	font-size: var(--fs-body);
	color: var(--c-brick);
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	min-height: var(--tt-min);
	align-self: flex-start;
}

.link-arrow:hover {
	color: var(--c-brick-dark);
}

/* Page hero (used by page.php and 404.php) */
.page-hero {
	padding: var(--s-7) 0 var(--s-6);
	background: var(--c-cream-warm);
	border-bottom: 1px solid color-mix(in srgb, var(--c-stone) 14%, transparent);
}

.page-title {
	margin-bottom: var(--s-3);
}

.page-lede {
	font-size: var(--fs-lede);
	color: var(--c-stone);
	max-width: 38rem;
	margin: 0;
}

.page-article {
	padding: var(--s-7) 0;
}

/* ---------------------------------------------------------------------------
 * Page hero with image (DOB-S7 Phase 4)
 *
 * When _dob_hero_image meta is set, page.php emits .page-hero--with-image
 * plus an inner .page-hero__layout grid. Mobile: stacked, image above text.
 * Desktop (>=768px): paired, text left, image right at roughly 1fr/1fr.
 * The image uses .figure-block + .figure-block--hero (aspect 3/2 matching
 * the dob-hero image size) so the hero crops cleanly to a consistent shape.
 * ------------------------------------------------------------------------- */

.page-hero--with-image {
	padding-block: var(--s-7);
}

.page-hero__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-6);
	align-items: center;
}

.page-hero__text {
	min-width: 0;
}

.page-hero__image {
	min-width: 0;
}

@media (min-width: 768px) {
	.page-hero__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--s-8);
	}
}

/* On wider screens, give the text a touch more visual weight. */
@media (min-width: 1100px) {
	.page-hero__layout {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	}
}