/**
 * News / posts grid — full-bleed thumbnail cards (category, title, author, date).
 * Mirrors the property-card visual language (full-bleed image, hover lift + zoom,
 * whole-card link) but self-contained so it works on non-plugin pages (home,
 * resources). Dark-only site, so styled for the dark context directly.
 *
 * Used by the "News Grid" block pattern (patterns/news-grid.php): a core Query
 * Loop whose Post Template items carry .dcd-news-card.
 */
.dcd-news-grid {
    --news-card-bg: var(--wp--preset--color--primary, #101721); /* match the page background */
    --news-fg: #f8fafc;
    --news-muted: #8aa0c2;
    --news-accent: #cecece;       /* lightened brand green for the category */
    --news-border: rgba(255, 255, 255, 0.08);
    --news-radius: 4px;
    --news-gap: clamp(16px, 2vw, 24px);
    --news-pad: clamp(16px, 1.4vw, 22px); /* inner card padding; the image breaks out of it */
}

/* Grid — the Post Template uses core grid layout (columnCount:3). We only add
   the gap and collapse to fewer columns on narrow screens (core's fixed
   columnCount doesn't reflow, so these overrides need !important). */
.dcd-news-grid .wp-block-post-template {
    gap: var(--news-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (max-width: 900px) {
    .dcd-news-grid .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
    .dcd-news-grid .wp-block-post-template { grid-template-columns: 1fr !important; }
}

/* Card */
.dcd-news-card {
    position: relative;
    /* Contain the internal z-indexes (category badge, stretched title link) so
       they don't compete with the site nav's dropdown menus. */
    isolation: isolate;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    /* Card itself is unpadded so the thumbnail is always full-bleed; the content
       padding lives on the body. Matches the page background by default. */
    padding: 0;
    background: var(--news-card-bg);
    border: 1px solid var(--news-border);
    border-radius: var(--news-radius);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.dcd-news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.16);
}
.dcd-news-card:active { transform: translateY(-1px) scale(0.997); }
/* The theme adds large page-edge padding to ANY .has-background group. Force it
   back to 0 on a news card so the thumbnail stays full-bleed even with a
   background set in the editor (content padding stays on the body). */
.dcd-news-card.has-background { padding: 0; }
/* neutralize block-gap margins between the image and body */
.dcd-news-card > * { margin-block: 0; }

/* Full-bleed thumbnail — the card is unpadded, so the image spans it edge to
   edge (top and sides). The text below is padded via the body. */
.dcd-news-card__image {
    margin: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
}
.dcd-news-card__image img,
.dcd-news-card__image a {
    display: block;
    width: 100%;
}
.dcd-news-card__image img {
    height: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
/* Placeholder height when a post has no featured image */
.dcd-news-card__image:empty { aspect-ratio: 3 / 2; }

/* Body — holds the content padding (the card itself is unpadded). */
.dcd-news-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    padding: var(--news-pad);
}

/* Category badge — clickable, sits above the whole-card link */
.dcd-news-card__cat {
    position: relative;
    z-index: 2;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
}
.dcd-news-card__cat a { color: var(--news-accent); text-decoration: none; }
.dcd-news-card__cat a:hover { text-decoration: underline; }

/* Title — its link is stretched over the whole card */
.dcd-news-card__title {
    margin: 0;
    font-size: clamp(1.375rem, 1.05rem + 0.9vw, 1.625rem); /* ~22px mobile → ~26px desktop */
    line-height: 1.25;
    font-weight: 700;
}
.dcd-news-card__title a { color: var(--news-fg); text-decoration: none; }
.dcd-news-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Author · Date meta — a single horizontal row, pinned to the bottom. */
.dcd-news-card__meta {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 12px;
    font-size: 13px;
    color: var(--news-muted);
}
/* Flatten the author block (it nests content > name) so the name aligns
   inline with the date on one baseline. */
.dcd-news-card__meta .wp-block-post-author,
.dcd-news-card__meta .wp-block-post-author__content { display: contents; }
.dcd-news-card__meta .wp-block-post-author__name { margin: 0; font-weight: 600; color: var(--news-muted); }
.dcd-news-card__meta .wp-block-post-date { margin: 0; }
.dcd-news-card__meta .wp-block-post-date time { color: var(--news-muted); }
/* separator before the date */
.dcd-news-card__meta .wp-block-post-date::before {
    content: "·";
    margin-right: 6px;
    color: var(--news-muted);
}