/* ============================================================================
 * article-cards.css — canon-shell тизерів статей (трек E Гр.2, 2026-07-15).
 *
 * ОДИН shell для 3 тизерів (як nav-tiles.css для нав-плиток, buttons.css для
 * кнопок). Unbound BEM — без прив'язки до сторінки. ТІЛЬКИ токени --mtsp-*.
 *
 *   .teaser            — вертикальна медіа-картка (фото-16:9 зверху → тіло)
 *   .teaser__media     — фото-бокс 16:9 (object-fit cover)
 *   .teaser__body      — тіло (padding, flex-колонка)
 *   .teaser__meta      — рядок мети (дата [+ тег])
 *   .teaser__tag       — рубрика (опційно — є лише в article-card)
 *   .teaser__date      — дата
 *   .teaser__title     — h3-назва (navy, hover→accent)
 *   .teaser__excerpt   — уривок (line-clamp 3, опційно)
 *   .teaser__cta       — «Читати далі →» (опційно — є лише в article-card)
 *
 * Опційність слотів — через НАЯВНІСТЬ розмітки (шаблон рендерить або ні),
 * не через модифікатори. Картка = <a> (article-card/rel-card) АБО <article>
 * з внутрішніми лінками (c5) — .teaser стилізує обидві структури.
 *
 * Enqueue: mtsp-article-cards (functions.php), глобально, поряд із nav-tiles.
 * ========================================================================== */

/* ---- Ядро ---------------------------------------------------------------- */
.teaser {
  display: flex;
  flex-direction: column;
  background: var(--mtsp-white);
  border: 1px solid var(--mtsp-gray-200);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.teaser:hover {
  border-color: var(--mtsp-accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(15, 36, 64, .14);
}
/* a11y focus-ring (нове — не було в жодному тизері). Картка-лінк (article-card/
   rel-card) фокусується сама; c5 фокусує внутрішні лінки — покрито обома. */
.teaser:focus-visible,
.teaser a:focus-visible {
  outline: 2px solid var(--mtsp-accent);
  outline-offset: 2px;
}

/* ---- Фото-бокс (зверху, 16:9) ------------------------------------------- */
.teaser__media {
  aspect-ratio: 16 / 9;
  background: var(--mtsp-gray-50);
  border-bottom: 1px solid var(--mtsp-gray-100);
  overflow: hidden;
  display: block;
}
.teaser__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Тіло --------------------------------------------------------------- */
.teaser__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ---- Мета (дата + опційний тег) ----------------------------------------- */
.teaser__meta {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-family: var(--mtsp-font-mono);
  font-size: 11px;
  color: var(--mtsp-gray-400);
  margin-bottom: 8px;
}
.teaser__tag {
  color: var(--mtsp-accent);
  font-weight: 600;
}

/* ---- Назва -------------------------------------------------------------- */
.teaser__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mtsp-navy);
  line-height: 1.4;
  margin: 0 0 8px;
  transition: color .2s;
}
.teaser:hover .teaser__title {
  color: var(--mtsp-accent);
}
/* коли назва — власний лінк (c5): успадкувати колір h3, без підкреслення. */
.teaser__title a {
  color: inherit;
  text-decoration: none;
}

/* ---- Уривок (опційно, clamp 3) ------------------------------------------ */
.teaser__excerpt {
  font-size: 13.5px;
  color: var(--mtsp-gray-600);
  line-height: 1.6;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- CTA (опційно, притиснутий донизу) ---------------------------------- */
.teaser__cta {
  margin-top: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--mtsp-accent);
}