/*
 * Карточки и список статей.
 * Сетка, flex-компоновка и адаптивные состояния задаются классами Bootstrap.
 */

.article-layout {
  padding: 44px 32px 0;
  grid-template-columns: 1fr 300px;
  gap: 56px;
}

.article-list-heading {
  gap: 16px;
  margin-bottom: 20px;
}

.article-list-heading__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--type-section-title);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: var(--line-heading);
}

.article-list-heading__link {
  gap: 6px;
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 600;
}

.article-list-heading__link:hover,
.article-list-heading__link:focus {
  color: var(--accent-ink);
}

.rubric-filter {
  gap: 9px;
  margin-bottom: 8px;
}

.rubric-filter__item {
  --bs-btn-color: var(--ink-2);
  --bs-btn-bg: var(--surface-2);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--ink-2);
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--ink-2);
  --bs-btn-active-bg: var(--surface-2);
  --bs-btn-active-border-color: transparent;
  padding: 6px 13px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
}

.rubric-filter__item.active {
  --bs-btn-color: var(--inverse-text);
  --bs-btn-bg: var(--inverse-bg);
  --bs-btn-hover-color: var(--inverse-text);
  --bs-btn-hover-bg: var(--inverse-bg);
  --bs-btn-active-color: var(--inverse-text);
  --bs-btn-active-bg: var(--inverse-bg);
}

.article-card {
  grid-template-columns: 1fr 224px;
  gap: 26px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
}

.article-card:hover,
.article-card:focus {
  color: var(--ink);
}

.article-card__topline {
  gap: 10px;
  margin-bottom: 11px;
}

.article-card__rubric {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.article-card__reading-time {
  color: var(--ink-3);
  font-size: 13px;
}

.article-card__title {
  margin: 0 0 9px;
  font-family: var(--font-head);
  font-size: var(--type-subheading);
  font-weight: 600;
  line-height: var(--line-heading);
  letter-spacing: -0.012em;
  color: var(--ink);
}

.article-card__summary {
  max-width: 60ch;
  margin: 0 0 15px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.3;
}

.article-card__details {
  gap: 13px;
}

.article-card__author {
  gap: 8px;
  color: var(--ink-2);
  font-size: 13.5px;
}

.article-card__author-name {
  color: var(--ink);
  font-weight: 600;
}

.article-card__date {
  color: var(--ink-3);
  font-size: 13.5px;
}

.article-card__stat {
  gap: 5px;
  color: var(--ink-3);
  font-size: 13px;
}

.article-card__thumb {
  --media-hue: 264;
  width: 224px;
  height: 150px;
  border-radius: var(--media-radius);
}

.article-card__thumb.media-placeholder {
  background-color: hsl(var(--media-hue) 16% 82%);
  background-image:
    radial-gradient(
      120% 90% at 78% 18%,
      hsl(var(--media-hue) 30% 88% / 0.9),
      transparent 55%
    ),
    linear-gradient(
      135deg,
      hsl(var(--media-hue) 14% 90%),
      hsl(var(--media-hue) 16% 82%)
    );
}

.media-hue-32 {
  --media-hue: 32;
  background-color: hsl(32 16% 82%);
  background-image:
    radial-gradient(120% 90% at 78% 18%, hsl(32 30% 88% / 0.9), transparent 55%),
    linear-gradient(135deg, hsl(32 14% 90%), hsl(32 16% 82%));
}

.media-hue-118 {
  --media-hue: 118;
  background-color: hsl(118 16% 82%);
  background-image:
    radial-gradient(120% 90% at 78% 18%, hsl(118 30% 88% / 0.9), transparent 55%),
    linear-gradient(135deg, hsl(118 14% 90%), hsl(118 16% 82%));
}

.media-hue-186 {
  --media-hue: 186;
  background-color: hsl(186 16% 82%);
  background-image:
    radial-gradient(120% 90% at 78% 18%, hsl(186 30% 88% / 0.9), transparent 55%),
    linear-gradient(135deg, hsl(186 14% 90%), hsl(186 16% 82%));
}

.media-hue-264 {
  --media-hue: 264;
  background-color: hsl(264 16% 82%);
  background-image:
    radial-gradient(120% 90% at 78% 18%, hsl(264 30% 88% / 0.9), transparent 55%),
    linear-gradient(135deg, hsl(264 14% 90%), hsl(264 16% 82%));
}

.media-hue-328 {
  --media-hue: 328;
  background-color: hsl(328 16% 82%);
  background-image:
    radial-gradient(120% 90% at 78% 18%, hsl(328 30% 88% / 0.9), transparent 55%),
    linear-gradient(135deg, hsl(328 14% 90%), hsl(328 16% 82%));
}

.article-card__ratio {
  top: 8px;
  left: 8px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.7);
  color: hsl(var(--media-hue) 30% 40%);
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.article-card__demo {
  bottom: 8px;
  left: 8px;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: rgba(23, 22, 26, 0.62);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

@media (max-width: 960px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 680px) {
  .article-card {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .article-card__thumb {
    width: 100%;
    height: 200px;
    order: -1;
  }
}