/* =============================================================================
   MENTORA IT - Blog CSS
   Premium editorial design inspired by Vercel, Linear, Stripe, Tailwind CSS
   Typography-first, maximum whitespace, refined micro-interactions
   Uses design tokens from variables.css
   ============================================================================= */


/* =============================================================================
   0. CATEGORY COLOR TOKENS
   Each category has a foreground color and a translucent background tint
   ============================================================================= */
:root {
    --cat-reconversion: #10b981;
    --cat-reconversion-bg: rgba(16, 185, 129, 0.08);
    --cat-metiers-it: #6366f1;
    --cat-metiers-it-bg: rgba(99, 102, 241, 0.08);
    --cat-conseils-carriere: #f59e0b;
    --cat-conseils-carriere-bg: rgba(245, 158, 11, 0.08);
    --cat-certifications: #06b6d4;
    --cat-certifications-bg: rgba(6, 182, 212, 0.08);
    --cat-cybersecurite: #ef4444;
    --cat-cybersecurite-bg: rgba(239, 68, 68, 0.08);
    --cat-data-ia: #8b5cf6;
    --cat-data-ia-bg: rgba(139, 92, 246, 0.08);
    --cat-cloud-devops: #3b82f6;
    --cat-cloud-devops-bg: rgba(59, 130, 246, 0.08);
    --cat-developpement: #4f46e5;
    --cat-developpement-bg: rgba(79, 70, 229, 0.08);
    --cat-management-it: #0ea5e9;
    --cat-management-it-bg: rgba(14, 165, 233, 0.08);
    --cat-actualites-tech: #ec4899;
    --cat-actualites-tech-bg: rgba(236, 72, 153, 0.08);

    /* Blog-specific tokens */
    --blog-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --blog-content-width: 680px;
    --blog-grid-width: 960px;
}


/* =============================================================================
   1. READING PROGRESS BAR
   Fixed at the very top, gradient fill, above everything
   ============================================================================= */
.article-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    z-index: calc(var(--z-header) + 10);
    pointer-events: none;
}

.article-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500));
    transition: width 80ms linear;
    will-change: width;
}


/* =============================================================================
   2. BLOG HERO SECTION
   Clean white background, bold typography, thin gradient accent at top
   ============================================================================= */
.blog-hero {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 60%, var(--color-primary-700) 100%);
    color: var(--color-white);
    padding: calc(var(--space-16) + 80px) 0 var(--space-12);
    position: relative;
    overflow: hidden;
    text-align: center;
    border-bottom: none;
}

/* Decorative gradient orbs */
.blog-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -10%;
    width: 50%;
    height: 160%;
    background: radial-gradient(ellipse, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.blog-hero::after {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 40%;
    height: 140%;
    background: radial-gradient(ellipse, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.blog-hero-content {
    position: relative;
    z-index: 1;
    max-width: var(--blog-content-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.blog-hero-title {
    font-family: var(--font-family);
    font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
    font-weight: var(--font-weight-extrabold);
    margin-bottom: var(--space-4);
    line-height: 1.1;
    color: var(--color-white);
    letter-spacing: -0.035em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-wrap: balance;
    background: linear-gradient(135deg, #fff 0%, #c7d2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.blog-hero-subtitle {
    font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.125rem);
    color: rgba(255, 255, 255, 0.65);
    line-height: var(--line-height-relaxed);
    max-width: 520px;
    margin: 0 auto;
    text-wrap: pretty;
}


/* =============================================================================
   2b. FEATURED ARTICLE IN HERO
   2-column grid: content left, gradient visual right on desktop
   ============================================================================= */
.blog-hero-featured {
    max-width: 800px;
    margin: var(--space-8) auto 0;
    padding: 0 var(--space-6);
}

.blog-hero-featured-inner {
    display: grid;
    grid-template-columns: 1fr 0.6fr;
    gap: 0;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: border-color 500ms var(--blog-ease), box-shadow 500ms var(--blog-ease);
}

.blog-hero-featured-inner:hover {
    border-color: var(--color-gray-300);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.blog-hero-featured-content {
    padding: var(--space-6) var(--space-8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

/* Right side gradient visual panel */
.blog-hero-featured-inner::after {
    content: '';
    background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-secondary-500) 50%, var(--color-primary-400) 100%);
    min-height: 160px;
}

.blog-hero-featured-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary-500);
    margin-bottom: var(--space-2);
}

.blog-hero-featured-title {
    font-family: var(--font-family);
    font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.4rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    line-height: var(--line-height-tight);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-2);
    -webkit-font-smoothing: antialiased;
}

.blog-hero-featured-excerpt {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-hero-featured-meta {
    font-size: 11px;
    color: var(--color-gray-400);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.blog-hero-featured-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-500);
    text-decoration: none;
    transition: gap 400ms var(--blog-ease), color 200ms ease;
}

.blog-hero-featured-link:hover {
    color: var(--color-primary-600);
    gap: var(--space-3);
}


/* =============================================================================
   3. CATEGORY FILTER BAR
   Sticky below header, minimal pills, horizontal scroll on mobile
   ============================================================================= */
.blog-filters {
    padding: var(--space-4) 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-gray-100);
    position: sticky;
    top: 72px;
    z-index: 200;
}

.blog-filters-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
}

.blog-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    color: var(--color-gray-500);
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 250ms var(--blog-ease);
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
}

.blog-filter-btn:hover {
    color: var(--color-gray-800);
    background: var(--color-gray-50);
    border-color: var(--color-gray-300);
}

