/* Blog post template — single post page styling */

.post {
  max-width: 920px;
  margin: 0 auto;
  padding: 3.5rem 0 4rem;
}

/* Breadcrumb sits where the old "← all posts" back link used to. It
   gives section context (home / blog / current) now that the dock no
   longer highlights "blog" while you're reading a post. The current
   page segment is plain text — no self-link — and truncates with an
   ellipsis so long titles don't push the row off-screen on mobile. */
.post__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-label);
  margin-bottom: 2rem;
  min-width: 0;
}
.post__breadcrumb a {
  color: var(--color-text-label);
  transition: color var(--transition-fast);
}
.post__breadcrumb a:hover { color: var(--color-red-bright); }
.post__breadcrumb__sep {
  color: var(--color-text-muted);
  opacity: 0.6;
}
.post__breadcrumb__current {
  /* Brand red marks "you are here" — same accent the site uses for
     active states elsewhere, and clearly distinct from the muted gray
     of the upstream links. */
  color: var(--color-red-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.post__header { margin-bottom: 2.5rem; }
.post__title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.post__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.post__date {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-label);
}

/* Body — reading-width container, generous leading. Typography rules
   are shared with the homepage super-featured card (which wraps its
   body in the same .post__body class, see css/featured.css). */
.post__body {
  max-width: 680px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.5;
  /* Cornsilk cream for easy long-form reading (Neithan-style). Lower-
     emphasis elements like list items and captions stay dimmer below. */
  color: var(--color-body-text);
}

/* On the standalone blog post page the title, meta, featured image and
   body all live inside a .post__card wrapper that mirrors the homepage
   super-featured container — translucent dark well, faint red border,
   chunky corners, backdrop blur, soft halo. The card itself caps the
   reading width; .post__body inside it sheds its own width/margin
   constraints and just fills the card's inner column. */
.post__card {
  max-width: 880px;
  margin: 0 auto 2rem;
  padding: 2.4rem 2.6rem 2.2rem;
  background: rgba(36, 26, 28, 0.4);
  border: 1px solid rgba(179, 0, 0, 0.18);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 18px rgba(139, 0, 0, 0.12);
}

.post__card .post__header { margin-bottom: 1.5rem; }
.post__card .post__body { max-width: none; margin: 0; }

/* Meta row sits inside the dark well — global tag-pill borders use
   --color-border (#1e1e1e) which disappears against the card's warm
   translucent bg. Locally we tint the pills with a red-subtle fill and
   a visible red border so they read as actual chips, and we shift the
   date to a cooler/dimmer mono so it doesn't fight the warm body text
   or the warm-red pills. */
.post__card .post__date {
  color: var(--color-date);
}

/* Pills inside the translucent red-tinted card surfaces — blog post
   meta row, homepage super-featured tag row, and the spotlight cards
   (which double as related-post cards on blog posts via .spotlight-card
   markup). Shared visual treatment first (red-tint chip on warm well),
   then two size variants below. */
.post__card .post__meta .tag-pill,
.sf-article__tag-row .tag-pill,
.spotlight-card__tags .tag-pill,
.archive-featured__tags .tag-pill,
.archive-row__tags .tag-pill {
  background: rgba(139, 0, 0, 0.14);
  border-color: rgba(204, 80, 80, 0.35);
  border-radius: 999px;
  color: #d4a8a8;
}
.post__card .post__meta .tag-pill:hover,
.sf-article__tag-row .tag-pill:hover,
.spotlight-card__tags .tag-pill:hover,
.archive-featured__tags .tag-pill:hover,
.archive-row__tags .tag-pill:hover {
  background: rgba(139, 0, 0, 0.28);
  border-color: var(--color-red-bright);
  color: var(--color-text);
}

/* Meta-row sizing — pills sit alongside the date in an article header.
   Archive row + featured tags get the same sizing so the /blog/ page
   reads as a sibling of the post-page header rather than louder. */
.post__card .post__meta .tag-pill,
.sf-article__tag-row .tag-pill,
.archive-featured__tags .tag-pill,
.archive-row__tags .tag-pill {
  font-size: 0.55rem;
  padding: 0.1rem 0.55rem;
}

/* Preview-card sizing — smaller pills inside grid card previews
   (homepage spotlight cards + blog-post related cards). */
.spotlight-card__tags .tag-pill {
  font-size: 0.5rem;
  padding: 0.05rem 0.4rem;
}

.post__body > * + * { margin-top: 0.4rem; }
.post__body p { color: var(--color-body-text); }

.post__body h2,
.post__body h3 {
  font-family: var(--font-title);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin-top: 2.2rem;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.post__body h2 { font-size: 1.5rem; }
.post__body h3 { font-size: 1.2rem; }

.post__body strong { color: var(--color-text); font-weight: 600; }
.post__body em { font-style: italic; }

.post__body a {
  color: var(--color-red-bright);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}
.post__body a:hover { border-bottom-color: var(--color-red-bright); }

.post__body blockquote {
  border-left: 3px solid var(--color-red);
  padding: 0.3rem 0 0.3rem 1.25rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--color-text-label);
}

.post__body ul, .post__body ol { padding-left: 1.4rem; }
.post__body ul { list-style: disc; }
.post__body ol { list-style: decimal; }
.post__body li { margin-top: 0.4rem; color: var(--color-body-text); }
.post__body li::marker { color: var(--color-red); }

.post__body code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 0.1rem 0.35rem;
  color: var(--color-text);
}
.post__body pre {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1rem 1.2rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}
.post__body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--color-text);
}

