/**
 * Card component library — Phase 2A.5 §6/§7/§8/§9. One shared grammar,
 * eight variants, plus same-family context modifiers (hero/feature/lead)
 * for beats that need a different scale without inventing a new type.
 * No shadow on static cards (borders/spacing do the separation work per
 * §9); a soft hover shadow only where genuinely interactive lift is
 * appropriate.
 */

.lbm-card {
	position: relative;
}

.lbm-card__link {
	display: block;
	color: inherit;
}

.lbm-card__link:hover {
	color: inherit;
}

.lbm-card__media {
	overflow: hidden;
	background-color: var(--color-surface);
}

.lbm-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.94) contrast(1.03);
	transition: transform var(--duration-image-hover) var(--ease-standard);
}

.lbm-card__link:hover .lbm-card__image {
	transform: scale(1.03);
}

.lbm-card__body {
	padding-top: var(--space-4);
	/* If a post has no featured image, the media block is omitted entirely
	   (see the card templates) — in flex-row variants (Compact, Sidebar)
	   flex:1 lets the body claim the row instead of sizing to content and
	   leaving a dead gap; grid-based variants (Editorial family) ignore
	   this property harmlessly and are covered by the :only-child rule
	   below instead. */
	flex: 1;
}

/* Same missing-image case for the side-by-side Editorial family (general,
   hero, feature) — without this, a body with no media sibling would only
   occupy its own grid track, leaving the image column empty. */
.lbm-card--editorial .lbm-card__body:only-child,
.lbm-card--editorial-hero .lbm-card__body:only-child,
.lbm-card--editorial-feature .lbm-card__body:only-child {
	grid-column: 1 / -1;
}

.lbm-card__title {
	font-family: var(--font-serif);
	font-weight: 600;
	line-height: var(--leading-tight);
	color: var(--color-ink);
}

.lbm-card__dek {
	margin-top: var(--space-3);
	color: var(--color-neutral-700);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* ---------- Hero Story ---------- */

/* Container-level framing (radius/shadow/lift) so the image and the
   overlaid (or below-image) text read as one enclosed editorial card
   rather than a bare photo — the one deliberate exception to this file's
   "no shadow on static cards" rule, scoped to the homepage lead position. */
.lbm-card--hero {
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-hover);
	background-color: var(--color-paper);
	transition: box-shadow var(--duration-hover) var(--ease-standard),
		transform var(--duration-hover) var(--ease-standard);
}

.lbm-card--hero:hover {
	box-shadow: var(--shadow-dropdown);
	transform: translateY(-2px);
}

.lbm-card--hero .lbm-card__media--hero {
	position: relative;
	aspect-ratio: 16 / 9;
}

.lbm-card__scrim {
	position: absolute;
	inset: 0;
	/* Darkening concentrated in the lower third, where the overlay text
	   actually sits (per the card's own "headline overlaid in the lower
	   third" intent) — not a full-image wash. Legibility is carried
	   jointly by this scrim and the title/kicker text-shadow below, so
	   the scrim itself can stay restrained and let the image read clearly
	   above the text zone. Still a soft gradient (never flat color) per
	   Phase 2A.5 §7. */
	background: linear-gradient(to top,
		rgba(0, 0, 0, 0.75) 0%,
		rgba(0, 0, 0, 0.45) 20%,
		rgba(0, 0, 0, 0.12) 40%,
		transparent 55%);
}

.lbm-card__overlay-content {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--space-6);
	color: #FAF9F6;
	/* Constrains the title to a considered measure instead of spanning the
	   full image width, so it reads as a controlled text column rather
	   than competing edge-to-edge with whatever the image contains. */
	max-width: 36ch;
}

