/* ==========================================================================
   News — /news/ list and /news/{slug}/ (spec §39–40). Simple; reading first.
   ========================================================================== */

.news-cats__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 36px;
}

.news-cats__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--color-line);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .08em;
}

.news-cats__list a[aria-current="page"] {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-white);
}

/* ---------- list ---------- */

.news-list {
  border-top: 1px solid var(--color-ink);
}

.news-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 20px;
  padding: 24px 44px 24px 0;
  border-bottom: 1px solid var(--color-line);
}

.news-item__date {
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.news-item__cat {
  justify-self: start;
  padding: 1px 12px;
  border: 1px solid var(--color-outline);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--color-ink);
}

.news-item__title {
  grid-column: 1 / -1;
  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .05em;
  color: var(--color-hero-ink);
}

.news-item > .arrow {
  position: absolute;
  top: 50%;
  right: 8px;
}

@media (min-width: 768px) {
  .news-item {
    grid-template-columns: 7.5em 8em minmax(0, 1fr);
    padding: 30px 56px 30px 0;
  }

  .news-item__title { grid-column: auto; }
}

.news-index .pagination {
  margin-top: 48px;
}

@media (hover: hover) and (pointer: fine) {
  .news-item:hover .news-item__title {
    text-decoration: underline 1px;
    text-underline-offset: .3em;
  }
}

/* ---------- single ---------- */

.news-article__head {
  padding: calc(var(--header-h) + var(--adminbar-h) + 24px) 0 clamp(32px, 4vw, 60px);
  border-bottom: 1px solid var(--color-line);
}

.news-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: clamp(28px, 4vw, 64px);
}

.news-article__meta .news-item__cat {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
}

.news-article__title {
  margin-top: 16px;
  font-size: clamp(26px, 2.6vw, 46px);
  line-height: 1.5;
  letter-spacing: .03em;
  color: var(--color-hero-ink);
}

.news-article__body {
  padding-block: clamp(40px, 5vw, 80px);
}

.news-pager {
  display: grid;
  gap: 18px;
  padding-top: 32px;
  padding-bottom: var(--space-section);
  border-top: 1px solid var(--color-line);
}

.news-pager__link {
  display: grid;
  gap: 4px;
}

.news-pager__label {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  color: var(--color-muted);
}

.news-pager__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.news-pager__index {
  justify-self: start;
  min-width: 220px;
}

@media (min-width: 768px) {
  .news-pager {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
  }

  .news-pager__cell--next { text-align: right; }

  .news-pager__index { justify-self: center; }
}

@media (hover: hover) and (pointer: fine) {
  .news-pager__link:hover .news-pager__title {
    text-decoration: underline 1px;
    text-underline-offset: .3em;
  }
}