/* Active filter -- filled pill with gradient accent */
.blog-filter-btn.active {
    background: var(--color-gray-900);
    color: var(--color-white);
    border-color: var(--color-gray-900);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Category-specific active states with their signature colors */
.blog-filter-btn[data-category="reconversion"].active {
    background: var(--cat-reconversion);
    border-color: var(--cat-reconversion);
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.35);
}
.blog-filter-btn[data-category="metiers-it"].active {
    background: var(--cat-metiers-it);
    border-color: var(--cat-metiers-it);
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.35);
}
.blog-filter-btn[data-category="conseils-carriere"].active {
    background: var(--cat-conseils-carriere);
    border-color: var(--cat-conseils-carriere);
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.35);
}
.blog-filter-btn[data-category="certifications"].active {
    background: var(--cat-certifications);
    border-color: var(--cat-certifications);
    box-shadow: 0 2px 12px rgba(6, 182, 212, 0.35);
}
.blog-filter-btn[data-category="cybersecurite"].active {
    background: var(--cat-cybersecurite);
    border-color: var(--cat-cybersecurite);
    box-shadow: 0 2px 12px rgba(239, 68, 68, 0.35);
}
.blog-filter-btn[data-category="data-ia"].active {
    background: var(--cat-data-ia);
    border-color: var(--cat-data-ia);
    box-shadow: 0 2px 12px rgba(139, 92, 246, 0.35);
}
.blog-filter-btn[data-category="cloud-devops"].active {
    background: var(--cat-cloud-devops);
    border-color: var(--cat-cloud-devops);
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.35);
}
.blog-filter-btn[data-category="developpement"].active {
    background: var(--cat-developpement);
    border-color: var(--cat-developpement);
    box-shadow: 0 2px 12px rgba(79, 70, 229, 0.35);
}
.blog-filter-btn[data-category="management-it"].active {
    background: var(--cat-management-it);
    border-color: var(--cat-management-it);
    box-shadow: 0 2px 12px rgba(14, 165, 233, 0.35);
}
.blog-filter-btn[data-category="actualites-tech"].active {
    background: var(--cat-actualites-tech);
    border-color: var(--cat-actualites-tech);
    box-shadow: 0 2px 12px rgba(236, 72, 153, 0.35);
}

.blog-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--color-gray-100);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-500);
    line-height: 1;
}

.blog-filter-btn.active .blog-filter-count {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
}

/* Results count below filters */
.blog-results-count {
    max-width: var(--blog-grid-width);
    margin: 0 auto;
    padding: var(--space-4) var(--space-6) 0;
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
}


/* =============================================================================
   4. SEARCH OVERLAY
   Full-screen, backdrop blur, centered search box (Cmd+K style)
   ============================================================================= */
.blog-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    color: var(--color-gray-400);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 300ms var(--blog-ease);
}

.blog-search-trigger:hover {
    border-color: var(--color-gray-300);
    color: var(--color-gray-600);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.blog-search-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20vh;
    opacity: 0;
    transition: opacity 200ms ease;
}

.blog-search-overlay.active {
    display: flex;
    opacity: 1;
}

.blog-search-box {
    width: 100%;
    max-width: 560px;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow:
        0 16px 70px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    animation: searchSlideIn 300ms var(--blog-ease);
}

@keyframes searchSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.blog-search-input-wrapper {
    display: flex;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-gray-100);
    gap: var(--space-3);
}

.blog-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-gray-900);
    background: transparent;
    -webkit-font-smoothing: antialiased;
}

.blog-search-input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.blog-search-input::placeholder {
    color: var(--color-gray-400);
}

.blog-search-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: 0.6875rem;
    color: var(--color-gray-500);
    line-height: 1;
    font-weight: var(--font-weight-medium);
}

.blog-search-results {
    max-height: 360px;
    overflow-y: auto;
    padding: var(--space-2) 0;
}

.blog-search-result {
    display: block;
    padding: var(--space-3) var(--space-5);
    text-decoration: none;
    transition: background 150ms ease;
    cursor: pointer;
}

.blog-search-result:hover {
    background: var(--color-gray-50);
}

.blog-search-result-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin-bottom: 2px;
}

.blog-search-result-excerpt {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-search-no-results {
    padding: var(--space-8) var(--space-5);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
}


/* =============================================================================
   5. ARTICLE GRID SECTION
   Clean white background, 2 columns for readability
   ============================================================================= */
.blog-section {
    padding: var(--space-16) 0 var(--space-24);
    background: var(--color-white);
    min-height: 400px;
}

.blog-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}


/* =============================================================================
   6. ARTICLE CARDS
   Stripe-style layered shadows, category accent top border on hover,
   smooth micro-interactions with expo ease
   ============================================================================= */
.blog-card {
    position: relative;
    overflow: hidden;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-gray-200);
    display: flex;
    flex-direction: column;
    transition:
        transform 500ms var(--blog-ease),
        border-color 500ms var(--blog-ease),
        box-shadow 500ms var(--blog-ease);
}

/* Category accent top border on hover via pseudo-element */
.blog-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 500ms var(--blog-ease);
}

.blog-card:hover,
.blog-card:focus-within {
    transform: translateY(-2px);
    border-color: var(--color-gray-200);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.06),
        0 10px 15px -3px rgba(0, 0, 0, 0.06),
        0 20px 25px -5px rgba(0, 0, 0, 0.04);
}

.blog-card:focus-within {
    border-color: var(--color-primary-500);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.06),
        0 10px 15px -3px rgba(0, 0, 0, 0.06),
        0 20px 25px -5px rgba(0, 0, 0, 0.04),
        0 0 0 3px rgba(99, 102, 241, 0.3);
}

.blog-card:hover::after,
.blog-card:focus-within::after {
    transform: scaleX(1);
}

/* Category-specific accent colors on card hover */
.blog-card[data-category="reconversion"]::after { background: var(--cat-reconversion); }
.blog-card[data-category="metiers-it"]::after { background: var(--cat-metiers-it); }
.blog-card[data-category="conseils-carriere"]::after { background: var(--cat-conseils-carriere); }
.blog-card[data-category="certifications"]::after { background: var(--cat-certifications); }
.blog-card[data-category="cybersecurite"]::after { background: var(--cat-cybersecurite); }
.blog-card[data-category="data-ia"]::after { background: var(--cat-data-ia); }
.blog-card[data-category="cloud-devops"]::after { background: var(--cat-cloud-devops); }
.blog-card[data-category="developpement"]::after { background: var(--cat-developpement); }
.blog-card[data-category="management-it"]::after { background: var(--cat-management-it); }
.blog-card[data-category="actualites-tech"]::after { background: var(--cat-actualites-tech); }