.post__body img {
  width: 100%;
  border-radius: 3px;
  margin: 1.5rem 0;
  cursor: zoom-in;
  transition: opacity var(--transition-fast);
}
.post__body img:hover { opacity: 0.92; }

.post__body figure { margin: 1.5rem 0; }
.post__body figcaption {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 0.5rem;
}

/* Captioned single image — block wrapper that keeps the caption tied
   to the image when resized/aligned via inline styles on .post__figure
   (same shorthand-vs-longhand cascade applies as for .post__video). */
.post__figure { margin: 1.5rem 0; }
.post__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  margin: 0;
  cursor: zoom-in;
}
.post__figure figcaption {
  margin-top: 0.5rem;
}

/* Image gallery — auto-grouped from consecutive <img> tags in the body */
.post__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
  margin: 1.5rem 0;
}
.post__gallery > img,
.post__gallery > figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0;
  border-radius: 3px;
  cursor: zoom-in;
}
/* Cells that carry a caption are <figure> with a figcaption underneath
   the square image; align the caption to the image and keep the grid's
   auto-row sizing so non-captioned cells stay tight. */
.post__gallery > figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.post__gallery > figure figcaption {
  margin-top: 0.35rem;
  text-align: center;
}

/* Carousel — inserted explicitly from admin via the 'car' toolbar button.
   JS in blog-post-render.js wraps imgs in a track and adds prev/next + dots. */
.post__carousel {
  position: relative;
  margin: 1.5rem 0;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}
.post__carousel-track {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--color-bg);
}
.post__carousel-track img,
.post__carousel-track > figure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.post__carousel-track img { object-fit: contain; cursor: zoom-in; border-radius: 0; }
.post__carousel-track img.active,
.post__carousel-track > figure.active { opacity: 1; }
.post__carousel-track > figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  cursor: zoom-in;
  border-radius: 0;
  transition: none;
}
/* Per-slide caption overlay — sits along the bottom of the track inside
   the figure so it slides in/out with its slide. Semi-transparent bar
   keeps it readable against any image. */
.post__carousel-track > figure figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0.6rem 0.9rem;
  background: rgba(0, 0, 0, 0.55);
  color: var(--color-text);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  z-index: 1;
}
.post__carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}
.post__carousel-nav:hover { background: var(--color-red); }
.post__carousel-nav--prev { left: 0.75rem; }
.post__carousel-nav--next { right: 0.75rem; }
.post__carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem;
  background: var(--color-bg-elevated);
}
.post__carousel-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast);
}
.post__carousel-dots .dot:hover { background: var(--color-text-muted); }
.post__carousel-dots .dot.active { background: var(--color-red); }

/* Video — inserted via the admin's "vid" toolbar button. Either an
   uploaded <video> file or an <iframe> embed (YouTube/Vimeo). Embed
   variants are forced into a 16:9 box; file variants honor the video's
   intrinsic ratio so a vertical clip doesn't get letterboxed. */
.post__video {
  margin: 1.5rem 0;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}
.post__video video {
  display: block;
  width: 100%;
  max-height: 70vh;
  background: #000;
}
/* Embed wrapper holds an inner aspect-ratio frame around the iframe so
   the figcaption can sit as a flow sibling below it (matching the
   file-kind layout) instead of overlaying the iframe controls. */
.post__video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
}
.post__video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Caption sits below the player but stays inside the wrapper's bg well
   so it visually belongs to the video; padded over the dark surface.
   Same rule applies to file and embed kinds. */
