/* ═══════════════════════════════════════════════════════════════════════
   Argus — Context Politic embed CSS (5.7.8)
   ───────────────────────────────────────────────────────────────────────
   Originally extracted from contextpolitic_v6/assets/css/frontend.css
   which shipped its own token system (Source Serif + Inter + oxblood).
   5.7.8 aliases those CP tokens to argus's design system so /demo and
   the Știri tab on the client dashboard render with a single visual
   identity: Newsreader serif throughout, navy ink on cream paper, gold
   accent. CP's entity colors (--c-presedintie etc.) are kept — those
   are content tokens, not brand tokens, and they harmonize fine with
   the argus palette.

   Sections downstream of :root are unchanged from the CP extraction —
   Sinteza, Entity filter, Entity sections, Story list, Badges, Linked
   sources, Share, Motion/Print.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Argus alias layer (5.7.8) ─────────────────────────────────── *
     * CP's bare-name tokens are aliased to argus's --argus-* tokens so
     * the downstream selectors render with the argus identity. argus
     * tokens are declared in frontend.css — that file is enqueued
     * BEFORE this one on both /demo and the client dashboard, so the
     * var() lookups below resolve correctly. */
    --bg:              var(--argus-bg);
    --bg-elevated:     var(--argus-surface);
    --surface:         var(--argus-surface);
    --surface-hover:   var(--argus-surface-tint);
    --surface-warm:    var(--argus-surface-warm);

    --ink:             var(--argus-text);
    --ink-secondary:   var(--argus-text-soft);
    --ink-tertiary:    var(--argus-muted);
    --ink-faint:       #a69e94;
    --ink-inverse:     var(--argus-cream);

    --rule:            var(--argus-text);
    --rule-soft:       var(--argus-border);
    --rule-hair:       var(--argus-border-soft);

    --accent:          var(--argus-accent);
    --accent-light:    var(--argus-accent-bg);
    --accent-hover:    var(--argus-accent-h);
    --accent-ink:      #ffffff;

    --official-accent: #1e3a6e;
    --official-bg:     #eef1f8;
    --danger:          var(--argus-danger);
    --danger-bg:       var(--argus-danger-bg);
    --danger-text:     var(--argus-danger);
    --success:         var(--argus-success);

    /* Typography — all unified on argus's Newsreader stack. CP used to
     * load Source Serif 4 + Inter; both are dropped in favor of the
     * font argus already loads in frontend.css. The mono stack matches
     * IBM Plex Mono for the few numeric/code surfaces (timestamps,
     * source counts). */
    --font-display: var(--argus-font-display);
    --font-body:    var(--argus-font-body);
    --font-mono:    var(--argus-font-mono);

    /* Fluid type scale — kept as-is, retunes to the argus aesthetic
     * because the values are font-size relative anyway. */
    --text-2xs:   0.68rem;
    --text-xs:    0.78rem;
    --text-sm:    0.9rem;
    --text-base:  1rem;
    --text-lg:    1.1rem;
    --text-xl:    1.3rem;
    --text-2xl:   1.6rem;
    --text-3xl:   clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
    --text-hero:  clamp(2rem,    4vw + 1rem,   3rem);

    --lh-tight:   1.15;
    --lh-snug:    1.35;
    --lh-normal:  1.55;
    --lh-read:    1.7;

    /* Spacing — 8-based */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
    --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 96px;

    /* Radii — squared to match argus's editorial 2px convention. CP
     * used 3/6/10; flatten to 2px for the larger surfaces, keep slightly
     * rounded only for pills/badges where the geometry needs it. */
    --r-sm: 2px; --r-md: 2px; --r-lg: 3px;

    /* Shadows — almost none. Newspapers don't float. */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 0.14s;
    --dur: 0.22s;

    /* Entity colors — content tokens, harmonized with the argus palette.
     * These are referenced inline by the CP partial via style attributes
     * on each entity section, so they stay defined here rather than
     * inheriting from argus's entity colors (which live in entities.json
     * + are also inlined per-template). */
    --c-presedintie:   #1e3a6e;   /* navy — close to argus ink */
    --c-societate:     #7a1a1a;   /* deep red */
    --c-guvern:        #0d5a52;   /* deep teal */
    --c-justitie:      #4a2470;   /* plum */
    --c-parlament:     #94461a;   /* oxide */
    --c-putere:        #1a1614;   /* near-black */
    --c-opozitie:      #7a3a1a;   /* burnt sienna */
    --c-local:         #2d4a2b;   /* forest */

    --cp-scroll-padding: 80px;
}