.blog-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Card image area -- hidden by default for text-focused design */
.blog-card-image {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    background: none;
    display: none;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--blog-ease);
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.03);
}

/* Image placeholder -- hidden in text-focused design */
.blog-card-image-placeholder {
    display: none;
}

/* Card body */
.blog-card-body {
    padding: var(--space-5) var(--space-5) var(--space-4);
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Category badge -- pill with colored tint background */
.blog-card-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    backdrop-filter: none;
    margin-bottom: var(--space-3);
    -webkit-font-smoothing: antialiased;
}

/* Colored dot before badge text */
.blog-card-badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

/* Category badge colors with tinted backgrounds */
.blog-card-badge[data-category="reconversion"] { color: var(--cat-reconversion); background: var(--cat-reconversion-bg); }
.blog-card-badge[data-category="reconversion"]::before { background: var(--cat-reconversion); }
.blog-card-badge[data-category="metiers-it"] { color: var(--cat-metiers-it); background: var(--cat-metiers-it-bg); }
.blog-card-badge[data-category="metiers-it"]::before { background: var(--cat-metiers-it); }
.blog-card-badge[data-category="conseils-carriere"] { color: var(--cat-conseils-carriere); background: var(--cat-conseils-carriere-bg); }
.blog-card-badge[data-category="conseils-carriere"]::before { background: var(--cat-conseils-carriere); }
.blog-card-badge[data-category="certifications"] { color: var(--cat-certifications); background: var(--cat-certifications-bg); }
.blog-card-badge[data-category="certifications"]::before { background: var(--cat-certifications); }
.blog-card-badge[data-category="cybersecurite"] { color: var(--cat-cybersecurite); background: var(--cat-cybersecurite-bg); }
.blog-card-badge[data-category="cybersecurite"]::before { background: var(--cat-cybersecurite); }
.blog-card-badge[data-category="data-ia"] { color: var(--cat-data-ia); background: var(--cat-data-ia-bg); }
.blog-card-badge[data-category="data-ia"]::before { background: var(--cat-data-ia); }
.blog-card-badge[data-category="cloud-devops"] { color: var(--cat-cloud-devops); background: var(--cat-cloud-devops-bg); }
.blog-card-badge[data-category="cloud-devops"]::before { background: var(--cat-cloud-devops); }
.blog-card-badge[data-category="developpement"] { color: var(--cat-developpement); background: var(--cat-developpement-bg); }
.blog-card-badge[data-category="developpement"]::before { background: var(--cat-developpement); }
.blog-card-badge[data-category="management-it"] { color: var(--cat-management-it); background: var(--cat-management-it-bg); }
.blog-card-badge[data-category="management-it"]::before { background: var(--cat-management-it); }
.blog-card-badge[data-category="actualites-tech"] { color: var(--cat-actualites-tech); background: var(--cat-actualites-tech-bg); }
.blog-card-badge[data-category="actualites-tech"]::before { background: var(--cat-actualites-tech); }

/* Card meta (date, reading time) */
.blog-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: 0;
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
    order: 1;
}

.blog-card-meta-separator {
    width: 3px;
    height: 3px;
    border-radius: var(--radius-full);
    background: var(--color-gray-300);
    flex-shrink: 0;
}

/* Card title */
.blog-card-title {
    font-family: var(--font-family);
    font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.1rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin-bottom: var(--space-2);
    line-height: 1.35;
    letter-spacing: -0.015em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 300ms var(--blog-ease);
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
}

.blog-card:hover .blog-card-title {
    color: var(--color-primary-500);
}

/* Card excerpt */
.blog-card-excerpt {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
    margin-bottom: var(--space-4);
}

/* Card footer */
.blog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-gray-100);
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
}

/* Read more link */
.blog-card-readmore {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-400);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    transition: color 300ms var(--blog-ease), gap 400ms var(--blog-ease);
}

.blog-card:hover .blog-card-readmore {
    color: var(--color-primary-500);
    gap: var(--space-2);
}


/* =============================================================================
   7. LOADING STATE
   ============================================================================= */
.blog-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-20) var(--space-6);
}

.blog-loading-spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 2px solid var(--color-gray-200);
    border-top-color: var(--color-gray-900);
    border-radius: var(--radius-full);
    animation: blog-spin 0.7s linear infinite;
    margin-bottom: var(--space-4);
}

@keyframes blog-spin {
    to { transform: rotate(360deg); }
}

.blog-loading-text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
}


/* =============================================================================
   8. EMPTY STATE
   ============================================================================= */
.blog-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-24) var(--space-6);
}

.blog-empty-title {
    font-family: var(--font-family);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
    margin-bottom: var(--space-2);
    letter-spacing: -0.01em;
}

.blog-empty-text {
    font-size: var(--font-size-base);
    color: var(--color-gray-400);
    max-width: 400px;
    margin: 0 auto var(--space-6);
    line-height: var(--line-height-relaxed);
}

.blog-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--color-gray-900);
    color: var(--color-white);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: all 300ms var(--blog-ease);
}

.blog-empty-cta:hover {
    background: var(--color-gray-800);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


/* =============================================================================
   9. SINGLE ARTICLE PAGE
   ============================================================================= */
.article-page {
    background: var(--color-white);
}

/* Article hero -- subtle gradient background */
.article-hero {
    background: linear-gradient(180deg, var(--color-primary-50) 0%, var(--color-white) 100%);
    color: var(--color-gray-900);
    padding: calc(var(--space-16) + 80px) 0 var(--space-12);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--color-gray-100);
}

/* Gradient accent bar at top */
.article-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500), #ec4899);
}

