/*
 * Blog listing (/blog) — light back-office direction (2026-10-05).
 * Matches Shop/Menu/FAQ: compact green gradient hero with glass stats and the
 * newest article as a white card, tinted filter chips, calmer cards, and on
 * phones a two-column grid of cover cards (the narrow 112px thumbnails cut
 * the lettering on the covers). Loaded after blog.css on the listing pages.
 */
body[data-blog-page="listing"] {
    --bx-ink: #18241e;
    --bx-text: #46564d;
    --bx-muted: #6f7f76;
    --bx-line: #e3eae5;
    --bx-wash: #f6f9f7;
    --bx-green: #1f7a4d;
    --bx-green-strong: #166340;
    --bx-green-tint: #eaf5ef;
    --bx-shadow: 0 1px 2px rgba(24, 36, 30, .04), 0 10px 26px rgba(24, 36, 30, .06);
    background: var(--bx-wash);
}
body[data-blog-page="listing"] main { font-synthesis: none; }

/* Hero */
body[data-blog-page="listing"] .bl-hero-band {
    border: 0;
    border-radius: 24px;
    background:
        radial-gradient(60% 140% at 100% 0%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 62%),
        linear-gradient(140deg, #2b9a62 0%, #1f7a4d 45%, #145c3a 100%);
    box-shadow: 0 14px 34px rgba(20, 92, 58, .18);
    color: #fff;
}
body[data-blog-page="listing"] .bl-hero h1 { padding-top: 0; color: #fff; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 600; letter-spacing: -.01em; }
body[data-blog-page="listing"] .bl-hero h1::before { display: none; }
body[data-blog-page="listing"] .bl-hero p { color: rgba(255, 255, 255, .88); font-size: 1rem; line-height: 1.7; }
body[data-blog-page="listing"] .bl-stats { gap: 8px; padding: 0; border: 0; }
body[data-blog-page="listing"] .bl-stats > div,
body[data-blog-page="listing"] .bl-stats > div:first-child {
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(6px);
}
body[data-blog-page="listing"] .bl-stats > div + div { border-left: 1px solid rgba(255, 255, 255, .24); }
body[data-blog-page="listing"] .bl-stats dt { color: rgba(255, 255, 255, .85); font-weight: 400; }
body[data-blog-page="listing"] .bl-stats dd { color: #fff; font-weight: 600; }
body[data-blog-page="listing"] .bl-cover { border: 0; box-shadow: 0 16px 36px rgba(10, 40, 25, .28); }
body[data-blog-page="listing"] .bl-cover .bl-cover-caption small { color: var(--bx-green); font-weight: 500; }
body[data-blog-page="listing"] .bl-cover .bl-cover-caption strong { font-weight: 600; }
body[data-blog-page="listing"] .bl-cover .bl-cover-caption em { color: var(--bx-green-strong); font-weight: 500; }

/* Section head and filters */
body[data-blog-page="listing"] .blog-listing-head h2 { color: var(--bx-ink); font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem); font-weight: 600; }
body[data-blog-page="listing"] .blog-listing-head p { color: var(--bx-muted); }
body[data-blog-page="listing"] .blog-filter-bar button {
    border: 1px solid transparent;
    background: #fff;
    color: var(--bx-text);
    font-weight: 500;
    box-shadow: 0 0 0 1px var(--bx-line);
}
body[data-blog-page="listing"] .blog-filter-bar button strong { background: var(--bx-wash); color: var(--bx-muted); font-weight: 500; }
body[data-blog-page="listing"] .blog-filter-bar button:hover { background: #fbfdfc; color: var(--bx-ink); }
body[data-blog-page="listing"] .blog-filter-bar button.active {
    border-color: var(--bx-green);
    background: var(--bx-green-tint);
    color: var(--bx-green-strong);
    box-shadow: none;
}
body[data-blog-page="listing"] .blog-filter-bar button.active strong { background: #fff; color: var(--bx-green); }

/* Cards */
body[data-blog-page="listing"] .blog-card { border: 1px solid var(--bx-line); border-radius: 18px; background: #fff; box-shadow: var(--bx-shadow); }
body[data-blog-page="listing"] .blog-card:hover { box-shadow: 0 16px 36px rgba(24, 36, 30, .1); }
body[data-blog-page="listing"] .blog-card-kicker { color: var(--bx-muted); font-weight: 400; }
body[data-blog-page="listing"] .blog-category-pill { background: var(--bx-green-tint); color: var(--bx-green-strong); font-weight: 500; }
body[data-blog-page="listing"] .blog-card-content h3 { font-weight: 600; }
body[data-blog-page="listing"] .blog-card-content h3 a { color: var(--bx-ink); }
body[data-blog-page="listing"] .blog-card-content > p { color: var(--bx-muted); }
body[data-blog-page="listing"] .blog-card-footer { color: var(--bx-muted); }
body[data-blog-page="listing"] .blog-read-link { color: var(--bx-green-strong); font-weight: 500; }
body[data-blog-page="listing"] .blog-card > a:first-child { background: var(--bx-wash) url("/Images/Logo.webp") center / 30% auto no-repeat; }

/* Phones: two-column cover cards instead of narrow thumbnails. */
@media (max-width: 700px) {
    body[data-blog-page="listing"] .bl-stats > div,
    body[data-blog-page="listing"] .bl-stats > div:first-child { padding: 5px 12px; }
    body[data-blog-page="listing"] .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body[data-blog-page="listing"] .blog-card.blog-card-featured:not([hidden]) { grid-column: 1 / -1; }
    body[data-blog-page="listing"] .blog-card:not(.blog-card-featured) { display: flex; flex-direction: column; border-radius: 16px; }
    body[data-blog-page="listing"] .blog-card:not(.blog-card-featured) > a:first-child { height: auto; }
    body[data-blog-page="listing"] .blog-card:not(.blog-card-featured) .blog-card-img { height: auto; min-height: 0; aspect-ratio: 16 / 11; }
    body[data-blog-page="listing"] .blog-card:not(.blog-card-featured) .blog-card-content { flex: 1; gap: 6px; padding: 10px 12px 12px; }
    body[data-blog-page="listing"] .blog-card:not(.blog-card-featured) .blog-card-kicker { flex-wrap: wrap; gap: 4px; font-size: .6875rem; }
    body[data-blog-page="listing"] .blog-card:not(.blog-card-featured) .blog-card-content h3 { font-size: .875rem; line-height: 1.45; -webkit-line-clamp: 3; }
    body[data-blog-page="listing"] .blog-card:not(.blog-card-featured) .blog-card-footer { margin-top: auto; font-size: .75rem; }
}

/* Light hero (owner, 2026-10-05: no solid green banner). */
body[data-blog-page="listing"] .bl-hero-band { border: 1px solid #e3eae5;
    background:
        radial-gradient(70% 120% at 100% 0%, rgba(234, 245, 239, .9) 0%, rgba(234, 245, 239, 0) 60%),
        radial-gradient(60% 120% at 0% 100%, rgba(253, 243, 225, .7) 0%, rgba(253, 243, 225, 0) 60%),
        #fff;
    box-shadow: 0 1px 2px rgba(24, 36, 30, .04), 0 14px 34px rgba(24, 36, 30, .07);
    color: #18241e; }
body[data-blog-page="listing"] .bl-hero h1 { color: #18241e; }
body[data-blog-page="listing"] .bl-hero p { color: #46564d; }
body[data-blog-page="listing"] .bl-stats > div,
body[data-blog-page="listing"] .bl-stats > div:first-child { border: 1px solid #e3eae5; background: #f6f9f7; backdrop-filter: none; }
body[data-blog-page="listing"] .bl-stats > div + div { border-left: 1px solid #e3eae5; }
body[data-blog-page="listing"] .bl-stats :is(dt, dd) { color: #18241e; }
body[data-blog-page="listing"] .bl-stats dt { color: #6f7f76; opacity: 1; }
body[data-blog-page="listing"] .bl-stats dd { color: #166340; }
body[data-blog-page="listing"] .bl-cover { border: 1px solid #e3eae5; box-shadow: 0 12px 28px rgba(24, 36, 30, .1); }