/* ============================================================
   NEWS — listing grid and article prose pages
   ============================================================ */

.news-hero { padding: clamp(56px, 9vh, 104px) 0 clamp(36px, 6vh, 64px); }

.news-hero .hero__h1 { margin-bottom: 0; }

.news-hero .hero__sub { margin: 18px 0 0; }

.news-body { padding: clamp(48px, 7vh, 88px) 0 clamp(64px, 9vh, 110px); }

/* ---- LinkedIn feed ---- */

.news-linkedin { padding: 0 0 clamp(64px, 9vh, 110px); }

.news-linkedin .h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  margin-bottom: clamp(28px, 4vh, 44px);
}

/* the Elfsight widget is configured at a fixed 1280px — keep it inside
   the wrap's content box, same width as the news card grid */
.news-linkedin [class*="elfsight-app"] { max-width: 100%; overflow: hidden; }

/* ---- listing filters ---- */

.news-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px 20px;
  max-width: 1160px;
  margin: 0 auto 32px;
}

.news-filter { display: flex; flex-direction: column; gap: 8px; }

.news-filter__label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.news-filter__select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 220px;
  padding: 11px 42px 11px 16px;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%2362678F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center;
  border: 1px solid var(--card-line);
  border-radius: 12px;
  font-family: "Sora", sans-serif;
  font-size: 14px;
  color: var(--fg);
  cursor: pointer;
  transition: border-color .25s ease;
}

.news-filter__select:hover,
.news-filter__select:focus { border-color: var(--rule); outline: none; }

@media (max-width: 720px) {
  .news-filter { flex: 1 1 100%; }
  .news-filter__select { width: 100%; }
}

/* ---- listing grid ---- */

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1160px;
  margin: 0 auto;
}

.news-card.news-card--hidden { display: none; }

@media (max-width: 1080px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .news-grid { grid-template-columns: minmax(0, 1fr); } }

.news-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 20px;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.news-card:hover {
  transform: translateY(-6px);
  border-color: var(--rule);
  box-shadow: 0 16px 36px rgba(27, 28, 154, .14);
}

.news-card:active {
  transform: translateY(-2px) scale(.98);
  box-shadow: 0 8px 20px rgba(27, 28, 154, .10);
  transition-duration: .1s;
}

.news-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--card-line);
  background: var(--surface);
}

.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}

.news-card:hover .news-card__media img { transform: scale(1.05); }

.news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}

.news-card__date {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.news-card__title {
  font-family: "Sora", sans-serif;
  font-weight: 600;
  color: var(--fg);
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -.015em;
  margin: 0 0 10px;
}

.news-card__excerpt {
  color: var(--body);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 18px;
}

.news-card__more {
  margin-top: auto;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  color: var(--accent);
  transition: transform .25s ease;
}

.news-card:hover .news-card__more { transform: translateX(4px); }

/* ---- article pages ---- */

.article-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 18px;
}

.article-prose { max-width: 780px; }

.article-prose figure {
  margin: 0 0 36px;
  aspect-ratio: 2 / 1;
  border-radius: 20px;
  border: 1px solid var(--card-line);
  background: var(--surface);
  overflow: hidden;
}

.article-prose figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.article-prose h2 {
  font-family: "Sora", sans-serif;
  font-weight: 600;
  color: var(--fg);
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 44px 0 14px;
}

.article-prose p {
  color: var(--body);
  font-size: var(--fs-base);
  line-height: 1.7;
  margin: 0 0 16px;
}

.article-prose strong { color: var(--strong); }

.article-back {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  margin-top: 36px;
}

.article-back--top {
  display: block;
  width: max-content;
  margin: 0 0 26px;
}