/* ─── Argus-specific framing around the CP embed ─────────────── */
.argus-cp-embed {
    margin-top: 24px;
    font-family: var(--font-body);
    color: var(--ink);
}
.argus-cp-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: var(--ink-tertiary);
    padding: 8px 0 16px;
    border-bottom: 1px solid var(--rule-hair);
    margin-bottom: 16px;
}
.argus-cp-source-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.argus-cp-source-link:hover { color: var(--accent-hover); }
.argus-cp-stale {
    background: var(--danger-bg);
    color: var(--danger-text);
    border-left: 3px solid var(--danger);
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 20px;
    border-radius: 2px;
}
.argus-cp-fallback {
    margin: 32px 0;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: 4px;
    text-align: center;
    font-family: var(--font-body);
}
.argus-cp-fallback h3 {
    font-family: var(--font-display);
    font-size: 20px;
    margin: 0 0 8px;
    color: var(--ink);
}
.argus-cp-fallback p {
    margin: 0;
    color: var(--ink-secondary);
    font-size: 14px;
}
.argus-cp-fallback a {
    color: var(--accent);
    font-weight: 600;
}
/* ═══════════════════════════════════════════════════════════════
   SINTEZA ZILEI — top stories block
   Design: a labeled section with hairline-divided rows.
   No decorative bars, no cards, no shadows.
   ═══════════════════════════════════════════════════════════════ */

.synthesis {
    margin: 0 0 var(--s-10);
    border-top: 3px solid var(--ink);       /* strong "above the fold" rule */
    padding-top: var(--s-5);
}

/* The container holds title + subtitle. No 4px bar nonsense. */
.synthesis-bar-top {
    display: flex; align-items: baseline; gap: var(--s-4);
    flex-wrap: wrap;
    padding-bottom: var(--s-4);
    margin-bottom: 0;
    border-bottom: 1px solid var(--rule-soft);
}
.synthesis-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.15;
    display: inline-block;
}
.synthesis-subtitle {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--ink-tertiary);
    font-weight: 400;
    line-height: 1.3;
}

.synthesis-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
}
.synthesis-item {
    display: grid;
    grid-template-columns: 4px 1fr auto;
    gap: var(--s-4);
    align-items: center;
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--rule-hair);
    transition: background var(--dur-fast) var(--ease);
}
.synthesis-item:hover { background: var(--surface-hover); }
.synthesis-item:last-child { border-bottom: none; }

.synthesis-color-bar {
    width: 4px; height: 100%; min-height: 30px;
    background: var(--ink); /* overridden inline with entity color */
    border-radius: 2px;
    align-self: stretch;
}
.synthesis-story {
    display: flex; flex-direction: column; gap: 6px;
    min-width: 0; /* allow text to truncate */
}
.synthesis-story-title a {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--ink);
    line-height: var(--lh-snug);
    letter-spacing: -0.005em;
}
.synthesis-story-title a:hover { color: var(--accent); }
.synthesis-meta {
    display: flex; align-items: center; gap: var(--s-2);
    font-size: var(--text-xs); color: var(--ink-tertiary);
    flex-wrap: wrap;
}
.synthesis-entity-tag {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-family: var(--font-body);
    /* color set inline from PHP */
}
.synthesis-source-count {
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-body);
    white-space: nowrap;
    padding-left: var(--s-4);
    border-left: 1px solid var(--rule-hair);
}

@media (max-width: 600px) {
    .synthesis-item { grid-template-columns: 3px 1fr; }
    .synthesis-source-count {
        grid-column: 2;
        padding-left: 0; border-left: none;
        color: var(--ink-faint);
    }
    .synthesis-story-title a { font-size: var(--text-base); }
}

/* ═══════════════════════════════════════════════════════════════
   ENTITY FILTER (sticky pill nav)
   ═══════════════════════════════════════════════════════════════ */

.cp-entity-filter {
    position: sticky; top: 60px; z-index: 50;
    background: var(--bg); border-bottom: 1px solid var(--rule-soft);
    padding: var(--s-3) 0;
    margin: 0 0 var(--s-8);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex; gap: 6px;
    scroll-padding: var(--s-5);
}
.cp-entity-filter::-webkit-scrollbar { display: none; }

