/* ═══════════════════════════════════════════════════════════════════════════
   Card
   Варіанти: базова · з шапкою (card__media) і футером (card__footer) ·
             клікабельна (card--clickable) · горизонтальна (card--horizontal) ·
             розріджена (card--spacious)
   Елементи: card__media · card__eyebrow · card__content · card__header ·
             card__title · card__subtitle · card__kicker · card__body ·
             card__metric · card__meta-list · card__footer · card__link
   Утиліта розкладки: card-grid
   JS: відсутній
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base block ─────────────────────────────────────────────────────────── */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--uris-color-semantic-surface);
  border: 1px solid var(--uris-color-semantic-border);
  border-radius: var(--uris-radius-lg);
  font-family: var(--uris-font-family-body);
  color: var(--uris-color-semantic-text);
  -webkit-font-smoothing: antialiased;
}

/* Контентна зона: усе, крім media, з внутрішнім відступом */
.card__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
  padding: var(--uris-spacing-6);
}

/* вертикальний ритм контентної зони */
.card__content > * + * {
  margin-block-start: var(--uris-spacing-4);
}

.card__content > .card__subtitle {
  margin-block-start: var(--uris-spacing-1);
}

/* kicker тримається близько до заголовка під ним */
.card__kicker + .card__header {
  margin-block-start: var(--uris-spacing-2);
}

/* елемент перед футером притискає футер до низу картки
   (рівні висоти в гріді); мінімальний відступ дає сам футер */
.card__content > :has(+ .card__footer) {
  margin-block-end: auto;
}

/* ── Spacious: більший ритм для повноширинних карток ────────────────────── */
.card--spacious .card__content > * + * {
  margin-block-start: var(--uris-spacing-6);
}

.card--spacious .card__content > .card__subtitle {
  margin-block-start: var(--uris-spacing-1);
}

.card--spacious .card__kicker + .card__header {
  margin-block-start: var(--uris-spacing-2);
}

/* ── Media (обкладинка) ─────────────────────────────────────────────────── */
.card__media {
  position: relative;
  overflow: hidden;
  /* стабільна висота обкладинки незалежно від пропорцій вмісту */
  aspect-ratio: var(--uris-component-card-media-ratio);
  /* compensate 1px card border so corners align */
  border-start-start-radius: calc(var(--uris-radius-lg) - 1px);
  border-start-end-radius: calc(var(--uris-radius-lg) - 1px);
  border-block-end: 1px solid var(--uris-color-semantic-border);
}

.card__media > img,
.card__media > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Horizontal: media ліворуч, контент праворуч ────────────────────────── */
.card--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  /* контейнер для query нижче: розкладка залежить від ширини КАРТКИ,
     а не viewport (картка може стояти у вузькому сайдбарі) */
  container-type: inline-size;
}

.card--horizontal .card__media {
  /* частка ширини картки; пропорція не зі шкали розмірів — локальна змінна
     для перевизначення споживачем */
  --card-media-width: 45%;
  flex: 0 0 var(--card-media-width);
  aspect-ratio: auto;
  border-block-end: none;
  border-inline-end: 1px solid var(--uris-color-semantic-border);
  border-start-start-radius: calc(var(--uris-radius-lg) - 1px);
  border-start-end-radius: 0;
  border-end-start-radius: calc(var(--uris-radius-lg) - 1px);
}

/* basis 0 (не auto): інтринсична ширина тексту не виштовхує контент
   на новий рядок при flex-wrap — перенос керується лише query нижче */
.card--horizontal .card__content {
  flex: 1 1 0;
}

/* вузька картка: контентній колонці лишається < grid-min (280px) читабельної
   ширини → медіа стає обкладинкою зверху, контент під нею.
   559px ≈ 2 × component.card.grid-min (літерал — var() у @container недоступний) */
@container (max-width: 559px) {
  .card--horizontal .card__media {
    flex-basis: 100%;
    aspect-ratio: var(--uris-component-card-media-ratio);
    border-inline-end: none;
    border-block-end: 1px solid var(--uris-color-semantic-border);
    border-start-start-radius: calc(var(--uris-radius-lg) - 1px);
    border-start-end-radius: calc(var(--uris-radius-lg) - 1px);
    border-end-start-radius: 0;
  }

  .card--horizontal .card__content {
    flex-basis: 100%;
  }
}

/* ── Eyebrow chip ───────────────────────────────────────────────────────── */
.card__eyebrow {
  position: absolute;
  inset-block-start: var(--uris-spacing-4);
  inset-inline-start: var(--uris-spacing-4);
  padding: var(--uris-spacing-1) var(--uris-spacing-2);
  background-color: var(--uris-color-semantic-surface);
  border: 1px solid var(--uris-color-semantic-border);
  border-radius: var(--uris-radius-sm);
  font-size: var(--uris-text-xs-size);
  line-height: var(--uris-text-xs-line);
  letter-spacing: var(--uris-font-letter-spacing-caps);
  text-transform: uppercase;
  color: var(--uris-color-semantic-secondary);
}

/* eyebrow у потоці контенту (картка без media) */
.card__content > .card__eyebrow {
  position: static;
  align-self: flex-start;
}