.article-hero-content {
    position: relative;
    z-index: 1;
    max-width: var(--blog-content-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.article-hero-title {
    font-family: var(--font-family);
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    font-weight: var(--font-weight-extrabold);
    line-height: 1.15;
    margin-bottom: var(--space-6);
    color: var(--color-gray-900);
    letter-spacing: -0.03em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-wrap: balance;
}


/* =============================================================================
   10. BREADCRUMB
   ============================================================================= */
.blog-breadcrumb {
    margin-bottom: var(--space-6);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.blog-breadcrumb a {
    color: var(--color-gray-400);
    text-decoration: none;
    transition: color 200ms ease;
}

.blog-breadcrumb a:hover {
    color: var(--color-primary-500);
}

.blog-breadcrumb-separator {
    color: var(--color-gray-300);
}

.blog-breadcrumb-current {
    color: var(--color-gray-500);
}

/* Breadcrumb on listing page */
.blog-breadcrumb--dark {
    color: var(--color-gray-500);
    padding: var(--space-4) 0;
    max-width: var(--blog-grid-width);
    margin: 0 auto var(--space-4);
}

.blog-breadcrumb--dark a {
    color: var(--color-primary-500);
}

.blog-breadcrumb--dark .blog-breadcrumb-separator {
    color: var(--color-gray-300);
}

.blog-breadcrumb--dark .blog-breadcrumb-current {
    color: var(--color-gray-500);
}


/* =============================================================================
   11. ARTICLE META
   ============================================================================= */
.article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
}

.article-hero .article-meta {
    color: var(--color-gray-400);
}

.article-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.article-meta-item svg,
.article-meta-item i {
    width: 16px;
    height: 16px;
    opacity: 0.5;
}

.article-meta-separator {
    width: 4px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--color-gray-300);
}

/* Category badge in article meta -- colored pill */
.article-meta-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-4);
    transition: opacity 200ms ease;
}

.article-meta-badge:hover {
    opacity: 0.85;
}

/* Badge in hero */
.article-hero .article-meta-badge {
    background: var(--color-primary-50);
    color: var(--color-primary-600);
}

/* Badge colors by category */
.article-meta-badge[data-category="reconversion"] { background: var(--cat-reconversion-bg); color: var(--cat-reconversion); }
.article-meta-badge[data-category="metiers-it"] { background: var(--cat-metiers-it-bg); color: var(--cat-metiers-it); }
.article-meta-badge[data-category="conseils-carriere"] { background: var(--cat-conseils-carriere-bg); color: var(--cat-conseils-carriere); }
.article-meta-badge[data-category="certifications"] { background: var(--cat-certifications-bg); color: var(--cat-certifications); }
.article-meta-badge[data-category="cybersecurite"] { background: var(--cat-cybersecurite-bg); color: var(--cat-cybersecurite); }
.article-meta-badge[data-category="data-ia"] { background: var(--cat-data-ia-bg); color: var(--cat-data-ia); }
.article-meta-badge[data-category="cloud-devops"] { background: var(--cat-cloud-devops-bg); color: var(--cat-cloud-devops); }
.article-meta-badge[data-category="developpement"] { background: var(--cat-developpement-bg); color: var(--cat-developpement); }
.article-meta-badge[data-category="management-it"] { background: var(--cat-management-it-bg); color: var(--cat-management-it); }
.article-meta-badge[data-category="actualites-tech"] { background: var(--cat-actualites-tech-bg); color: var(--cat-actualites-tech); }


/* =============================================================================
   12. ARTICLE CONTENT -- LONG-FORM TYPOGRAPHY
   680px max-width, fluid font size, generous line-height,
   refined typographic details for comfortable reading
   ============================================================================= */
.article-content {
    max-width: var(--blog-content-width);
    margin: 0 auto;
    padding: var(--space-12) var(--space-6) var(--space-16);
    font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    line-height: 1.8;
    color: var(--color-gray-700);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Headings --- */
.article-content h2 {
    font-family: var(--font-family);
    font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin-top: var(--space-16);
    margin-bottom: var(--space-5);
    line-height: var(--line-height-tight);
    letter-spacing: -0.02em;
    padding-bottom: var(--space-3);
    padding-left: var(--space-4);
    border-bottom: none;
    border-left: 3px solid var(--color-primary-500);
    text-wrap: balance;
}

.article-content h3 {
    font-family: var(--font-family);
    font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-600);
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
    line-height: var(--line-height-tight);
    letter-spacing: -0.01em;
}

/* --- Paragraphs --- */
.article-content p {
    margin-bottom: var(--space-6);
    color: var(--color-gray-700);
    text-wrap: pretty;
}

/* First paragraph -- lead style */
.article-content > p:first-of-type {
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
    color: var(--color-gray-500);
    line-height: 1.85;
}

/* Drop cap on first paragraph */
.article-content > p:first-of-type::first-letter {
    float: left;
    font-size: 3.5em;
    line-height: 0.8;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-500);
    margin-right: 0.08em;
    margin-top: 0.05em;
}

/* --- Links -- animated underline (background-image gradient technique) --- */
.article-content a {
    color: var(--color-primary-500);
    text-decoration: none;
    background-image: linear-gradient(var(--color-primary-300), var(--color-primary-300));
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size 400ms var(--blog-ease), color 200ms ease;
    padding-bottom: 1px;
}

.article-content a:hover {
    background-size: 100% 1px;
    color: var(--color-primary-600);
}

/* --- Bold / Strong --- */
.article-content strong {
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    background: linear-gradient(180deg, transparent 60%, rgba(99, 102, 241, 0.12) 60%);
    padding: 0 2px;
}

/* --- Lists --- */
.article-content ul,
.article-content ol {
    margin-bottom: var(--space-8);
    padding-left: var(--space-6);
}

.article-content ul {
    list-style-type: disc;
}

.article-content ol {
    list-style-type: decimal;
}

.article-content li {
    margin-bottom: var(--space-3);
    color: var(--color-gray-700);
    line-height: 1.8;
    padding-left: var(--space-1);
}

.article-content li::marker {
    color: var(--color-primary-400);
}

/* --- Blockquotes --- */
.article-content blockquote {
    margin: var(--space-10) 0;
    padding: var(--space-6) var(--space-8);
    border-left: 4px solid;
    border-image: linear-gradient(180deg, var(--color-primary-500), var(--color-secondary-500)) 1;
    background: linear-gradient(135deg, var(--color-primary-50) 0%, rgba(139, 92, 246, 0.04) 100%);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    font-style: italic;
    color: var(--color-gray-700);
    position: relative;
}

