/* ============================================================================
   news.css — Aktualności: the list (/news) and a post (/news/{slug}).
   Built from the kit (components.css: .card (+ --pad-md, --raised, --hover,
   --hover-raised, --lift), .spotlight, .chip, .cover, .avatar, .btn,
   .pagination, .empty-state, .horizon, .news-media, .news-grid /
   .news-card, .toc; base.css: .eyebrow--muted; layout.css: .page-top;
   prose.css: .prose--post, the post text); this file lays the pages out.
   Tokens only. Subpage rule: no entrance animations. Hovers of cards and
   list rows are mouse only (tokens.css).

   Contents
     1. List           .news-card--feature
     2. Post hero      .post-hero(--cover), .post-hero__media, .post-meta
     3. Read progress  .read-progress (#readProgress, news.js)
     4. Post layout    .post-layout, .post-article, .post-video,
                       .post-foot (.post-author, .post-share, .post-adjacent)
     5. Sidebar        .post-aside(__sticky), .post-panel__title,
                       .post-games/.post-game, .post-links, .post-toc,
                       .post-cta
   The related posts under a post are the kit NewsCards in .news-grid--3.
   ========================================================================== */


/* ── 1. List ──────────────────────────────────────────────────────────── */

/* .news-grid and the grid .news-card (with the feature card's "Czytaj
   wpis" line, .news-card__more) live in the kit (components.css, section
   33) — the home page shows the same cards. The feature layout is
   list-only.

   Feature: the first post of page 1. A plain card on phones; from 1024px the
   cover takes the left half (≤ 600px, the preview is 640 wide) and the text
   the right one. */
.news-card--feature { margin-bottom: var(--grid-gap); }
.news-card--feature .news-card__title { -webkit-line-clamp: 4; }
@media (min-width: 768px) {
  .news-card--feature .news-card__body { padding: var(--space-8); }
  .news-card--feature .news-card__title {
    font-size: clamp(1.375rem, 2.4vw, 1.875rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  .news-card--feature .news-card__excerpt { -webkit-line-clamp: 4; font-size: 1rem; }
}
@media (min-width: 1024px) {
  .news-card--feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 22rem;
  }
  .news-card--feature .news-card__media {
    aspect-ratio: auto;
    min-height: 100%;
  }
  .news-card--feature .news-card__media::after {
    background: linear-gradient(to top, var(--cover-scrim-mid), transparent 45%);
  }
  .news-card--feature .news-card__body {
    grid-column: 2;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-10);
  }
}


/* ── 2. Post hero ─────────────────────────────────────────────────────────
   The page-top band, text at the bottom: breadcrumb, category chip, title,
   lead, meta row. With a cover (.post-hero--cover): a blurred, dimmed copy
   of it as ambience edge to edge (--bg-deep rising from the bottom and a
   little shade at the top for the transparent topbar) with a faint violet
   light, and the sharp cover as a framed kit .news-media card beside the
   text; the dot grid stays off the photo. Without a cover: the same band
   on the deep floor with the dot grid and the page-top lights (layout.css).
   The hero is its own band (like a magazine masthead): a hard bottom edge
   with the .horizon seam of the next section. */
.post-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(24rem, 52vh, 34rem);
  padding-block: calc(var(--nav-h) + var(--space-10)) clamp(var(--space-10), 5vw, var(--space-16));
  border-bottom: 1px solid var(--line);
}
.post-hero--cover {
  justify-content: center;
  min-height: 0;
  background-color: var(--bg-deep);
}
.post-hero--cover::before { display: none; }
.post-hero--cover::after {
  background:
    radial-gradient(36% 40% at 6% 50%, var(--ambient-violet), transparent 70%),
    radial-gradient(30% 40% at 80% 50%, var(--ambient-violet-soft), transparent 70%);
}
/* Ambience: the cover blurred, desaturated and dimmed — colour, not a
   picture, so the text never has to fight it. Painted once (static). */
.post-hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background-color: var(--bg-deep);
}
.post-hero__ambient {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  max-width: none;
  object-fit: cover;
  filter: blur(42px) saturate(0.85) brightness(0.42);
  opacity: 0.85;
}
.post-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--bg-deep) 0%, transparent 40%),
    linear-gradient(to bottom, var(--bg-deep) 0%, transparent 35%);
}
/* A broken cover file (main.js markImage: .news-media.is-error): the
   plain band. */
