/**
 * Homepage beat layouts — Phase 2A.5 §13. Each beat gets its own
 * composition; none of them share the same grid shape or rhythm —
 * an editorial sequence of distinct spreads, not repeated card rows.
 */

/* Beat 1 — Hero */
.lbm-hero-beat {
	padding-top: var(--space-7);
}

.lbm-hero-beat__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

@media (min-width: 900px) {
	.lbm-hero-beat__grid {
		grid-template-columns: 7fr 5fr;
		/* Was "start": with 3 secondary cards + the kicker, that column
		   now runs taller than the lead image, so its 3rd card stuck out
		   past the lead's bottom edge. Stretch both columns to the same
		   height instead — the lead card grows to match (see below) so
		   the two bottoms line up. */
		align-items: stretch;
		gap: var(--space-7);
	}
}

.lbm-hero-beat__secondary {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

/* Let the lead card's own height flex to match the stretched grid row
   instead of staying locked to its image's natural aspect ratio. */
.lbm-hero-beat__lead {
	display: flex;
}

.lbm-hero-beat__lead .lbm-card--hero {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.lbm-hero-beat__lead .lbm-card--hero .lbm-card__link {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Overlay variant (the common case): the image is the link's only real
   content, so let it absorb the extra height directly — object-fit:cover
   on .lbm-card__image crops gracefully, no distortion. */
.lbm-hero-beat__lead .lbm-card--hero:not(.lbm-card--hero-below) .lbm-card__media--hero {
	flex: 1;
}

/* Text-below-image variant: the image keeps its natural 16/9 height:
   the text block underneath absorbs the extra stretched space and
   centers within it, rather than the image being distorted/cropped. */
.lbm-hero-beat__lead .lbm-card--hero-below .lbm-card__body--hero-below {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Section marker introducing the 3 secondary cards as a curated block —
   a short Pine accent rule stacked above the label, then the label itself
   trailed by a hairline divider that runs out to the column's right edge,
   so it reads as one integrated masthead-style marker rather than a
   floating line of text. Echoes the same "restrained rule" device already
   used on the footer and the sidebar Popular heading, at a scale suited
   to a single compact label. Static — no hover state, it isn't a control. */
.lbm-hero-beat__secondary-kicker {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	/* The parent's flex gap already supplies the space before the first
	   card, so this wrapper needs no margin of its own. */
	margin-bottom: 0;
}

.lbm-hero-beat__secondary-kicker-bar {
	display: block;
	width: 28px;
	height: 2px;
	background-color: var(--color-accent);
}

.lbm-hero-beat__secondary-kicker-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.lbm-hero-beat__secondary-kicker-text {
	/* .lbm-kicker's own margin-bottom is meant for a label sitting
	   directly above body text; here it sits inside a flex row instead. */
	margin-bottom: 0;
	white-space: nowrap;
}

.lbm-hero-beat__secondary-kicker-divider {
	flex: 1;
	height: 1px;
	background-color: var(--color-border);
}

/* Beats 2/4/6 — category showcase, shared header */
.lbm-showcase__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--space-6);
	border-bottom: 1px solid var(--color-border);
	padding-bottom: var(--space-4);
}

.lbm-showcase__title {
	font-size: var(--text-h2);
}

/* Beat 2 — "Feature + Briefs" bento: first post spans 2 of 3 columns
   (larger, lead treatment via .lbm-card--standard-lead in cards.css),
   remaining posts fill the rest at standard scale. Not a 4-up equal grid. */
.lbm-showcase__grid--standard {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Taller gap between the lead row and the briefs row than between
	   columns — reads as two curated groups, not one uniform grid, and
	   gives the section more "expensive" breathing room overall. */
	gap: var(--space-8) var(--space-6);
}

.lbm-showcase__grid--standard > .lbm-card:first-child {
	grid-column: span 2;
}

/* Thin-category fallback (see category-showcase.php) — plain even grid,
   no asymmetric span, so a category with fewer than 5 posts never
   orphans a lone card in a half-empty row. */
.lbm-showcase__grid--standard-flat > .lbm-card:first-child {
	grid-column: span 1;
}

/* Beat 4 — text-led feature rows (small image, dominant headline via
   .lbm-card--editorial-feature in cards.css). Stacked, generous gap —
   this is the homepage's visual high point (see .lbm-section--large). */
.lbm-showcase__grid--editorial {
	display: flex;
	flex-direction: column;
	/* Wider than the Business showcase's row gap — with only 2 cards and
	   no dividers, the extra air is what makes each read as its own
	   curated spread instead of a repeated block. */
	gap: var(--space-9);
}

/* Beat 6 — closing pair: 2 items only, larger-than-dense compact cards
   (.lbm-card--compact-feature in cards.css), not a 6-row listing. */
.lbm-showcase__grid--compact {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6) var(--space-7);
}

@media (max-width: 900px) {
	.lbm-showcase__grid--standard {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.lbm-showcase__grid--standard,
	.lbm-showcase__grid--compact {
		grid-template-columns: 1fr;
	}

	.lbm-showcase__grid--standard > .lbm-card:first-child {
		grid-column: span 1;
	}
}

/* Per-beat rhythm — replaces the uniform .lbm-section margin every
   showcase beat previously shared, so the page has real vertical pacing
   instead of identical breathing room three times over. */
.lbm-section--tight {
	margin-block: var(--space-7);
}

@media (max-width: 767px) {
	.lbm-section--tight {
		margin-block: var(--space-6);
	}
}

/* Beat 6's tonal zoning — echoes the Trending beat's contrast treatment
   so the closing showcase reads as its own distinct "In Brief"-style
   zone, not more of the same white canvas. */
.lbm-showcase--zoned {
	background-color: var(--color-surface);
	padding-block: var(--space-8);
}

/* Beat 3 — trending (contrast beat, no images) */
.lbm-trending {
	background-color: var(--color-surface);
	padding-block: var(--space-8);
}

.lbm-trending__title {
	font-size: var(--text-h2);
	margin-bottom: var(--space-6);
}

.lbm-trending__list {
	max-width: var(--content-max);
}

/* Beat 5 — newsletter (quiet interstitial beat). Rule lines mark it as
   a deliberate pause between the two showcase beats rather than a
   filled "signup widget" box. More padding than the standard section
   rhythm gives that pause room to actually read as deliberate instead
   of just another content block with thin borders. */
.lbm-newsletter {
	border-block: 1px solid var(--color-border);
	padding-block: var(--space-9);
	/* .lbm-section already contributes margin-block: var(--space-9) above
	   and below (grid.css) — stacked on top of this block's own deliberate
	   padding-block, that doubled up to ~384px of empty space total, most
	   visible on the sparser category-page layout. The padding alone is
	   enough to read as a deliberate pause; zero out the redundant margin. */
	margin-block: 0;
}

.lbm-newsletter__inner {
	max-width: 560px;
	margin-inline: auto;
	text-align: center;
}

.lbm-newsletter__title {
	font-size: var(--text-h2);
}

.lbm-newsletter__dek {
	margin-top: var(--space-3);
	color: var(--color-neutral-700);
}

.lbm-newsletter__form {
	display: flex;
	align-items: stretch;
	gap: var(--space-3);
	/* Tighter than before (was space-6): pulls the form closer to the dek
	   it belongs with, while the section's own padding (above) carries
	   the separation from the rest of the page — related elements read
	   as a group instead of three evenly-spaced, disconnected lines. */
	margin-top: var(--space-5);
	max-width: 420px;
	margin-inline: auto;
}

.lbm-newsletter__input {
	flex: 1;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-paper);
}

/* Same hover language as the Hero/Business/Tech cards elsewhere on the
   homepage (subtle lift + shadow) — scoped to this one button instance
   so the site-wide .lbm-btn--primary (header CTA, etc.) is untouched. */
.lbm-newsletter__form .lbm-btn--primary {
	transition: background-color var(--duration-hover) var(--ease-standard),
		border-color var(--duration-hover) var(--ease-standard),
		color var(--duration-hover) var(--ease-standard),
		transform var(--duration-hover) var(--ease-standard),
		box-shadow var(--duration-hover) var(--ease-standard);
}

.lbm-newsletter__form .lbm-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-hover);
}

@media (max-width: 480px) {
	.lbm-newsletter__form {
		flex-direction: column;
	}
}

/* Beat 7 — more topics (closing beat) */
.lbm-more-topics {
	padding-block: var(--space-8);
	border-top: 1px solid var(--color-border);
}

.lbm-more-topics__title {
	font-size: var(--text-h4);
	text-transform: uppercase;
	letter-spacing: var(--tracking-kicker);
	color: var(--color-neutral-600);
	margin-bottom: var(--space-5);
}

.lbm-more-topics__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-6);
}

.lbm-more-topics__link {
	font-family: var(--font-serif);
	font-size: 1.125rem;
	color: var(--color-ink);
}

.lbm-more-topics__link:hover {
	color: var(--color-accent);
}