.cp-filter-btn {
    flex-shrink: 0; padding: 7px 14px;
    background: transparent; border: 1px solid var(--rule-soft);
    border-radius: 100px; color: var(--ink-secondary);
    font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
    cursor: pointer; transition: all var(--dur-fast) var(--ease);
    white-space: nowrap;
    line-height: 1;
    min-height: 34px;
}
.cp-filter-btn:hover {
    border-color: var(--ink); color: var(--ink);
}
.cp-filter-btn.active {
    background: var(--ink); color: var(--ink-inverse); border-color: var(--ink);
}
.cp-filter-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════
   ENTITY SECTIONS — newspaper-style section heads
   ═══════════════════════════════════════════════════════════════ */

.entity {
    margin-bottom: var(--s-11);
    scroll-margin-top: 110px;
}

.entity-header {
    display: flex; align-items: center; gap: var(--s-3);
    margin-bottom: var(--s-6);
    padding-bottom: var(--s-3);
    border-bottom: 2px solid var(--ink);
}
.entity-color-dot {
    width: 10px; height: 10px; border-radius: 50%;
    flex-shrink: 0;
    /* color set inline by PHP via entity color */
}
.entity-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   STORY LIST — vertical feed of horizontal rows
   ═══════════════════════════════════════════════════════════════ */

.cards-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* Strip the final hairline of the last child so it doesn't double with
   the next section's heading rule */
.cards-grid > *:last-child,
.cards-regular > *:last-child { border-bottom: none; }

/* Inner wrapper for non-wide cards (PHP emits this around regular cards) */
.cards-regular {
    display: flex;
    flex-direction: column;
}

.card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--s-6);
    padding: var(--s-6) 0;
    border-bottom: 1px solid var(--rule-hair);
    background: transparent;
    position: relative;
    transition: background var(--dur-fast) var(--ease);
    border-radius: 0;
}
/* When a card has no thumbnail, collapse to single column */
.card:not(:has(.thumb-container)),
.card:has(.thumb-container.thumb-fallback) {
    grid-template-columns: 1fr;
}
/* First card in the feed shouldn't have top padding */
.cards-grid > .card:first-child,
.cards-regular > .card:first-child { padding-top: var(--s-5); }
.cards-grid > .card--wide:first-child { padding-top: 0; }

.card:hover { background: rgba(245, 240, 230, 0.45); }
.card:hover .thumb { opacity: 0.94; }

/* Official variant — subtle navy left accent */
.card--official {
    padding-left: var(--s-4);
    border-left: 3px solid var(--official-accent);
    margin-left: calc(var(--s-4) * -1);
}

/* The card-color-top was a decorative entity-color stripe on boxed cards.
   In the vertical feed design the entity identity is already carried by
   the section header and meta-top badges, so hide it. */
.card-color-top { display: none; }

/* Thumb container with failed image — hide entirely */
.thumb-container.thumb-fallback { display: none; }

/* Empty summary — don't reserve vertical space */
.summary:empty { display: none; }

/* Featured (wide) story — bigger thumb above, hero title */
.card--wide {
    grid-template-columns: 1fr;
    gap: var(--s-5);
    padding: var(--s-7) 0 var(--s-8);
    border-bottom: 2px solid var(--ink);
}
.card--wide .thumb-container {
    aspect-ratio: 16 / 9;
    max-height: 420px;
    width: 100%;
}
.card--wide h2, .card--wide h3 {
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
}
.card--wide .summary {
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--ink-secondary);
    font-family: var(--font-display);
    max-width: 68ch;
}

/* Mobile: always stack */
@media (max-width: 700px) {
    .card {
        grid-template-columns: 1fr;
        gap: var(--s-4);
        padding: var(--s-5) 0;
    }
    .card--official {
        padding-left: var(--s-3);
        margin-left: 0;
    }
    .card--wide h2, .card--wide h3 {
        font-size: var(--text-2xl);
    }
    .card--wide .summary { font-size: var(--text-base); }
}

/* Thumb column */
.thumb-container {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--surface-warm);
    border-radius: var(--r-sm);
}
.thumb-container a { display: block; height: 100%; }
.thumb {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity var(--dur-fast) var(--ease);
}
.thumb-container.thumb-fallback { display: none; }

