/* ─────────────────────────────────────────────────────────────────────
   bdc_post_grid — dynamic blog listing.

   Visual language matches bdc-concept-cards (same tokens, similar card
   shell) so the two widgets don't feel like different design systems
   when they appear on the same page. The difference is behaviour:
   this one queries WP_Query dynamically + supports filter chips +
   supports pagination.
   ───────────────────────────────────────────────────────────────────── */

.bdc-post-grid {
    --bdc-pg-radius: 16px;
    --bdc-pg-gap: 20px;
    --bdc-pg-card-pad: 24px;
    --bdc-pg-card-bg: #ffffff;
    --bdc-pg-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --bdc-pg-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.09);

    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ─── Filter chips ─── */
.bdc-post-grid__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bdc-post-grid__chip {
    appearance: none;
    border: 1px solid var(--bdc-ink-6, #eeece5);
    background: transparent;
    color: var(--bdc-ink-2, #4a4a48);
    padding: 8px 16px;
    border-radius: 999px;
    font: 500 14px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

/* Hover for INACTIVE chips: soft grey background, dark text (contrast OK). */
.bdc-post-grid__chip:not(.bdc-post-grid__chip--active):hover {
    background: var(--bdc-ink-7, #f6f6f4);
    border-color: var(--bdc-ink-4, #8a8a86);
    color: var(--bdc-ink, #1a1a1a);
}

.bdc-post-grid__chip--active {
    background: var(--bdc-ink, #1a1a1a);
    border-color: var(--bdc-ink, #1a1a1a);
    color: #ffffff;
}

/* Hover for the ACTIVE chip: keep dark bg + white text (readable), just a
   subtle tone shift so the hover feedback is still visible. Fixes the
   white-on-white bug where the base :hover rule would flip background to
   light grey while `--active` kept the color white. */
.bdc-post-grid__chip--active:hover {
    background: var(--bdc-ink-2, #2f2f2d);
    border-color: var(--bdc-ink-2, #2f2f2d);
    color: #ffffff;
}

/* ─── Featured hero card ─── */
.bdc-post-grid__hero {
    display: block;
    color: inherit;
    text-decoration: none;
    background: var(--bdc-pg-card-bg);
    border-radius: var(--bdc-pg-radius);
    box-shadow: var(--bdc-pg-card-shadow);
    overflow: hidden;
    transition: box-shadow 200ms ease, transform 200ms ease;
    /* Nudge the hero slightly farther from the grid than the default
       flex-gap gives. Combined with the divider below, the "featured
       vs everything else" hierarchy reads correctly on first glance. */
    margin-bottom: 12px;
}

/* Divider + "More articles" caption between the hero and the grid.
   The pseudo-element approach keeps HTML clean (no extra <hr> or label
   markup on the render side) while giving the visual separation the
   user asked for. */
.bdc-post-grid__hero + .bdc-post-grid__grid {
    position: relative;
    padding-top: 40px;
}

.bdc-post-grid__hero + .bdc-post-grid__grid::before {
    content: "More articles";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--bdc-ink-6, #eeece5);
    font: 700 11px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bdc-ink-3, #6b6b68);
}

.bdc-post-grid__hero:hover {
    box-shadow: var(--bdc-pg-card-shadow-hover);
    transform: translateY(-2px);
}

.bdc-post-grid__hero-media {
    aspect-ratio: 21 / 9;
    overflow: hidden;
    background: var(--bdc-ink-7, #f6f6f4);
}

.bdc-post-grid__hero-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bdc-post-grid__hero-body {
    padding: 28px 24px 32px;
}

.bdc-post-grid__hero-label {
    display: inline-block;
    font: 700 11px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bdc-accent, #7a5b2e);
    margin-bottom: 12px;
}

.bdc-post-grid__hero-title {
    font: 600 28px/1.2 Newsreader, Georgia, serif;
    letter-spacing: -0.5px;
    color: var(--bdc-ink, #1a1a1a);
    margin: 12px 0 12px;
}

.bdc-post-grid__hero-excerpt {
    font: 400 17px/1.55 -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--bdc-ink-2, #4a4a48);
    margin: 0 0 16px;
}

/* ─── Grid ─── */
.bdc-post-grid__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bdc-pg-gap);
}

/* ─── Card ─── */
.bdc-post-grid__card {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    background: var(--bdc-pg-card-bg);
    border-radius: var(--bdc-pg-radius);
    box-shadow: var(--bdc-pg-card-shadow);
    overflow: hidden;
    padding: 0 0 var(--bdc-pg-card-pad);
    transition: box-shadow 200ms ease, transform 200ms ease;
}

.bdc-post-grid__card:hover {
    box-shadow: var(--bdc-pg-card-shadow-hover);
    transform: translateY(-2px);
}

.bdc-post-grid__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bdc-ink-7, #f6f6f4);
    margin-bottom: 16px;
}

.bdc-post-grid__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* SVG placeholder — inline data-less fallback when a post has no
   featured image. Fills the same box as .bdc-post-grid__image so
   card + hero layouts don't shift depending on availability. */
.bdc-post-grid__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bdc-post-grid__cat {
    display: inline-block;
    align-self: flex-start;
    margin: 0 var(--bdc-pg-card-pad) 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bdc-sage-soft, #e6efe7);
    color: var(--bdc-sage, #3d5844);
    font: 500 12px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
}

.bdc-post-grid__title {
    font: 600 20px/1.3 Newsreader, Georgia, serif;
    letter-spacing: -0.2px;
    color: var(--bdc-ink, #1a1a1a);
    margin: 0 var(--bdc-pg-card-pad) 8px;
}

.bdc-post-grid__excerpt {
    font: 400 15px/1.55 -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--bdc-ink-2, #4a4a48);
    margin: 0 var(--bdc-pg-card-pad) 12px;
    flex-grow: 1;
}

.bdc-post-grid__meta {
    font: 400 13px/1.4 -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--bdc-ink-3, #6b6b68);
    margin: 0 var(--bdc-pg-card-pad);
}

.bdc-post-grid__hero .bdc-post-grid__meta {
    margin-left: 0;
    margin-right: 0;
}

.bdc-post-grid__hero .bdc-post-grid__cat {
    margin: 0 0 12px;
    align-self: auto;
}

/* ─── Pagination ─── */
.bdc-post-grid__pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
}

.bdc-post-grid__page-item .page-numbers {
    display: inline-flex;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bdc-ink-6, #eeece5);
    border-radius: 8px;
    color: var(--bdc-ink-2, #4a4a48);
    text-decoration: none;
    font: 500 14px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.bdc-post-grid__page-item .page-numbers:hover {
    background: var(--bdc-ink-7, #f6f6f4);
}

.bdc-post-grid__page-item .page-numbers.current {
    background: var(--bdc-ink, #1a1a1a);
    border-color: var(--bdc-ink, #1a1a1a);
    color: #ffffff;
}

.bdc-post-grid__page-item .page-numbers.dots {
    border-color: transparent;
    cursor: default;
}

/* ─── Empty state ─── */
.bdc-post-grid__empty {
    font: 400 16px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--bdc-ink-3, #6b6b68);
    padding: 32px;
    text-align: center;
    background: var(--bdc-ink-7, #f6f6f4);
    border-radius: var(--bdc-pg-radius);
    margin: 0;
}

/* ─── Client-side filter: hide non-matching cards + featured hero ─── */
/* JS adds `data-active-cat="<slug>"` to the grid AND `.bdc-post-grid__card--match`
   to cards whose data-cats includes that slug. Non-match cards get hidden;
   the featured hero is hidden entirely because it may not match. */
.bdc-post-grid[data-active-cat] .bdc-post-grid__card:not(.bdc-post-grid__card--match) {
    display: none;
}
.bdc-post-grid[data-active-cat] .bdc-post-grid__hero {
    display: none;
}

/* ─── Responsive ─── */
@media (min-width: 640px) {
    .bdc-post-grid__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .bdc-post-grid__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    .bdc-post-grid__hero {
        display: grid;
        grid-template-columns: 1.15fr 1fr;
        align-items: stretch;
    }
    .bdc-post-grid__hero-media {
        aspect-ratio: auto;
        height: 100%;
    }
    .bdc-post-grid__hero-body {
        padding: 40px 40px 40px 40px;
        align-self: center;
    }
    .bdc-post-grid__hero-title {
        font-size: 34px;
    }
}

/* Under bdc-v3 wrapper — specificity bump against theme rules
   (same trap as concept-cards). */
.bdc-v3 .bdc-post-grid__title,
.bdc-v3 .bdc-post-grid__hero-title { color: var(--bdc-ink, #1a1a1a); }
.bdc-v3 .bdc-post-grid__excerpt,
.bdc-v3 .bdc-post-grid__hero-excerpt { color: var(--bdc-ink-2, #4a4a48); }