/* ==========================================================================
   Insights (Blog) Landing Page - Page-Specific Styles
   /css/pages/blog.css
   Reuses the shared Internal Hero System (css/components/hero-internal.css)
   via a page modifier, exactly like the SEO services page does. The hero
   geometry itself is never touched here - only background/visual content.
   ========================================================================== */

/* ---- Hero: shorter, information-first, no SEO-style dashboard ---- */
.internal-hero--blog{min-height:320px;}
.internal-hero--blog .internal-hero__bg{
    background-color:var(--navy-950);
    /* Pure-CSS subtle dot-grid motif - deliberately not an external SVG/PNG
       asset, per the Blog System v1.0 spec's "browser-safe techniques"
       guidance and this project's prior SVG-delivery issues on the SEO
       page background (see SVG-MIME-FIX.md / BACKGROUND-FIX.md history). */
    background-image:radial-gradient(rgba(111,217,224,.14) 1px,transparent 1px);
    background-size:26px 26px;
}
.internal-hero--blog .internal-hero__overlay{
    background:linear-gradient(120deg,rgba(0,31,49,.92) 0%,rgba(11,48,73,.8) 55%,rgba(0,31,49,.88) 100%);
}
.internal-hero--blog .internal-hero__inner{padding-top:0;padding-bottom:0;align-items:center;}

/* Restrained editorial hero object: abstract stacked content cards +
   connected topic nodes. No stock imagery, no fake headlines, no invented
   stats - every label used is a real planned category name. */
.blog-hero-visual{position:relative;width:100%;max-width:360px;margin:0 auto;}
.blog-hero-card{
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
    border-radius:14px;padding:18px 20px;margin-bottom:14px;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.blog-hero-card:last-child{margin-bottom:0;}
.blog-hero-card__tag{
    display:inline-block;background:rgba(19,167,179,.16);color:var(--teal-300);
    font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
    padding:3px 9px;border-radius:10px;margin-bottom:12px;
}
.blog-hero-card__line{height:8px;border-radius:4px;background:rgba(255,255,255,.14);margin-bottom:8px;}
.blog-hero-card__line:last-child{margin-bottom:0;width:60%;}
.blog-hero-card--offset{margin-left:28px;opacity:.7;}

@media (max-width:1024px){.blog-hero-visual{display:none;}}

/* ---- Latest Insights ---- */
.insights-section{padding:90px 0;background:var(--white);}
.insights-section .section-eyebrow{text-align:left;}
.insights-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px;flex-wrap:wrap;}
.insights-heading h2{color:var(--navy-950);font-size:2rem;font-weight:800;margin:0;}

/* Category label list - labels only, no fake filter buttons, no article counts */
.insights-categories{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:44px;}
.insights-category-label{
    display:inline-flex;align-items:center;background:var(--gray-100);border:1px solid var(--gray-300);
    color:var(--gray-700);font-size:.82rem;font-weight:600;padding:8px 16px;border-radius:20px;
}

/* Honest empty state - shown while the article library is being built,
   instead of fabricated placeholder cards. */
.insights-empty{
    text-align:center;padding:56px 32px;background:var(--gray-100);border:1px dashed var(--gray-300);
    border-radius:16px;
}
.insights-empty h3{color:var(--navy-950);font-size:1.15rem;font-weight:700;margin-bottom:10px;}
.insights-empty p{color:var(--gray-700);font-size:.95rem;line-height:1.6;max-width:480px;margin:0 auto;}

/* ---- Conversion CTA ---- */
.insights-cta{padding:80px 0;background:linear-gradient(135deg,var(--navy-950) 0%,var(--navy-800) 100%);text-align:center;}
.insights-cta-inner{max-width:600px;margin:0 auto;}
.insights-cta h2{color:var(--white);font-size:1.9rem;font-weight:800;margin-bottom:14px;}
.insights-cta p{color:var(--gray-300);font-size:1rem;line-height:1.6;margin-bottom:26px;}

@media (max-width:640px){
    .insights-section{padding:56px 0;}
    .insights-heading h2{font-size:1.6rem;}
    .insights-cta{padding:56px 0;}
    .insights-cta h2{font-size:1.5rem;}
}