.article-content blockquote::before {
    content: '\201C';
    position: absolute;
    top: -8px;
    left: 16px;
    font-size: 3rem;
    font-style: normal;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-300);
    line-height: 1;
}

.article-content blockquote p {
    margin-bottom: 0;
    color: var(--color-gray-700);
}

.article-content blockquote p:last-child {
    margin-bottom: 0;
}

/* --- Inline Code --- */
.article-content code {
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.875em;
    padding: 0.15em 0.45em;
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    color: var(--color-primary-600);
    word-break: break-word;
}

/* --- Code Blocks --- */
.article-content pre {
    margin: var(--space-8) 0;
    padding: var(--space-6);
    background: #0f172a;
    border-radius: var(--radius-lg);
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.article-content pre code {
    background: none;
    border: none;
    padding: 0;
    color: #e2e8f0;
    font-size: var(--font-size-sm);
    line-height: 1.7;
    word-break: normal;
}

/* --- Images --- */
.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    margin: var(--space-10) 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* --- Tables --- */
.article-content table {
    width: 100%;
    margin: var(--space-8) 0;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-size: var(--font-size-sm);
}

.article-content thead {
    background: linear-gradient(135deg, var(--color-primary-50) 0%, rgba(139, 92, 246, 0.06) 100%);
}

.article-content th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary-600);
    border-bottom: 2px solid var(--color-primary-200);
}

.article-content td {
    padding: var(--space-3) var(--space-4);
    color: var(--color-gray-700);
    border-bottom: 1px solid var(--color-gray-100);
}

.article-content tr:last-child td {
    border-bottom: none;
}

.article-content tr:hover td {
    background: var(--color-gray-50);
}


/* =============================================================================
   13. RICH CONTENT -- CALLOUT BOXES
   Left border 4px, subtle tint background matching type color
   Used inside article content by Claude AI
   ============================================================================= */
.callout {
    display: flex;
    gap: var(--space-4);
    margin: var(--space-8) 0;
    padding: var(--space-5) var(--space-6);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    border-left: 4px solid var(--color-gray-300);
    background: var(--color-gray-50);
}

.callout-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    line-height: 1;
    margin-top: 1px;
}

.callout-content {
    flex: 1;
    min-width: 0;
}

.callout-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin-bottom: var(--space-1);
}

.callout-text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: var(--line-height-relaxed);
}

.callout-text p {
    margin-bottom: var(--space-2);
}

.callout-text p:last-child {
    margin-bottom: 0;
}

/* Info callout -- blue */
.callout--info {
    border-left-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.callout--info .callout-title {
    color: #1d4ed8;
}

.callout--info .callout-icon {
    color: #3b82f6;
}

/* Tip callout -- green */
.callout--tip {
    border-left-color: var(--color-accent-green);
    background: rgba(16, 185, 129, 0.05);
}

.callout--tip .callout-title {
    color: #047857;
}

.callout--tip .callout-icon {
    color: var(--color-accent-green);
}

/* Warning callout -- orange */
.callout--warning {
    border-left-color: var(--color-accent-orange);
    background: rgba(245, 158, 11, 0.05);
}

.callout--warning .callout-title {
    color: #b45309;
}

.callout--warning .callout-icon {
    color: var(--color-accent-orange);
}

/* Danger callout -- red */
.callout--danger {
    border-left-color: var(--color-accent-red);
    background: rgba(239, 68, 68, 0.05);
}

.callout--danger .callout-title {
    color: #b91c1c;
}

.callout--danger .callout-icon {
    color: var(--color-accent-red);
}


/* =============================================================================
   14. RICH CONTENT -- KEY TAKEAWAY
   Primary-50 bg, "A retenir" label at top with primary-500 bg
   ============================================================================= */
.key-takeaway {
    position: relative;
    margin: var(--space-10) 0;
    padding: var(--space-10) var(--space-8) var(--space-8);
    background: var(--color-primary-50);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-primary-100);
}

.key-takeaway::before {
    content: 'A retenir';
    position: absolute;
    top: -12px;
    left: var(--space-6);
    padding: var(--space-1) var(--space-4);
    background: var(--color-primary-500);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--radius-full);
}

.key-takeaway-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.key-takeaway-list li {
    position: relative;
    padding-left: var(--space-6);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    line-height: var(--line-height-relaxed);
}

.key-takeaway-list li:last-child {
    margin-bottom: 0;
}

.key-takeaway-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-primary-500);
}


/* =============================================================================
   15. RICH CONTENT -- PULL QUOTE
   Centered, gradient top line, italic, larger font
   ============================================================================= */
.pull-quote {
    margin: var(--space-12) 0;
    padding: var(--space-8) var(--space-6);
    text-align: center;
    position: relative;
}

.pull-quote::before {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500));
    margin: 0 auto var(--space-6);
    border-radius: var(--radius-full);
}

.pull-quote-text {
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    font-style: italic;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
    line-height: 1.6;
    letter-spacing: -0.01em;
    max-width: 560px;
    margin: 0 auto var(--space-4);
}

.pull-quote-attribution {
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
    font-style: normal;
    font-weight: var(--font-weight-medium);
}

.pull-quote-attribution::before {
    content: '\2014\00a0';
}


/* =============================================================================
   16. RICH CONTENT -- STEPS
   Counter-based numbered circles with gradient background
   ============================================================================= */
.steps {
    counter-reset: step-counter;
    margin: var(--space-10) 0;
    padding: 0;
    list-style: none;
}

.step {
    counter-increment: step-counter;
    display: flex;
    gap: var(--space-5);
    margin-bottom: var(--space-8);
    position: relative;
}

.step:last-child {
    margin-bottom: 0;
}

/* Numbered circle */
.step::before {
    content: counter(step-counter);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500));
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

