/* Eli Shrir home page — articles pages
   Components used only by /articles, /articles/[label] and /article/[slug].
   Tokens, background layers, sections and the footer come from site.css.
   Design reference: docs/specs/1-tech/3-ui.md
   Accessibility reference: docs/specs/1-tech/4-ACCESSIBILITY.md */

/* ─── SHARED PAGE FURNITURE ─────────────────── */

/* Skip link — first focusable element, visible only on focus (§ 2). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2;
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* Visible focus everywhere on these pages (§ 2, >= 3:1 against the page). */
.articles-page a:focus-visible,
.skip-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.footer-home {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.footer-home:hover,
.footer-home:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ─── BREADCRUMBS ───────────────────────────── */

/* The trail replaces the old section-tag strip (request 0008) and keeps that
   class, so the typography and the trailing rule stay exactly as they were. */
.breadcrumbs {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Separators are drawn, not written, so a screen reader reads the trail as a
   list of places rather than a line of slashes (4-ACCESSIBILITY.md § 3). */
.breadcrumbs li + li::before {
  content: '//';
  color: var(--muted);
  margin: 0 0.6rem;
}

.breadcrumbs a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
  border-bottom-color: var(--accent);
}

/* The current page: present in the trail, but not a link. */
.breadcrumbs [aria-current="page"] {
  color: #94a3b8;
}

/* ─── PAGE HEAD ─────────────────────────────── */

.page-head {
  padding-top: 6rem;
  border-top: 0;
}

.page-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin-bottom: 1rem;
}

.page-lede {
  font-size: 0.9rem;
  line-height: 1.8;
  color: #94a3b8;
  max-width: 60ch;
}

.back-link {
  margin-top: 2rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

.back-link a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.back-link a:hover,
.back-link a:focus-visible {
  border-bottom-color: var(--accent);
}

/* ─── MOTION ────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .articles-page *,
  .articles-page *::before,
  .articles-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Never leave revealed content hidden (§ 6). */
  .articles-page .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ─── UTILITIES ─────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── ARTICLE LIST ──────────────────────────── */

.article-list {
  list-style: none;
}

.article-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 2rem 0;
  border-top: 1px solid var(--border);
}

.article-row:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Rows without an image use the full width — no empty column. The class is
   set in the template rather than using :has(), so it does not depend on
   selector support. */
.article-row.no-image {
  grid-template-columns: 1fr;
}

.article-thumb {
  display: block;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  background: var(--surface);
  line-height: 0;
}

.article-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.article-title {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}

.article-title a {
  color: var(--text);
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--accent), var(--accent2));
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color 0.2s ease, background-size 0.3s ease;
  background-size: 0 1px;
}

.article-title a:hover,
.article-title a:focus-visible {
  color: var(--accent);
  background-size: 100% 1px;
}

.article-excerpt {
  font-size: 0.85rem;
  line-height: 1.75;
  color: #94a3b8;
  max-width: 68ch;
}

/* The thumbnail column: the image, and the published date under it
   (request 0012). A row without an image keeps the column and shows the date
   alone, so the date is in the same place in every row. */
.article-aside {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Smaller than the excerpt and quieter than a label: the date is reference
   information, not part of the reading line. The capitals come from the text
   itself, so nothing here transforms it. Colour is the muted text already used
   by the excerpt on this background — no new pair to measure. */
.article-date-line {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: #94a3b8;
}

/* ─── LABEL BADGES ──────────────────────────── */

.label-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.badge {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  min-height: 1.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: #94a3b8;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.badge:hover,
.badge:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}

.badge-current {
  color: var(--accent);
  border-color: var(--accent);
}

/* ─── PAGINATION ────────────────────────────── */

/* The pagination component and .empty-state moved to site.css when the admin
   list started using them too (request 0011). They are shared furniture now,
   and site.css is where shared furniture lives. The markup and class names on
   these pages did not change. */

@media (max-width: 600px) {
  .article-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .article-thumb {
    max-width: 220px;
  }
}

/* ─── ARTICLE PAGE ──────────────────────────── */

.article-page {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem 5rem;
}

.article-head {
  padding-bottom: 2rem;
}

.article-head .page-title {
  max-width: 22ch;
}

.article-figure {
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 2.5rem;
  line-height: 0;
}

.article-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.article-date {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #94a3b8;
}

.article-body-wrap .label-list {
  margin-top: 1.25rem;
  margin-bottom: 2rem;
}

/* The subtitle carries the accent bar used by the stat card on the main page,
   so the two pages share one visual idea for "this is the lede". */
.article-subtitle {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 2.5rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  max-width: 60ch;
}

.article-subtitle::before {
  content: '';
  position: absolute;
  top: 0.15em;
  left: 0;
  width: 3px;
  height: calc(100% - 0.3em);
  background: linear-gradient(180deg, var(--accent), var(--accent2));
}

.article-body p {
  font-size: 0.9rem;
  line-height: 1.8;
  color: #94a3b8;
  max-width: 68ch;
  margin-bottom: 1.35rem;
}

.article-body p:last-child {
  margin-bottom: 0;
}

.article-page .back-link {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

/* ─── CODE BLOCKS ───────────────────────────── */
/* A window, following the reference image in request 0010: rounded near-black
   panel, three dots and the language on one bar with no divider, numbered lines
   down the left. Measurements and colours are in
   docs/tasks/task_0010_code-window-chrome.md. */

.code-block {
  margin: 2.25rem 0;
  background: var(--code-bg);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.code-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.4rem 0.25rem;
}

/* The traffic lights. Decorative, and marked aria-hidden in the markup. */
.code-dots {
  display: flex;
  gap: 0.5rem;
}

.code-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--code-dot);
}

.code-dots i:nth-child(1) { --code-dot: #ff5f56; }
.code-dots i:nth-child(2) { --code-dot: #febc2e; }
.code-dots i:nth-child(3) { --code-dot: #28c840; }

.code-lang {
  margin-left: auto;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--code-lang);
}

.code-body {
  margin: 0;
  padding: 0.9rem 1.4rem 1.4rem;
  overflow-x: auto;          /* long lines scroll here, never the page */
  tab-size: 4;
  -moz-tab-size: 4;
  font-family: var(--mono);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--code-text);
}

.code-body code {
  font: inherit;
  color: inherit;
  white-space: pre;
  counter-reset: code-line;
}

/* Line numbers are generated content, so a reader copying the block gets the
   source and not a column of numbers. The width comes from the renderer, which
   knows how many lines this block has. */
.code-line::before {
  counter-increment: code-line;
  content: counter(code-line);
  display: inline-block;
  min-width: var(--code-gutter-width, 2ch);
  margin-right: 1.2rem;
  text-align: right;
  color: var(--code-gutter);
  -webkit-user-select: none;
  user-select: none;
}

/* The block scrolls, so it must be keyboard reachable — and therefore must
   show focus (4-ACCESSIBILITY.md § 2). The ring sits inside the panel. */
.articles-page .code-body:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 12px;
}

.code-keyword  { color: var(--code-keyword); }
.code-name     { color: var(--code-name); }
.code-type     { color: var(--code-type); }
.code-variable { color: var(--code-variable); }
.code-literal  { color: var(--code-literal); }
.code-comment  { color: var(--code-comment); }

@media (max-width: 600px) {
  .code-block-head { padding: 0.85rem 1rem 0.2rem; }

  .code-body {
    font-size: 0.8rem;
    padding: 0.75rem 1rem 1rem;
  }

  .code-line::before { margin-right: 0.9rem; }
}