/* ========== THEME TOKENS (reuse existing) ================= */
:root{
  --accent:       #0050c8;
  --accent-dim:   #003c96;
  --fg:           #111;
  --bg:           #fff;
}
[data-theme="dark"]{
  --fg:#eee; --bg:#121212;
}

/* ========== LAYOUT ======================================= */
.blog-page{background:var(--bg);color:var(--fg);font-family:"Inter",sans-serif;}
.blog-section{padding:4rem 1rem;transition:background .3s;}
.blog-section.alt{background:rgba(0,0,0,.03);}
[data-theme="dark"] .blog-section.alt{background:rgba(255,255,255,.04);}
.blog-head{text-align:center;margin-bottom:2.5rem;}
.blog-title{font-size:clamp(2rem,4vw + .5rem,3rem);font-weight:800;margin:.2rem 0 .6rem;}
.blog-lead{font-size:1.05rem;max-width:60ch;margin:0 auto;line-height:1.6;}
/* hero */
.blog-hero{padding:6rem 1rem 4rem;text-align:center;background:linear-gradient(135deg,var(--accent),var(--accent-dim));color:#fff;}
.hero-title{font-size:clamp(2.5rem,6vw + 1rem,4rem);font-weight:800;margin:0 0 .8rem;}
.hero-tag{font-size:1.2rem;max-width:42ch;margin:0 auto;line-height:1.5;}

/* gallery masonry */
.gallery{column-width:280px;column-gap:1.4rem;}
.gallery-item{
  break-inside:avoid;
  padding:0 0 1.4rem;
  opacity:0;
  transform:translateY(24px) scale(.96);
  transition:opacity .7s ease,transform .7s ease;}
.gallery-item.visible{
  opacity:1;
  transform:none;}
.gallery img{width:100%;height:auto;border-radius:12px;box-shadow:0 6px 16px rgb(0 0 0 /.12);}
/* variation */
.gallery-item.tall img{aspect-ratio:4/5;object-fit:cover;}

/* DEBUG: show gallery items immediately */
.gallery-item { opacity: 1 !important; transform: none !important; }


@media(max-width:600px){.gallery{column-width:160px;}}

/* CTA */
.blog-cta{padding:3.5rem 1rem;text-align:center;}
.cta-btn{display:inline-block;background:var(--accent);color:#fff;padding:1rem 2.5rem;font-weight:600;border-radius:8px;text-decoration:none;transition:background .25s ease,transform .2s ease;}
.cta-btn:hover{background:var(--accent-dim);transform:translateY(-2px);}