/* blog.css — J3U blog (index + article). Pairs with /modern/styles.css (header/footer/
   nav/buttons/tokens). Article + listing components only. Root-relative assets only. */

/* ---- shared rhythm ---- */
.blog-main { padding-top: 96px; }            /* clear the fixed header */
.blog-wrap { width:100%; max-width: 1180px; margin:0 auto; padding:0 26px; }
.article-wrap { max-width: 760px; }          /* readable measure for long-form */

/* ---- index hero ---- */
.blog-hero { text-align:center; padding: 40px 0 26px; }
.blog-hero .eyebrow { display:inline-flex; align-items:center; gap:9px; }
.blog-hero h1 { font-family:var(--font-head); color:var(--ink); font-size: clamp(2rem, 4.4vw, 3.1rem); letter-spacing:-.02em; margin:18px 0 10px; }
.blog-hero p { color:var(--muted); font-size:1.12rem; max-width:560px; margin:0 auto; }

/* ---- category filter chips ---- */
.cat-bar { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin: 26px auto 40px; max-width: 940px; }
.cat-chip { font-family:var(--font-head); font-weight:600; font-size:.84rem; letter-spacing:.01em;
  padding:8px 16px; border-radius:var(--pill); border:1px solid var(--line); color:var(--ink-2);
  background:var(--bg); cursor:pointer; text-decoration:none; transition:.2s var(--ease); white-space:nowrap; }
.cat-chip:hover { border-color:var(--red); color:var(--red); }
.cat-chip.active { background:var(--red); border-color:var(--red); color:#fff; }
.cat-chip .n { opacity:.6; font-weight:500; margin-left:4px; }

/* ---- post grid ---- */
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px 26px; }
@media (max-width:900px){ .post-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .post-grid{ grid-template-columns:1fr; } }
.pcard { display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--line);
  border-radius:18px; overflow:hidden; text-decoration:none; transition:.25s var(--ease); box-shadow:var(--shadow-sm); }
.pcard:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:#e2e5ea; }
.pcard-media { aspect-ratio:16/10; overflow:hidden; background:var(--bg-soft); position:relative; }
.pcard-media img { width:100%; height:100%; object-fit:cover; transition:.4s var(--ease); }
.pcard:hover .pcard-media img { transform:scale(1.04); }
.pcard-media.placeholder { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--ink),var(--ink-2)); }
.pcard-media.placeholder span { font-family:var(--font-head); font-weight:700; color:#fff; opacity:.14; font-size:2rem; letter-spacing:.04em; }
.pcard-body { padding:18px 20px 22px; display:flex; flex-direction:column; flex:1; }
.pcard .kicker { font-family:var(--font-head); font-weight:600; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--red); margin-bottom:9px; }
.pcard h3 { font-size:1.08rem; line-height:1.28; color:var(--ink); margin:0 0 10px; letter-spacing:-.01em; }
.pcard .excerpt { color:var(--body); font-size:.93rem; line-height:1.55; margin:0 0 16px; flex:1; }
.pcard .meta { font-size:.8rem; color:var(--muted); display:flex; gap:8px; align-items:center; }
.pcard .meta b { color:var(--ink-2); font-weight:600; }

/* ---- pagination ---- */
.pager { display:flex; justify-content:center; gap:10px; margin:48px 0 0; flex-wrap:wrap; }
.pager a, .pager span { font-family:var(--font-head); font-weight:600; font-size:.9rem; min-width:42px; text-align:center;
  padding:10px 14px; border-radius:11px; border:1px solid var(--line); color:var(--ink-2); text-decoration:none; transition:.2s var(--ease); }
.pager a:hover { border-color:var(--red); color:var(--red); }
.pager .current { background:var(--ink); border-color:var(--ink); color:#fff; }
.pager .disabled { opacity:.4; pointer-events:none; }

/* ===== ARTICLE ===== */
.article-head { text-align:center; padding: 10px 0 30px; }
.article-head .kicker { font-family:var(--font-head); font-weight:600; font-size:.76rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--red); }
.article-head h1 { font-family:var(--font-head); color:var(--ink); font-size:clamp(1.9rem,4vw,2.9rem);
  line-height:1.12; letter-spacing:-.02em; margin:14px 0 18px; }
