/* BLOG PAGE HEADER */
.blog-header{padding:140px 5vw 72px;border-bottom:1px solid var(--g200);display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(36px,4.5vw,62px);line-height:1.05;letter-spacing:-0.03em;color:var(--black)}
h1 em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--yellow)}
.blog-header p{font-size:17px;font-weight:300;line-height:1.75;color:var(--g500);max-width:480px;margin-top:24px}

/* GROWTH LAB VISUAL */
.gl-visual{border:1px solid var(--g200);border-radius:20px;padding:32px;background:var(--white);animation:glFloat 4s ease-in-out infinite}
@keyframes glFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.gl-visual-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.gl-visual-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:15px;color:var(--black);letter-spacing:-0.01em}
.gl-live-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:#16a34a;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:100px;padding:4px 12px}
.gl-live-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;flex-shrink:0;animation:glPulse 2s ease-in-out infinite}
@keyframes glPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.8)}}

/* Article cycling */
.gl-articles{position:relative;height:110px;margin-bottom:24px}
.gl-article{position:absolute;inset:0;opacity:0;display:flex;flex-direction:column;gap:8px;animation:glCycle 12s ease-in-out infinite}
.gl-article-1{animation-delay:0s}
.gl-article-2{animation-delay:4s}
.gl-article-3{animation-delay:8s}
@keyframes glCycle{
  0%{opacity:0;transform:translateY(6px)}
  8%{opacity:1;transform:translateY(0)}
  30%{opacity:1;transform:translateY(0)}
  38%{opacity:0;transform:translateY(-6px)}
  100%{opacity:0;transform:translateY(-6px)}
}

.gl-tag{display:inline-flex;align-items:center;font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;background:var(--g100);border:1px solid var(--g200);border-radius:100px;padding:3px 10px;color:var(--g500);width:fit-content}
.gl-tag-yellow{background:var(--yellow);border-color:var(--yellow);color:var(--black)}
.gl-article-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:15px;color:var(--black);line-height:1.3;letter-spacing:-0.01em}
.gl-article-meta{font-size:12px;color:var(--g400);font-weight:300}

/* Progress bar */
.gl-progress-track{height:3px;background:var(--g100);border-radius:100px;overflow:hidden}
.gl-progress-bar{height:100%;background:var(--yellow);border-radius:100px;animation:glProgress 12s linear infinite}
@keyframes glProgress{0%{width:0%}100%{width:100%}}

/* BLOG SECTION */
.blog-section{padding:80px 5vw}

/* POST GRID */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}

/* POST CARD */
.post-card{border:1px solid var(--g200);border-radius:14px;overflow:hidden;background:var(--white);transition:box-shadow .2s,transform .2s;text-decoration:none;color:inherit;display:block}
.post-card:hover{box-shadow:0 8px 32px rgba(0,0,0,0.08);transform:translateY(-2px)}
.post-card-image{width:100%;aspect-ratio:16/9;background:var(--g800);overflow:hidden;display:flex;align-items:center;justify-content:center}
.post-card-image img{width:100%;height:100%;object-fit:cover;display:block}
.post-card-image svg{width:32px;height:32px;stroke:var(--g500)}
.post-card-body{padding:28px 28px 32px}
.post-card-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.post-tag{font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--g500);background:var(--g100);border:1px solid var(--g200);border-radius:100px;padding:4px 10px}
.post-card-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:20px;color:var(--black);line-height:1.25;margin-bottom:10px;letter-spacing:-0.01em}
.post-card-excerpt{font-size:14px;font-weight:300;color:var(--g500);line-height:1.65;margin-bottom:20px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card-meta{display:flex;align-items:center;justify-content:space-between}
.post-meta-info{font-size:12px;color:var(--g400);font-weight:300}
.post-meta-info strong{color:var(--g500);font-weight:500}
.post-card-link{font-size:13px;font-weight:500;color:var(--black)}

/* STATES */
.blog-loading{text-align:center;padding:80px 0}
.blog-loading-spinner{width:32px;height:32px;border:2px solid var(--g200);border-top-color:var(--black);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 16px}
.blog-empty{text-align:center;padding:80px 0;grid-column:1/-1}
.blog-empty-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:22px;color:var(--black);margin-bottom:10px}
.blog-empty-desc{font-size:15px;color:var(--g500);font-weight:300}

@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:900px){
  .blog-header{grid-template-columns:1fr}
  .blog-header-right{display:none}
  .blog-grid{grid-template-columns:1fr}
}