/* Connecting line between steps */
.step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 17px;
    top: 42px;
    bottom: -var(--space-8);
    width: 2px;
    background: var(--color-gray-200);
}

.step-content {
    flex: 1;
    padding-top: var(--space-2);
}

.step-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin-bottom: var(--space-1);
}

.step-description {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: var(--line-height-relaxed);
}


/* =============================================================================
   17. ARTICLE TAGS
   ============================================================================= */
.article-tags {
    max-width: var(--blog-content-width);
    margin: 0 auto;
    padding: 0 var(--space-6) var(--space-8);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.article-tag {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    background: var(--color-gray-50);
    color: var(--color-gray-500);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: all 300ms var(--blog-ease);
    border: 1px solid var(--color-gray-100);
}

.article-tag:hover {
    background: var(--color-primary-50);
    color: var(--color-primary-500);
    border-color: var(--color-primary-100);
    transform: translateY(-1px);
}


/* =============================================================================
   18. ARTICLE SOURCES
   ============================================================================= */
.article-sources {
    max-width: var(--blog-content-width);
    margin: 0 auto;
    padding: 0 var(--space-6) var(--space-10);
    border-top: 1px solid var(--color-gray-100);
    padding-top: var(--space-8);
}

.article-sources-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-400);
    margin-bottom: var(--space-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.article-sources-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-sources-list li {
    margin-bottom: var(--space-2);
}

.article-sources-list a {
    font-size: var(--font-size-sm);
    color: var(--color-primary-500);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: color 200ms ease;
    background-image: linear-gradient(var(--color-primary-300), var(--color-primary-300));
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    padding-bottom: 1px;
}

.article-sources-list a:hover {
    color: var(--color-primary-600);
    background-size: 100% 1px;
}


/* =============================================================================
   19. CTA SECTION
   Gradient background, centered text, white button
   ============================================================================= */
.article-cta {
    max-width: var(--blog-content-width);
    margin: 0 auto var(--space-16);
    padding: var(--space-12) var(--space-10);
    background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
    border-radius: var(--radius-2xl);
    text-align: center;
    color: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* Subtle pattern overlay */
.article-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.article-cta-content {
    position: relative;
    z-index: 1;
}

.article-cta-title {
    font-family: var(--font-family);
    font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-3);
    letter-spacing: -0.015em;
    -webkit-font-smoothing: antialiased;
}

.article-cta-text {
    font-size: var(--font-size-base);
    opacity: 0.9;
    margin-bottom: var(--space-8);
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    line-height: var(--line-height-relaxed);
}

.article-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-8);
    background: var(--color-white);
    color: var(--color-primary-600);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: transform 400ms var(--blog-ease), box-shadow 400ms var(--blog-ease);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.article-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}


/* =============================================================================
   20. RELATED ARTICLES
   Gray-50 background, 3-column grid, compact cards with accent top border
   ============================================================================= */
.related-articles {
    padding: var(--space-16) 0 var(--space-20);
    background: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-100);
}

.related-articles-inner {
    max-width: var(--blog-grid-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.related-articles-title {
    font-family: var(--font-family);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin-bottom: var(--space-10);
    text-align: center;
    letter-spacing: -0.01em;
}

.related-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

/* Related card */
.related-card {
    display: block;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition:
        transform 500ms var(--blog-ease),
        border-color 500ms var(--blog-ease),
        box-shadow 500ms var(--blog-ease);
}

/* Accent top border */
.related-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 500ms var(--blog-ease);
}

.related-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-gray-200);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 15px -3px rgba(0, 0, 0, 0.05),
        0 20px 25px -5px rgba(0, 0, 0, 0.03);
}

.related-card:hover::before {
    transform: scaleX(1);
}

.related-card-category {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary-500);
    margin-bottom: var(--space-3);
    display: block;
}

.related-card-title {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 300ms var(--blog-ease);
    letter-spacing: -0.01em;
}

.related-card:hover .related-card-title {
    color: var(--color-primary-500);
}

.related-card-meta {
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
}


/* =============================================================================
   21. SCROLL REVEAL ANIMATIONS
   fade-up on scroll, staggered delays for cards
   ============================================================================= */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 600ms var(--blog-ease),
        transform 600ms var(--blog-ease);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for cards in grid */
.blog-grid .reveal:nth-child(1) { transition-delay: 0ms; }
.blog-grid .reveal:nth-child(2) { transition-delay: 80ms; }
.blog-grid .reveal:nth-child(3) { transition-delay: 160ms; }
.blog-grid .reveal:nth-child(4) { transition-delay: 240ms; }
.blog-grid .reveal:nth-child(5) { transition-delay: 320ms; }
.blog-grid .reveal:nth-child(6) { transition-delay: 400ms; }
.blog-grid .reveal:nth-child(7) { transition-delay: 480ms; }
.blog-grid .reveal:nth-child(8) { transition-delay: 560ms; }
.blog-grid .reveal:nth-child(9) { transition-delay: 640ms; }
.blog-grid .reveal:nth-child(10) { transition-delay: 720ms; }

/* Staggered delays for related cards */
.related-articles-grid .reveal:nth-child(1) { transition-delay: 0ms; }
.related-articles-grid .reveal:nth-child(2) { transition-delay: 80ms; }
.related-articles-grid .reveal:nth-child(3) { transition-delay: 160ms; }


/* =============================================================================
   22b. RICH CONTENT -- VISUAL COMPONENTS
   Stat grids, progress bars, timelines, comparison cards, checklists, testimonials
   Used by AI-generated articles for visual richness
   ============================================================================= */

/* --- Stat Grid (key figures) --- */
.article-content .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin: 32px 0;
}

