/* News card — Figma library set «Article Card» `4154:17453`:
   `3009:2012` 427×438 at 1440 (and the 768 frames use the same variant,
   `4190:19021`), `4214:13322` 553×545.213 at 1920, `4436:33230` 358×368.431
   at 390, plus the two-column home variant `4154:17454` 266×304
   (`--compact`). Hover: `4348:19866` / `4351:19690`.

   The press card of the person page is a DIFFERENT set that happens to carry
   the same name («Article Card» `4379:24141`: H3 header, a teal corner mark,
   a photo footer cut by a diagonal, «Дізнатись більше»). It shares no box,
   no ratio and no type step with this card, and it needs two vector assets
   this repository does not have yet, so it is not in this file — the spec and
   the node ids are in task-1-report.md for the person page (task 4).

   Measured from the variants, all four:

   | | 390 (358) | 390 compact (266) | 768/1440 (427) | 1920 (553) |
   |---|---|---|---|---|
   | image | 358×236.431 | 266×176 | 427×282 | 553×365.213 |
   | image → text | 16 | 16 | 20 | 32 |
   | text block gap | 24 | 20 | 24 | 24 |
   | meta gap | 16 | 16 | 20 | 20 |
   | category | 14/18 | 14/18 | 16/22 | 20/24 |
   | title | 16/20 | 16/20 | 20/24 | 24/28 |

   Every ratio image/box is 427/282 (266/176 differs by 0.3 px, inside the
   1 px tolerance), so one `aspect-ratio` covers all four. The type steps are
   tokens.css's own modes for «S/S text (regular)» and «Menu,button». */

.c-article-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
}

/* «Image» — the card's only fixed dimension, as a ratio. `overflow: hidden`
   is the hover's clip box (see below), and it is in the resting state because
   the .fig's own frame clips there too. */
.c-article-card__media {
	position: relative;
	aspect-ratio: 427 / 282;
	overflow: hidden;
	background: var(--color-neutral-200);
}

.c-article-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;

	/* Hover — animations.md, row «Картка новини». The row said «no visible
	   change between the variants», which is true of every layer EXCEPT the
	   photo: Default fills the box (`scaleMode: FILL`), the hover variant
	   crops it (`scaleMode: STRETCH`) with
	   `imageTransform [[0.8412619, 0, 0.0789473], [0, 0.8325141, 0.0700353]]`
	   — a 0.8413 × 0.8325 window of the same image, i.e. the photograph
	   scales by 1/0.8413 = 1.1887 about the point that window is centred on.
	   SMART_ANIMATE between the two is therefore a zoom, 600 ms ease-out.
	   The literal curve, not the `ease-out` keyword, so `getTiming().easing`
	   reads back the string tests/e2e/helpers/motion-sample.js compares
	   against. Recorded in designer-questions.md, because the row also says
	   «уточнити в дизайнера». */
	transition: transform 600ms cubic-bezier(0, 0, 0.58, 1);

	/* The crop window's centre, mapped back into the box the FILL image
	   covers: x 0.0789 + 0.8413/2 = 0.4996, y (0.4863 − 0.0053)/0.9894. */
	transform-origin: 49.96% 48.61%;
}

/* ≥768 only. The set has no mob=on Hover variant — the note above already
   said «на 390 ховера немає й у коді», but only `(hover: hover)` enforced it,
   and that is a statement about the POINTER, not about the width: a 390-wide
   window on a desktop hovers. Audited while chasing ПР-17; the gate now says
   what the comment says. `tests/e2e/components.spec.js` has skipped
   `mobile-390` for this hover from the start, for the same reason. */
@media (min-width: 768px) {

	.c-article-card:focus-within .c-article-card__image {
		transform: scale(1.1887);
	}
}

/* :hover only where a pointer can hover — on touch a tap would leave the
   photo stuck zoomed (the same guard actor-card.css and view-all.css use). */
@media (min-width: 768px) and (hover: hover) {

	.c-article-card:hover .c-article-card__image {
		transform: scale(1.1887);
	}
}

.c-article-card__body {
	display: flex;
	flex-direction: column;

	/* «Container» 4436:33232 / 3009:2064 itemSpacing: meta group → date row. */
	gap: 24px;
}

.c-article-card__meta {
	display: flex;
	flex-direction: column;

	/* 4436:33233 (390) / 3009:2065 (1440) itemSpacing: category → title. */
	gap: 16px;
}

/* «Section title» 3009:2066 — «S/S text (regular)». It is the news category,
   not a heading: the card's heading is the title below it. */
.c-article-card__category {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-weight: 400;
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
}

/* «Description» 3009:2067 — «Menu,button», 600, uppercase. */
.c-article-card__title {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-menu-button);
	font-weight: 600;
	line-height: var(--lh-menu-button);
	letter-spacing: var(--ls-menu-button);
	text-transform: uppercase;

	/* A long Ukrainian word at 150 % text scale must wrap, not widen the page
	   (WCAG 1.4.4/1.4.10; the same guard repertoire.css, afisha.css and visit.css
	   use). At 100 % nothing breaks, so the Figma measurement is untouched. */
	overflow-wrap: anywhere;
}

.c-article-card__title a {
	color: inherit;
	text-decoration: none;
}

/* One link for the whole card: the .fig's hover belongs to the CARD
   (`3009:2012` → `4348:19866`), not to the «читати» link inside it, so the
   whole card has to be clickable — and a second link to the same article
   would only add a tab stop. The «читати» row below is therefore the
   design's own affordance, drawn but not focusable, and `aria-hidden`. */
.c-article-card__title a::after {
	position: absolute;
	content: "";
	inset: 0;
}

/* «Container» 3009:2068 — a space-between row, cross-axis centre. */
.c-article-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;

	/* 3009:2068 has no itemSpacing of its own (space-between); this is the
	   floor for the narrowest card so the date and the link never touch. */
	gap: 16px;
}

/* «Date» 3009:2069 — «S/S text (regular)». */
.c-article-card__date {
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-weight: 400;
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
}

/* The card's own «Детальніше» («читати» here, 3009:2071's text): the box and
   the type come from details-link.css, the hover state is the card's, because
   the .fig hovers the card. #0C9586 is 3.7:1 on white and fails AA for text,
   so --color-primary-700 (5.5:1) — the substitution event-card.css, the
   header and performance-sections.css all make (designer-questions.md). */
@media (min-width: 768px) {

	.c-article-card:focus-within .c-details-link {
		gap: 12px;
		color: var(--color-primary-700);
	}
}

@media (min-width: 768px) and (hover: hover) {

	.c-article-card:hover .c-details-link {
		gap: 12px;
		color: var(--color-primary-700);
	}
}

/* The two-column home variant `4154:17454`: the same card at 266, whose only
   difference is the text block's own gap (20 instead of 24). */
.c-article-card--compact .c-article-card__body {
	gap: 20px;
}

/* ================================================================== 768+ */

@media (min-width: 768px) {

	/* `4190:19021` in the 768 frame is the 1440 variant `3009:2012`
	   unchanged, so its gaps start here. */
	.c-article-card {
		gap: 20px;
	}

	.c-article-card__meta {
		gap: 20px;
	}
}

/* ================================================================= 1920+ */

@media (min-width: 1920px) {

	/* `4214:13322` itemSpacing 32. */
	.c-article-card {
		gap: 32px;
	}
}