.blog-page section{position:relative}

.blog-hero{height:80vh;min-height:520px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.blog-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blog-hero-overlay{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.6))}
.blog-hero-content{position:relative;max-width:640px;margin-inline:auto;color:#fff;display:flex;flex-direction:column;gap:1rem}

.blog-intro-inner{max-width:720px;margin-inline:auto;text-align:center}

.blog-featured-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.blog-card{display:flex;flex-direction:column;background:var(--color-surface-card);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-soft);transition:transform .3s}
.blog-card:hover{transform:translateY(-4px)}
.blog-card-body{padding:1.5rem;display:flex;flex-direction:column;gap:0.75rem}

.blog-categories-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;text-align:center}
.blog-category{padding:1rem;border:1px solid var(--color-accent-gold);border-radius:var(--radius-md)}

.blog-list-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}

.blog-expert-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;max-width:1100px;margin-inline:auto;text-align:center}
.blog-expert-grid img{width:100%;height:200px;object-fit:cover;margin-bottom:1rem}

.blog-events-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;align-items:center}
.blog-events-text{min-width:0}
.blog-events-image{min-width:0}

.blog-invite-inner{max-width:600px;margin-inline:auto;text-align:center}
.blog-invite-image{width:100%;height:280px;object-fit:cover;margin-top:var(--space-4)}

.blog-cta-box{display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center}

@media (max-width:1024px){
.blog-featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.blog-categories-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.blog-expert-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:768px){
.blog-hero{height:auto;padding:4rem 1rem}
.blog-featured-grid,.blog-list-grid,.blog-expert-grid,.blog-events-grid{grid-template-columns:1fr}
}