/* Gauss AI - Blog category visuals
   Each card's image area is a gradient mesh keyed by category, with a
   Material Symbol glyph rendered via CSS pseudo-element from a data-icon
   attribute. Keeping the icon name out of the document text makes the
   page LLM/SEO-friendly: crawlers read the post, not "menu_book".

   Categories: fundamentals (brand), technology (sky), budgeting (jade),
   lifestyle (rose). Add new category via .blog-img--<name> rule. */

:root {
    --blog-img-h-sm: 12rem;
    --blog-img-h-lg: 18rem;
    --blog-icon-sm: 4.25rem;
    --blog-icon-lg: 7.5rem;

    --blog-grad-fundamentals: var(--gauss-gradient-brand);
    --blog-grad-technology:   linear-gradient(135deg, #1558A0 0%, #7DD3FC 100%);
    --blog-grad-budgeting:    linear-gradient(135deg, #047857 0%, #10B981 100%);
    --blog-grad-lifestyle:    linear-gradient(135deg, #BE185D 0%, #F9A8D4 100%);
}

/* === Base placeholder === */
.blog-img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    color: rgba(255, 255, 255, 0.95);
}

.blog-img--sm { height: var(--blog-img-h-sm); }
.blog-img--lg { min-height: var(--blog-img-h-lg); height: 100%; }

/* Glyph rendered from data-icon attribute. Decorative, hidden from AT. */
.blog-img::before {
    content: attr(data-icon);
    font-family: 'Material Symbols Outlined', sans-serif;
    font-weight: 200;
    font-style: normal;
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48;
    font-size: var(--blog-icon-sm);
    line-height: 1;
    color: rgba(255, 255, 255, 0.32);
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    text-rendering: optimizeLegibility;
    text-transform: none;
    letter-spacing: normal;
    user-select: none;
    pointer-events: none;
    transition: transform var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out);
    z-index: 2;
}

.blog-img--lg::before {
    font-size: var(--blog-icon-lg);
    color: rgba(255, 255, 255, 0.36);
}

/* Soft directional highlight for depth (no shadow needed) */
.blog-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.22), transparent 60%);
    pointer-events: none;
    z-index: 1;
}

/* Category gradients */
.blog-img--fundamentals { background: var(--blog-grad-fundamentals); }
.blog-img--technology   { background: var(--blog-grad-technology); }
.blog-img--budgeting    { background: var(--blog-grad-budgeting); }
.blog-img--lifestyle    { background: var(--blog-grad-lifestyle); }

/* Hover: glyph drifts up and brightens */
.blog-card:hover .blog-img::before,
.blog-featured__card:hover .blog-img::before {
    transform: translateY(-2px) scale(1.06);
    color: rgba(255, 255, 255, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    .blog-img::before { transition: none; }
    .blog-card:hover .blog-img::before,
    .blog-featured__card:hover .blog-img::before {
        transform: none;
    }
}