/* ============================================================
   BLOG.CSS — Blog index + blog post shared styles
   ============================================================ */

/* ── Blog hero (same language as other page heroes) ── */
.blog-hero {
  padding: calc(var(--nav-height) + var(--space-2xl)) var(--space-lg) var(--space-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.blog-hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 65% 50% at 50% 100%, rgba(201,169,110,0.055) 0%, transparent 68%);
  pointer-events: none;
}
.blog-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,169,110,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,169,110,0.022) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.blog-hero-content {
  position: relative; z-index: 2;
  max-width: 620px; margin: 0 auto;
}

/* ── Blog index grid ── */
.blog-index {
  padding: var(--space-xl) var(--space-lg) var(--space-2xl);
  max-width: var(--max-width);
  margin: 0 auto;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: var(--space-lg);
}

/* ── Post card ── */
.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
  text-decoration: none;
  color: inherit;
}
.post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(201,169,110,0.22);
  color: inherit;
}
.post-card-img {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--dark-3);
  position: relative;
  flex-shrink: 0;
}
.post-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.post-card:hover .post-card-img img { transform: scale(1.06); }

.post-card-category {
  position: absolute; top: 1rem; left: 1rem;
  font-size: 0.58rem; letter-spacing: 0.15em; text-transform: uppercase;
  background: var(--gold); color: var(--dark);
  padding: 0.28rem 0.72rem; border-radius: var(--radius-sm);
  font-weight: 500; font-family: var(--font-sans);
}
.post-card-body {
  padding: 1.4rem 1.6rem 1.8rem;
  display: flex; flex-direction: column; flex: 1;
}
.post-card-meta {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 0.7rem;
}
.post-card-date,
.post-card-read {
  font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.post-card-date i, .post-card-read i { color: var(--gold); font-size: 0.7rem; }
.post-card-title {
  font-family: var(--font-serif);
  font-size: 1.18rem; font-weight: 400; line-height: 1.25;
  color: var(--text); margin-bottom: 0.65rem;
  transition: color var(--transition-fast);
}
.post-card:hover .post-card-title { color: var(--gold); }
.post-card-excerpt {
  font-size: 0.82rem; color: var(--text-dim); line-height: 1.72;
  margin-bottom: 1.2rem; flex: 1;
}
.post-card-tags {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto;
}
.post-tag {
  font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold-dim);
  padding: 0.2rem 0.65rem; border-radius: var(--radius-full);
  font-family: var(--font-sans);
}

/* Featured / first post — full width spanning all columns */
.post-card.featured {
  grid-column: 1 / -1;
  flex-direction: row;
}
.post-card.featured .post-card-img {
  width: 52%; flex-shrink: 0; aspect-ratio: unset; min-height: 300px;
}
.post-card.featured .post-card-body { padding: 2.4rem 2.8rem; justify-content: center; }
.post-card.featured .post-card-title { font-size: clamp(1.4rem, 2.5vw, 2rem); margin-bottom: 0.9rem; }
.post-card.featured .post-card-excerpt { font-size: 0.88rem; max-width: 480px; }

/* Empty state */
.blog-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-2xl) 0;
  color: var(--text-muted);
}
.blog-empty i { font-size: 2.5rem; color: var(--gold-dim); margin-bottom: 1rem; display: block; }

/* ── POST PAGE ── */
.post-hero {
  padding: calc(var(--nav-height) + var(--space-2xl)) var(--space-lg) var(--space-xl);
  text-align: center;
  position: relative; overflow: hidden;
}
.post-hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 65% 55% at 50% 100%, rgba(201,169,110,0.06) 0%, transparent 68%);
  pointer-events: none;
}
.post-hero-content {
  position: relative; z-index: 2;
  max-width: 760px; margin: 0 auto;
}
.post-meta {
  display: inline-flex; align-items: center; gap: 1.2rem;
  flex-wrap: wrap; justify-content: center;
  margin-bottom: 1.8rem;
}
.post-meta-item {
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 0.38rem;
}
.post-meta-item i { color: var(--gold); }
.post-meta-sep { color: var(--glass-border); font-size: 0.7rem; }

.post-category-pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.63rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold-dim);
  background: rgba(201,169,110,0.07);
  padding: 0.35rem 0.9rem; border-radius: var(--radius-sm);
  margin-bottom: 1.4rem;
  font-family: var(--font-sans);
}

/* ── Post body ── */
.post-body {
  padding: var(--space-xl) var(--space-lg) var(--space-2xl);
}
.post-inner {
  max-width: 740px;
  margin: 0 auto;
}

/* Cover image */
.post-cover {
  width: 100%;
  aspect-ratio: 21/9;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xl);
  border: 1px solid var(--glass-border);
}

