/* ===========================================================================
   News: a simple page header, then one row per item. The article layout is
   shared with the journal and lives in blog.css, which this file imports the
   shared pieces of by repeating only what News needs.
   =========================================================================== */

.page-hero {
  padding: clamp(56px, 7vw, 100px) clamp(18px, 4vw, 72px);
  background:
    radial-gradient(120% 90% at 10% 0%, #e4f1dd 0%, rgba(228, 241, 221, 0) 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(199, 242, 77, 0.22) 0%, rgba(199, 242, 77, 0) 70%),
    linear-gradient(180deg, #eaf3e7 0%, #f6faf4 55%, #ffffff 100%);
}

.page-hero__inner {
  max-width: 820px;
  margin: 0 auto;
}

.empty {
  margin: 0;
  padding: 60px 0;
  text-align: center;
  font-size: 17px;
  color: var(--muted-soft);
}

.meta {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-bright);
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-item {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding: clamp(16px, 1.8vw, 22px);
  border: 1px solid rgba(12, 61, 32, 0.08);
  border-radius: 26px;
  background: #fff;
  color: inherit;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.news-item:hover {
  color: inherit;
  transform: translateY(-3px);
  border-color: rgba(12, 61, 32, 0.16);
  box-shadow: 0 30px 50px -36px rgba(12, 61, 32, 0.5);
}

.news-item__media {
  display: block;
  aspect-ratio: 16 / 10;
  padding: 14px;
  border-radius: 18px;
  overflow: hidden;
  background: #e4ece2;
}

/* Award photographs are tall portraits; `contain` keeps the whole trophy or
   plaque visible rather than cropping it to a slice of the landscape box. */
.news-item__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.8s var(--ease);
}

.news-item:hover .news-item__media img { transform: scale(1.04); }

.news-item__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: #143a26;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lime);
}

.news-item__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: clamp(0px, 2vw, 24px);
}

.news-item__title {
  margin-top: 12px;
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--page-ink);
  text-wrap: balance;
}

.news-item__excerpt {
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted-alt);
  text-wrap: pretty;
}

.news-item .link-more { margin-top: 18px; }

/* ---- Article (shared with the journal) ------------------------------------ */
.article-hero {
  padding: clamp(44px, 6vw, 84px) clamp(18px, 4vw, 72px) clamp(32px, 4vw, 56px);
  background:
    radial-gradient(120% 90% at 10% 0%, #e4f1dd 0%, rgba(228, 241, 221, 0) 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(199, 242, 77, 0.22) 0%, rgba(199, 242, 77, 0) 70%),
    linear-gradient(180deg, #eaf3e7 0%, #f6faf4 60%, var(--tint-mint) 100%);
}

.article-hero__inner { max-width: 820px; margin: 0 auto; }

.article-hero__meta {
  display: inline-flex;
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--tint-lime);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-bright);
}

.article-hero__title {
  margin: 20px 0 0;
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--green-deep);
  text-wrap: balance;
}

.article-hero__lede {
  margin: 22px 0 0;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  color: var(--muted-alt);
  text-wrap: pretty;
}

.article-body {
  padding: clamp(32px, 4.4vw, 64px) clamp(18px, 4vw, 72px) clamp(56px, 7vw, 100px);
  background: var(--tint-mint);
}

.article-body__column { max-width: 820px; margin: 0 auto; }

.article-figure {
  display: grid;
  place-items: center;
  margin: 0 0 clamp(28px, 3.4vw, 44px);
  padding: clamp(14px, 2vw, 24px);
  border: 1px solid rgba(12, 61, 32, 0.08);
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
}

/* `width: auto` stops a small image being blown up past its own resolution —
   the award photographs are only 458px wide and went soft when stretched to
   the full column. */
.article-figure img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  border-radius: 12px;
}

/* News covers the awards, whose photographs are tall portraits: without a cap
   a single trophy runs well past the height of the screen. Journal artwork is
   square or landscape and wants all the width it can get, so it is left out. */
.single-upr_news .article-figure img {
  max-height: min(68vh, 560px);
}

.prose h2 {
  margin: clamp(34px, 4vw, 48px) 0 18px;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--page-ink);
}

.prose ul {
  margin: 0 0 24px;
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 28px) clamp(40px, 4vw, 52px);
  border: 1px solid rgba(12, 61, 32, 0.08);
  border-radius: 20px;
  background: #fff;
}

.prose li {
  font-size: clamp(16px, 1.25vw, 17.5px);
  line-height: 1.55;
  color: var(--page-ink);
}

.prose li + li { margin-top: 12px; }

.prose li::marker { color: var(--green-bright); }

.article-back { margin-top: clamp(20px, 2.4vw, 32px); }

@media (max-width: 860px) {
  .news-item { grid-template-columns: minmax(0, 1fr); }
  .news-item__body { padding: 0 6px 8px; }
}