/* =========================================================================
   BROADSIDE — Field Notes blog components
   css/blog.css · listing + post pages generated by build-site.mjs
   -------------------------------------------------------------------------
   Ported from the chosen "Field Notes" direction (review/blog-mockups/a-*).
   Components consume semantic tokens only.
   ========================================================================= */

/* Compact dark hero band (listing and post) */
.rn-blog-hero { padding: var(--space-section-tight) 0; }
.rn-blog-hero__inner { max-width: var(--headline-max); }
.rn-blog-hero h1 { margin: var(--space-5) 0 0; }
.rn-blog-hero .rn-lead { margin-top: var(--space-5); max-width: var(--prose-max); }

/* Category eyebrow linking back to the listing */
.rn-blog-crumb { text-decoration: none; }
.rn-blog-crumb:hover { color: var(--text-heading); }

/* Byline / meta rows in mono */
.rn-blog-byline,
.rn-blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--text-ink-faint);
  font-family: var(--font-mono);
  font-size: var(--text-legal);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.rn-blog-byline { margin: var(--space-6) 0 0; color: var(--text-muted); }
.rn-blog-meta { margin: var(--space-5) 0 0; }

/* Category chip */
.rn-blog-chip {
  display: inline-block;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border: var(--border-width-hair) solid var(--border-on-paper);
  border-radius: var(--radius-chip);
  color: var(--accent-system-ink);
  background: var(--surface-paper-alt);
  font-family: var(--font-mono);
  font-size: var(--text-legal);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* Featured note — horizontal bridge card with a teal top rule */
.rn-blog-featured {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  overflow: hidden;
  border: var(--border-width-hair) solid var(--bridge-card-border);
  border-top: var(--bridge-card-rule-width) solid var(--bridge-card-rule);
  border-radius: var(--bridge-card-radius);
  background: var(--bridge-card-face);
  box-shadow: var(--bridge-card-shadow);
  transition:
    transform var(--bridge-motion-fast) var(--ease),
    border-color var(--bridge-motion-fast) ease,
    box-shadow var(--bridge-motion-fast) ease;
}
.rn-blog-featured__media { min-height: 100%; }
.rn-blog-featured__media picture,
.rn-blog-featured__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rn-blog-featured__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-card-sm);
}
.rn-blog-featured__title {
  margin: var(--space-4) 0 0;
  font-family: var(--bridge-font-display);
  font-size: var(--text-h3);
  font-weight: var(--bridge-display-weight);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
}
.rn-blog-featured__title a,
.rn-blog-card__title a { color: var(--text-ink); text-decoration: none; }
.rn-blog-featured__title a::after,
.rn-blog-card__title a::after { position: absolute; inset: 0; content: ""; }
.rn-blog-featured__excerpt {
  margin: var(--space-4) 0 0;
  color: var(--text-ink-soft);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
.rn-blog-featured__more {
  margin-top: var(--space-5);
  color: var(--accent-system-ink);
  font-family: var(--font-heading);
  font-weight: var(--weight-semi);
  font-size: var(--text-sm);
}
.rn-blog-featured__more::after { content: " →"; opacity: var(--bridge-action-arrow-opacity); }

/* Note grid — bridge card construction, image top */
.rn-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-panel);
  margin-top: var(--gap-panel);
}
.rn-blog-grid--related { margin-top: var(--space-block); }
.rn-blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--border-width-hair) solid var(--bridge-card-border);
  border-radius: var(--bridge-card-radius);
  background: var(--bridge-card-face);
  box-shadow: var(--bridge-tile-shadow);
  transition:
    transform var(--bridge-motion-fast) var(--ease),
    border-color var(--bridge-motion-fast) ease,
    box-shadow var(--bridge-motion-fast) ease;
}
.rn-blog-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.rn-blog-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-6) var(--space-5) var(--space-7);
}
.rn-blog-card__title {
  margin: var(--space-4) 0 0;
  font-family: var(--bridge-font-display);
  font-size: var(--text-h5);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
}
.rn-blog-card__excerpt {
  margin: var(--space-3) 0 0;
  color: var(--text-ink-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.rn-blog-card .rn-blog-meta { margin-top: auto; padding-top: var(--space-5); }

/* Hover — subtle lift + border shift per bridge tokens */
@media (hover: hover) and (pointer: fine) {
  .rn-blog-featured:hover,
  .rn-blog-card:hover {
    border-color: var(--bridge-card-border-hover);
    box-shadow: var(--bridge-card-shadow-hover);
    transform: translateY(var(--bridge-card-lift));
  }
  .rn-blog-featured:hover { border-top-color: var(--bridge-card-rule); }
  .rn-blog-featured:hover .rn-blog-featured__title a,
  .rn-blog-card:hover .rn-blog-card__title a { color: var(--accent-system-ink); }
}

/* Lead image above the prose column */
.rn-blog-figure {
  max-width: var(--prose-wide);
  margin: 0 auto var(--space-block);
}
.rn-blog-article .rn-blog-figure--body { max-width: none; margin: var(--space-8) 0 0; }
.rn-blog-figure--embed iframe { display: block; width: 100%; border: var(--border-width-hair) solid var(--border-on-paper); box-shadow: var(--bridge-card-shadow); background: var(--surface-paper, #fff); }
.rn-blog-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--border-width-hair) solid var(--border-on-paper);
  box-shadow: var(--bridge-card-shadow);
}
.rn-blog-figure figcaption {
  margin-top: var(--space-3);
  color: var(--text-ink-faint);
  font-family: var(--font-mono);
  font-size: var(--text-legal);
  letter-spacing: var(--tracking-label);
}

/* Centered prose column */
.rn-blog-article { max-width: var(--prose-max); margin-inline: auto; }
.rn-blog-article > p {
  margin: var(--space-5) 0 0;
  color: var(--text-ink);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
.rn-blog-article h2 {
  margin: var(--space-10) 0 0;
  color: var(--text-ink);
  font-family: var(--bridge-font-display);
  font-size: var(--text-h4);
  font-weight: var(--bridge-display-weight);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
}
.rn-blog-article h2::before {
  display: block;
  width: var(--space-10);
  height: var(--border-width-accent);
  margin-bottom: var(--space-4);
  background: var(--bridge-card-rule);
  content: "";
}
.rn-blog-article h3 {
  margin: var(--space-8) 0 0;
  color: var(--text-ink);
  font-family: var(--font-heading);
  font-size: var(--text-h5);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
}
.rn-blog-article a { color: var(--accent-system-ink); }
.rn-blog-article ul {
  margin: var(--space-5) 0 0;
  padding-left: var(--space-6);
}
.rn-blog-article li {
  margin-top: var(--space-3);
  color: var(--text-ink);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
.rn-blog-article li::marker { color: var(--accent-system-ink); }
.rn-blog-article li strong { font-weight: var(--weight-semi); }

/* The pull quote — editorial rail treatment */
.rn-blog-article blockquote {
  margin: var(--space-9) 0 0;
  padding-left: var(--space-7);
  border-left: var(--bridge-card-rule-width) solid var(--bridge-card-rule);
}
.rn-blog-article blockquote p {
  margin: 0;
  color: var(--text-ink);
  font-family: var(--bridge-font-display);
  font-size: var(--text-h2-alt);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-normal);
}

/* Closing CTA band + related head */
.rn-blog-cta__inner { max-width: var(--prose-wide); text-align: center; }
.rn-blog-cta__inner .rn-lead { margin-inline: auto; }
.rn-blog-related__head { max-width: var(--headline-max); }

@media (max-width: 980px) {
  .rn-blog-featured { grid-template-columns: 1fr; }
  .rn-blog-featured__media img { height: auto; aspect-ratio: 16 / 9; }
  .rn-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .rn-blog-grid { grid-template-columns: 1fr; }
  .rn-blog-article blockquote { padding-left: var(--space-5); }
}