/* News list (/en/news) and news item pages (/en/news/<item>) */

/* ── Page hero (same as the other pages) ─────────────────────── */
.page-hero {
  background: linear-gradient(145deg, var(--brand-blue-deeper) 0%, var(--brand-blue-dark) 60%, #003d70 100%);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: 64px 72px;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 80% 50%, rgba(229,49,43,0.08) 0%, transparent 65%),
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
  pointer-events: none;
}
.page-hero-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--section-px);
  position: relative;
  z-index: 1;
}
.page-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.page-hero-eyebrow::before {
  content: '';
  width: 20px; height: 2px;
  background: var(--brand-red);
  border-radius: 2px;
}
.page-hero h1 { color: #fff; margin-bottom: 12px; }
.page-hero-sub { font-size: 1.0625rem; color: rgba(255,255,255,0.6); max-width: 520px; line-height: 1.65; }

/* ── Shared bits ─────────────────────────────────────────────── */
.news-date {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 8px;
}
/* Items without a picture (imported from the old site) */
.news-placeholder {
  width: 100%; height: 100%;
  background:
    url('/static/images/ms_logo_white.svg') center / 44% auto no-repeat,
    linear-gradient(145deg, var(--brand-blue-deeper) 0%, var(--brand-blue-dark) 70%, #003d70 100%);
  opacity: 0.92;
}
.news-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--brand-blue);
}
.news-more svg { transition: transform var(--duration-fast); }

/* ── List ────────────────────────────────────────────────────── */
.news-list { background: var(--bg); }

.news-lead {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 40px;
  color: inherit;
  transition: box-shadow var(--duration-base), transform var(--duration-base);
}
.news-lead:hover { box-shadow: var(--shadow-blue); transform: translateY(-2px); }
.news-lead:hover .news-more svg { transform: translateX(3px); }
/* The text sets the card's height; the picture fills its column */
.news-lead-media { position: relative; min-height: 320px; background: var(--bg3); }
.news-lead-media img,
.news-lead-media .news-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.news-lead-body { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.news-lead-body h2 { font-size: 1.4rem; line-height: 1.3; color: var(--text); margin-bottom: 12px; hyphens: auto; overflow-wrap: break-word; }
.news-lead-body p {
  color: var(--text2); line-height: 1.65; margin-bottom: 20px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

.news-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: inherit;
  transition: box-shadow var(--duration-base), transform var(--duration-base), border-color var(--duration-base);
}
.news-card:hover { box-shadow: var(--shadow-blue); transform: translateY(-3px); border-color: var(--border2); }
.news-card-media { aspect-ratio: 16 / 10; background: var(--bg3); overflow: hidden; }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.news-card:hover .news-card-media img { transform: scale(1.03); }
.news-card-body { padding: 20px 22px 24px; }
.news-card-body h3 {
  hyphens: auto;
  overflow-wrap: break-word;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card-body p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-lead:focus-visible,
.news-card:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* ── Item page ───────────────────────────────────────────────── */
.news-article { background: var(--bg2); padding-bottom: 80px; }
.news-article-inner { max-width: 800px; margin-inline: auto; padding-inline: var(--section-px); }
.news-article-head { background: var(--bg); border-bottom: 1px solid var(--border); padding-block: 40px 44px; margin-bottom: 40px; }
.news-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-blue);
  margin-bottom: 28px;
}
.news-back:hover svg { transform: translateX(-3px); }
.news-back svg { transition: transform var(--duration-fast); }
.news-article-head h1 { font-size: clamp(1.625rem, 3vw, 2.25rem); line-height: 1.25; color: var(--text); margin-bottom: 16px; hyphens: auto; overflow-wrap: break-word; }
.news-article-lead { font-size: 1.125rem; line-height: 1.65; color: var(--text2); }

.news-article-media { margin: 0 0 36px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--bg3); }
.news-article-media img,
.news-article-media video { width: 100%; height: auto; display: block; }

.news-article-body { font-size: 1.0625rem; line-height: 1.75; color: var(--text); }
.news-article-body p { margin-bottom: 1.1em; }
.news-article-body ul { list-style: disc; padding-left: 1.4em; margin-bottom: 1.1em; }
.news-article-body li { margin-bottom: 0.4em; }
.news-article-body strong { font-weight: 700; }
.news-article-body a { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.news-article-body a:hover { color: var(--brand-blue-dark); }
.news-article-body img { max-width: 100%; height: auto; border-radius: var(--r); }

.news-article-link { margin-top: 28px; }
.news-article-link .btn { display: inline-flex; align-items: center; gap: 8px; }

.news-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.news-pager-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: inherit;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.news-pager-link:hover { border-color: var(--brand-blue); box-shadow: var(--shadow-sm); }
.news-pager-link--older { text-align: right; grid-column: 2; }
.news-pager-dir { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); }
.news-pager-link--newer .news-pager-dir::before { content: '← '; }
.news-pager-link--older .news-pager-dir::after { content: ' →'; }
.news-pager-title { font-weight: 600; font-size: 0.9375rem; color: var(--text); line-height: 1.4; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  .news-lead { grid-template-columns: 1fr; }
  .news-lead-media { min-height: 0; aspect-ratio: 16 / 10; }
  .news-lead-body { padding: 24px 24px 28px; }
}
@media (max-width: 600px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-pager { grid-template-columns: 1fr; }
  .news-pager-link--older { grid-column: auto; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .news-card, .news-lead, .news-card-media img { transition: none; }
  .news-card:hover, .news-lead:hover { transform: none; }
  .news-card:hover .news-card-media img { transform: none; }
}