/* ============================================
   Infinity Scrims — Blog Shared Styles
   (structure/pattern from FragTrack's blog,
   recolored to Infinity Scrims' own theme)
   ============================================ */

/* ---------------- Blog Hero ---------------- */
.blog-hero{
  position:relative; padding:150px 24px 50px; max-width: var(--container); margin:0 auto; overflow:hidden;
}
.blog-hero__content{ position:relative; max-width:820px; }
.blog-hero__meta{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.15em;
  color: var(--muted); margin-bottom:22px;
}
.blog-hero__meta .dot{ width:6px; height:6px; background:#22c55e; border-radius:50%; box-shadow:0 0 12px #22c55e; }
.blog-hero__meta .author-avatar{
  width:26px; height:26px; border-radius:50%;
  background: linear-gradient(135deg, var(--purple), var(--purple-glow));
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:#fff;
}
.blog-hero__title{
  font-family: var(--font-display); font-weight:700; font-size: clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing:-.01em; line-height:1.12; margin-bottom:18px; color: var(--white);
}
.blog-hero__title em{ font-style:normal; color: var(--purple-glow); }
.blog-hero__excerpt{ max-width:640px; color: var(--muted); font-size: clamp(15px, 1vw, 17px); line-height:1.6; }

/* ---------------- Blog Content ---------------- */
.blog-content{ position:relative; padding:20px 24px 100px; max-width: var(--container); margin:0 auto; text-align:left; }
.blog-content > *{ max-width:760px; }
.blog-content h2{
  font-family: var(--font-display); font-weight:700; font-size: clamp(24px,2.8vw,34px);
  letter-spacing:-.01em; line-height:1.25; margin:48px 0 14px; color: var(--white); max-width:760px;
}
.blog-content h2 em{ font-style:normal; color: var(--purple-glow); }
.blog-content h2:first-child{ margin-top:0; }
.blog-content h3{
  font-family: var(--font-display); font-weight:700; font-size:19px; margin:30px 0 10px; color: var(--white); max-width:760px;
}
.blog-content h3 em{ font-style:normal; color: var(--purple-glow); }
.blog-content p{ color: var(--muted); font-size:15.5px; line-height:1.75; margin:0 0 16px; max-width:760px; }
.blog-content ul, .blog-content ol{ color: var(--muted); font-size:15.5px; line-height:1.75; margin:0 0 16px 22px; max-width:760px; }
.blog-content ul{ list-style:disc; }
.blog-content ol{ list-style:decimal; }
.blog-content li{ margin-bottom:8px; }
.blog-content li strong, .blog-content strong{ color: var(--white); font-weight:600; }
.blog-content a{ color: var(--purple-glow); text-decoration:underline; text-underline-offset:3px; }

.blog-content blockquote{
  border-left:3px solid var(--purple-glow); padding:16px 22px; margin:26px 0 26px;
  background: rgba(185,139,255,0.06); border-radius:0 14px 14px 0;
  font-family: var(--font-serif); font-style:italic; font-size:19px; line-height:1.5; color: var(--white);
  max-width:740px;
}

.blog-content .highlight-box{
  padding:22px 24px; border:1px solid var(--border); border-radius:16px;
  background: rgba(124,58,237,0.07); margin:26px 0; max-width:740px;
}
.blog-content .highlight-box h4{ font-family: var(--font-display); font-weight:700; font-size:17px; margin-bottom:8px; color: var(--white); }
.blog-content .highlight-box p{ margin-bottom:0; max-width:none; }

.blog-content table{ width:100%; max-width:760px; border-collapse:collapse; margin:24px 0; font-size:14px; }
.blog-content th{
  text-align:left; padding:12px 14px; border-bottom:1px solid var(--border);
  font-family: var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.15em; color: var(--muted);
}
.blog-content td{ padding:12px 14px; border-bottom:1px solid var(--border); color: var(--muted); }
.blog-content tr:hover td{ background: rgba(255,255,255,0.02); }

/* ---------------- Table of Contents ---------------- */
.blog-toc{
  background: rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:16px;
  padding:22px 26px; margin:8px 0 32px; max-width:760px;
}
.blog-toc h3{ font-family: var(--font-display); font-weight:700; font-size:16px; margin-bottom:14px; color: var(--white); }
.blog-toc ol{ list-style:decimal; padding-left:18px; color: var(--muted); font-size:14px; max-width:none; margin-bottom:0; }
.blog-toc li{ margin-bottom:8px; }
.blog-toc a{ color: var(--muted); text-decoration:none; transition: color .25s; }
.blog-toc a:hover{ color: var(--purple-glow); }
.blog-toc em{ font-style:normal; color: var(--purple-glow); }

/* ---------------- Featured image ---------------- */
.blog-featured-img{
  width:100%; max-width:760px; height:300px; border-radius:20px;
  background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(185,139,255,.12));
  border:1px solid var(--border); margin-bottom:36px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.blog-featured-img i{ font-size:44px; color: var(--muted); opacity:.5; }

/* ---------------- Author box ---------------- */
.blog-author{
  display:flex; align-items:center; gap:14px; padding:20px 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin:36px 0; max-width:760px;
}
.blog-author__avatar{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(135deg, var(--purple), var(--purple-glow));
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff;
}
.blog-author__info b{ display:block; font-size:14.5px; color: var(--white); }
.blog-author__info em{ display:block; font-style:normal; font-size:12px; color: var(--muted); margin-top:2px; }

/* ---------------- Related posts ---------------- */
.related-posts{ padding:60px 24px; max-width: var(--container); margin:0 auto; border-top:1px solid var(--border); }
.related-posts h2{
  font-family: var(--font-display); font-weight:700; font-size: clamp(24px,2.8vw,32px);
  letter-spacing:-.01em; margin-bottom:28px; color: var(--white);
}
.related-posts h2 em{ font-style:normal; color: var(--purple-glow); }
.related-posts__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

.related-card{
  padding:22px; border:1px solid var(--border); border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  transition: .35s;
}
.related-card:hover{ transform: translateY(-4px); border-color: var(--purple-glow); box-shadow: 0 24px 48px -24px rgba(124,58,237,.4); }
.related-card__meta{ font-family: var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.15em; color: var(--muted); margin-bottom:10px; display:flex; gap:10px; flex-wrap:wrap; }
.related-card h3{ font-family: var(--font-display); font-weight:700; font-size:18px; letter-spacing:-.01em; margin-bottom:8px; line-height:1.25; color: var(--white); }
.related-card p{ color: var(--muted); font-size:13px; line-height:1.55; margin-bottom:12px; }
.related-card a{ color: var(--purple-glow); font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px; transition: gap .3s; text-decoration:none; }
.related-card a:hover{ gap:10px; }

/* ---------------- Blog CTA band ---------------- */
.blog-cta{ text-align:center; padding:70px 24px; max-width: var(--container); margin:0 auto; border-top:1px solid var(--border); }
.blog-cta h2{ font-family: var(--font-display); font-weight:700; font-size: clamp(28px,3.6vw,44px); letter-spacing:-.01em; margin-bottom:12px; color: var(--white); }
.blog-cta h2 em{ font-style:normal; color: var(--purple-glow); }
.blog-cta p{ color: var(--muted); font-size:15.5px; margin-bottom:26px; }
.blog-cta .cta__buttons{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------------- Blog index hero + grid ---------------- */
.blog-index-hero{ position:relative; padding:150px 24px 40px; max-width: var(--container); margin:0 auto; overflow:hidden; }
.blog-index-hero .chapter__label{ font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.25em; color: var(--muted); display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.blog-index-hero .chapter__line{ flex:1; height:1px; background: var(--border); max-width:120px; }
.blog-index__grid{ display:flex; flex-direction:column; gap:18px; padding:0 24px 90px; max-width: var(--container); margin:0 auto; }

.blog-card{
  padding:28px 32px; border:1px solid var(--border); border-radius:20px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  transition:.35s; display:flex; flex-direction:column; width:100%;
}
.blog-card:hover{ transform: translateY(-4px); border-color: var(--purple-glow); box-shadow: 0 30px 60px -28px rgba(124,58,237,.45); }
.blog-card__meta{ font-family: var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.15em; color: var(--muted); margin-bottom:12px; display:flex; gap:10px; flex-wrap:wrap; }
.blog-card__meta span:first-child{ color: var(--purple-glow); }
.blog-card h3{ font-family: var(--font-display); font-weight:700; font-size:22px; letter-spacing:-.01em; margin-bottom:10px; line-height:1.25; color: var(--white); }
.blog-card p{ color: var(--muted); font-size:14.5px; line-height:1.6; margin-bottom:16px; max-width:760px; }
.blog-card a{ color: var(--purple-glow); font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px; transition: gap .3s; text-decoration:none; }
.blog-card a:hover{ gap:10px; }
.blog-card--featured{ border-color: rgba(185,139,255,0.3); }
.blog-card--featured h3{ font-size:26px; }

/* ---------------- Blog Post — single-card layout (Pivaga style) ---------------- */
.blog-post-wrap{ padding:140px 24px 30px; max-width: var(--container); margin:0 auto; }
.blog-post-card{
  border:1px solid var(--border); border-radius:22px; padding:44px 48px 56px;
  background: rgba(255,255,255,0.015);
  max-width:900px; margin:0 auto;
}
.blog-post-card h1{
  font-family: var(--font-display); font-weight:700; font-size: clamp(24px,3.2vw,38px);
  line-height:1.28; letter-spacing:-.01em; color: var(--white); margin-bottom:16px;
}
.blog-post-card__meta{ font-family: var(--font-mono); font-size:12.5px; color: var(--muted); margin-bottom:8px; }
.blog-post-card__meta .cat{ color: var(--purple-glow); }
.blog-post-card__author{ font-weight:700; font-size:14px; color: var(--white); margin-bottom:28px; }
.blog-post-card p{ color: var(--muted); font-size:15.5px; line-height:1.75; margin:0 0 18px; }
.blog-post-card h2, .blog-post-card h3{
  font-family: var(--font-body); font-weight:700; font-size:17.5px; color: var(--white); margin:28px 0 8px;
}
.blog-post-card ul{ margin:0 0 18px 0; list-style:none; padding:0; }
.blog-post-card ul li{ position:relative; padding-left:26px; margin-bottom:8px; color: var(--muted); font-size:15px; line-height:1.6; }
.blog-post-card ul li::before{ content:"\2714"; position:absolute; left:0; top:1px; color: var(--purple-glow); font-size:13px; }
.blog-post-card strong{ color: var(--white); font-weight:700; }
.blog-post-card a{ color: var(--purple-glow); text-decoration:underline; text-underline-offset:3px; }
.blog-post-card blockquote{
  border-left:3px solid var(--purple-glow); padding:16px 22px; margin:26px 0;
  background: rgba(185,139,255,0.05); border-radius:0 12px 12px 0;
  font-style:italic; color: var(--white); font-size:15px; line-height:1.7;
}
.blog-post-card blockquote p{ margin-bottom:10px; color:inherit; }
.blog-post-card blockquote p:last-child{ margin-bottom:0; }
.blog-post-card .highlight-box{
  padding:20px 22px; border:1px solid var(--border); border-radius:14px;
  background: rgba(124,58,237,0.06); margin:24px 0;
}
.blog-post-card .highlight-box h4{ font-family: var(--font-body); font-weight:700; font-size:15.5px; margin-bottom:6px; color: var(--white); }
.blog-post-card .highlight-box p{ margin-bottom:0; }
.blog-post-card hr{ border:none; border-top:1px solid var(--border); margin:34px 0 0; }
.blog-post-card .blog-post-card__closing{ margin-top:0; }

@media (max-width: 640px){
  .blog-post-card{ padding:28px 22px 36px; }
}

/* ---------------- Blog Post — single-card layout end ---------------- */
@media (max-width: 1000px){
  .related-posts__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .related-posts__grid{ grid-template-columns:1fr; }
  .blog-card{ padding:22px; }
}

/* Prevent the fixed nav from covering anchor-linked headings */
.blog-content h2, .blog-content h3, .related-posts, .blog-toc{ scroll-margin-top: 96px; }