.lbm-card--hero .lbm-kicker {
	color: #FAF9F6;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.lbm-card__title--hero {
	font-size: var(--text-h1);
	color: #FAF9F6;
	/* Guarantees contrast against any image content beneath the scrim,
	   including images with their own baked-in text. */
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

/* ---------- Hero Story — text-heavy image variant ----------
 * For posts flagged '_lbm_hero_text_heavy_image' (see card-hero.php):
 * the featured image already carries its own headline graphic, so the
 * kicker/title move to normal flow below the image instead of an
 * overlay — no scrim, no collision, image stays the full-bleed focal
 * point exactly as in the standard treatment. */
.lbm-card--hero-below .lbm-card__media--hero {
	margin-bottom: 0;
}

.lbm-card__body--hero-below {
	padding: var(--space-5);
}

.lbm-card__body--hero-below .lbm-kicker {
	margin-bottom: var(--space-2);
}

/* Deliberately smaller than the overlay title (--text-h1): with no scrim
   to fight for legibility, this variant doesn't need maximum drama — a
   more restrained size keeps the Hero Lead from towering over the
   secondary column (Phase 2A.5 rhythm calls for a magazine spread, not
   one oversized card beside two small ones). */
.lbm-card__title--hero-below {
	font-size: var(--text-h2);
	line-height: var(--leading-tight);
	color: var(--color-ink);
	max-width: 48ch;
}

/* The general .lbm-card--hero .lbm-kicker rule above is tuned for text
   sitting on the image (white, shadowed) — the below-image kicker sits
   on plain background like every other card's kicker, so it reverts to
   the standard accent-color treatment. */
.lbm-card__body--hero-below .lbm-kicker {
	color: var(--color-accent);
	text-shadow: none;
}

/* ---------- Editorial Feature ---------- */

.lbm-card--editorial .lbm-card__link {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

@media (min-width: 640px) {
	.lbm-card--editorial .lbm-card__link {
		grid-template-columns: 3fr 2fr;
		align-items: center;
	}
}

.lbm-card__media--editorial {
	/* Featured images here are typically wide graphic/photo compositions
	   (~16:9) with content close to the edges — 4:3 was cropping into
	   text baked into some of them. 16:9 keeps most images uncropped. */
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-none);
}

.lbm-card--editorial .lbm-card__body {
	padding-top: 0;
}

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

/* ---------- Editorial Feature — Hero-slot variant ----------
 * Same grammar (image beside text), tuned for the Hero beat's narrow
 * secondary column instead of the general full-width row usage. The
 * shared 640px breakpoint above is viewport-based, not column-width-based,
 * so it forced the wide-row proportions into this much narrower slot —
 * this variant gives the hero context its own explicit, narrower-aware
 * rules instead. No dek (see card-editorial.php), smaller title step,
 * clamped to keep the two secondary cards visually balanced against the
 * Hero Lead rather than growing unbounded with title length. */
@media (min-width: 480px) {
	.lbm-card--editorial-hero .lbm-card__link {
		grid-template-columns: 2fr 3fr;
		align-items: center;
	}
}

/* Padding + equal negative margin: gives the card an internal hover
   "surface" (shadow/lift) without changing its outer footprint, so the
   secondary column's flex gap stays exactly as it was. */
.lbm-card--editorial-hero {
	padding: var(--space-4);
	margin: calc(var(--space-4) * -1);
	border-radius: var(--radius-md);
	transition: box-shadow var(--duration-hover) var(--ease-standard),
		transform var(--duration-hover) var(--ease-standard);
}

.lbm-card--editorial-hero:hover {
	box-shadow: var(--shadow-dropdown);
	transform: translateY(-2px);
}

.lbm-card--editorial-hero .lbm-card__media--editorial {
	aspect-ratio: 1 / 1;
	/* At this thumbnail scale it follows the Standard/Compact/Sidebar radius
	   convention (Phase 2A.5 §7), not the sharp-corner rule reserved for
	   large hero/editorial-row imagery. */
	border-radius: var(--radius-sm);
}

.lbm-card--editorial-hero .lbm-card__title--editorial {
	font-size: var(--text-h4);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* No dek in this context (see card-editorial.php's $skip_dek), so the meta
   row would otherwise sit flush against the title with zero gap — the
   "cramped text" the polish pass calls out. */
.lbm-card--editorial-hero .lbm-meta {
	margin-top: var(--space-3);
}

/* ---------- Editorial Feature — homepage text-led variant ----------
 * Inverts the general split: a small image anchors a dominant headline,
 * instead of a large image carrying the row. Used for the homepage's
 * beat 4 (Phase 2A "visual high point") so it reads as a text-forward
 * feature story, not another large-photo grid — distinct from both the
 * general Editorial usage (category pages) and the Hero-slot variant. */
@media (min-width: 560px) {
	.lbm-card--editorial-feature .lbm-card__link {
		grid-template-columns: 1fr 2fr;
		/* Top-aligned rather than centered: the kicker now starts flush
		   with the top of the image on both cards regardless of headline
		   length, instead of the whole text block re-centering (and the
		   kicker drifting) against the fixed-height image as the title
		   wraps to 2 vs 3 lines — the "identical optical balance" anchor
		   point becomes the top edge, not the vertical middle. */
		align-items: start;
		gap: var(--space-8);
	}
}

.lbm-card--editorial-feature .lbm-card__media--editorial {
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-md);
}

/* Was --text-h1 — literally the same scale as the Hero Story overlay
   title, which read as a second hero rather than a "text-forward
   feature story" article card (the intent stated above). Stepped down
   to --text-h2 with a slightly looser line-height and a capped measure
   so the now-smaller headline still reads as a considered column next
   to the square image, not a headline stretching to fill the 2fr slot. */
.lbm-card--editorial-feature .lbm-card__title--editorial {
	font-size: var(--text-h2);
	line-height: 1.2;
	max-width: 28ch;
}

.lbm-card--editorial-feature .lbm-card__dek {
	max-width: 46ch;
}

/* No margin-top ever reaches .lbm-meta by default, so it sits flush
   against the dek with a zero gap — a calmer rhythm needs a deliberate
   beat between excerpt and byline, matching the Hero/Business fixes. */
.lbm-card--editorial-feature .lbm-meta {
	margin-top: var(--space-4);
}

/* Same premium hover language as the Hero and Business showcase: soft
   shadow, 2px max lift, existing image-zoom — via padding + equal
   negative margin so the card's outer footprint (and the section's own
   gap rhythm) doesn't shift. Hover shadow matches Hero's own elevated
   --shadow-dropdown (not the baseline --shadow-hover every standard card
   gets) — feature-tier cards read as a step above the rest, not just
   another card in the grid (P2 motion-refinement pass). */
.lbm-card--editorial-feature {
	padding: var(--space-4);
	margin: calc(var(--space-4) * -1);
	border-radius: var(--radius-md);
	transition: box-shadow var(--duration-hover) var(--ease-standard),
		transform var(--duration-hover) var(--ease-standard);
}

.lbm-card--editorial-feature:hover {
	box-shadow: var(--shadow-dropdown);
	transform: translateY(-2px);
}

/* ---------- Standard Story ---------- */

.lbm-card__media--standard {
	aspect-ratio: 3 / 2;
	border-radius: var(--radius-sm);
}

.lbm-card__title--standard {
	font-size: var(--text-h3);
}

/* ---------- Standard Story — homepage lead variant ----------
 * Given to the first post in beat 2's bento grid (2-of-3 column span via
 * homepage.css) — a wider, taller feature image, a larger title step,
 * and a dek the smaller siblings don't get. Same card, lead position. */
.lbm-card--standard-lead .lbm-card__media--standard {
	aspect-ratio: 16 / 9;
}

.lbm-card--standard-lead .lbm-card__title--standard {
	font-size: var(--text-h2);
}

/* ---------- Beat 2 — Business showcase (standard bento) polish ----------
 * Scoped under .lbm-showcase__grid--standard rather than the bare
 * .lbm-card--standard / --standard-lead selectors, because those base
 * classes are also shared by category/author/404/index archive grids —
 * this "expensive, curated" treatment (shadow/lift, tighter rhythm) stays
 * exclusive to the homepage's first showcase beat. */
.lbm-showcase__grid--standard .lbm-card--standard {
	padding: var(--space-3);
	margin: calc(var(--space-3) * -1);
	border-radius: var(--radius-md);
	transition: box-shadow var(--duration-hover) var(--ease-standard),
		transform var(--duration-hover) var(--ease-standard);
}

.lbm-showcase__grid--standard .lbm-card--standard:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-2px);
}