/* Body column */
.body {
    display: flex; flex-direction: column; gap: var(--s-2);
    min-width: 0;
}

/* Meta row above the headline */
.meta-top {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--s-3);
    margin-bottom: 2px;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--ink-tertiary);
}

/* Card headline */
.card h2, .card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.015em;
    font-size: var(--text-xl);
    line-height: var(--lh-tight);
}
.card h2 a, .card h3 a {
    color: var(--ink);
    text-decoration: none;
    background-image: linear-gradient(var(--accent), var(--accent));
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.card h2 a:hover, .card h3 a:hover {
    color: var(--accent);
    background-size: 100% 1px;
}

.summary {
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--ink-secondary);
    line-height: 1.55;
    margin: 0;
    max-width: 68ch;
}

.context {
    font-size: var(--text-sm);
    color: var(--ink-tertiary);
    font-style: italic;
    font-family: var(--font-display);
    margin-top: 4px;
    border-left: 2px solid var(--rule-soft);
    padding-left: var(--s-3);
}

/* ═══════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════ */

.badge {
    display: inline-flex; align-items: center;
    padding: 3px 8px;
    font-size: var(--text-2xs); font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    line-height: 1.5;
    border-radius: var(--r-sm);
    font-family: var(--font-body);
}
.badge-official {
    background: var(--official-bg);
    color: var(--official-accent);
}
.badge-sources {
    background: transparent;
    color: var(--ink-tertiary);
    padding: 3px 0;
    letter-spacing: 0.06em;
}
.badge-wide {
    background: var(--accent);
    color: var(--accent-ink);
}

/* ═══════════════════════════════════════════════════════════════
   LINKED-SOURCES LIST INSIDE CARDS
   HTML: <li><a>title</a><span class="link-source">domain</span></li>
   link-source is a SIBLING of a, not a child. Grid goes on li.
   ═══════════════════════════════════════════════════════════════ */

.card--wide .links {
    list-style: none; padding: 0;
    margin: var(--s-4) 0 0;
    padding-top: var(--s-4);
    border-top: 1px solid var(--rule-hair);
    display: flex; flex-direction: column;
}
.card--wide .links li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-4);
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px dashed var(--rule-hair);
}
.card--wide .links li:last-child { border-bottom: none; }
.card--wide .links a {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    color: var(--ink-secondary);
    font-weight: 500;
    line-height: var(--lh-snug);
    text-decoration: none;
    min-width: 0;   /* allow shrink for long titles */
}
.card--wide .links a:hover { color: var(--accent); }
.card--wide .links .link-source {
    font-size: var(--text-2xs);
    color: var(--ink-faint);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: var(--font-mono);
    white-space: nowrap;
}

/* Regular card: compact inline source list (dot separated) */
.card .links {
    list-style: none; padding: 0; margin: var(--s-2) 0 0;
    font-size: var(--text-xs);
}
.card .links li { display: inline; }
.card .links li:not(:last-child)::after {
    content: ' · ';
    color: var(--ink-faint);
}
.card .links a {
    color: var(--ink-tertiary);
    font-weight: 500;
    font-family: var(--font-display);
}
.card .links a:hover { color: var(--accent); }
.card .links .link-source { display: none; }

/* Mobile: both variants stack */
@media (max-width: 700px) {
    .card--wide .links li {
        display: block;
        padding: var(--s-3) 0;
    }
    .card--wide .links .link-source {
        display: block;
        margin-top: 3px;
    }
    .card .links { display: flex; flex-direction: column; gap: 0; margin-top: var(--s-3); }
    .card .links li { display: block; }
    .card .links li:not(:last-child)::after { content: ''; }
    .card .links a {
        display: flex; flex-direction: column; gap: 2px;
        padding: var(--s-3) 0;
        border-bottom: 1px solid var(--rule-hair);
        min-height: 44px;
        justify-content: center;
    }
    .card .links li:last-child a { border-bottom: none; }
    .card .links .link-source {
        display: block;
        font-size: var(--text-2xs);
        color: var(--ink-faint);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-family: var(--font-mono);
    }
}

/* Sources count text (standalone) */
.cp-sources-count {
    font-size: var(--text-xs);
    color: var(--ink-tertiary);
}

