/* =========================================================
   TheSpaceLaunches · News list page
   Page-scoped styles, namespaced under .news-page so they
   never collide with base/components/nav.
   ========================================================= */

.news-page {
 background: var(--bg-0, #050816);
 min-height: 100vh;
}

.news-main {
 width: 100%;
 max-width: 1440px;
 margin: 0 auto;
 padding: 0 24px 64px;
}

/* ---------- Hero ---------- */
.news-hero {
 padding: 56px 0 36px;
}

.news-crumbs {
 font-size: 13px;
 line-height: 1.45;
 color: var(--text-2, #7a87a5);
 margin: 0 0 14px;
}
.news-crumbs a {
 color: var(--text-2, #7a87a5);
 text-decoration: none;
 transition: color .15s ease;
}
.news-crumbs a:hover {
 color: var(--text-0, #f0f4ff);
}
.news-crumbs__sep {
 margin: 0 8px;
 color: var(--text-3, #55617f);
}
.news-crumbs [aria-current="page"] {
 color: var(--text-0, #f0f4ff);
}

.news-hero__title {
 font-family: var(--font-display, "Orbitron", sans-serif);
 font-size: 38px;
 font-weight: 700;
 letter-spacing: 0.02em;
 color: var(--text-0, #f0f4ff);
 margin: 0 0 12px;
 background: linear-gradient(135deg, #4cc9ff 0%, #ff8a3d 100%);
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
}

.news-hero__sub {
 font-size: 16px;
 line-height: 1.6;
 color: var(--text-1, #b8c4dd);
 margin: 0 0 24px;
 max-width: 720px;
}

.news-hero__stats {
 display: flex;
 gap: 36px;
 flex-wrap: wrap;
}

.news-hero__stat {
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.news-hero__stat-num {
 font-family: var(--font-display, "Orbitron", sans-serif);
 font-size: 24px;
 font-weight: 600;
 color: #4cc9ff;
}

.news-hero__stat-label {
 font-size: 11px;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--text-2, #7a87a5);
}

/* ---------- Article list ----------
   PC: fixed 4 columns (16 posts / page = 4 rows of 4, per 2026-10-21 PM).
   Tablet folds to 2, phones to 1 (see breakpoints at file bottom). */
.news-list {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 20px;
}

/* ---------- News card ---------- */
.news-card {
 display: flex;
 flex-direction: column;
 background: var(--glass-bg, rgba(15, 22, 50, 0.55));
 border: 1px solid rgba(76, 201, 255, 0.18);
 border-radius: 12px;
 overflow: hidden;
 transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.news-card:hover {
 transform: translateY(-3px);
 border-color: rgba(76, 201, 255, 0.45);
 box-shadow: 0 8px 24px rgba(76, 201, 255, 0.12);
}

.news-card__media {
 position: relative;
 width: 100%;
 aspect-ratio: 16 / 9;
 background: linear-gradient(135deg, rgba(76, 201, 255, 0.08) 0%, rgba(255, 138, 61, 0.04) 100%);
 overflow: hidden;
 border-bottom: 1px solid rgba(76, 201, 255, 0.10);
}

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

.news-card:hover .news-card__image {
 transform: scale(1.04);
}

.news-card__body {
 display: flex;
 flex-direction: column;
 gap: 8px;
 padding: 14px 16px 18px;
 flex: 1;
}

.news-card__meta {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 12px;
 font-size: 12px;
}

.news-card__source {
 font-family: var(--font-display, "Orbitron", sans-serif);
 font-size: 10px;
 font-weight: 600;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: #4cc9ff;
 padding: 4px 8px;
 border: 1px solid rgba(76, 201, 255, 0.4);
 border-radius: 4px;
 background: rgba(76, 201, 255, 0.08);
}

.news-card__date {
 color: var(--text-2, #7a87a5);
 font-size: 12px;
}

.news-card__title {
 font-family: var(--font-display, "Orbitron", sans-serif);
 font-size: 17px;
 font-weight: 600;
 line-height: 1.35;
 color: var(--text-0, #f0f4ff);
 margin: 0;
}

.news-card__summary {
 font-size: 14px;
 line-height: 1.6;
 color: var(--text-1, #b8c4dd);
 margin: 0;
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

.news-card__link {
 margin-top: auto;
 font-family: var(--font-display, "Orbitron", sans-serif);
 font-size: 12px;
 font-weight: 500;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: #4cc9ff;
 text-decoration: none;
 align-self: flex-start;
 display: inline-flex;
 align-items: center;
 gap: 4px;
 transition: color 0.15s ease;
}

.news-card__link:hover {
 color: #ff8a3d;
}

.news-card__link::after {
 content: "↗";
 font-size: 12px;
 line-height: 1;
 opacity: 0.85;
}

/* ---------- Empty state ---------- */
.news-empty {
 padding: 48px 0;
 text-align: center;
 color: var(--text-2, #7a87a5);
 font-size: 14px;
}

/* ---------- Pagination (aligned with launches.html .pager) ----------
   Static <a href> page-list; visual style mirrors .pager__page / .btn--ghost
   so the news list reads as part of the same family. Keeps news's own
   `.news-pagination__link*` class names (already wired in the two news
   pages) — no JS interaction, no behaviour change.
   2026-10-21: page numbers now sit inside a `.news-pagination__pages`
   group (same structure as .pager__pages), so Prev pins left, the
   number cluster stays centered and Next pins right — matching the
   site-wide unified pager look. */
.news-pagination {
 display: flex;
 align-items: center;
 justify-content: space-between; /* Prev pinned left, pages centered, Next pinned right */
 gap: 8px;
 margin: 40px 0 0;
 flex-wrap: nowrap;
 grid-column: 1 / -1; /* span the full 4-col grid so Prev/pages/Next stay on one row */
}

.news-pagination__pages {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 flex-wrap: nowrap;
}

.news-pagination__link {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 36px;
 height: 36px;
 padding: 0 10px;
 background: transparent;
 border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.08));
 border-radius: var(--radius-sm, 6px);
 color: var(--text-2, #7a87a5);
 font-family: var(--font-body, "Space Grotesk", system-ui, sans-serif);
 font-size: 14px;
 font-weight: 600;
 text-decoration: none;
 cursor: pointer;
 transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.news-pagination__link:hover:not(.news-pagination__link--active):not(.news-pagination__link--disabled) {
 color: var(--text-1, #b8c4dd);
 border-color: var(--accent-blue, #4cc9ff);
}

.news-pagination__link--active {
 color: #fff;
 background: var(--accent-blue, #4cc9ff);
 border-color: var(--accent-blue, #4cc9ff);
 cursor: default;
}

.news-pagination__link--disabled {
 opacity: 0.35;
 cursor: default;
 pointer-events: none;
}

/* Prev/Next adopt the .btn--ghost look (translucent blue border) so the
   page-number buttons and the nav arrows sit in the same 36px / 6px slot
   but read as two distinct affordances. */
.news-pagination__link--prev,
.news-pagination__link--next {
 border-color: rgba(76, 201, 255, 0.35);
}
.news-pagination__link--prev:hover:not(.news-pagination__link--disabled),
.news-pagination__link--next:hover:not(.news-pagination__link--disabled) {
 color: var(--accent-blue, #4cc9ff);
 border-color: var(--accent-blue, #4cc9ff);
}

/* Ellipsis between page-number gaps (no link, no border, same slot height). */
.news-pagination__dots {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 20px;
 height: 36px;
 color: var(--text-2, #7a87a5);
 font-weight: 600;
 user-select: none;
}

/* ---------- Responsive ----------
   PC is primary (fixed 4-col grid). Two breakpoints keep phones
   readable per 2026-10-21 PM request: detail + list must adapt. */
@media (max-width: 1024px) {
 .news-list {
  grid-template-columns: repeat(2, 1fr);
 }
}

@media (max-width: 640px) {
 .news-pagination {
  flex-wrap: wrap;
 }
 .news-main {
  padding: 0 16px 48px;
 }
 .news-hero {
  padding: 40px 0 28px;
 }
 .news-hero__title {
  font-size: 28px;
 }
 .news-hero__stats {
  gap: 20px;
 }
 .news-list {
  grid-template-columns: 1fr;
  gap: 16px;
 }
 .news-pagination {
  padding: 12px 10px;
  justify-content: center;
 }
 .news-pagination__pages {
  order: 3;           /* on narrow screens: Prev / Next row, numbers wrap below */
  width: 100%;
 }
}