/* ═══════════════════════════════════════════════════════════════
   COMMUNE — Blog & Post Page Styles
   ═══════════════════════════════════════════════════════════════ */

/* ── Blog hero ─────────────────────────────────────────────── */
.blog-hero {
  padding-top: 120px;
  padding-bottom: 56px;
}
.blog-search{margin-top:28px;max-width:520px}
.blog-search-wrap{
  display:flex;align-items:center;gap:12px;
  background:var(--gl-1);border:1px solid var(--gl-bd-0);
  border-radius:var(--r-md);padding:11px 16px;
  transition:border-color var(--t-xs),box-shadow var(--t-xs);
}
.blog-search-wrap:focus-within{
  border-color:var(--iris);box-shadow:0 0 0 3px var(--iris-d);
}
.blog-search-input{
  flex:1;background:none;border:none;outline:none;
  font-size:.9375rem;color:var(--tx-0);
}
.blog-search-input::placeholder{color:var(--tx-2)}
.blog-search-clear{color:var(--tx-2);display:flex;transition:color var(--t-xs)}
.blog-search-clear:hover{color:var(--tx-0)}

/* ── Pagination ────────────────────────────────────────────── */
.pagination{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin-top:56px;
}
.pag-info{font-size:.875rem;color:var(--tx-2)}

/* ════════════════════════════════════════════════════════════
   POST PAGE
   ════════════════════════════════════════════════════════════ */

/* Members gate overlay */
.members-gate{
  position:relative;
  margin-top:40px;
}
.gate-blur{
  filter:blur(4px);
  pointer-events:none;
  user-select:none;
  max-height:180px;
  overflow:hidden;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 90%);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 90%);
}
.gate-card{
  padding:44px;text-align:center;border-radius:var(--r-xl);
  margin-top:-20px;position:relative;z-index:2;
}
.gate-icon{
  width:60px;height:60px;border-radius:50%;
  background:var(--amber-d,rgba(251,191,36,.12));
  border:1px solid rgba(251,191,36,.25);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;color:var(--amber);
}
.gate-title{
  font-family:var(--ff-display);
  font-size:1.8rem;font-weight:600;color:var(--tx-0);
  letter-spacing:-.03em;margin-bottom:10px;
}
.gate-p{color:var(--tx-1);font-size:.9375rem;line-height:1.65;margin-bottom:24px;max-width:360px;margin-left:auto;margin-right:auto}
.gate-acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Post layout */
.post-wrap{
  padding-top: 130px;
  padding-bottom: 80px;
}
.post-grid{
  display:grid;
  grid-template-columns:1fr 280px;
  gap:64px;align-items:start;
}
.post-article{min-width:0}
.post-sidebar{position:sticky;top:calc(var(--nav-h)+24px)}

/* Breadcrumb */
.breadcrumb{
  display:flex;align-items:center;gap:8px;
  font-size:.78rem;color:var(--tx-2);margin-bottom:28px;
}
.breadcrumb a{color:var(--tx-1);transition:color var(--t-xs)}
.breadcrumb a:hover{color:var(--iris)}
.breadcrumb svg{flex-shrink:0}

/* Post header */
.post-header{margin-bottom:36px}
.post-cats{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.post-title{
  font-family:var(--ff-display);
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:600;line-height:1.1;
  letter-spacing:-.04em;color:var(--tx-0);
  margin-bottom:16px;
}
.post-meta-row{
  display:flex;align-items:center;gap:16px;
  flex-wrap:wrap;padding:16px 0;
  border-top:1px solid var(--gl-bd-0);
  border-bottom:1px solid var(--gl-bd-0);
}
.post-author{display:flex;align-items:center;gap:10px}
.pa-name{font-size:.9rem;font-weight:600;color:var(--tx-0)}
.pa-date{font-size:.78rem;color:var(--tx-2)}
.post-stats{display:flex;align-items:center;gap:14px;margin-left:auto;font-size:.78rem;color:var(--tx-2)}
.stat-dot{width:3px;height:3px;border-radius:50%;background:var(--tx-3)}

/* Cover image */
.post-cover{
  width:100%;border-radius:var(--r-lg);overflow:hidden;
  margin-bottom:36px;
  aspect-ratio:16/9;object-fit:cover;
}

/* Article body */
.article-body{
  font-size:1.0625rem;line-height:1.78;color:var(--tx-1);
}
.article-body h2{
  font-family:var(--ff-display);
  font-size:1.8rem;font-weight:600;
  color:var(--tx-0);margin:44px 0 16px;
  letter-spacing:-.03em;line-height:1.15;
}
.article-body h3{
  font-family:var(--ff-display);
  font-size:1.35rem;font-weight:600;
  color:var(--tx-0);margin:32px 0 12px;
}
.article-body p{margin-bottom:20px}
.article-body a{color:var(--iris);text-decoration:underline;text-decoration-color:var(--iris-d);transition:text-decoration-color var(--t-xs)}
.article-body a:hover{text-decoration-color:var(--iris)}
.article-body p:first-of-type::first-letter{
  float:left;
  font-family:var(--ff-display);
  font-size:4.2rem;font-weight:600;
  line-height:.82;margin:4px 8px 0 0;
  color:var(--tx-0);
}
.article-body blockquote{
  margin:32px 0;padding:20px 24px;
  background:var(--gl-1);border:1px solid var(--gl-bd-0);
  border-left:3px solid var(--iris);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-family:var(--ff-display);
  font-size:1.15rem;font-style:italic;color:var(--tx-0);line-height:1.6;
}
.article-body code{
  font-family:'Fira Code','Cascadia Code',monospace;
  font-size:.85em;
  background:var(--gl-1);border:1px solid var(--gl-bd-0);
  padding:2px 7px;border-radius:var(--r-xs);color:var(--teal);
}
.article-body pre{
  background:var(--night-2);border:1px solid var(--gl-bd-0);
  border-radius:var(--r-sm);padding:20px;overflow-x:auto;margin:24px 0;
}
.article-body pre code{background:none;border:none;padding:0;color:var(--tx-0)}
.article-body ul,.article-body ol{padding-left:24px;margin-bottom:20px}
.article-body ul{list-style:disc}
.article-body ol{list-style:decimal}
.article-body li{margin-bottom:6px}
.article-body img{border-radius:var(--r-md);margin:24px 0}

/* Tags */
.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 0}

