/*
  Component: horizontal article card.
  Figma: "horizontal article left align small" (62:1869) — 429×182.

  Image-left, text-right. Stacks the text vertically (meta + title).
  Image is fixed width on desktop and shrinks proportionally on mobile.
*/

.c-card-horizontal {
	display: flex;
	gap: 14px;
	align-items: center;
	color: var(--c-fg);
	text-decoration: none;
	width: 100%;
	min-width: 0;  /* prevent overflow inside grid/flex cells */
}

.c-card-horizontal:hover .c-card-horizontal__title,
.c-card-horizontal:focus-visible .c-card-horizontal__title {
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.c-card-horizontal__media {
	flex-shrink: 0;
	width: 197px;
	aspect-ratio: 197 / 182;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--c-bg-elev);
	margin: 0;
}

.c-card-horizontal--compact .c-card-horizontal__media {
	width: 120px;
	aspect-ratio: 1 / 1;
}

/* Sidebar quick card — Figma 40:1873 "quick article left align small". */
.c-card-horizontal--sidebar {
	gap: 10px;
	align-items: center;
}
.c-card-horizontal--sidebar .c-card-horizontal__media {
	width: 84px;
	height: 84px;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-sm);
}
.c-card-horizontal--sidebar .c-card-horizontal__body {
	gap: 6px;
}
.c-card-horizontal--sidebar .c-card-horizontal__title {
	font-size: var(--fs-label-12);
	line-height: var(--lh-label-12);
	font-weight: var(--fw-regular);
	-webkit-line-clamp: 4;
}
.c-card-horizontal--sidebar .c-card-horizontal__meta {
	font-size: var(--fs-link-14);
	line-height: var(--lh-link-14);
	font-weight: var(--fw-semibold);
	color: var(--c-accent);
}

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

.c-card-horizontal__img--placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--c-grey-light), var(--c-grey-medium));
}

.c-card-horizontal__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;          /* allow text to shrink inside flex */
	flex: 1;
}

.c-card-horizontal__meta {
	font-size: var(--fs-label-12);
	line-height: var(--lh-label-12);
	font-weight: var(--fw-regular);
	color: var(--c-fg);
}

.c-card-horizontal__title {
	margin: 0;
	font-size: var(--fs-newstitle);
	line-height: var(--lh-newstitle);
	font-weight: var(--fw-semibold);
	color: var(--c-fg);

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

/* On narrow screens cards stack the image full-width above the text. */
@media (max-width: 480px) {
	.c-card-horizontal:not(.c-card-horizontal--sidebar) {
		flex-direction: column;
		gap: var(--space-2);
		align-items: stretch;
	}
	.c-card-horizontal:not(.c-card-horizontal--sidebar) .c-card-horizontal__media {
		width: 100%;
		aspect-ratio: 16 / 9;
	}
}

/* Stacked list helper: 3 horizontal cards in a column with thin dividers,
   used in the home rows next to the hero. */
.c-card-stack {
	display: flex;
	flex-direction: column;
	gap: 21px;
}
.c-card-stack > .c-card-horizontal + .c-card-horizontal {
	border-top: 1px solid var(--c-border);
	padding-top: 21px;
}