.news-hub-page {
  min-height: 66vh;
  padding-block: 28px 90px;
  background: var(--color-background);
}

.news-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  padding-block: 0 52px;
}

.news-tabs__button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: var(--color-text);
  font-family: var(--font-accent);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.news-tabs__button:hover {
  border-color: var(--color-divider);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

.news-tabs__button.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.news-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 1.28fr);
  gap: 28px;
}

.news-overview__features,
.news-overview__list {
  display: grid;
  gap: 18px;
}

.news-feature-card {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-dark);
  box-shadow: var(--shadow-card);
  isolation: isolate;
}

.news-feature-card:first-child {
  min-height: 510px;
}

.news-feature-card__image,
.news-feature-card__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.news-feature-card__image { object-fit: cover; }
.news-placeholder {
  background: linear-gradient(180deg, #fafafa 0%, #d4d4d4 46%, #74818a 72%, #061826 100%);
}

.news-feature-card__shade {
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(6,24,38,0) 12%,
    rgba(6,24,38,.32) 28%,
    rgba(6,24,38,.78) 48%,
    rgba(6,24,38,.88) 66%,
    rgba(6,24,38,.98) 100%
  );
}

.news-feature-card__content {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 28px 30px;
  color: #fff;
}

.news-feature-card__content h2 {
  margin-bottom: 10px;
  color: #fff;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
}

.news-feature-card__content > p:not(.news-card__meta) {
  max-width: 58ch;
  margin-bottom: 14px;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  line-height: 1.55;
}

.news-card__meta {
  margin-bottom: 10px;
  color: var(--color-text-muted);
  font-family: var(--font-accent);
  font-size: 12px;
}

.news-feature-card .news-card__meta { color: rgba(255,255,255,.94); }
.news-card__meta span { color: var(--color-primary); }
.news-feature-card .news-card__meta span { color: #70beff; }

.news-list-card {
  position: relative;
  display: grid;
  min-height: 116px;
  grid-template-columns: minmax(150px, 31%) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}

.news-list-card__image {
  width: 100%;
  height: 100%;
  min-height: 116px;
  border-radius: var(--radius-card);
  object-fit: cover;
}

.news-list-card__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding-block: 10px;
}

.news-list-card__content h2 {
  margin-bottom: 8px;
  font-size: clamp(1.12rem, 1.7vw, 1.45rem);
}

.news-list-card__content > p:not(.news-card__meta) {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.news-list-card__link {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}

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

@media (max-width: 1100px) {
  .news-overview { grid-template-columns: 1fr; }
  .news-overview__features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-feature-card:first-child,
  .news-feature-card { min-height: 360px; }
}

@media (max-width: 700px) {
  .news-hub-page { padding-block: 24px 64px; }
  .news-tabs { gap: 10px; padding-bottom: 34px; }
  .news-tabs__button { width: 100%; }
  .news-overview__features { grid-template-columns: 1fr; }
  .news-list-card { grid-template-columns: 118px minmax(0, 1fr); gap: 16px; }
  .news-list-card__content > p:not(.news-card__meta) { display: none; }
}

.news-more[hidden] {
  display: none !important;
}

.news-more {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 34px;
  padding-top: 34px;
  border-top: 1px solid var(--color-divider);
}

.news-show-all-wrap {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

.news-show-all {
  min-height: 46px;
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
}

.news-show-all:hover,
.news-show-all:focus-visible {
  background: var(--color-primary);
  color: #fff;
}

@media (max-width: 900px) {
  .news-more { grid-template-columns: 1fr; }
}

/* v1.0.4 — stable two-line news headlines. Feature cards expand seamlessly
   inside the existing card instead of drawing a separate title box. */
.news-card {
  --news-headline-overlay-bg: #fff;
  --news-headline-overlay-color: var(--color-text);
  position: relative;
  z-index: 1;
}

.news-card__headline-shell {
  position: relative;
  z-index: 6;
  min-width: 0;
}

.news-card__headline {
  display: -webkit-box;
  width: 100%;
  height: 2.24em;
  min-height: 2.24em;
  max-height: 2.24em;
  margin: 0 !important;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.news-card__headline-overlay {
  position: absolute;
  z-index: 40;
  top: -12px;
  right: -14px;
  left: -14px;
  max-height: min(62vh, 540px);
  padding: 12px 14px;
  overflow: auto;
  border: 1px solid rgba(6,24,38,.10);
  border-radius: 10px;
  background: var(--news-headline-overlay-bg);
  box-shadow: 0 18px 46px rgba(6,24,38,.20);
  color: var(--news-headline-overlay-color);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms step-end;
  overflow-wrap: anywhere;
}

.news-card.has-truncated-headline.is-headline-expanded {
  z-index: 90;
}

.news-card.has-truncated-headline.is-headline-expanded .news-card__headline-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s;
}

.news-feature-card {
  --news-headline-overlay-bg: #061826;
  --news-headline-overlay-color: #fff;
  overflow: visible;
}

.news-feature-card__image,
.news-feature-card__shade {
  border-radius: inherit;
}

.news-feature-card .news-card__headline-shell {
  margin-bottom: 10px;
}

.news-feature-card .news-card__headline,
.news-feature-card .news-card__headline-overlay {
  color: #fff;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
}

/* Feature cards: the title unfolds in its original position. The content block
   is bottom-anchored, so increasing the title shell makes the upper part move
   upward while excerpt/link stay visually stable. This keeps the card/grid
   dimensions unchanged and avoids the detached rounded overlay from v1.0.3. */
.news-feature-card .news-card__headline-shell {
  overflow: hidden;
  transition: height 260ms cubic-bezier(.22,.7,.25,1);
}

.news-feature-card.has-truncated-headline .news-card__headline-shell {
  height: var(--news-headline-collapsed-height);
  min-height: var(--news-headline-collapsed-height);
  max-height: var(--news-headline-full-height);
}

.news-feature-card.has-truncated-headline.is-headline-expanded .news-card__headline-shell {
  height: var(--news-headline-full-height);
}

.news-feature-card.has-truncated-headline.is-headline-expanded .news-card__headline {
  display: block;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

/* The feature-card expansion uses the real headline, not a second floating box. */
.news-feature-card .news-card__headline-overlay,
.news-feature-card.has-truncated-headline.is-headline-expanded .news-card__headline-overlay {
  display: none !important;
}

.news-list-card .news-card__headline-shell {
  margin-bottom: 8px;
}

.news-list-card .news-card__headline,
.news-list-card .news-card__headline-overlay {
  font-size: clamp(1.12rem, 1.7vw, 1.45rem);
}

/* Existing component margins now live on the stable headline shell. */
.news-feature-card__content h2,
.news-list-card__content h2 {
  margin-bottom: 0;
}

.news-card [data-news-primary-link]:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

.news-feature-card [data-news-primary-link]:focus-visible {
  outline-color: #70beff;
}

/* A measurement clone is used by JS to decide whether two lines actually truncate. */
.news-card__headline-probe {
  position: fixed !important;
  top: -200vh !important;
  left: -200vw !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  visibility: hidden !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .news-card__headline-overlay {
    transition: none !important;
  }
}