/* Typography inside post */
.post-content h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 300; color: var(--text);
  margin: var(--space-xl) 0 1rem;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--glass-border);
}
.post-content h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.post-content h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem; font-weight: 400; color: var(--text);
  margin: 1.8rem 0 0.7rem;
}
.post-content p {
  font-size: 0.92rem; color: var(--text-dim);
  line-height: 1.88; margin-bottom: 1.1rem;
}
.post-content p:last-child { margin-bottom: 0; }
.post-content strong { color: var(--text); font-weight: 400; }
.post-content em { color: var(--gold); font-style: italic; }
.post-content a {
  color: var(--gold);
  border-bottom: 1px solid var(--gold-dim);
  transition: border-color var(--transition-fast);
}
.post-content a:hover { border-bottom-color: var(--gold); }

/* Lists */
.post-content ul, .post-content ol {
  list-style: none; padding: 0;
  margin: 0.6rem 0 1.2rem;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.post-content ul li, .post-content ol li {
  display: flex; align-items: flex-start; gap: 0.75rem;
  font-size: 0.9rem; color: var(--text-dim); line-height: 1.72;
}
.post-content ul li::before {
  content: '';
  display: block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0; margin-top: 0.58rem;
}
.post-content ol { counter-reset: ol-counter; }
.post-content ol li { counter-increment: ol-counter; }
.post-content ol li::before {
  content: counter(ol-counter);
  font-family: var(--font-serif); font-size: 0.85rem;
  color: var(--gold); flex-shrink: 0; min-width: 1.2rem;
  font-weight: 300; margin-top: 0.08rem;
}

/* Blockquote */
.post-content blockquote {
  border-left: 2px solid var(--gold);
  background: rgba(201,169,110,0.05);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.2rem 1.5rem;
  margin: 1.6rem 0;
}
.post-content blockquote p {
  font-family: var(--font-serif);
  font-size: 1.05rem; color: var(--text-dim);
  font-style: italic; line-height: 1.7; margin: 0;
}

/* Inline code */
.post-content code {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, Consolas, 'Courier New', monospace; /* C-5 FIX: system mono stack */
  font-size: 0.82em; color: var(--gold);
  background: rgba(201,169,110,0.09);
  padding: 0.15em 0.45em; border-radius: 3px;
  border: 1px solid rgba(201,169,110,0.15);
}

/* Code block */
.post-content pre {
  background: var(--dark-3);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.6rem;
  overflow-x: auto;
  margin: 1.4rem 0;
}
.post-content pre code {
  font-size: 0.82rem; color: var(--text-dim);
  font-family: inherit; /* inherit from pre's mono stack */
  background: none; padding: 0; border: none; border-radius: 0;
}

/* Callout / tip box */
.post-callout {
  padding: 1.2rem 1.5rem;
  margin: 1.8rem 0;
  border-left: 2px solid var(--gold);
  background: rgba(201,169,110,0.05);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.post-callout-label {
  font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); font-family: var(--font-sans);
  display: flex; align-items: center; gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.post-callout p { font-size: 0.86rem; line-height: 1.72; margin: 0; }

/* Tags at bottom of post */
.post-tags-row {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--glass-border);
  margin-top: var(--space-xl);
}

/* Post navigation */
.post-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--glass-border);
}
.post-nav-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted); text-decoration: none;
  transition: color var(--transition-fast), gap var(--transition-fast);
}
.post-nav-link:hover { color: var(--gold); gap: 0.75rem; }

