/* News (Figma v2 220:480 / 223:1006 / 223:1190) and the tabs/pagination it uses. */

.news.panel--first {
  padding-top: calc(var(--header-h) + var(--space-64));
}

.news__content {
  grid-column: 3 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-128);
}

.news__more {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

/* Top 5 (Figma v1 02 Most read 203:2043, row News/Ranked row 202:718):
   red chapter after the lead; rows split by a white line at 32%. */
.news-top5 {
  --top5-line: var(--stroke-hairline) solid rgb(255 255 255 / 0.32);
}

.news-top5__content {
  grid-column: 3 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.news-top5__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--top5-line);
}

.news-top5__row {
  display: grid;
  /* The number takes two of the content's ten columns */
  grid-template-columns: calc((100% - 9 * var(--layout-gutter)) / 5 + var(--layout-gutter)) minmax(0, 1fr);
  column-gap: var(--layout-gutter);
  align-items: center;
  padding-block: var(--space-24);
  border-top: var(--top5-line);
  color: var(--text-primary);
}

.news-top5__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

.news-top5__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-decoration: underline transparent;
  text-underline-offset: 0.12em;
  transition: text-decoration-color 0.2s var(--motion-easing-standard);
}

.news-top5__row:hover .news-top5__title,
.news-top5__row:focus-visible .news-top5__title {
  text-decoration-color: currentColor;
}

/* Section header (336:1951): hairline on top, heading, optional topics */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-48);
  padding-top: var(--space-48);
  border-top: var(--stroke-hairline) solid var(--border-default);
}

.news__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-64) var(--layout-gutter);
}

/* Plain vertical card (News grid): no mat, image 1.6, text under it */
.card-news--plain .card-news__link {
  padding: 0;
  background: none;
  color: var(--text-primary);
}

.card-news--plain .card-news__image {
  aspect-ratio: 1.6;
}

.card-news--plain .card-news__date,
.card-news--plain .card-news__excerpt {
  color: var(--text-secondary);
}

/* Tabs (Filter/Tab 202:715) and page links */
.pagination__pages {
  padding-block: var(--space-24); /* Figma: page links row is 100 tall */
}

.tabs,
.pagination__pages {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-32);
}

.tab {
  padding: var(--space-8) 0;
  border-bottom: var(--stroke-focus) solid transparent;
  color: var(--text-primary);
  transition: border-color 0.2s var(--motion-easing-standard);
}

.tab[aria-current="page"],
.tab:hover {
  border-bottom-color: var(--text-primary);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

.pagination .button[hidden] {
  display: none;
}

@media (max-width: 1199px) {
  .news.panel--first {
    padding-top: calc(var(--header-h) + var(--space-48));
  }

  /* Tablet and phone: no side title on Top 5 and the stories after it (223:511) */
  .news-top5 .rail,
  .news--more .rail {
    display: none;
  }

  .news-top5__content {
    grid-column: 1 / -1;
  }

  .news-top5__row {
    grid-template-columns: 30% minmax(0, 1fr); /* Figma: 193 of 640 */
  }

  .news .grid {
    row-gap: var(--space-48);
  }

  .news__content {
    grid-column: 1 / -1;
    gap: var(--space-48);
  }

  .news__more {
    gap: var(--space-48);
  }

  .news__grid {
    gap: var(--space-48) var(--space-16);
  }

  /* The lead becomes a plain vertical card */
  .card-news--lead .card-news__image {
    aspect-ratio: 1.6;
  }

  .card-news--lead .card-news__text {
    gap: var(--space-16);
  }

  .card-news--lead .card-news__date {
    font-size: var(--font-size-body-m);
    font-weight: 400;
    line-height: 1.6;
  }

  .card-news--lead .card-news__excerpt {
    color: var(--text-secondary);
  }

  .card-news--lead .card-news__more {
    display: none;
  }

  /* Same line reserve as the vertical card: three title lines, two excerpt lines */
  .card-news--lead .card-news__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    min-height: calc(3 * 1.1em);
  }

  .card-news--lead .card-news__excerpt {
    min-height: calc(2 * 1.6em);
  }

  .card-news--lead .card-news__bottom {
    gap: 0;
  }
}

@media (max-width: 767px) {
  .news.panel--first {
    padding-top: calc(var(--header-h) + var(--space-32));
  }

  /* Phone (223:777): the number above the title */
  .news-top5__content {
    gap: var(--space-32);
  }

  .news-top5__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-8);
  }

  .news .grid {
    row-gap: var(--space-32);
  }

  .news__content {
    gap: var(--space-32);
  }

  .news__more {
    gap: var(--space-32);
  }

  .section-header {
    padding-top: var(--space-32);
  }

  .news__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pagination {
    flex-direction: column;
    align-items: flex-start;
  }
}