.post-hero:has(.post-hero__cover.is-error) :is(.post-hero__media, .post-hero__cover) { display: none; }

.post-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-6), 3vw, var(--space-8));
}
.post-hero__crumbs { grid-column: 1 / -1; }
.post-hero__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  min-width: 0;
}
/* The sharp cover: the kit 16:9 .news-media box, framed. */
.post-hero__cover {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl), var(--underlight-sm);
}
@media (min-width: 1024px) {
  .post-hero--cover .post-hero__inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
    column-gap: clamp(var(--space-10), 4vw, var(--space-16));
  }
}
@media (max-width: 1023px) {
  .post-hero__cover { order: -1; max-width: 40rem; }   /* the cover first, under the breadcrumb */
  .post-hero__crumbs { order: -2; }
}
/* Three steps of emphasis instead of one white block: the title brightest
   (its last line leaning a touch towards the accent), the lead a step
   quieter on a violet hairline, the meta row quietest, set off by a rule. */
.post-hero__title {
  max-width: 22ch;
  margin: 0;
  color: var(--text-strong);
  font-size: clamp(2.125rem, 4.2vw, 3.5rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .post-hero__title {
    color: transparent;
    background-image: linear-gradient(180deg, var(--text-strong) 35%, color-mix(in oklab, var(--text-strong) 70%, var(--accent-300)) 100%);
    -webkit-background-clip: text;
            background-clip: text;
  }
}
.post-hero__lead {
  max-width: 60ch;
  margin: 0;
  padding-left: var(--space-4);
  color: var(--text-2);
  font-size: var(--fs-lead);
  line-height: 1.6;
  text-wrap: pretty;
  border-left: 2px solid var(--accent-line);
}
.post-hero--cover .post-hero__lead { color: color-mix(in oklab, var(--text-1) 82%, transparent); }
@media (max-width: 767px) {
  .post-hero__lead { font-size: 1rem; }
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
  align-self: stretch;
  max-width: 40rem;
  margin: var(--space-1) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--line);
}
.post-meta__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.post-meta__item svg { color: var(--accent-400); opacity: 0.8; }
/* the author first and brightest: who wrote it, then the facts */
.post-meta__item:first-child { color: var(--text-1); }


/* ── 3. Reading progress ──────────────────────────────────────────────────
   A 2px accent line along the bottom edge of the full-width topbar,
   edge to edge, over its hairline. The position mirrors .topbar in
   layout.css (sticky at top --maint-offset, --nav-h tall, so its bottom
   edge is at --head-h; `top` glides with it when the maintenance strip
   folds) — keep them in step. news.js scales the bar and adds .is-active
   once reading starts. */
.read-progress {
  position: fixed;
  top: calc(var(--head-h) - 2px);
  left: 0;
  right: 0;
  z-index: calc(var(--z-sticky) + 1);
  height: 2px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard),
              top var(--dur-slow) var(--ease-out);
}
.read-progress.is-active { opacity: 1; }
html:has(.topbar.is-open) .read-progress { opacity: 0; }
.read-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--accent-400);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: 0 50%;
}


/* ── 4. Post layout, article, foot ────────────────────────────────────────
   One column on phones and tablets (the sidebar panels follow the
   article); from 1024px the reading column on the left and the sidebar
   (≤ 20rem) on the right edge of the page. The text itself: prose.css
   (.prose--post). */
.post-body {
  padding-top: clamp(var(--space-8), 4vw, var(--space-12));
  background-color: var(--bg);
}
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
}
@media (min-width: 1024px) {
  .post-layout {
    /* The article takes all the room the sidebar leaves; a modest gap. */
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
    column-gap: clamp(var(--space-6), 2.5vw, var(--space-10));   /* columns stretch: the aside's sticky block needs the full height */
  }
}
.post-article {
  min-width: 0;
}
/* From tablet up the article reads on its own sheet: just a hint lighter
   than the page, a faint edge. */
@media (min-width: 768px) {
  .post-article {
    padding: clamp(var(--space-8), 3.5vw, var(--space-12));
    background-color: var(--surface-sheet);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-xl);
  }
}
.post-article__empty { color: var(--text-2); font-style: italic; }

.post-video { margin-top: var(--space-10); }
.post-video__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  color: var(--text-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.post-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--bg-deep);
}
.post-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Foot: author + sharing on one line (stacked on phones), then the
   older / newer post. */
