/* The desks: News, Tech and Markets (routes::desks). Colours are the tokens
   of style.css; nothing here moves by itself. */

.desk-hero { padding-bottom: 0.5rem; }

/* A part's own heading above the rails it holds (theirs are h3). */
.world-section > .desk-group { padding-inline: var(--gutter); margin-top: 1.5rem; }

/* ── Headlines: a row the visitor scrolls ───────────────────── */
.desk-rail { align-items: stretch; }

/* Positioned, so the words for screen readers inside it (.visually-hidden,
   absolutely placed) stay inside the row that scrolls and do not widen the
   page past it. */
.desk-headline {
  position: relative;
  flex: 0 0 min(22rem, 80vw);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.9rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  text-decoration: none;
  min-height: 8.5rem;
}
.desk-headline:hover,
.desk-headline:focus-visible { border-color: var(--accent); }
.desk-headline:hover .desk-headline-title { text-decoration: underline; }

.desk-headline-source {
  font-size: var(--step--1, 0.8rem);
  font-weight: 700;
  color: var(--live-text);
}
.desk-headline-place { font-weight: 400; color: var(--text-muted); }

.desk-headline-title {
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.desk-headline-meta {
  margin-top: auto;
  font-size: var(--step--1, 0.8rem);
  color: var(--text-muted);
}

.desk-held { color: var(--text-muted); }

/* ── A live picture this page plays on a press ──────────────── */
.desk-live-player { padding-inline: var(--gutter); }
.desk-player {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 64rem;
  background: var(--media-bg);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── NASA+'s and the central banks' schedules ───────────────── */
.desk-events {
  list-style: none;
  margin: 0;
  padding: 0 var(--gutter);
  display: grid;
  gap: 0.6rem;
}
.desk-events a { font-weight: 600; color: var(--accent-text); }
/* Links inside text are underlined, not told apart by colour alone (WCAG 1.4.1). */
.desk-events a,
.desk-credit-list a,
.desk-schedule .section-desc a,
.desk-live .section-desc a { text-decoration: underline; text-underline-offset: 0.15em; }
.desk-note { color: var(--text-muted); font-size: var(--step--1, 0.85rem); }
.desk-schedule > .desk-note { padding-inline: var(--gutter); }

/* ── The figures ────────────────────────────────────────────── */
.desk-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.5rem;
  padding-inline: var(--gutter);
}
.desk-table { margin: 0; }
.desk-table table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.desk-table caption {
  text-align: start;
  font-weight: 700;
  padding-bottom: 0.5rem;
}
.desk-table th,
.desk-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
  text-align: start;
}
.desk-table td { text-align: end; }
.desk-table thead th { color: var(--text-muted); font-weight: 600; }
.desk-table thead th + th { text-align: end; }
.desk-table figcaption {
  margin-top: 0.5rem;
  font-size: var(--step--1, 0.85rem);
  color: var(--text-muted);
}

/* ── Podcasts of public bodies: the show's initial ──────────── */
.desk-official { background: var(--surface); }

/* ── Sources and licences ───────────────────────────────────── */
.desk-credit-list {
  margin: 0;
  padding: 0 var(--gutter) 0 calc(var(--gutter) + 1.25rem);
  display: grid;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: var(--step--1, 0.9rem);
}
.desk-credit-list strong { color: var(--text); }
.desk-credit-list a { color: var(--accent-text); }