/* Share bar */
.share-bar{
  display:flex;align-items:center;gap:10px;
  margin-top:40px;padding:20px 0;
  border-top:1px solid var(--gl-bd-0);
  flex-wrap:wrap;
}
.share-label{font-size:.8rem;font-weight:600;color:var(--tx-2);text-transform:uppercase;letter-spacing:.08em;margin-right:4px}
.share-btn{
  display:flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:var(--r-oo);
  font-size:.8rem;font-weight:500;color:var(--tx-1);
  background:var(--gl-0);border:1px solid var(--gl-bd-0);
  cursor:pointer;transition:all var(--t-xs);
}
.share-btn:hover{color:var(--tx-0);background:var(--gl-1);border-color:var(--gl-bd-1)}
.like-btn{
  margin-left:auto;
  display:flex;align-items:center;gap:7px;
  padding:9px 18px;border-radius:var(--r-oo);
  font-size:.875rem;font-weight:600;color:var(--tx-1);
  background:var(--gl-0);border:1px solid var(--gl-bd-0);
  cursor:pointer;transition:all var(--t-xs);
}
.like-btn:hover{color:var(--coral);border-color:rgba(251,113,133,.3)}
.like-btn.liked{color:var(--coral);background:var(--coral-d);border-color:rgba(251,113,133,.3)}

/* Author bio */
.author-bio{
  margin-top:48px;padding:28px;border-radius:var(--r-xl);
}
.author-bio-inner{display:flex;gap:18px;align-items:flex-start}
.bio-info{flex:1}
.bio-name{
  font-family:var(--ff-display);font-size:1.2rem;font-weight:600;
  color:var(--tx-0);letter-spacing:-.02em;margin-bottom:4px;
}
.bio-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--iris);margin-bottom:8px}
.bio-text{font-size:.875rem;color:var(--tx-1);line-height:1.65}

/* Related posts */
.related-section{margin-top:64px;padding-top:40px;border-top:1px solid var(--gl-bd-0)}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:24px}

/* Comments */
.comments-section{margin-top:64px;padding-top:40px;border-top:1px solid var(--gl-bd-0)}
.comment-form{
  padding:24px;border-radius:var(--r-xl);margin-bottom:36px;
}
.comment-list{display:flex;flex-direction:column;gap:20px}
.comment-item{display:flex;gap:14px}
.comment-body{flex:1;min-width:0}
.comment-author-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.comment-who{font-size:.875rem;font-weight:600;color:var(--tx-0)}
.comment-when{font-size:.74rem;color:var(--tx-2)}
.comment-text{font-size:.9rem;color:var(--tx-1);line-height:1.65}

/* Sidebar widgets */
.sb-widget{padding:22px;border-radius:var(--r-lg);margin-bottom:20px}
.sb-widget-title{
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-2);margin-bottom:16px;
}
.toc-list{display:flex;flex-direction:column;gap:8px}
.toc-a{
  font-size:.8125rem;color:var(--tx-1);
  padding:5px 10px;border-radius:var(--r-xs);
  border-left:2px solid var(--gl-bd-0);
  transition:all var(--t-xs);display:block;
}
.toc-a:hover,.toc-a.active{color:var(--iris);border-left-color:var(--iris);background:var(--iris-d)}
.related-sm{display:flex;flex-direction:column;gap:12px}
.rel-sm-item{
  display:flex;flex-direction:column;gap:5px;
  padding:10px;border-radius:var(--r-sm);
  text-decoration:none;
  transition:background var(--t-xs);
}
.rel-sm-item:hover{background:var(--gl-1)}
.rel-sm-cat{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.rel-sm-title{font-size:.8rem;color:var(--tx-1);line-height:1.4}

/* Responsive */
@media(max-width:900px){
  .post-grid{grid-template-columns:1fr}
  .post-sidebar{display:none}
  .related-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .post-title{font-size:1.9rem}
  .post-meta-row{flex-direction:column;align-items:flex-start;gap:10px}
  .post-stats{margin-left:0}
}

/* ── Blog hero mobile ─────────────────────────────────────── */
@media (max-width: 640px) {
  .blog-hero {
  padding-top: 120px;
  padding-bottom: 56px;
}
  .blog-hero .section-title {
    font-size: 1.8rem;
  }
  .blog-search {
    max-width: 100%;
  }
}