/*
 * home-wins-lessons.css — patterns/home-wins-lessons.php's styling (2026-07-15). Homepage-only,
 * enqueued from alexdesigns_eoa_enqueue() alongside eoa-credibility-band.css (same is_front_page
 * gate). Light-section band, same .ad-section rhythm as its siblings, distinguished as
 * "personal" via the warm accent (--accent-warm, #C8521F, NEVER teal — teal is reserved for
 * AI-related UI, see .ad-eyebrow--teal / AI-callout components elsewhere in the theme). Excerpt
 * uses the site's standard body font (Alex's call, 2026-07-16) — no longer a distinct serif.
 */

.hwl-band {
	background: var( --wp--preset--color--paper );
	border-top: 1px solid var( --wp--preset--color--accent-warm );
}

.hwl-card {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	background: var( --wp--preset--color--card, #fff );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--card, 4px );
	padding: 1.75rem;
}

.hwl-portrait-wrap {
	flex: none;
}

.hwl-portrait {
	display: block;
	width: 108px;
	height: 108px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var( --wp--preset--color--accent-warm );
}

.hwl-body {
	position: relative;
	min-width: 0;
}

.hwl-eyebrow {
	margin: 0 0 0.5rem;
	/* 40% smaller than the sitewide .ad-eyebrow size (Alex's call, 2026-07-16) — scoped to this
	   module only, not a change to .ad-eyebrow itself. */
	font-size: calc(var( --wp--preset--font-size--display ) * 0.375 * 0.6);
}

.hwl-title {
	margin: 0 0 0.6rem;
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.375rem;
	line-height: 1.25;
}

.hwl-title a {
	color: var( --wp--preset--color--ink );
	text-decoration: none;
}

.hwl-title a:hover,
.hwl-title a:focus-visible {
	text-decoration: underline;
}

/* Stretched-link pattern: the title link's ::after covers the whole card, so clicking anywhere
   on the card follows the same link the title text does — while the accessible name stays the
   real post title (assistive tech reads the <a> itself, not a bare block). The literal CTA link
   stays a second, explicit, keyboard-reachable link to the same destination. */
.hwl-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.hwl-excerpt {
	margin: 0 0 0.85rem;
	font-family: var( --wp--preset--font-family--body );
	font-size: 1rem;
	line-height: 1.55;
	color: var( --wp--preset--color--slate );
}

.hwl-cta {
	margin: 0;
	position: relative;
}

.hwl-cta .ad-textlink {
	color: var( --wp--preset--color--primary );
	position: relative;
	z-index: 1;
}

@media ( max-width: 781px ) {
	.hwl-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
}