/* Карточка статьи: обложка с чипом рубрики, заголовок, лид и кнопка,
   прижатая к низу карточки. */

.article-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: 0 8px 24px -4px rgba(156, 141, 128, 0.1);
}

.article-card__cover {
  position: relative;
  flex: none;
  height: 200px;
  background-image: var(--media-image);
  background-position: center;
  background-size: cover;
}

.article-card__chip {
  position: absolute;
  top: var(--space-4);
  inset-inline-start: var(--space-4);
}

.article-card__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  flex: 1 1 auto;
  padding: var(--space-6);
}

.article-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.article-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--neutral-900);
}

/* Заголовок — ссылка на статью, цвет берётся у заголовка, а не у ссылки. */
.article-card__title a { color: inherit; }

.article-card__title a:hover { color: var(--text-link); }

.article-card__lead {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
  font-size: var(--fs-note);
  line-height: 22px;
  color: var(--neutral-600);
}

.article-card__action { align-self: flex-start; }

/* Карточка во всю ширину ряда: обложка слева, текст справа. */
@media (min-width: 768px) {
  .article-card--wide {
    flex-direction: row;
    grid-column: 1 / -1;
  }

  .article-card--wide .article-card__cover {
    flex: 0 0 340px;
    height: auto;
  }

  .article-card--wide .article-card__body { flex: 1 1 auto; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .article-card--wide { height: 235px; }
}

@media (min-width: 1024px) {
  .article-card--wide {
    flex-direction: column;
    grid-column: auto;
  }

  .article-card--wide .article-card__cover {
    flex: none;
    height: 180px;
  }
}

@media (min-width: 1024px) {
  .article-card__cover { height: 180px; }
}