/*
  Component: vertical article card.

  Two variants:
    .c-card-vertical                     - "vertical article small"
                                           Image on top, meta + title below.
                                           Figma: 62:1873 (307×326 / 307×350 / 307×306).

    .c-card-vertical--overlay            - "vertical article small - inside text"
                                           Image fills the card, gradient overlay,
                                           white title pinned to bottom.
                                           Figma: 281:5456 (307×248).

  Sizes (apply on the wrapper):
    .c-card-vertical                     standard, image 248px tall
    .c-card-vertical--tall   (350)       image grows to fit
    .c-card-vertical--short  (306)       image shrinks
*/

.c-card-vertical {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);                   /* 8px between image and text block */
	color: var(--c-fg);
	text-decoration: none;
	background: transparent;
}

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

/* Image area */
.c-card-vertical__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md);
	aspect-ratio: 307 / 248;               /* default Figma ratio */
	background: var(--c-bg-elev);          /* shows while image loads */
	flex-shrink: 0;
}

.c-card-vertical--tall   .c-card-vertical__media { aspect-ratio: 307 / 350; }
.c-card-vertical--medium .c-card-vertical__media { aspect-ratio: 307 / 326; }
.c-card-vertical--short  .c-card-vertical__media { aspect-ratio: 307 / 306; }

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

.c-card-vertical__img--placeholder,
.c-card-vertical__media > .c-card-vertical__img--placeholder {
	width: 100%;
	height: 100%;
	min-height: 100%;
	display: block;
	background: linear-gradient(135deg, var(--c-grey-light), var(--c-grey-medium));
}

/* Text block (default variant) */
.c-card-vertical__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);                   /* 4px between meta and title */
	flex-shrink: 0;
}

.c-card-vertical:not(.c-card-vertical--overlay) .c-card-vertical__body {
	position: relative;
	z-index: 1;
	/* background: var(--c-bg); */
}

.c-card-vertical__meta {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: var(--lh-label-12);        /* keeps title aligned when date is missing */
	font-size: var(--fs-label-12);
	line-height: var(--lh-label-12);
	font-weight: var(--fw-regular);
	color: var(--c-fg);
}

.c-card-vertical__meta--empty {
	visibility: hidden;
}

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

	/* Clamp to 3 lines so card heights stay even across rows. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ------------------- Overlay variant ------------------- */
.c-card-vertical--overlay .c-card-vertical__media {
	aspect-ratio: 307 / 248;
}

.c-card-vertical--overlay .c-card-vertical__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: var(--space-4);
	z-index: 2;
	color: var(--c-light);
}

.c-card-vertical--overlay .c-card-vertical__title { color: var(--c-light); }
.c-card-vertical--overlay .c-card-vertical__meta  { color: var(--c-light); }

/* Gradient: transparent at 28.6% (matches Figma) → solid black at bottom. */
.c-card-vertical--overlay .c-card-vertical__media::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 73.4%;                          /* mirrors Figma 182/248 */
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.85) 80%,
		rgba(0, 0, 0, 1) 100%
	);
	pointer-events: none;
}

/* For the overlay variant the whole card is a positioning context */
.c-card-vertical--overlay {
	position: relative;
}

/* Optional: category pill above the title (used on some home rows in Figma) */
.c-card-vertical__cat {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: var(--radius-pill);
	background: var(--c-accent);
	color: var(--c-on-accent);
	font-size: var(--fs-heading-14);
	line-height: var(--lh-heading-14);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ls-normal);
	width: max-content;
}

/* ------------------- Responsive grid host ------------------- */
/* Cards on the home & category pages sit in a 4-up grid at desktop, 2-up at
   tablet, 1-up at mobile. Hosts use .c-card-grid; cards don't change. */
.c-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}
@media (min-width: 600px) {
	.c-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.c-card-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-4);
	}
}

/* Taller row gap used on category pages and multi-row home sections. */
.c-card-grid--gap-tall {
	row-gap: var(--space-10);  /* 40px */
}

/* Prevent flex children from overflowing narrow grid cells. */
.c-card-vertical {
	min-width: 0;
}

/* Don't stretch cards to the tallest row — keeps image + text block stacked. */
.c-card-grid > .c-card-vertical {
	align-self: start;
	height: auto;
}