/* ═══════════════════════════════════════════════════════════════
   SHARE & OTHER SECONDARY ACTIONS
   ═══════════════════════════════════════════════════════════════ */

.cp-share-row { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }
.cp-share-btn {
    padding: 5px 10px; background: transparent;
    border: 1px solid var(--rule-soft);
    border-radius: 100px;
    font-size: var(--text-2xs);
    color: var(--ink-tertiary);
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    display: inline-flex; align-items: center; gap: 4px;
    transition: all var(--dur-fast) var(--ease);
    letter-spacing: 0.02em;
}
.cp-share-btn:hover {
    border-color: var(--accent); color: var(--accent);
}

.cp-bell, .cp-rss-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--rule-soft);
    border-radius: 100px;
    font-size: var(--text-xs);
    color: var(--ink-secondary);
    text-decoration: none;
}
.cp-bell:hover, .cp-rss-link:hover {
    border-color: var(--accent); color: var(--accent);
}
.cp-bell-label { font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════
   MOTION + PRINT
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .cp-masthead, .cp-accent-bar, .cp-entity-filter,
    .cp-footer, .cp-cookie, .cp-install, .cp-back-top,
    .cp-toast, .cp-share-row, .cp-oracol-link { display: none !important; }
    body { background: #fff; color: #000; }
    .card { page-break-inside: avoid; border-bottom: 1px solid #999; }
    a { color: #000; }
}

/* ═══════════════════════════════════════════════════════════════
   SOCIAL CARDS (5.7.5 — dashboard "Social media · ultimele postări")
   ───────────────────────────────────────────────────────────────
   Each post is a full card with prominent 16:9 thumbnail, title,
   description and meta. Renders in the same column grid as before
   but each item is now a vertical card instead of a list row.
   Uses Argus's own color tokens, not CP's, since this block lives
   in the dashboard UI surface, not the embedded report.
   ═══════════════════════════════════════════════════════════════ */
.argus-social-feed__cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}
.argus-social-card {
    display: flex;
    flex-direction: column;
    background: var(--argus-surface, #fff);
    border: 1px solid var(--argus-border, #d8d2c2);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color .15s ease, transform .15s ease;
}
.argus-social-card:hover {
    border-color: var(--argus-accent, #8a6a1f);
    transform: translateY(-1px);
}
.argus-social-card__thumb-wrap {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--argus-surface-tint, #f0ead8);
    overflow: hidden;
    text-decoration: none;
}
.argus-social-card__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}
.argus-social-card:hover .argus-social-card__thumb { transform: scale(1.02); }
.argus-social-card__thumb--placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
}
.argus-social-card__thumb-wrap--fallback::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(135deg,
        var(--argus-surface-tint, #f0ead8) 25%,
        transparent 25%,
        transparent 50%,
        var(--argus-surface-tint, #f0ead8) 50%,
        var(--argus-surface-tint, #f0ead8) 75%,
        transparent 75%);
    background-size: 16px 16px;
    opacity: .4;
}
.argus-social-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.55);
    pointer-events: none;
    opacity: .85;
}
.argus-social-card__platform {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.4;
}
.argus-social-card__body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.argus-social-card__meta-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--argus-muted, #6b6862);
    margin-bottom: 2px;
}
.argus-social-card__author {
    font-weight: 600;
    color: var(--argus-text-soft, #1f2d49);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}
.argus-social-card__when { flex-shrink: 0; }
.argus-social-card__title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--argus-text, #0a1d36);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.argus-social-card__title a {
    color: inherit;
    text-decoration: none;
}
.argus-social-card__title a:hover { color: var(--argus-accent, #8a6a1f); }
.argus-social-card__desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--argus-text-soft, #1f2d49);
    opacity: .85;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.argus-social-card__source {
    font-size: 10.5px;
    color: var(--argus-muted, #6b6862);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--argus-border-soft, #ebe5d4);
}

/* ─── Exec summary "stale" marker (5.7.7) ─────────────────────────────
   The Argus exec-summary overlay on /demo can be one CP cycle behind
   the news body when the enrichment cron hasn't caught up to the
   latest CP refresh yet. We still show it (better than nothing) but
   mark it so readers know the editorial layer trails the news layer. */
.argus-exec-stale {
    font-style: italic;
    color: var(--ink-tertiary, #6e665e);
    font-weight: 500;
}