/* ===== Blog — shared styles for listing + articles ===== */

.blog-hero{
  padding:70px 0 20px;
  text-align:center;
}
.blog-hero h1{ margin-bottom:14px; }
.blog-hero p{
  max-width:620px;
  margin:0 auto;
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.6;
}

.blog-breadcrumb{
  font-size:0.85rem;
  color:var(--muted);
  margin-bottom:18px;
}
.blog-breadcrumb a{ color:var(--muted); }
.blog-breadcrumb a:hover{ color:var(--gold-400); }
.blog-breadcrumb span{ margin:0 6px; }

/* Listing grid */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:20px;
}
.blog-card{
  background:var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:border-color .2s ease, transform .2s ease;
}
.blog-card:hover{ border-color:var(--gold-500); transform:translateY(-4px); }
.blog-card-image{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  display:block;
}
.blog-card-body{ padding:22px 22px 26px; display:flex; flex-direction:column; flex:1; }
.blog-card-tag{
  display:inline-block;
  align-self:flex-start;
  font-size:0.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--gold-500);
  border:1px solid var(--border-soft);
  border-radius:999px;
  padding:3px 10px;
  margin-bottom:12px;
}
.blog-card h3{ font-size:1.1rem; line-height:1.35; margin-bottom:10px; }
.blog-card p{ font-size:0.88rem; color:var(--muted); line-height:1.55; flex:1; margin-bottom:16px; }
.blog-card-meta{ font-size:0.78rem; color:var(--muted); }
.blog-card-link{ color:var(--gold-500); font-weight:600; font-size:0.88rem; }

.blog-card-soon{ opacity:0.55; pointer-events:none; }
.blog-card-soon:hover{ transform:none; border-color:var(--border-soft); }
.blog-card-soon .blog-card-tag{ color:var(--muted); }

@media (max-width:900px){
  .blog-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .blog-grid{ grid-template-columns:1fr; }
}

/* Article page */
.article-header{
  padding:60px 24px 10px;
  max-width:760px;
  margin:0 auto;
}
.article-header h1{ font-size:2.3rem; margin-bottom:18px; line-height:1.25; }
.article-cover{
  width:100%;
  max-width:920px;
  margin:0 auto 40px;
  display:block;
  border-radius:var(--radius);
  aspect-ratio:16/9;
  object-fit:cover;
}
.article-meta{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:0.85rem;
  color:var(--muted);
  margin-bottom:8px;
}
.article-meta .blog-card-tag{ margin:0; }

.article-body{
  max-width:720px;
  margin:0 auto;
  font-size:1.02rem;
  line-height:1.8;
  color:var(--white);
}
.article-body h2{
  font-family:var(--serif);
  font-size:1.5rem;
  margin:44px 0 18px;
  color:var(--white);
}
.article-body p{ margin-bottom:20px; color:var(--white); opacity:0.92; }
.article-body ul{ margin:0 0 20px; padding-left:22px; }
.article-body li{ margin-bottom:10px; opacity:0.92; }
.article-body strong{ color:var(--gold-400); }
.article-body a{ color:var(--gold-400); text-decoration:underline; text-underline-offset:2px; }
.article-body a:hover{ color:var(--gold-500); }

.article-inline-image{
  width:100%;
  display:block;
  border-radius:var(--radius);
  margin:36px 0;
  aspect-ratio:16/9;
  object-fit:cover;
}
.article-image-caption{
  font-size:0.8rem;
  color:var(--muted);
  text-align:center;
  margin-top:-24px;
  margin-bottom:36px;
}

.article-cta-box{
  max-width:720px;
  margin:48px auto 0;
  background:var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:32px;
  text-align:center;
}
.article-cta-box h3{ margin-bottom:10px; }
.article-cta-box p{ color:var(--muted); margin-bottom:22px; }

.article-nav-back{
  max-width:720px;
  margin:40px auto 0;
  font-size:0.9rem;
}
.article-nav-back a{ color:var(--muted); }
.article-nav-back a:hover{ color:var(--gold-400); }

/* Social feed section (blog listing page) */
.social-feed-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin-top:36px;
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
.social-feed-item{
  background:var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:340px;
}
.social-feed-item iframe{ display:block; max-width:100%; }
.social-feed-placeholder{
  text-align:center;
  padding:32px 24px;
}
.social-feed-placeholder p{
  color:var(--muted);
  font-size:0.88rem;
  margin-bottom:18px;
  line-height:1.5;
}
@media (max-width:640px){
  .social-feed-grid{ grid-template-columns:1fr; }
}


/* ===== Article extras: TOC, problem/solution blocks, callouts, table, FAQ ===== */
.article-body h2, .article-body h3{ scroll-margin-top:96px; }
.article-body h3{
  font-family:var(--serif);
  font-size:1.2rem;
  margin:30px 0 12px;
  color:var(--white);
}
.article-lead{ font-size:1.12rem; line-height:1.75; }
.article-toc{
  background:var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:22px 26px;
  margin:28px 0 36px;
}
.article-toc p{ font-weight:700; margin-bottom:10px; color:var(--gold-400); opacity:1; }
.article-toc ol{ margin:0; padding-left:20px; }
.article-toc li{ margin-bottom:6px; font-size:0.95rem; }
.article-callout{
  background:var(--bg-card);
  border:1px solid var(--border-soft);
  border-left:3px solid var(--gold-500);
  border-radius:12px;
  padding:18px 22px;
  margin:26px 0;
}
.article-callout p{ margin-bottom:10px; }
.article-callout p:last-child{ margin-bottom:0; }
.ps-block{
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:6px 24px 8px;
  margin:22px 0 34px;
  background:rgba(255,255,255,0.02);
}
.ps-label{
  display:inline-block;
  font-size:0.68rem;
  font-weight:800;
  letter-spacing:0.07em;
  text-transform:uppercase;
  border-radius:999px;
  padding:3px 11px;
  margin:14px 0 8px;
}
.ps-label-problem{ color:#ffb4a8; border:1px solid rgba(255,140,120,0.45); }
.ps-label-solution{ color:var(--gold-400); border:1px solid var(--gold-500); }
.ps-block p{ margin-bottom:12px; }
.article-phone{
  display:block;
  width:100%;
  max-width:280px;
  height:auto;
  margin:34px auto 12px;
  border-radius:var(--radius);
}
.article-table-wrap{ overflow-x:auto; margin:26px 0; }
.article-table{ width:100%; border-collapse:collapse; font-size:0.9rem; min-width:560px; }
.article-table th, .article-table td{
  border:1px solid var(--border-soft);
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
  line-height:1.5;
}
.article-table th{ background:var(--bg-card); color:var(--gold-400); }
.article-table td:first-child{ font-weight:600; }
.article-faq details{
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:14px 18px;
  margin-bottom:12px;
  background:var(--bg-card);
}
.article-faq summary{ cursor:pointer; font-weight:700; line-height:1.45; }
.article-faq details p{ margin:12px 0 0; }
.article-sources li{ font-size:0.92rem; }
.article-related{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:0;
  list-style:none;
}
.article-related li{ margin:0; }
.article-related a{
  display:block;
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:14px 16px;
  text-decoration:none;
  background:var(--bg-card);
  line-height:1.45;
}
.article-related a:hover{ border-color:var(--gold-500); }
@media (max-width:640px){
  .article-header h1{ font-size:1.8rem; }
  .article-related{ grid-template-columns:1fr; }
  .ps-block{ padding:4px 16px 6px; }
}
.article-body ol{ margin:0 0 20px; padding-left:22px; }
.article-body ol li{ margin-bottom:10px; opacity:0.92; }