.article-content .stat-card {
    background: linear-gradient(135deg, #f5f3ff 0%, #eff6ff 100%);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-content .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12);
}

.article-content .stat-value {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.article-content .stat-label {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
}

.article-content .stat-detail {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 4px;
}

/* --- Progress / Skill Bars --- */
.article-content .bar-chart {
    margin: 28px 0;
}

.article-content .bar-item {
    margin-bottom: 14px;
}

.article-content .bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.article-content .bar-track {
    height: 10px;
    background: #e5e7eb;
    border-radius: 99px;
    overflow: hidden;
}

.article-content .bar-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    transition: width 1s ease;
}

.article-content .bar-fill--green { background: linear-gradient(90deg, #059669, #10b981); }
.article-content .bar-fill--blue { background: linear-gradient(90deg, #2563eb, #3b82f6); }
.article-content .bar-fill--orange { background: linear-gradient(90deg, #d97706, #f59e0b); }
.article-content .bar-fill--red { background: linear-gradient(90deg, #dc2626, #ef4444); }

/* --- Timeline / Steps --- */
.article-content .timeline {
    margin: 32px 0;
    padding-left: 0;
    list-style: none;
}

.article-content .timeline-step {
    position: relative;
    padding-left: 48px;
    padding-bottom: 28px;
    border-left: 2px solid #e5e7eb;
    margin-left: 16px;
}

.article-content .timeline-step:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.article-content .timeline-dot {
    position: absolute;
    left: -13px;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px white, 0 0 0 6px rgba(99, 102, 241, 0.2);
}

.article-content .timeline-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}

.article-content .timeline-desc {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
}

.article-content .timeline-duration {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
    padding: 2px 8px;
    border-radius: 99px;
    margin-top: 6px;
}

/* --- Comparison Cards --- */
.article-content .compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 28px 0;
}

.article-content .compare-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    background: white;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-content .compare-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.article-content .compare-card--highlight {
    border-color: #6366f1;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.04) 0%, white 100%);
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2);
}

.article-content .compare-header {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
}

.article-content .compare-price {
    font-size: 1.5rem;
    font-weight: 800;
    color: #6366f1;
    margin-bottom: 4px;
}

.article-content .compare-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-content .compare-list li {
    position: relative;
    padding: 6px 0 6px 24px;
    font-size: 0.85rem;
    color: #4b5563;
    line-height: 1.5;
}

.article-content .compare-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%2310b981' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- Checklist --- */
.article-content .checklist {
    list-style: none;
    padding: 0;
    margin: 24px 0;
    background: #f9fafb;
    border-radius: 12px;
    padding: 20px 24px;
    border: 1px solid #e5e7eb;
}

.article-content .checklist li {
    position: relative;
    padding: 8px 0 8px 32px;
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.6;
    border-bottom: 1px solid #f3f4f6;
}

.article-content .checklist li:last-child {
    border-bottom: none;
}

.article-content .checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%236366f1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='16' rx='3' fill='%236366f1'/%3E%3Cpath d='M11.78 5.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L4.22 8.28a.75.75 0 111.06-1.06L7 8.94l3.72-3.72a.75.75 0 011.06 0z' fill='white'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- Testimonial / Quote Card --- */
.article-content .testimonial-card {
    margin: 28px 0;
    padding: 24px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.article-content .testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: 12px;
    left: 20px;
    font-size: 3rem;
    font-family: Georgia, serif;
    color: rgba(99, 102, 241, 0.2);
    line-height: 1;
}

.article-content .testimonial-text {
    font-size: 0.95rem;
    font-style: italic;
    color: #374151;
    line-height: 1.7;
    padding-left: 8px;
    margin-bottom: 12px;
}

.article-content .testimonial-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.article-content .testimonial-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
}

.article-content .testimonial-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1f2937;
}

.article-content .testimonial-role {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* --- Salary / Data Table (enhanced) --- */
.article-content .data-table-wrapper {
    margin: 28px 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.article-content .data-table-title {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    padding: 14px 20px;
    font-weight: 700;
    font-size: 0.9rem;
}

.article-content .data-table-wrapper table {
    margin: 0;
    border: none;
    border-radius: 0;
}


/* =============================================================================
   22. RESPONSIVE DESIGN
   Desktop-first breakpoints
   ============================================================================= */

/* --- Extra large screens --- */
@media (min-width: 1400px) {
    .blog-grid {
        max-width: 1040px;
        gap: var(--space-12);
    }

    .related-articles-inner {
        max-width: 1040px;
    }
}

/* --- Hide TOC sidebar at 1200px --- */
@media (max-width: 1200px) {
    /* Reserve for TOC sidebar if added later */
}

/* --- Tablet --- */
@media (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }

    .related-articles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }

    .blog-hero-featured-inner {
        grid-template-columns: 1fr;
    }

    .blog-hero-featured-inner::after {
        min-height: 100px;
        order: -1;
    }

    .blog-hero-featured-content {
        padding: var(--space-5) var(--space-6);
    }
}

/* --- Mobile: 2 columns until 540px --- */
@media (max-width: 768px) {
    .blog-grid,
    .related-articles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .blog-hero-featured-inner::after {
        min-height: 80px;
    }
}

/* --- Small mobile --- */
@media (max-width: 640px) {
    .blog-hero {
        padding: calc(var(--space-12) + 64px) 0 var(--space-10);
    }

    .blog-hero-title {
        letter-spacing: -0.025em;
    }

    .blog-hero-featured {
        margin-top: var(--space-6);
        padding: 0 var(--space-4);
    }

    .blog-hero-featured-content {
        padding: var(--space-4) var(--space-5);
    }

    .blog-hero-featured-inner::after {
        min-height: 60px;
    }

    .blog-filters {
        padding: var(--space-3) 0;
    }

    .blog-filters-inner {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding: 0 var(--space-4);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Fade edges for horizontal scroll */
        mask-image: linear-gradient(to right, transparent 0, black var(--space-4), black calc(100% - var(--space-8)), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--space-4), black calc(100% - var(--space-8)), transparent 100%);
    }

    .blog-filters-inner::-webkit-scrollbar {
        display: none;
    }

    .blog-section {
        padding: var(--space-8) 0 var(--space-16);
    }

    .blog-grid,
    .related-articles-grid {
        gap: var(--space-3);
        padding: 0 var(--space-4);
    }

    .blog-card-body {
        padding: var(--space-4);
    }

    .blog-card-title {
        font-size: var(--font-size-sm);
    }

    .blog-card-excerpt {
        font-size: var(--font-size-xs);
        -webkit-line-clamp: 2;
    }

    .blog-card-image {
        height: 0;
        display: none;
    }

    /* Article page mobile */
    .article-hero {
        padding: calc(var(--space-12) + 64px) 0 var(--space-8);
    }

    .article-meta {
        gap: var(--space-2);
    }

    .article-content {
        padding: var(--space-8) var(--space-4) var(--space-12);
        font-size: 1.0625rem;
    }

    .article-content h2 {
        font-size: var(--font-size-xl);
        margin-top: var(--space-10);
    }

    .article-content h3 {
        font-size: var(--font-size-lg);
        margin-top: var(--space-8);
    }

    .article-content blockquote {
        margin: var(--space-6) 0;
        padding: var(--space-4) var(--space-5);
    }

    .article-content table {
        font-size: var(--font-size-xs);
        display: block;
        overflow-x: auto;
    }

    .article-cta {
        margin: 0 var(--space-4) var(--space-12);
        padding: var(--space-8) var(--space-5);
        border-radius: var(--radius-xl);
    }

    .article-cta-title {
        font-size: var(--font-size-xl);
    }

    .related-articles {
        padding: var(--space-10) 0;
    }

    .related-articles-title {
        font-size: var(--font-size-lg);
    }

    .article-tags {
        padding: 0 var(--space-4) var(--space-6);
    }

    .article-sources {
        padding: 0 var(--space-4) var(--space-6);
    }

    /* Callouts on mobile */
    .callout {
        padding: var(--space-4) var(--space-5);
        gap: var(--space-3);
    }

    /* Key takeaway on mobile */
    .key-takeaway {
        padding: var(--space-8) var(--space-5) var(--space-6);
        margin: var(--space-6) 0;
    }

    /* Pull quote on mobile */
    .pull-quote {
        margin: var(--space-8) 0;
        padding: var(--space-6) var(--space-4);
    }

    .pull-quote-text {
        font-size: 1.125rem;
    }

    /* Rich visual components on mobile */
    .stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }

    .stat-card {
        padding: var(--space-4);
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .bar-chart {
        gap: var(--space-3);
    }

    .bar-label {
        min-width: 80px;
        font-size: var(--font-size-xs);
    }

    .timeline {
        padding-left: var(--space-4);
    }

    .compare-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .testimonial-card {
        padding: var(--space-5);
    }

    .data-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table {
        font-size: var(--font-size-xs);
        min-width: 500px;
    }

    /* Steps on mobile */
    .step {
        gap: var(--space-4);
    }

    .step::before {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-xs);
    }

    /* Search overlay mobile */
    .blog-search-overlay {
        padding-top: 10vh;
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .blog-search-box {
        border-radius: var(--radius-lg);
    }
}

/* --- Single column on very small screens --- */
@media (max-width: 480px) {
    .blog-grid,
    .related-articles-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .blog-card-title {
        font-size: var(--font-size-base);
    }

    .blog-card-excerpt {
        font-size: var(--font-size-sm);
        -webkit-line-clamp: 3;
    }
}

/* --- Extra small mobile --- */
@media (max-width: 380px) {
    .blog-hero-title {
        font-size: var(--font-size-2xl);
    }

    .blog-filter-btn {
        padding: var(--space-1) var(--space-3);
        font-size: var(--font-size-xs);
    }

    .article-cta-btn {
        padding: var(--space-3) var(--space-6);
        font-size: var(--font-size-sm);
    }

    .article-content > p:first-of-type::first-letter {
        font-size: 2.8em;
    }

    .step::before {
        width: 28px;
        height: 28px;
        font-size: 0.6875rem;
    }

    .stat-grid {
        grid-template-columns: 1fr;
    }

    .stat-value {
        font-size: 1.25rem;
    }

    .bar-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .bar-label {
        min-width: unset;
    }
}


/* =============================================================================
   23. REDUCED MOTION
   Disable all animations for users who prefer reduced motion
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .blog-card,
    .related-card,
    .blog-card::after,
    .related-card::before {
        transition: none;
    }

    .blog-card:hover,
    .related-card:hover {
        transform: none;
    }

    .blog-card-image img {
        transition: none;
    }

    .blog-card-title,
    .blog-card-readmore,
    .related-card-title {
        transition: none;
    }

    .blog-loading-spinner {
        animation: none;
        border-top-color: var(--color-gray-900);
    }

    .article-cta-btn {
        transition: none;
    }

    .article-cta-btn:hover {
        transform: none;
    }

    .article-tag {
        transition: none;
    }

    .article-tag:hover {
        transform: none;
    }

    .article-content a {
        transition: none;
    }

    .article-sources-list a {
        transition: none;
    }

    .blog-hero-featured-link {
        transition: none;
    }

    .blog-hero-featured-inner {
        transition: none;
    }

    .blog-search-box {
        animation: none;
    }

    .blog-search-overlay {
        transition: none;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .reveal.visible {
        transition: none;
    }

    .blog-filter-btn {
        transition: none;
    }

    .blog-empty-cta {
        transition: none;
    }

    .blog-empty-cta:hover {
        transform: none;
    }

    .article-progress-bar {
        transition: none;
    }
}


/* =============================================================================
   24. PRINT STYLES
   ============================================================================= */
@media print {
    .blog-hero,
    .blog-filters,
    .article-cta,
    .related-articles,
    .blog-breadcrumb,
    .article-progress,
    .blog-search-trigger,
    .blog-search-overlay,
    .blog-card-readmore {
        display: none;
    }

    .article-content {
        max-width: 100%;
        padding: 0;
        font-size: 12pt;
    }

    .article-content a {
        color: var(--color-gray-800);
        text-decoration: none;
        background: none;
    }

    .article-content a::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: var(--color-gray-500);
    }

    .blog-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid var(--color-gray-300);
    }

    .blog-card:hover {
        transform: none;
        box-shadow: none;
    }

    .callout,
    .key-takeaway {
        break-inside: avoid;
    }
}