/* ── Comments ── */
.comments-panel {
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--glass-border);
}
.comments-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.comments-kicker {
  display: inline-block;
  margin-bottom: 0.35rem;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: var(--font-sans);
}
.comments-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  color: var(--text);
}
.comments-count {
  flex-shrink: 0;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  padding: 0.32rem 0.74rem;
}
.comment-composer {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.35rem;
}
.comment-composer textarea {
  width: 100%;
  min-height: 118px;
  resize: vertical;
  color: var(--text);
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  font: 0.88rem/1.65 var(--font-sans);
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.comment-composer textarea:focus {
  outline: none;
  border-color: var(--gold-dim);
  background: rgba(255,255,255,0.055);
  box-shadow: 0 0 0 3px rgba(201,169,110,0.08);
}
.comment-composer textarea:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}
.comment-composer-inline {
  margin: 0.8rem 0 0;
  padding: 0.9rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.025);
}
.comment-composer-inline textarea {
  min-height: 88px;
}
.comment-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.comment-auth-hint,
.comments-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.6;
}
.comments-list {
  display: grid;
  gap: 1rem;
}
.comment-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 0.85rem;
}
.comment-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--dark);
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.comment-main {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.028);
}
.comment-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.comment-author {
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 500;
}
.comment-time,
.comment-role {
  color: var(--text-muted);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.comment-role {
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-full);
  padding: 0.12rem 0.5rem;
}
.comment-text {
  margin: 0 0 0.75rem;
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.76;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.comment-text-muted {
  color: var(--text-muted);
  font-style: italic;
}
.comment-toolbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.comment-action,
.comment-reaction-trigger,
.comment-reaction-option {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0.34rem 0.46rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.comment-action:hover,
.comment-reaction-trigger:hover,
.comment-reaction-option:hover {
  color: var(--gold);
  background: rgba(201,169,110,0.08);
}
.comment-action:disabled,
.comment-reaction-trigger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.comment-action-danger:hover {
  color: var(--error);
  background: rgba(255,93,93,0.08);
}
.comment-reactions {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.comment-reaction-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.35rem);
  display: none;
  gap: 0.18rem;
  padding: 0.35rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  background: rgba(12,11,18,0.98);
  box-shadow: var(--shadow-lg);
  z-index: 4;
}
.comment-reactions.open .comment-reaction-menu {
  display: flex;
}
.comment-reaction-option {
  width: 36px;
  height: 36px;
  justify-content: center;
  border-radius: 50%;
  color: var(--gold);
  font-size: 0;
}
.comment-reaction-option i {
  font-size: 0.95rem;
}
.comment-reaction-summary {
  color: var(--gold);
  font-size: 0.72rem;
  min-width: 0.8rem;
}
.comment-replies {
  display: grid;
  gap: 0.9rem;
  margin-top: 1rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--glass-border);
}
.comment-reply-item {
  grid-template-columns: 34px minmax(0, 1fr);
}
.comment-reply-item .comment-avatar {
  width: 34px;
  height: 34px;
  font-size: 0.62rem;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .post-card.featured { flex-direction: column; grid-column: unset; }
  .post-card.featured .post-card-img { width: 100%; min-height: 220px; aspect-ratio: 16/9; }
  .post-card.featured .post-card-body { padding: 1.4rem 1.6rem 1.8rem; }
  .post-body { padding: var(--space-xl) var(--space-md) var(--space-2xl); }
}
/* CSS-3 FIX: at 641-800px the featured card flex-row creates a ~300px text column — switch to column */
@media (max-width: 800px) {
  .post-card.featured {
    flex-direction: column;
    grid-column: unset;
  }
  .post-card.featured .post-card-img {
    width: 100%;
    min-height: 200px;
    aspect-ratio: 16/9;
  }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .comments-header { align-items: flex-start; flex-direction: column; }
  .comment-item { grid-template-columns: 34px minmax(0, 1fr); }
  .comment-avatar { width: 34px; height: 34px; font-size: 0.62rem; }
  .comment-main { padding: 0.85rem; }
  .comment-reaction-menu { left: -0.4rem; }
  .comment-replies { padding-left: 0.55rem; }
}

/* ── Blog filter buttons (v8 — CSS classes, not inline styles) ── */
.blog-filters {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.blog-filter-btn {
  font-family: var(--font-sans);
  font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.38rem 1rem; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.04); color: var(--text-dim);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.blog-filter-btn:hover { color: var(--gold); border-color: var(--gold-dim); background: var(--gold-glow); }
.blog-filter-btn.active { background: var(--gold); color: var(--dark); border-color: var(--gold); }

/* ── Post card glass upgrades ── */
.post-card.glass-card {
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.post-card.glass-card:hover { border-color: rgba(201,169,110,0.28); }

/* ── v8 Glass upgrades ── */

/* Post hero enhanced frosted backdrop */
.post-hero { background: var(--dark); }

/* Reading progress bar for blog posts */
#post-read-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
  z-index: 10001; pointer-events: none;
  box-shadow: 0 0 10px rgba(201,169,110,0.5);
  transition: width 0.08s linear;
}

/* Frosted blog-hero with grid pattern */
/* blog-hero styles are in the full definition above */
.blog-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 100%, rgba(201,169,110,0.06) 0%, transparent 68%);
  pointer-events: none;
}

/* Post card image overlay on hover */
.post-card-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,18,0.6) 0%, transparent 50%);
  opacity: 0; transition: opacity var(--transition-base);
}
.post-card:hover .post-card-img::after { opacity: 1; }

/* Read more CTA on featured post */
.post-card.featured .post-card-body::after {
  content: 'Read Article →';
  display: block;
  margin-top: 1.4rem;
  font-family: var(--font-sans);
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); opacity: 0;
  transition: opacity var(--transition-base);
}
.post-card.featured:hover .post-card-body::after { opacity: 1; }

/* Post body callout upgraded to glass */
.post-callout {
  background: rgba(201,169,110,0.04) !important;
  border-left: 2px solid var(--gold) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}
@supports (backdrop-filter: blur(1px)) {
  .post-callout { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}

/* FIX 6: blog filter uses class toggle, not display:none, to preserve grid */
.blog-grid .post-card.blog-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.97);
  /* BUG-J FIX: transition handled by base .post-card rule — no duplicate needed */
}
.blog-grid .post-card {
  transition: opacity var(--transition-base), transform var(--transition-base),
              box-shadow var(--transition-base);
}

/* ── Mobile XS ── */
@media (max-width: 400px) {
  .post-hero { padding: calc(var(--nav-height) + var(--space-lg)) var(--space-sm) var(--space-lg); }
  .post-body { padding: var(--space-lg) var(--space-sm) var(--space-2xl); }
  .post-content pre { padding: 1rem; font-size: 0.75rem; }
  .blog-index { padding: var(--space-lg) var(--space-sm) var(--space-xl); }
}