/* ── Kicker: джерело/категорія з крапкою-індикатором над заголовком ─────── */
.card__kicker {
  --kicker-dot: var(--uris-color-semantic-text-muted);
  display: flex;
  align-items: center;
  gap: var(--uris-spacing-2);
  margin: 0;
  font-size: var(--uris-text-sm-size);
  line-height: var(--uris-text-sm-line);
  color: var(--uris-color-semantic-secondary);
}

.card__kicker::before {
  content: "";
  flex-shrink: 0;
  width: var(--uris-spacing-2);
  height: var(--uris-spacing-2);
  border-radius: var(--uris-radius-full);
  background-color: var(--kicker-dot);
}

.card__kicker--success { --kicker-dot: var(--uris-color-semantic-success); }
.card__kicker--warning { --kicker-dot: var(--uris-color-semantic-warning); }
.card__kicker--danger  { --kicker-dot: var(--uris-color-semantic-danger); }

/* ── Header: заголовок (+бейдж у правому верхньому куті) ────────────────── */
.card__header {
  display: grid;
  /* бейдж ніколи не переноситься вниз — стискається заголовок */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--uris-spacing-3);
}

.card__title {
  margin: 0;
  min-width: 0;
  font-family: var(--uris-font-family-heading);
  font-size: var(--uris-text-xl-size);
  line-height: var(--uris-text-xl-line);
  font-weight: var(--uris-font-weight-bold);
  color: var(--uris-color-semantic-text);
}

/* бейдж тримається лінії першого рядка заголовка */
.card__header .badge {
  margin-block-start: var(--uris-spacing-1);
}

.card__subtitle {
  margin: 0;
  font-size: var(--uris-text-base-size);
  line-height: var(--uris-text-base-line);
  color: var(--uris-color-semantic-secondary);
}

/* ── Body ───────────────────────────────────────────────────────────────── */
.card__body {
  font-size: var(--uris-text-base-size);
  line-height: var(--uris-text-base-line);
  color: var(--uris-color-semantic-secondary);
}

.card__body > :first-child { margin-block-start: 0; }
.card__body > :last-child  { margin-block-end: 0; }
.card__body p { margin-block: 0 var(--uris-spacing-3); }

/* ── Metric: великий показник ───────────────────────────────────────────── */
.card__metric {
  margin: 0;
  font-family: var(--uris-font-family-heading);
  font-size: var(--uris-text-4xl-size);
  line-height: var(--uris-text-4xl-line);
  font-weight: var(--uris-font-weight-medium);
  color: var(--uris-color-semantic-text-muted);
}

/* ── Meta list: пари «мітка → значення» (dl) ────────────────────────────── */
.card__meta-list {
  display: flex;
  flex-direction: column;
  gap: var(--uris-spacing-3);
  margin: 0;
}

/* горизонтальні колонки (детальна картка з датами);
   auto-fit: колонки не стискаються нижче spacing-24 (≈ ширина дати) —
   на вузькій ширині пари перетікають у наступний ряд замість накладання */
.card__meta-list--row {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--uris-spacing-24), 100%), 1fr)
  );
  gap: var(--uris-spacing-4) var(--uris-spacing-6);
}

.card__meta-list dt {
  margin-block-end: var(--uris-spacing-1);
  font-size: var(--uris-text-sm-size);
  line-height: var(--uris-text-sm-line);
  color: var(--uris-color-semantic-text-muted);
}

.card__meta-list dd {
  margin: 0;
  font-size: var(--uris-text-base-size);
  line-height: var(--uris-text-base-line);
  font-weight: var(--uris-font-weight-medium);
  color: var(--uris-color-semantic-text);
}

/* ── Footer: мета-рядок, відділений рамкою ──────────────────────────────── */
.card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--uris-spacing-3);
  padding-block-start: var(--uris-spacing-4);
  border-block-start: 1px solid var(--uris-color-semantic-border);
  font-size: var(--uris-text-sm-size);
  line-height: var(--uris-text-sm-line);
  color: var(--uris-color-semantic-text-muted);
}

/* ── Clickable: одне посилання покриває всю картку ──────────────────────── */
.card--clickable {
  transition:
    box-shadow var(--uris-duration-fast) var(--uris-ease-default),
    border-color var(--uris-duration-fast) var(--uris-ease-default);
}

.card__link {
  color: inherit;
  text-decoration: none;
}

/* розтягнуте посилання: псевдоелемент покриває картку цілком */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--uris-radius-lg);
}

.card--clickable:hover {
  box-shadow: var(--uris-shadow-md);
  border-color: var(--uris-color-semantic-surface-active);
}

/* натиснута: тінь осідає */
.card--clickable:active {
  box-shadow: var(--uris-shadow-sm);
}

.card__link:focus-visible {
  outline: none;
}

.card__link:focus-visible::after {
  outline: 2px solid var(--uris-color-semantic-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .card--clickable { transition: none; }
}

/* ── Card grid: консистентна сітка карток ───────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(var(--uris-component-card-grid-min), 100%), 1fr)
  );
  gap: var(--uris-spacing-4);
  align-items: stretch;
}