.post__video figcaption {
  margin: 0;
  padding: 0.5rem 0.8rem 0.65rem;
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  text-align: center;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
  cursor: zoom-out;
}
.lightbox.visible { opacity: 1; pointer-events: auto; }
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}
.lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.lightbox__close:hover { border-color: var(--color-red); background: var(--color-red-subtle); }

/* Share */
.post__share {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 3rem 0 2rem;
  padding: 1.25rem 0;
  /* Subtle red-tinted rules instead of --color-border (#1e1e1e), which
     was effectively invisible against the page bg. */
  border-top: 1px solid rgba(204, 80, 80, 0.15);
  border-bottom: 1px solid rgba(204, 80, 80, 0.15);
  flex-wrap: wrap;
}
.post__share-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-label);
  margin-right: 0.4rem;
}
.post__share button {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.45rem 1rem;
  /* Same red-tint chip treatment as the tag pills inside the post card,
     so all "interactable mono labels" on the page share one visual
     language. */
  background: rgba(139, 0, 0, 0.1);
  border: 1px solid rgba(204, 80, 80, 0.3);
  color: var(--color-text-label);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.post__share button:hover {
  background: rgba(139, 0, 0, 0.25);
  border-color: var(--color-red-bright);
  color: var(--color-text);
  box-shadow: 0 0 12px var(--color-red-glow);
}

/* Prev/Next nav */
.post__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2rem 0;
}
.post__nav-link {
  display: block;
  padding: 1rem 1.2rem;
  /* Mini translucent well — same chrome family as the .post__card
     above, just lighter (smaller halo, no blur) so the article card
     stays the visual anchor. */
  border: 1px solid rgba(204, 80, 80, 0.2);
  border-radius: 10px;
  background: rgba(36, 26, 28, 0.4);
  transition: all var(--transition-base);
}
.post__nav-link:hover {
  border-color: var(--color-red-bright);
  box-shadow: 0 0 18px var(--color-red-glow);
}
.post__nav-link--next { text-align: right; }
.post__nav-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-label);
  margin-bottom: 0.35rem;
}
.post__nav-title {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  line-height: 1.45;
}
.post__nav-link:hover .post__nav-title { color: var(--color-text); }
.post__nav-empty { visibility: hidden; }

/* Related posts — reuses .spotlight-card markup so we don't duplicate
   the inner card layout, but lives in its own .post__related-grid
   wrapper (not .spotlight-grid) so Spotlight.init() skips it. Inside
   this wrapper we override the cursor-glow visuals so each card reads
   as a plain translucent well with a red-border hover. */
.post__related {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(204, 80, 80, 0.15);
}
.post__related-title {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-label);
  margin-bottom: 1rem;
}
.post__related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.post__related-grid .spotlight-card {
  /* Strip the cursor-tracking radial-gradient bg from the base
     .spotlight-card and replace with a static translucent well + warm
     border, matching the rest of the post page's chrome family. */
  background: rgba(36, 26, 28, 0.4);
  border: 1px solid rgba(204, 80, 80, 0.2);
  border-radius: 14px;
  padding: 0;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.post__related-grid .spotlight-card:hover {
  border-color: var(--color-red-bright);
  box-shadow: 0 0 18px var(--color-red-glow);
  /* Cancel the base card's lift — borders alone do the work here. */
  transform: none;
}
/* Surface flashlight is unused without the spotlight binding. */
.post__related-grid .spotlight-card__glow { display: none; }
.post__related-grid .spotlight-card__inner {
  background: transparent;
  border-radius: 13px;
}

@media (max-width: 768px) {
  .post__related-grid { grid-template-columns: 1fr; }
}

/* Loading / 404 states */
.post__loading,
.post__missing {
  text-align: center;
  padding: 5rem 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.post__missing a {
  display: inline-block;
  margin-top: 1rem;
  color: var(--color-red-bright);
}

@media (max-width: 600px) {
  .post { padding: 2.5rem 0 3rem; }
  .post__card { padding: 1.5rem 1.25rem 1.4rem; border-radius: 12px; }
  .post__nav { grid-template-columns: 1fr; }
  .post__nav-link--next { text-align: left; }
}

/* Invisible sentinel for analytics — flips reachedEnd when it scrolls into
   view. Injected by js/blog-post-render.js after .post__body. Stays in the
   layout flow so its position genuinely tracks "end of article text". */
.post__end-sentinel {
  width: 1px;
  height: 1px;
  pointer-events: none;
  opacity: 0;
}