/* On The Way Heating & Air — Weekday Blog */
.blog-hero {
    position: relative;
    overflow: hidden;
    padding: 5rem 0 4.5rem;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, #4a1a6b 0%, #8b1a6b 52%, #d81471 100%);
}
.blog-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 20%, rgba(113,206,235,0.20), transparent 34%),
        radial-gradient(circle at 82% 76%, rgba(255,239,118,0.12), transparent 28%);
    pointer-events: none;
}
.blog-hero .container { position: relative; z-index: 2; }
.blog-hero-mascot {
    position: absolute;
    right: 4%;
    bottom: -26px;
    z-index: 1;
    width: 235px;
    height: auto;
    opacity: 0.88;
}
.blog-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.4rem 1rem;
    border: 1px solid rgba(255,255,255,0.30);
    border-radius: 999px;
    background: rgba(47,0,72,0.28);
    color: #ffef76;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.blog-hero h1 {
    max-width: 900px;
    margin: 0 auto 1rem;
    color: #fff;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
}
.blog-hero p {
    max-width: 760px;
    margin: 0 auto;
    color: rgba(255,255,255,0.92);
    font-size: 1.16rem;
    line-height: 1.7;
}
.blog-trust-strip { padding: 0.9rem 0; background: #83009d; }
.blog-trust-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}
.blog-trust-inner span::before { margin-right: 0.45rem; color: #ffef76; content: '✓'; }
.blog-posts-section { padding: 4.5rem 0 5rem; background: #2f0048; }
.blog-section-heading { max-width: 800px; margin: 0 auto 3rem; text-align: center; }
.blog-section-heading h2 { color: #ffef76; }
.blog-section-heading p { color: rgba(255,255,255,0.78); font-size: 1.08rem; }
.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}
.blog-card {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 220px;
    overflow: hidden;
    border: 1px solid rgba(113,206,235,0.22);
    border-radius: 16px;
    background: linear-gradient(145deg, #3d0059 0%, #2f0048 100%);
    box-shadow: 0 12px 30px rgba(20,0,32,0.28);
}
.blog-card:hover { transform: translateY(-4px); border-color: rgba(113,206,235,0.65); }
.blog-card-media { width: 220px; height: 100%; min-height: 220px; object-fit: cover; }
.blog-card-content { display: flex; flex-direction: column; padding: 1.5rem; }
.blog-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.8rem; margin-bottom: 0.8rem; color: rgba(255,255,255,0.60); font-size: 0.83rem; }
.blog-card-category { color: #71ceeb; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.blog-card h2 { margin-bottom: 0.8rem; color: #ffef76; font-size: 1.25rem; line-height: 1.32; }
.blog-card h2 a { color: inherit; text-decoration: none; }
.blog-card h2 a:hover { color: #71ceeb; }
.blog-card p { margin-bottom: 1.25rem; color: rgba(255,255,255,0.77); font-size: 0.95rem; line-height: 1.65; }
.blog-card-link { margin-top: auto; color: #71ceeb; font-weight: 700; }
.blog-card-link:hover { color: #ffef76; }
.blog-learning-section { padding: 4rem 0; background: linear-gradient(135deg, #250039 0%, #4a1a6b 100%); border-top: 1px solid rgba(255,255,255,0.08); }
.blog-learning-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr); gap: 2rem; align-items: center; }
.blog-learning-inner h2 { color: #ffef76; }
.blog-learning-inner p { color: rgba(255,255,255,0.80); font-size: 1.05rem; line-height: 1.72; }
.blog-learning-actions { display: flex; justify-content: flex-end; }
.blog-article-hero {
    padding: 4.5rem 0 3.75rem;
    text-align: center;
    background: linear-gradient(135deg, rgba(74,26,107,0.98), rgba(216,20,113,0.94));
}
.blog-breadcrumb { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.1rem; color: rgba(255,255,255,0.72); font-size: 0.88rem; }
.blog-breadcrumb a { color: #71ceeb; font-weight: 600; }
.blog-breadcrumb a:hover { color: #ffef76; }
.blog-article-hero h1 { max-width: 980px; margin: 0 auto 1rem; color: #fff; font-size: clamp(2.05rem, 5vw, 3.25rem); font-weight: 800; line-height: 1.13; }
.blog-article-meta { color: rgba(255,255,255,0.84); font-size: 0.98rem; }
.blog-article-section { padding: 4.5rem 1.5rem; background: #2f0048; }
.blog-article { max-width: 860px; margin: 0 auto; color: rgba(255,255,255,0.84); font-size: 1.08rem; line-height: 1.82; }
.blog-article > p { margin-bottom: 1.35rem; }
.blog-article h2 { margin: 3.2rem 0 1.25rem; color: #ffef76; font-size: clamp(1.55rem, 3.5vw, 2.1rem); }
.blog-article h3 { margin: 2.35rem 0 0.9rem; color: #71ceeb; font-size: clamp(1.2rem, 2.8vw, 1.5rem); }
.blog-article strong { color: #fff; }
.blog-article a { color: #71ceeb; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.blog-article a:hover { color: #ffef76; }
.blog-article ul, .blog-article ol { list-style: revert; margin: 1rem 0 1.6rem 1.4rem; }
.blog-article li { margin-bottom: 0.65rem; }
.blog-direct-answer, .blog-callout, .blog-reviewer {
    margin: 0 0 2rem;
    padding: 1.5rem;
    border: 1px solid rgba(113,206,235,0.42);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(113,206,235,0.12), rgba(216,20,113,0.08));
}
.blog-direct-answer h2, .blog-callout h3, .blog-reviewer h2 { margin: 0 0 0.65rem; color: #71ceeb; }
.blog-direct-answer p, .blog-callout p, .blog-reviewer p { margin: 0; }
.blog-figure { margin: 2.25rem 0; }
.blog-figure img { width: 100%; height: auto; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; }
.blog-figure figcaption { margin-top: 0.65rem; color: rgba(255,255,255,0.60); font-size: 0.88rem; text-align: center; }
.blog-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin: 1.25rem 0 2rem; padding: 0; list-style: none !important; }
.blog-checklist li { margin: 0; padding: 1rem; border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; background: rgba(255,255,255,0.05); }
.blog-table-wrap { overflow-x: auto; margin: 1.75rem 0 2.25rem; }
.blog-table { width: 100%; min-width: 620px; border-collapse: collapse; border: 1px solid rgba(255,255,255,0.12); }
.blog-table th { padding: 0.95rem; background: #5a1a7a; color: #fff; font-family: var(--font-heading, 'Montserrat', sans-serif); text-align: left; }
.blog-table td { padding: 0.88rem 0.95rem; border-bottom: 1px solid rgba(255,255,255,0.09); color: rgba(255,255,255,0.82); vertical-align: top; }
.blog-table tr:nth-child(even) td { background: rgba(255,255,255,0.03); }
.blog-sources { padding-left: 1.3rem; color: rgba(255,255,255,0.72); font-size: 0.93rem; }
.blog-related { padding: 4rem 0; background: #250039; border-top: 1px solid rgba(255,255,255,0.08); }
.blog-related h2 { text-align: center; color: #ffef76; }
.blog-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.blog-related-card { padding: 1.5rem; border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; background: rgba(255,255,255,0.05); }
.blog-related-card h3 { color: #71ceeb; font-size: 1.15rem; }
.blog-related-card p { color: rgba(255,255,255,0.68); font-size: 0.92rem; }
.blog-cta { padding: 4.5rem 1.5rem; text-align: center; background: linear-gradient(135deg, #4a1a6b 0%, #83009d 100%); }
.blog-cta h2 { color: #ffef76; }
.blog-cta p { max-width: 720px; margin: 0 auto 1.7rem; color: rgba(255,255,255,0.86); }
.blog-cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; }
.blog-cta .btn-primary { background: #71ceeb; border-color: #71ceeb; color: #2f0048; }
@media (max-width: 1050px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-card { grid-template-columns: 260px minmax(0, 1fr); }
    .blog-card-media { width: 260px; }
    .blog-hero-mascot { width: 170px; right: -10px; opacity: 0.45; }
}
@media (max-width: 700px) {
    .blog-hero { padding: 3.75rem 0 3.25rem; }
    .blog-hero-mascot { display: none; }
    .blog-hero p { font-size: 1rem; }
    .blog-posts-section, .blog-article-section { padding: 3.25rem 1rem; }
    .blog-card { display: flex; flex-direction: column; }
    .blog-card-media { width: 100%; height: 210px; min-height: 210px; }
    .blog-learning-inner { grid-template-columns: 1fr; text-align: center; }
    .blog-learning-actions { justify-content: center; }
    .blog-article { font-size: 1rem; }
    .blog-checklist, .blog-related-grid { grid-template-columns: 1fr; }
    .blog-trust-inner { gap: 0.65rem 1.25rem; font-size: 0.85rem; }
}