/* ── Blog Index — Content Styles ───────────────────────── */
/* Header & footer provided by base.html (common UI) */

/* --abl-blog-accent is defined once in abl-common-ui-themes.css and
   inherited here via the cascade. The paper background palette
   (--abl-blog-paper, --abl-blog-paper-noise, etc.) is also defined
   there. Every blog stylesheet uses var(--abl-blog-accent) instead
   of var(--abl-accent) so the blog theme picker actually paints. */
:root {
    --abl-blog-index-max-width: 800px;
}

/* ── Page Reset ───────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Brown paper body — warm beige (light) / dark walnut (dark) base
   colour with a procedural SVG grain overlay. Three background layers
   stack from front to back:
     1. SVG noise (paper fibre grain)
     2. Soft radial vignette (slightly darker edges, like real paper)
     3. Solid paper colour (the base tone)
   background-attachment: fixed keeps the texture stationary as the
   user scrolls, which feels like the page is the paper rather than
   moving across it.

   The blog body also LOCALLY REMAPS the common UI palette variables
   (--abl-text, --abl-heading, --abl-card, etc.) to paper-friendly
   tones. Every existing blog rule that uses var(--abl-text) etc.
   automatically picks up the paper palette without per-rule edits.
   This is scoped to body so it only affects blog pages — other
   products that load common UI keep the standard palette. */
body {
    margin: 0;

    /* ── Local palette override (paper edition) ── */
    --abl-bg:           var(--abl-blog-paper);
    --abl-surface:      color-mix(in srgb, var(--abl-blog-paper) 92%, var(--abl-blog-paper-edge));
    --abl-card:         color-mix(in srgb, var(--abl-blog-paper) 88%, var(--abl-blog-paper-edge));
    --abl-border:       color-mix(in srgb, var(--abl-blog-paper-edge) 70%, transparent);
    --abl-border-light: color-mix(in srgb, var(--abl-blog-paper-edge) 40%, transparent);
    --abl-text:         var(--abl-blog-paper-text);
    --abl-heading:      var(--abl-blog-paper-heading);
    --abl-muted:        var(--abl-blog-paper-muted);

    background-color: var(--abl-blog-paper);
    background-image:
        var(--abl-blog-paper-noise),
        radial-gradient(ellipse 100% 80% at 50% 50%,
            transparent 40%,
            color-mix(in srgb, var(--abl-blog-paper-edge) 60%, transparent) 100%);
    background-attachment: fixed;
    background-size: 200px 200px, cover;
    background-repeat: repeat, no-repeat;
    color: var(--abl-blog-paper-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── Main Content ─────────────────────────────────────── */

.abl-blog-index-main {
    flex: 1;
    width: 100%;
    max-width: var(--abl-blog-index-max-width);
    margin: 0 auto;
    padding: 112px 24px 80px;  /* 64px navbar + 48px spacing */
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.abl-blog-index-intro {
    margin-bottom: 32px;
}

.abl-blog-index-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--abl-heading);
    letter-spacing: -0.03em;
    margin: 0 0 8px;
}

.abl-blog-index-subtitle {
    font-size: 15px;
    color: var(--abl-muted);
    margin: 0;
}

/* ── Filter Bar — Pill Buttons ────────────────────────── */

.abl-blog-index-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.abl-blog-index-filter-btn {
    background: var(--abl-surface);
    border: 1px solid var(--abl-border);
    color: var(--abl-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s;
}

.abl-blog-index-filter-btn:hover {
    background: color-mix(in srgb, var(--abl-blog-accent) 8%, transparent);
    color: var(--abl-text);
    border-color: color-mix(in srgb, var(--abl-blog-accent) 15%, var(--abl-border));
}

.abl-blog-index-filter-btn--active {
    background: var(--abl-blog-accent);
    color: #fff;
    border-color: var(--abl-blog-accent);
}

.abl-blog-index-filter-btn--active:hover {
    background: var(--abl-blog-accent);
    color: #fff;
    border-color: var(--abl-blog-accent);
    filter: brightness(1.1);
}

/* ── Post Cards ───────────────────────────────────────── */

.abl-blog-index-posts {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.abl-blog-index-card {
    display: block;
    background: var(--abl-card);
    border: 1px solid var(--abl-border);
    border-radius: 12px;
    padding: 24px;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
}

.abl-blog-index-card:hover {
    box-shadow: var(--abl-card-shadow);
    transform: translateY(-2px);
}

.abl-blog-index-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.abl-blog-index-card-date {
    font-size: 13px;
    color: var(--abl-muted);
}

.abl-blog-index-card-type {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--abl-blog-accent);
    background: color-mix(in srgb, var(--abl-blog-accent) 12%, transparent);
    padding: 2px 10px;
    border-radius: 999px;
}

.abl-blog-index-card-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--abl-heading);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.abl-blog-index-card-desc {
    font-size: 14px;
    color: var(--abl-muted);
    margin: 0 0 12px;
    line-height: 1.6;
}

.abl-blog-index-card-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--abl-blog-accent);
    transition: opacity 0.2s;
}

.abl-blog-index-card:hover .abl-blog-index-card-link {
    opacity: 0.85;
}

/* ── Empty State ──────────────────────────────────────── */

.abl-blog-index-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--abl-muted);
    font-size: 14px;
}

/* ── Responsive ───────────────────────────────────────── */

@media (max-width: 600px) {
    .abl-blog-index-main {
        padding: 96px 16px 64px;  /* 64px navbar + 32px spacing */
    }

    .abl-blog-index-title {
        font-size: 26px;
    }

    .abl-blog-index-card {
        padding: 20px;
    }

    .abl-blog-index-card-title {
        font-size: 18px;
    }
}