.post-foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
}
.post-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-8);
}
.post-author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}
.post-author__text { min-width: 0; }
.post-author__name {
  margin: 0;
  color: var(--text-strong);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.post-author__meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-2);
  margin: 0.125rem 0 0;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.post-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
/* "· Zaktualizowano …": the dot belongs to the date, so a wrapped line
   never ends in a lone dot; on phones the date takes its own line. */
.post-author__updated::before {
  content: '·';
  margin-right: var(--space-2);
}
@media (max-width: 767px) {
  .post-author__meta { flex-direction: column; }
  .post-author__updated::before { content: none; }
}

/* Older / newer post: kit link cards (.card--hover, --hover-raised). */
.post-adjacent {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
.post-adjacent__link {
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
}
/* Side by side from 768px: the newer post in the right cell, its label
   and title on the right edge (this rule follows the base one, so it
   wins — it used to come first and the label stayed on the left). */
@media (min-width: 768px) {
  .post-adjacent { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .post-adjacent__link--next {
    grid-column: 2;
    align-items: flex-end;
    text-align: right;
  }
}
.post-adjacent__dir { transition: color var(--dur-fast) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) {
  .post-adjacent__link:hover .post-adjacent__dir { color: var(--accent-text); }
}
.post-adjacent__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--text-strong);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}


/* ── 5. Sidebar ───────────────────────────────────────────────────────────
   Kit cards (.card.card--pad-md) with a muted eyebrow title. Linked games
   and links scroll with the page; the table of contents and the download
   card (.post-aside__sticky) stay in view from 1024px (a long contents
   list scrolls inside its card, so the block always fits the screen).
   Below 1024px the panels follow the article and the table of contents is
   not shown (it would come after the text). */
.post-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.post-aside__sticky {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 1024px) {
  .post-aside__sticky {
    position: sticky;
    top: calc(var(--head-h) + 1.5rem);
  }
  .post-toc .toc__panel {
    max-height: max(11rem, calc(100vh - var(--head-h) - 17.5rem));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
@media (max-width: 1023px) {
  .post-aside { max-width: 44rem; }
  .post-toc { display: none; }
}

.post-panel__title {
  display: flex;
  margin: 0 0 var(--space-4);
}
.post-panel__count { color: var(--text-3); }

/* Linked games: rows (small cover, name, genre); one game gets a larger
   cover, all its genres and "Zobacz grę". The row is the link. */
.post-games__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}
.post-game {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  color: var(--text-1);
  background-color: var(--surface-2);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard);
}
.post-game__cover { border-radius: var(--radius-sm); }
.post-game__cover .cover__fallback { font-size: 1rem; padding: 0; }
.post-game__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  min-width: 0;
}
.post-game__name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--text-strong);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  transition: color var(--dur-fast) var(--ease-standard);
}
.post-game__genres {
  max-width: 100%;
  overflow: hidden;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-game__chevron { color: var(--text-3); transition: color var(--dur-fast) var(--ease-standard); }
.post-games--single .post-game {
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-3);
}
.post-games--single .post-game__name { font-size: 1rem; line-height: 1.3; }
.post-games--single .post-game__genres { white-space: normal; }
.post-games--single .post-game__cover .cover__fallback { font-size: 1.5rem; padding: var(--space-2); }
.post-game__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  color: var(--accent-text);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.post-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}
.post-links__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.625rem var(--space-3);
  color: var(--text-1);
  font-size: var(--fs-sm);
  background-color: var(--surface-2);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-md);
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.post-links__item svg { flex-shrink: 0; color: var(--text-3); }
.post-links__label { min-width: 0; overflow-wrap: anywhere; }

/* List rows: the edge (and the name / chevron) light up — mouse only. */
@media (hover: hover) and (pointer: fine) {
  .post-game:hover { border-color: var(--line-hover); }
  .post-game:hover .post-game__name { color: var(--accent-300); }
  .post-game:hover .post-game__chevron { color: var(--accent-text); }
  .post-links__item:hover { color: var(--text-strong); border-color: var(--line-hover); }
}

/* Download card: one line and the primary button (Shared/Button glow
   'sm'), on the raised kit card with a soft violet light. */
.post-cta {
  background-image:
    radial-gradient(90% 80% at 0% 0%, var(--ambient-violet), transparent 70%),
    var(--sheen);
  border-color: var(--line-strong);
}
.post-cta__title {
  margin: 0 0 var(--space-2);
  color: var(--text-strong);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.post-cta__text {
  margin: 0 0 var(--space-4);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
}