.article-meta { display:flex; gap:14px; align-items:center; justify-content:center; color:var(--muted); font-size:.9rem; flex-wrap:wrap; }
.article-meta .dot { width:4px; height:4px; border-radius:50%; background:var(--dark-soft); }
.article-meta b { color:var(--ink-2); font-weight:600; }
.article-hero { margin: 8px 0 36px; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); }
.article-hero img { width:100%; display:block; }

/* prose */
.prose { color:var(--body); font-size:1.06rem; line-height:1.75; }
.prose > *:first-child { margin-top:0; }
.prose p { margin:0 0 1.25em; }
.prose h2 { font-size:1.6rem; color:var(--ink); margin:1.9em 0 .6em; letter-spacing:-.01em; }
.prose h3 { font-size:1.28rem; color:var(--ink); margin:1.7em 0 .5em; }
.prose h4 { font-size:1.08rem; color:var(--ink-2); margin:1.5em 0 .4em; }
.prose a { color:var(--red); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.prose a:hover { color:var(--red-bright); }
.prose ul, .prose ol { margin:0 0 1.3em; padding-left:1.4em; }
.prose li { margin:.4em 0; }
.prose img { width:100%; height:auto; border-radius:14px; margin:1.6em 0; box-shadow:var(--shadow-sm); }
.prose figure { margin:1.6em 0; }
.prose figcaption { font-size:.86rem; color:var(--muted); text-align:center; margin-top:.6em; }
.prose blockquote { margin:1.6em 0; padding:.2em 0 .2em 1.3em; border-left:3px solid var(--red);
  color:var(--ink-2); font-size:1.12rem; font-style:italic; }
.prose iframe { width:100%; border:0; border-radius:14px; margin:1.4em 0; }
.prose table { width:100%; border-collapse:collapse; margin:1.6em 0; font-size:.95rem; }
.prose th, .prose td { border:1px solid var(--line); padding:10px 12px; text-align:left; }
.prose th { background:var(--bg-soft); font-family:var(--font-head); }
.prose hr { border:0; border-top:1px solid var(--line); margin:2.2em 0; }
.prose code { background:var(--bg-soft); padding:.12em .4em; border-radius:5px; font-size:.92em; }

/* category tags under article */
.article-tags { display:flex; flex-wrap:wrap; gap:9px; margin:34px 0 0; }
.article-tags a { font-family:var(--font-head); font-weight:600; font-size:.8rem; padding:6px 14px;
  border-radius:var(--pill); background:var(--bg-soft); color:var(--ink-2); text-decoration:none; transition:.2s var(--ease); }
.article-tags a:hover { background:var(--red); color:#fff; }

/* end-of-post CTA */
.post-cta { margin:48px 0 10px; background:linear-gradient(135deg,var(--ink),var(--ink-2)); border-radius:20px;
  padding:clamp(30px,5vw,46px); text-align:center; color:#fff; box-shadow:var(--shadow-dark); }
.post-cta h3 { color:#fff; font-size:clamp(1.4rem,3vw,1.9rem); margin:0 0 12px; letter-spacing:-.01em; }
.post-cta p { color:var(--dark-soft); font-size:1.05rem; max-width:520px; margin:0 auto 24px; }
.post-cta .cta-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* back link */
.blog-back { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-family:var(--font-head);
  font-weight:600; font-size:.86rem; text-decoration:none; margin-bottom:18px; transition:.2s var(--ease); }
.blog-back:hover { color:var(--red); }

/* more-from-blog */
.more-head { font-family:var(--font-head); font-weight:600; color:var(--ink); font-size:1.3rem; margin:64px 0 24px; text-align:center; }