/* Dispatches — the short-form "field correspondence" feed.
 *
 * Identity is typographic, not painted: cards sit on the same white site surface
 * as essays (no warm tan), and the Playfair dateline masthead + serif body do all
 * the differentiating work. See docs/dispatches-plan.md. All values are theme
 * tokens (colors/spacing/typography/effects) per the no-hardcoded-values rule.
 */

/* --space-xl top: the site-wide opening inset, above the LOCKED 4.5rem
 * .main-content header clearance (layout.css), which is left untouched. Was
 * --space-2xl for "extra breathing room" when the header was a taller two-row
 * block; it is one slim 4rem row now, so the extra step just read as a gap. */
.dispatches-page {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-3xl);
}

/* Left-aligned rather than centred: the genre and writer index pages set the
   site's index-page pattern (left title, left intro), and a centred hero made
   Dispatches read as a different site.

   Width and auto margin MATCH .dispatches-feed below (40rem, centred) so the
   title sits flush with the left edge of the cards it introduces. Flushing it
   to the page gutter instead would strand it far to their left, since the feed
   is a narrow centred column, not a full-width grid. */
.dispatches-hero {
  max-width: 40rem;
  margin: 0 auto var(--space-xl);
}

/* This page loads only dispatches.css, so the shared .page-title class it uses
   in the template has no definition here — it rendered at browser-default h1
   size. Set it to the same geometry as .genre-index-title / .writer-index-title
   so every index page opens identically. */
.dispatches-page .page-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-page-title);
  color: var(--color-heading-text);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-xs);
  text-align: left;
}

.dispatches-deck {
  margin-top: 0;
  font-family: var(--font-content);
  color: var(--color-subtle-text);
  line-height: var(--line-height-relaxed);
}

.dispatches-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  max-width: 40rem;
  margin: 0 auto;
}

/* ---- The card ---- */

.dispatch-card {
  position: relative;
  background: var(--color-bg-card);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-xl);
  transition: box-shadow var(--transition-smooth);
}

.dispatch-card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* The whole card is a click target in the feed (a stretched overlay link); the
 * detail page renders without it. */
.dispatch-card__permalink {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.dispatch-card__permalink:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Real links and the Spotify player sit above the overlay so they stay
 * clickable inside the otherwise-clickable card. */
.dispatch-card__body a,
.dispatch-card__chips a,
.dispatch-card__author,
.dispatch-card__spotify {
  position: relative;
  z-index: 2;
}

.dispatch-card__masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--space-md);
}

.dispatch-card__series {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold-heading);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-heading-text);
}

.dispatch-card__date {
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
  color: var(--color-subtle-text);
  white-space: nowrap;
}

/* Byline — the signed correspondent line, just under the masthead rule. Small
 * UI type, muted, with the author name in the body serif so it reads as a name,
 * not a label. */
.dispatch-card__byline {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
  color: var(--color-subtle-text);
}

.dispatch-card__author {
  font-family: var(--font-content);
  font-style: italic;
  color: var(--color-body-text);
  text-decoration: none;
}

.dispatch-card__author:hover,
.dispatch-card__author:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
}

.dispatch-card__body {
  font-family: var(--font-content);
  line-height: var(--line-height-body);
  color: var(--color-body-text);
}

.dispatch-card__body :first-child {
  margin-top: 0;
}

.dispatch-card__body :last-child {
  margin-bottom: 0;
}

/* Quote-pairings: a left rule + muted italic attribution, so a blockquote reads
 * like the book it's quoting. */
.dispatch-card__body blockquote {
  margin: var(--space-md) 0;
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-border);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Source line: a wholly-italic paragraph right after a quote (e.g.
 * "*— John le Carré, Call for the Dead*") is the attribution. Set it as formal
 * correspondence — flush right under the quote, smaller, muted, in the same serif
 * as the body — so it reads as a signed citation, not stray prose. Scoped with
 * :has() so ordinary prose after a quote is untouched. Dispatch-only. */
.dispatch-card__body blockquote + p:has(> em:only-child) {
  margin-top: calc(var(--space-md) * -1 + var(--space-xs));
  margin-bottom: var(--space-lg);
  padding-right: var(--space-md);
  text-align: right;
  font-family: var(--font-content);
  font-size: var(--font-size-small);
  color: var(--color-subtle-text);
  letter-spacing: 0.02em;
}

.dispatch-card__body blockquote + p:has(> em:only-child) em {
  font-style: italic;
}

.dispatch-card__figure {
  margin: var(--space-lg) 0 0;
}

.dispatch-card__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* Gallery grid for 2–3 photos. A single photo keeps the full-width look. With
 * two, an even 2-up. With three, the lead photo spans the top row and the two
 * extras share the row below — a small "postcard set" without new design tokens. */
.dispatch-card__figure--count-2,
.dispatch-card__figure--count-3 {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(2, 1fr);
}

.dispatch-card__figure--count-2 .dispatch-card__image,
.dispatch-card__figure--count-3 .dispatch-card__image {
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.dispatch-card__figure--count-3 .dispatch-card__image:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

.dispatch-card__spotify {
  margin-top: var(--space-lg);
}

.dispatch-card__spotify iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--radius-md);
}

/* ---- Subject chips ---- */

.dispatch-card__subjects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-divider);
}

.dispatch-card__subjects-label {
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-subtle-text);
}

.dispatch-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.dispatch-chip {
  display: inline-block;
  padding: var(--space-xxs) var(--space-sm);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
  color: var(--color-accent);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.dispatch-chip:hover,
.dispatch-chip:focus-visible {
  background: var(--color-accent);
  color: var(--color-white);
}

/* ---- Detail page ---- */

.dispatch-detail-page {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.dispatch-card--detail {
  max-width: 38rem;
  margin: 0 auto;
}

.dispatch-detail-back {
  max-width: 38rem;
  margin: var(--space-xl) auto 0;
  text-align: center;
}

.dispatches-empty {
  text-align: center;
  font-family: var(--font-content);
  color: var(--color-subtle-text);
}

@media (prefers-reduced-motion: reduce) {
  .dispatch-card,
  .dispatch-chip {
    transition: none;
  }
}