/*
  Component: hero half.
  Figma: "hero 1/2" (62:2061) — 821×588.

  Single feature card, large title overlaid on the lower half. Sits next to a
  c-card-stack of 3 horizontal cards on the home / categories.
*/

.c-hero-half {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 821 / 588;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--c-bg-elev);
	color: var(--c-light);
	text-decoration: none;
	isolation: isolate;
}

.c-hero-half__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.c-hero-half__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Gradient: transparent at ~53% → solid black at the bottom (matches Figma). */
.c-hero-half__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 53%,
		rgba(0, 0, 0, 1) 100%
	);
	pointer-events: none;
	z-index: 1;
}

.c-hero-half__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--space-8);
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 2;
}

.c-hero-half__cat {
	display: inline-flex;
	align-items: center;
	padding: 10px;
	border: 1px solid var(--c-light);
	border-radius: var(--radius-md);
	color: var(--c-light);
	font-size: var(--fs-heading-14);
	line-height: var(--lh-heading-14);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.42px;
	text-transform: uppercase;
	width: max-content;
}

.c-hero-half__title {
	margin: 0;
	font-size: var(--fs-h1);                /* 36 */
	line-height: var(--lh-h1);              /* 42 */
	font-weight: var(--fw-bold);
	letter-spacing: -1.44px;                /* Figma -4 → -1.44px at 36pt */
	color: var(--c-light);

	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.c-hero-half:hover .c-hero-half__title,
.c-hero-half:focus-visible .c-hero-half__title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* ------------- Row pairing the hero with a card stack ------------- */
/* Use .c-hero-row to render: [hero-half  |  stack of 3 card-horizontal] */
.c-hero-row {
	display: grid;
	grid-template-columns: minmax(0, 821fr) minmax(0, 429fr);
	gap: var(--space-8);
	align-items: stretch;
}

/* When the hero-half is the only child (category has fewer than 2 posts),
   span the full row instead of sitting in the narrow 65.7% first column. */
.c-hero-row > :only-child {
	grid-column: 1 / -1;
}

@media (max-width: 1024px) {
	.c-hero-row { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.c-hero-half__title  { font-size: 24px; line-height: 28px; }
	.c-hero-half__body   { padding: var(--space-4); }
}