/* No dek on the four briefs, so the meta row would otherwise sit flush
   against the title with no gap. */
.lbm-showcase__grid--standard .lbm-card--standard:not(.lbm-card--standard-lead) .lbm-meta {
	margin-top: var(--space-3);
}

/* Lead dominance comes from composition/whitespace, not a bigger type
   step: a slightly softer image radius and a more generous internal
   rhythm between dek and meta (which otherwise touch with zero gap). */
.lbm-showcase__grid--standard .lbm-card--standard-lead .lbm-card__media--standard {
	border-radius: var(--radius-md);
}

.lbm-showcase__grid--standard .lbm-card--standard-lead .lbm-card__body {
	padding-top: var(--space-5);
}

.lbm-showcase__grid--standard .lbm-card--standard-lead .lbm-meta {
	margin-top: var(--space-4);
}

/* ---------- Compact Story ---------- */

.lbm-card--compact .lbm-card__link {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
}

.lbm-card__media--compact {
	flex-shrink: 0;
	width: 88px;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-sm);
}

.lbm-card--compact .lbm-card__body {
	padding-top: 0;
}

.lbm-card__title--compact {
	font-size: var(--text-h4);
}

/* ---------- Compact Story — homepage closing-pair variant ----------
 * Beat 6 shows only 2 posts (not a dense 6-row listing), so the thumbnail
 * can be substantially larger without crowding the row — plus a short
 * dek the dense listing usage never carries (see card-compact.php). */
