/* ============================================
   ElectriBill — Blog Post Styles
   Adapted for electricity bill calculator niche
   ============================================ */

/* ============ BLOG BANNER ============ */
.blog-banner {
    background: linear-gradient(-45deg, #0F172A, #1E293B, #312E81, #4338CA);
    background-size: 300% 300%;
    animation: blogGradient 10s ease infinite;
    color: #fff;
    padding: clamp(2.5rem,5vw,4rem) 1.5rem clamp(2rem,4vw,3rem);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.blog-banner::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(99,102,241,.08);
    border-radius: 50%;
    top: -150px;
    right: -100px;
    pointer-events: none;
}
@keyframes blogGradient { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

.blog-banner-badge {
    display: inline-block;
    background: rgba(99,102,241,.25);
    backdrop-filter: blur(8px);
    padding: .3rem 1rem;
    border-radius: 2rem;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 1rem;
    border: 1px solid rgba(99,102,241,.3);
    color: #A5B4FC;
}

.blog-banner h1 {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 800;
    line-height: 1.25;
    max-width: 760px;
    margin: 0 auto .75rem;
    letter-spacing: -.02em;
}

.blog-banner-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    font-size: .88rem;
    opacity: .85;
    flex-wrap: wrap;
}

.blog-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: 1rem;
    font-size: .82rem;
    opacity: .8;
}
.blog-breadcrumb a { color: #A5B4FC; text-decoration: none; }
.blog-breadcrumb a:hover { text-decoration: underline; }
.blog-breadcrumb span { opacity: .7; }

/* ============ BLOG LAYOUT ============ */
.blog-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    max-width: 1140px;
    margin: 0 auto;
    padding: clamp(2rem,4vw,3.5rem) 1.5rem clamp(2.5rem,4vw,4rem);
    align-items: start;
}

/* ============ BLOG ARTICLE ============ */
.blog-article {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
    border: 1px solid #E2E8F0;
}

.blog-featured-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.blog-article-body {
    padding: clamp(1.5rem,3vw,2.5rem);
}

.blog-article-body h2 {
    color: #0F172A;
    font-size: clamp(1.2rem,2vw,1.5rem);
    font-weight: 700;
    margin: 2rem 0 .75rem;
    letter-spacing: -.01em;
}
.blog-article-body h2:first-child { margin-top: 0; }

.blog-article-body h3 {
    color: #0F172A;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 1.5rem 0 .6rem;
}

.blog-article-body p {
    color: #334155;
    font-size: 1rem;
    line-height: 1.85;
    margin-bottom: 1rem;
}

.blog-article-body ul,
.blog-article-body ol {
    margin: .75rem 0 1.25rem 1.5rem;
    color: #334155;
    line-height: 1.8;
}
.blog-article-body li { margin-bottom: .4rem; }

.blog-article-body blockquote {
    border-left: 4px solid #6366F1;
    background: #EEF2FF;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: #0F172A;
}

.blog-article-body strong { color: #0F172A; }

.blog-article-body a {
    color: #6366F1;
    text-decoration: none;
    font-weight: 500;
}
.blog-article-body a:hover { text-decoration: underline; }

/* Info Box */
.blog-info-box {
    background: linear-gradient(135deg, #EEF2FF, #F0FDF4);
    border: 1px solid rgba(99,102,241,.12);
    border-radius: 16px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}
.blog-info-box strong { color: #6366F1; }
.blog-info-box p { margin-bottom: .5rem; font-size: .95rem; }
.blog-info-box p:last-child { margin-bottom: 0; }

/* Tags */
.blog-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 2rem 0 0;
    padding: 1.5rem clamp(1.5rem,3vw,2.5rem);
    border-top: 1px solid #E2E8F0;
}

.blog-article-tags .tag {
    background: #EEF2FF;
    color: #6366F1;
    padding: .3rem .85rem;
    border-radius: 2rem;
    font-size: .82rem;
    font-weight: 600;
    display: inline-block;
}

/* ============ SIDEBAR ============ */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 72px;
}

.sidebar-widget {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
    border: 1px solid #E2E8F0;
}

.sidebar-widget-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 1rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid #6366F1;
}

/* Recent Posts */
.recent-posts-list { list-style: none; }
.recent-posts-list li { margin-bottom: .75rem; }
.recent-posts-list li:last-child { margin-bottom: 0; }
.recent-posts-list a {
    color: #334155;
    text-decoration: none;
    font-size: .88rem;
    line-height: 1.45;
    transition: color .2s;
    display: block;
}
.recent-posts-list a:hover { color: #6366F1; }

/* Sidebar Tags */
.sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.sidebar-tags .tag {
    background: #F1F5F9;
    color: #64748B;
    padding: .3rem .75rem;
    border-radius: 2rem;
    font-size: .8rem;
    font-weight: 600;
    border: 1px solid #E2E8F0;
    display: inline-block;
}

/* Sidebar Info Card */
.sidebar-info-card {
    background: linear-gradient(135deg, #6366F1, #4F46E5);
    color: #fff;
    border-radius: 16px;
    padding: 1.75rem;
    text-align: center;
    border: none;
}
.sidebar-info-card .sidebar-widget-title {
    color: #fff;
    border-bottom-color: rgba(255,255,255,.3);
    justify-content: center;
}
.sidebar-info-card p { font-size: .9rem; opacity: .92; line-height: 1.6; margin-bottom: 1rem; }

/* Sidebar CTA Card */
.sidebar-cta-card {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    border: none;
}
.sidebar-cta-card .sidebar-widget-title {
    color: #fff;
    border-bottom-color: rgba(255,255,255,.3);
}
.sidebar-cta-card p { font-size: .88rem; opacity: .92; margin-bottom: 1rem; }
.sidebar-cta-btn {
    display: inline-block;
    background: #fff;
    color: #10B981;
    padding: .6rem 1.25rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: .88rem;
    text-decoration: none;
    transition: all .25s;
}
.sidebar-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }

/* ============ RESPONSIVE ============ */
@media (max-width: 992px) {
    .blog-layout { grid-template-columns: 1fr; }
    .blog-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .sidebar-info-card, .sidebar-cta-card { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .blog-sidebar { grid-template-columns: 1fr; }
    .blog-banner h1 { font-size: 1.35rem; }
    .blog-article-body { padding: 1.25rem; }
    .blog-article-body h2 { font-size: 1.2rem; }
    .blog-article-tags { padding: 1.25rem; }
}