/*
 * 12-post.css — Single blog post page
 * ──────────────────────────────────────
 * Covers:
 *   - Post header (title, date, tags)
 *   - .prose — all rendered markdown output (headings, paragraphs, lists,
 *     blockquotes, tables, code, figures, embeds)
 *   - Media shortcodes (YouTube, local video)
 */

/* ══ Post layout ═════════════════════════════════════════════════════════════ */

.post-container {
  max-width: var(--container-narrow);
  padding-block: var(--sp-10) var(--sp-24);
}

.post-header {
  margin-bottom: var(--sp-10);
}

.post-header-meta {
  display:     flex;
  align-items: center;
  gap:         var(--sp-5);
  margin-bottom: var(--sp-5);
}

.post-title {
  font-family:    var(--font-display);
  font-size:      var(--text-3xl);
  font-weight:    400;
  line-height:    1.15;
  letter-spacing: -0.02em;
  color:          var(--color-text);
  margin-bottom:  var(--sp-4);
}

.post-footer {
  margin-top:    var(--sp-16);
  padding-top:   var(--sp-8);
  border-top:    1px solid var(--color-border);
}


/* ══ Prose ═══════════════════════════════════════════════════════════════════ */
/*
 * All markdown output is wrapped in <div class="prose">.
 * Selectors are scoped so they don't bleed into nav/footer.
 */

.prose {
  font-size:   var(--text-md);
  line-height: 1.75;
  color:       var(--color-text);
}

/* ── Headings ── */
.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  font-family:    var(--font-display);
  font-weight:    400;
  line-height:    1.2;
  letter-spacing: -0.015em;
  color:          var(--color-text);
  margin-top:     1.8em;
  margin-bottom:  0.5em;
}
.prose h1 { font-size: var(--text-2xl); }
.prose h2 { font-size: var(--text-xl); border-bottom: 1px solid var(--color-border); padding-bottom: 0.3em; }
.prose h3 { font-size: var(--text-lg); }
.prose h4 { font-size: var(--text-md); font-weight: 500; }

/* ── Paragraphs ── */
.prose p { margin-bottom: 1.25em; }

/* ── Links ── */
.prose a { text-decoration-thickness: 1px; }

/* ── Lists ── */
.prose ul,
.prose ol {
  margin-bottom: 1.25em;
  padding-left:  1.5em;
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.4em; }
.prose li > p { margin-bottom: 0.4em; }

/* ── Blockquote ── */
.prose blockquote {
  margin:        1.5em 0;
  padding:       var(--sp-4) var(--sp-6);
  border-left:   4px solid var(--color-accent);
  background:    var(--color-bg-subtle);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color:         var(--color-text-muted);
  font-style:    italic;
}
.prose blockquote p { margin: 0; }

/* ── Horizontal rule ── */
.prose hr {
  border: none;
  border-top: 1px solid var(--color-border-strong);
  margin-block: 2.5em;
}

/* ── Inline code ── */
.prose code:not([class]) {
  font-family:    var(--font-mono);
  font-size:      0.875em;
  background:     var(--color-bg-subtle);
  color:          var(--color-accent);
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-sm);
  padding:        0.15em 0.4em;
}

/* ── Code block (fenced) ── */
.prose pre {
  background:    var(--color-bg-code);
  border-radius: var(--radius-md);
  padding:       var(--sp-5) var(--sp-6);
  overflow-x:    auto;
  margin-block:  1.5em;
  font-size:     var(--text-sm);
  line-height:   1.6;
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #3d3f4d transparent;
}
.prose pre code {
  background:  none !important;
  border:      none !important;
  padding:     0 !important;
  color:       #abb2bf;
  font-family: var(--font-mono);
  font-size:   inherit;
}

/* ── Tables ── */
.prose table {
  width:           100%;
  border-collapse: collapse;
  margin-block:    1.5em;
  font-size:       var(--text-base);
}
.prose thead {
  background:  var(--color-bg-subtle);
  border-bottom: 2px solid var(--color-border-strong);
}
.prose th {
  padding:        var(--sp-3) var(--sp-4);
  text-align:     left;
  font-weight:    600;
  font-size:      var(--text-sm);
  letter-spacing: 0.03em;
  color:          var(--color-text-muted);
}
.prose td {
  padding:     var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.prose tr:last-child td { border-bottom: none; }
.prose tr:hover td { background: var(--color-bg-subtle); }

/* ── Footnotes ── */
.prose .footnote { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ── Images inline ── */
.prose img {
  border-radius: var(--radius-md);
  margin-block:  1em;
}


/* ══ Figures (from {{< figure >}} shortcode) ═════════════════════════════════ */

.post-figure,
.media-figure {
  margin-block: 2em;
  text-align:   center;
}

.post-figure img {
  border-radius: var(--radius-md);
  max-width:     100%;
  margin-inline: auto;
  border:        1px solid var(--color-border);
}

/* Wide figures break out of the prose column slightly */
.figure-wide {
  margin-inline: calc(-1 * var(--sp-8));
}
.figure-wide img { max-width: calc(100% + var(--sp-16)); border-radius: var(--radius-lg); }

figcaption {
  margin-top:  var(--sp-2);
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
  font-style:  italic;
  line-height: 1.5;
}


/* ══ Video (from {{< video >}} shortcode) ════════════════════════════════════ */

.media-figure video {
  width:         100%;
  border-radius: var(--radius-md);
  border:        1px solid var(--color-border);
}


/* ══ YouTube embed (from {{< youtube >}} shortcode) ══════════════════════════ */

.embed-wrap {
  margin-block: 2em;
}

.embed-youtube {
  position:       relative;
  padding-bottom: 56.25%;   /* 16:9 aspect ratio */
  height:         0;
  overflow:       hidden;
  border-radius:  var(--radius-md);
  border:         1px solid var(--color-border);
}

.embed-youtube iframe {
  position: absolute;
  top:      0;
  left:     0;
  width:    100%;
  height:   100%;
  border:   none;
}


/* ══ Responsive ══════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .post-container { padding-block: var(--sp-8) var(--sp-16); }
  .post-title     { font-size: var(--text-2xl); }
  .figure-wide    { margin-inline: 0; }
  .figure-wide img { max-width: 100%; }
}