.lbm-card--compact-feature .lbm-card__media--compact {
	width: 168px;
	aspect-ratio: 4 / 3;
}

.lbm-card--compact-feature .lbm-card__title--compact {
	font-size: var(--text-h3);
}

@media (max-width: 480px) {
	.lbm-card--compact-feature .lbm-card__link {
		flex-direction: column;
	}

	.lbm-card--compact-feature .lbm-card__media--compact {
		width: 100%;
	}
}

/* ---------- Trending Story ---------- */

.lbm-card--trending .lbm-card__link {
	display: flex;
	/* Centered rather than baseline: the numeral now reads as anchored to
	   the whole kicker+title+meta block as one paired unit, instead of
	   lining up with just the kicker's tiny baseline. */
	align-items: center;
	gap: var(--space-5);
	padding-block: var(--space-5);
	/* Softened from the flat border-color token — a quieter divider than
	   the sectioned rules used elsewhere, fitting a refined ranked list. */
	border-top: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
}

.lbm-card__rank {
	font-family: var(--font-serif);
	font-size: 2rem;
	font-weight: 600;
	color: var(--color-neutral-300);
	flex-shrink: 0;
	line-height: 1;
}

.lbm-card--trending .lbm-card__body {
	padding-top: 0;
	transition: transform var(--duration-hover) var(--ease-standard);
}

/* Hover moves only the content block — the numeral stays fixed as the
   list's stable anchor. */
.lbm-card--trending .lbm-card__link:hover .lbm-card__body {
	transform: translateX(2px);
}

.lbm-card__title--trending {
	font-size: var(--text-h4);
	transition: color var(--duration-hover) var(--ease-standard);
}

.lbm-card--trending .lbm-card__link:hover .lbm-card__title--trending {
	color: var(--color-accent);
}

/* ---------- Opinion / Analysis ---------- */

.lbm-card__title--opinion {
	font-size: var(--text-h3);
	margin-top: var(--space-2);
}

.lbm-card__author-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.lbm-card__author-avatar {
	border-radius: var(--radius-full);
}

.lbm-card__author-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lbm-card__author-name {
	font-weight: 600;
	font-size: 0.9375rem;
}

/* ---------- Text-only ---------- */

/* Wraps a run of card-text-only items as a single divided list (tag
   archives) rather than a multi-column grid — each item's own border-top
   is the only separator needed, capped to a readable measure rather than
   stretching headline text edge-to-edge on a wide viewport. */
.lbm-text-only-list {
	max-width: var(--content-max);
}

.lbm-card--text-only .lbm-card__link {
	display: block;
	padding-block: var(--space-4);
	border-top: 1px solid var(--color-border);
}

.lbm-card__title--text-only {
	font-size: var(--text-h4);
	margin-top: var(--space-2);
}

/* ---------- Sidebar / Related ---------- */

.lbm-card--sidebar .lbm-card__link {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
}

.lbm-card__media--sidebar {
	flex-shrink: 0;
	width: 72px;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-sm);
}

.lbm-card--sidebar .lbm-card__body {
	padding-top: 0;
}

.lbm-card__title--sidebar {
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
}