/* ============================================================
 * Satya v26 — Posts (blog) per-view sheet
 * ------------------------------------------------------------
 * Loaded (guarded) by the v26 posts views: index / my-posts / show.
 * The v26 chrome auto-loads only base.css + button.css, so the few
 * primitives base.css genuinely lacks live here. Color comes ONLY from
 * theme tokens — never a raw hex — so light/dark + themes keep working.
 *
 * Justified classes (each absent from base.css):
 *   .post-thumb (+--wide)  Fixed-ratio cover media for post cards / heroes.
 *                          Media geometry — same rationale as
 *                          dashboard.css's product-thumbnail exception.
 *   .post-hero             Featured-post split (media | copy) that collapses
 *                          to one column; base has no media-split card.
 *   .post-meta             Inline byline row (avatar · author · date · read),
 *                          wrapping — small, recurs across index + show.
 *   .post-prose            Reading typography for the RAW POST HTML
 *                          (h2/p/ul/blockquote/img/code) that base.css
 *                          deliberately does not style inside a card.
 *   .post-comments (shim)  The reused legacy comments partial is authored in
 *                          Tailwind utilities; the v26 chrome ships NO Tailwind,
 *                          so this minimal token-based shim restores avatar
 *                          sizing, comment/reply flex rows, reply indentation,
 *                          and input/button styling. (Colors already resolve —
 *                          theme-system.css defines .text-*/.bg-* as real CSS.)
 * ============================================================ */

/* ── Cover media ─────────────────────────────────────────────── */
/* 16:9 throughout: post_featured pins that ratio server-side, so any other box
   shape re-crops what the author framed. --wide keeps only its larger radius. */
.post-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
}
.post-thumb--wide {
  border-radius: var(--radius-lg);
}

/* ── Featured hero (index) ───────────────────────────────────── */
.post-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-space-5);
  align-items: center;
}
.post-hero__media { aspect-ratio: 16 / 9; }
@media (max-width: 720px) {
  .post-hero { grid-template-columns: 1fr; }
}

/* ── Byline row ──────────────────────────────────────────────── */
.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-space-2) var(--s-space-3);
  font-size: var(--s-text-sm);
  color: var(--text-tertiary);
}
.post-meta__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-1);
}
.post-meta a {
  color: var(--text-secondary);
  font-weight: 500;
  text-decoration: none;
}
.post-meta a:hover { color: var(--brand-primary); }

/* ── Article prose (raw post HTML) ───────────────────────────── */
.post-prose {
  color: var(--text-secondary);
  font-size: var(--s-text-base);
  line-height: 1.75;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.post-prose > * + * { margin-top: var(--s-space-4); }
.post-prose h2 {
  font-size: var(--s-h2);
  font-weight: 700;
  color: var(--text-primary);
  margin-top: var(--s-space-6);
}
.post-prose h3 {
  font-size: var(--s-h3);
  font-weight: 600;
  color: var(--text-primary);
  margin-top: var(--s-space-5);
}
.post-prose a {
  color: var(--brand-primary);
  text-decoration: underline;
}
.post-prose img,
.post-prose video {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.post-prose blockquote {
  border-left: 3px solid var(--brand-primary);
  padding-left: var(--s-space-4);
  color: var(--text-tertiary);
  font-style: italic;
}
.post-prose ul,
.post-prose ol { padding-left: var(--s-space-5); }
.post-prose li + li { margin-top: var(--s-space-2); }
.post-prose code {
  background: var(--bg-secondary);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-md);
  font-size: 0.9em;
}
.post-prose pre {
  background: var(--bg-secondary);
  padding: var(--s-space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

/* ── Comments partial layout shim (reused, Tailwind-authored) ─── */
.post-comments .comments-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-5);
}
/* avatar row: avatar | body */
.post-comments .comment-item > div:first-child {
  display: flex;
  align-items: flex-start;
  gap: var(--s-space-3);
}
.post-comments .comment-item .flex-1 { flex: 1; min-width: 0; }
/* renderAvatar emits Tailwind size classes that carry no size here */
.post-comments .comment-item img {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  object-fit: cover;
  flex-shrink: 0;
}
.post-comments .replies {
  margin-top: var(--s-space-4);
  padding-left: var(--s-space-4);
  border-left: 2px solid var(--border-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--s-space-5);
}
.post-comments .replies img { width: 2rem; height: 2rem; }
.post-comments .comment-actions {
  display: flex;
  align-items: center;
  gap: var(--s-space-4);
  margin-top: var(--s-space-2);
}
/* main compose form */
.post-comments #mainCommentForm {
  display: flex;
  gap: var(--s-space-3);
  margin-bottom: var(--s-space-5);
}
.post-comments #mainCommentForm .flex-1 { flex: 1; min-width: 0; }
/* inputs — mirror .s-input / .s-textarea (Tailwind border utilities are gone) */
.post-comments textarea,
.post-comments input[type="text"] {
  width: 100%;
  padding: var(--s-space-3);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--s-text-sm);
}
.post-comments textarea:focus,
.post-comments input[type="text"]:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--primary-100);
}
/* submit buttons — mirror .sat-btn--primary shape */
.post-comments button[type="submit"] {
  border: none;
  padding: var(--s-space-2) var(--s-space-4);
  border-radius: var(--radius-md);
  background: var(--brand-primary);
  color: var(--text-inverse, #fff);
  font: inherit;
  font-size: var(--s-text-sm);
  font-weight: 500;
  cursor: pointer;
}
.post-comments button[type="submit"]:disabled { opacity: 0.5; cursor: not-allowed; }
/* quiet text buttons (reply / edit / delete / flag / cancel) */
.post-comments .comment-actions button,
.post-comments .cancel-reply,
.post-comments .cancel-edit {
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--s-text-xs);
  color: var(--text-tertiary);
}
.post-comments .comment-actions button:hover { color: var(--text-primary); }
.post-comments .reply-form,
.post-comments .edit-form { margin-top: var(--s-space-3); }
.post-comments .reply-form form,
.post-comments .edit-form form {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
}
/* Delete-comment modal — CommentManager toggles .hidden/.flex (Tailwind gone) */
.post-comments #deleteCommentModal.flex {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-space-4);
  background: var(--s-overlay);
}
.post-comments #deleteCommentModal > div {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--s-space-5);
  width: 100%;
  max-width: 24rem;
}
.post-comments .confirm-delete {
  background: var(--error);
  color: var(--text-inverse, #fff);
  border: none;
  padding: var(--s-space-2) var(--s-space-4);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--s-text-sm);
  font-weight: 500;
  cursor: pointer;
}
.post-comments .cancel-delete {
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--s-text-sm);
  color: var(--text-tertiary);
}