/**
 * BP:BLOGS_SHARED v1 — Cross-theme blogs_section visual/accessibility floor.
 *
 * Scope: every rule lives under `.bp-blogs-section` (the shared root class
 * added in Batch 1). Theme-specific styling layers on top. Renderer inline
 * <style> blocks load AFTER this file in DOM order, so any theme that
 * already addresses one of these concerns wins by source order.
 *
 * Constraints (Batch 2A):
 * - Focus-visible ring on per-card targets
 * - prefers-reduced-motion guard
 * - Image safety floor (no blanket height; no blanket aspect-ratio)
 * - Excerpt line-clamp default (2 lines) for known excerpt selectors
 * - Print safety
 *
 * What this file does NOT do:
 * - It does not change layout, hover signatures, theme identity, colors,
 *   spacing, or typography choices that themes have already authored.
 * - It does not rename classes or alter renderer markup.
 * - It does not consume meta keys or talk to the toolkit helper.
 */

/* ──────────────────────────────────────────────────────────
 * 1. Focus-visible ring
 * Applies to the per-card target that carries data-blog-id
 * (added by Batch 1). Honors theme accent token, falls back
 * to currentColor so the ring is always visible.
 * ────────────────────────────────────────────────────────── */
.bp-blogs-section [data-blog-id]:focus-visible {
    outline: 2px solid var(--mab-accent, var(--cv-accent, currentColor));
    outline-offset: 3px;
    border-radius: inherit;
}

/* ──────────────────────────────────────────────────────────
 * 2. Reduced motion guard
 * One blanket motion-off rule scoped to this section. Themes
 * with hover transforms (modern, haven, unity, studio, prime,
 * impact, k3) cooperatively neutralise here.
 * ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bp-blogs-section *,
    .bp-blogs-section *::before,
    .bp-blogs-section *::after {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* ──────────────────────────────────────────────────────────
 * 3. Image safety floor
 * Gentle defaults — width fluid, no inline gap, object-fit
 * cover when the theme has set a height on the wrapper. We
 * deliberately do NOT set a height or aspect-ratio here so we
 * never break any theme's fixed-height image layouts (modern
 * 200px, haven 180×140, unity 180/220, prime 200, impact 190,
 * editorial lead min-height 280, etc.). Per-theme aspect-ratio
 * additions are scoped to Batch 2B/2C.
 * ────────────────────────────────────────────────────────── */
.bp-blogs-section [data-blog-id] img {
    display: block;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
}

/* ──────────────────────────────────────────────────────────
 * 4. Excerpt clamp floor (2 lines default)
 * Scoped to known excerpt selectors. Themes that already set a
 * clamp (modern/unity/studio/community/impact/editorial-card)
 * are unchanged because their inline <style> wins by source
 * order. Themes that DON'T currently clamp (haven, editorial
 * lead) get a 2-line floor so cards align across rows. Prime
 * keeps its 3-line clamp because its inline <style> overrides
 * this 2-line floor.
 *
 * Selector notes:
 * - `.k3-blog-card-excerpt` is the actual k3 selector (rather
 *    than the abbreviated `.k3-blog-excerpt`).
 * - `.chl-blog-card__body` is the BEM alias k3 emits alongside.
 * - `.ed-blog__lead-excerpt` and `.ed-blog__card-excerpt` are
 *    the actual editorial selectors (rather than the
 *    abbreviated `.ed-blog__excerpt`).
 * - Studio's hover-reveal (opacity 0 → 1) is independent of
 *    line-clamp; this rule does not change that behavior.
 */
.bp-blogs-section .modern-blog-excerpt,
.bp-blogs-section .hvn-blog-excerpt,
.bp-blogs-section .uni-blog-excerpt,
.bp-blogs-section .stu-blog-excerpt,
.bp-blogs-section .prm-blog-excerpt,
.bp-blogs-section .com-blog-excerpt,
.bp-blogs-section .imp-blog-excerpt,
.bp-blogs-section .ed-blog__lead-excerpt,
.bp-blogs-section .ed-blog__card-excerpt,
.bp-blogs-section .k3-blog-card-excerpt,
.bp-blogs-section .chl-blog-card__body {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ──────────────────────────────────────────────────────────
 * 5. Print safety
 * Collapse to a readable single column, neutralise hover
 * effects, drop decorative gradients/shadows. Conservative —
 * does not attempt to repaint theme identity for print.
 * ────────────────────────────────────────────────────────── */
@media print {
    .bp-blogs-section {
        background: #fff !important;
        color: #000 !important;
        page-break-inside: avoid;
    }
    .bp-blogs-section [data-blog-id] {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    .bp-blogs-section [data-blog-id] img {
        max-height: 240px;
    }
}

/* ──────────────────────────────────────────────────────────
 * 6. Premium contract for modern blogs only
 * Shared architectural floor: spacing rhythm, typography
 * ladder, card balance, and responsive quality.
 * Theme files set token values; this block enforces structure.
 * Unity + Community blogs are excluded: their blogs_section.php files own full
 * token stacks (this file's slate defaults would otherwise win on specificity).
 * ────────────────────────────────────────────────────────── */
.bp-blogs-section.modern-blog-section {
    --bp-shell-max: 1160px;
    --bp-shell-pad-x: 20px;
    --bp-head-gap: 40px;
    --bp-grid-gap: 24px;
    --bp-card-radius: 18px;
    --bp-card-border: #e5e7eb;
    --bp-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 22px rgba(15, 23, 42, 0.07);
    --bp-card-shadow-hover: 0 10px 24px rgba(15, 23, 42, 0.1), 0 20px 44px rgba(15, 23, 42, 0.1);
    --bp-title-color: #111827;
    --bp-subtitle-color: #64748b;
    --bp-text-color: #334155;
}

.bp-blogs-section.modern-blog-section .modern-blog-wrap {
    max-width: var(--bp-shell-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--bp-shell-pad-x);
    padding-right: var(--bp-shell-pad-x);
}

.bp-blogs-section.modern-blog-section .modern-blog-header {
    margin-bottom: var(--bp-head-gap);
}

.bp-blogs-section.modern-blog-section .modern-blog-title {
    color: var(--bp-title-color);
}

.bp-blogs-section.modern-blog-section .modern-blog-excerpt {
    color: var(--bp-text-color);
}

.bp-blogs-section.modern-blog-section .modern-blog-grid {
    gap: var(--bp-grid-gap);
}

.bp-blogs-section.modern-blog-section .modern-blog-card {
    border-radius: var(--bp-card-radius);
    border-color: var(--bp-card-border);
    box-shadow: var(--bp-card-shadow);
}

.bp-blogs-section.modern-blog-section .modern-blog-card:hover {
    box-shadow: var(--bp-card-shadow-hover);
}

@media (max-width: 760px) {
    .bp-blogs-section.modern-blog-section {
        --bp-head-gap: 30px;
        --bp-grid-gap: 18px;
        --bp-shell-pad-x: 14px;
    }
}