/* DOB Starter Theme | css/05-hero.css | v0.1.1 | 2026-04-30 | Generated by Claude, DOB-S8 */
/* Front-page paired-image hero (Anchor Cover archetype) plus legacy
   text-only hero retained as fallback. The original brick-gradient
   hero with the ridge silhouette overlay is preserved as the .hero
   base for any future copy-only landing page; the front-page now
   composes onto .page-hero + .page-hero--with-image (introduced in
   DOB-S7 Phase 4) plus .front-hero, which sits on cream and pairs
   the title/lede/CTAs against the satellite figure to the right. */

/* === Front-page paired hero (DOB-S8) === */
.front-hero {
	padding: var(--s-7) 0 var(--s-7);
}

@media (min-width: 1100px) {
	.front-hero {
		padding: var(--s-8) 0;
	}
}

.front-hero h1.page-title {
	font-size: var(--fs-h1-m);
	max-width: 18ch;
	margin-bottom: var(--s-4);
}

@media (min-width: 1100px) {
	.front-hero h1.page-title {
		font-size: var(--fs-h1-d);
	}
}

.front-hero .page-lede {
	max-width: 38rem;
	margin-bottom: var(--s-5);
	color: var(--c-stone);
}

.front-hero .hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-5);
	align-items: center;
}

/* === Legacy text-only hero (kept for any future use) ===
 * Brick gradient with ridge silhouette overlay. No element on the live
 * front page composes against this anymore (DOB-S8); retained so that a
 * future landing page can opt-in by setting <section class="hero">.
 */
.hero {
	position: relative;
	background: linear-gradient(180deg,
		var(--c-brick-dark) 0%,
		var(--c-brick) 60%,
		var(--c-brick-mid) 100%);
	color: var(--c-cream);
	overflow: hidden;
	padding: var(--s-9) 0 var(--s-8);
}

/*
 * Decorative ridge silhouette overlay. Inline SVG via data URI cannot reference
 * CSS custom properties, so the two fill values are hardcoded:
 *   rgba(110,45,23,0.55) corresponds to --c-brick-dark at 55% alpha
 *   rgba(31,27,23,0.42)  corresponds to --c-ink at 42% alpha
 * If brand colors change, update these triplets manually or extract this SVG
 * to a separate file rendered by a PHP filter.
 */
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='xMidYMid slice'><path fill='rgba(110,45,23,0.55)' d='M0,420 L120,360 L240,400 L360,330 L480,380 L600,310 L720,360 L840,290 L960,340 L1080,280 L1200,320 L1320,260 L1440,300 L1440,600 L0,600 Z'/><path fill='rgba(31,27,23,0.42)' d='M0,490 L100,450 L200,470 L320,420 L440,460 L560,410 L680,450 L800,400 L920,440 L1040,390 L1160,430 L1280,380 L1400,420 L1440,410 L1440,600 L0,600 Z'/></svg>");
	background-size: cover;
	background-position: bottom;
	pointer-events: none;
}

.hero .container {
	position: relative;
	z-index: 1;
}

.hero h1 {
	color: var(--c-cream);
	max-width: 22ch;
	margin-bottom: var(--s-5);
}

.hero .lede {
	color: var(--c-cream-warm);
	margin-bottom: var(--s-6);
	max-width: 42rem;
	font-size: 1.25rem;
	font-weight: 300;
	line-height: 1.5;
}

/* Legacy hero buttons override the default brick fill so they read on the
   brick gradient. .front-hero overrides nothing; it inherits .btn-primary. */
.hero .btn-primary {
	background: var(--c-cream);
	color: var(--c-brick-dark);
	border-color: var(--c-cream);
}

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

.hero .btn-secondary {
	background: transparent;
	color: var(--c-cream);
	border-color: color-mix(in srgb, var(--c-cream) 60%, transparent);
}

.hero .btn-secondary:hover {
	border-color: var(--c-cream);
	background: color-mix(in srgb, var(--c-cream) 10%, transparent);
	color: var(--c-cream);
}

/* Eyebrow chip (legacy, retained for any future use). */
.eyebrow {
	display: inline-block;
	font-family: var(--f-label);
	font-size: var(--fs-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: var(--s-4);
	color: var(--c-cream-warm);
	padding: var(--s-2) var(--s-3);
	border: 1px solid color-mix(in srgb, var(--c-cream) 30%, transparent);
	border-radius: 99px;
	font-weight: 500;
}