/* Distilled feed cards (mock-up, see assets/js/engage-distil.js). Colours come from the palette tokens only. */

/* Facts block: sits above the headline so it is read first. */
.onyx-design .dz {display:grid;gap:12px;min-width:0}
.onyx-design .eg-post--story.is-compact .dz,.onyx-design .eg-post .dz-arm {grid-column:1/-1}
.onyx-design .dz-cap {display:block;font:700 10px/1.2 var(--eg-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--eg-dim)}

/* The number: a raise, a deal value or the headline result. */
.onyx-design .dz-figure {display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0}
.onyx-design .dz-figure strong {font:800 clamp(44px,7vw,72px)/.9 var(--font-family-sansSerif);letter-spacing:-.055em;color:var(--eg-bone)}
.onyx-design .dz-figure span {font:700 clamp(15px,1.8vw,19px)/1.2 var(--font-family-sansSerif);letter-spacing:-.01em;color:var(--eg-deck);max-width:22ch}
.onyx-design .dz-figure.is-money strong {color:var(--eg-violet)}

/* Modality, indication, asset: big labels with a small caption. */
.onyx-design .dz-facts {display:flex;flex-wrap:wrap;gap:8px}
.onyx-design .dz-fact {display:grid;gap:4px;padding:10px 14px 11px;border-radius:14px;background:var(--eg-panel2);border:1px solid var(--eg-rule);min-width:0}
.onyx-design .dz-fact strong {font:750 clamp(17px,2vw,22px)/1.12 var(--font-family-sansSerif);letter-spacing:-.03em;color:var(--eg-bone);overflow-wrap:anywhere}

/* Stage: a five-step pipeline bar, filled up to where the programme is. */
.onyx-design .dz-stage {display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 12px}
.onyx-design .dz-stage .dz-cap {grid-column:1/-1}
.onyx-design .dz-stage strong {font:750 18px/1.1 var(--font-family-sansSerif);letter-spacing:-.02em;color:var(--eg-bone)}
.onyx-design .dz-bar {display:grid;grid-template-columns:repeat(5,1fr);gap:4px;max-width:260px}
.onyx-design .dz-bar i {height:8px;border-radius:4px;background:var(--eg-rule)}
.onyx-design .dz-bar i.is-on {background:var(--eg-bone)}
.onyx-design .dz-bar i.is-half {background:linear-gradient(90deg,var(--eg-bone) 50%,var(--eg-rule) 50%)}

/* Regulatory stamps and the next catalyst. */
.onyx-design .dz-line {display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.onyx-design .dz-stamp {padding:6px 11px;border-radius:8px;background:var(--eg-bone);color:var(--eg-panel);font:800 12px/1 var(--eg-mono);letter-spacing:.06em;text-transform:uppercase}
.onyx-design .dz-next {display:inline-flex;align-items:baseline;gap:8px;font:650 15px/1.3 var(--font-family-sansSerif);color:var(--eg-bone)}
.onyx-design .dz-next .dz-cap {display:inline;color:var(--eg-violet)}
.onyx-design .dz-next .dz-cap::after {content:' ▸'}

/* Press-release cards are small: keep the facts but tighten them. */
.onyx-design .eg-post--wire .dz {gap:8px}
.onyx-design .eg-post--wire .dz-figure strong {font-size:clamp(36px,5vw,52px)}
.onyx-design .eg-post--wire .dz-fact {padding:7px 11px 8px}
.onyx-design .eg-post--wire .dz-fact strong {font-size:16px}

/* The lead poster prints on a picture: use the on-picture colours. */
.onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child .dz-fact {background:var(--eg-scrim);border-color:var(--eg-on-scrim-rule);backdrop-filter:blur(6px)}
.onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child .dz-figure span {color:var(--eg-on-scrim-dim)}
.onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child .dz-figure.is-money strong,
.onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child .dz-next .dz-cap {color:var(--eg-on-scrim)}
.onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child .dz-stamp {background:var(--eg-on-scrim);color:rgb(var(--eg-shade-rgb))}
.onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child .dz-bar i {background:var(--eg-on-scrim-rule)}
.onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child .dz-bar i.is-on {background:var(--eg-on-scrim)}

/* Interview quote: the picture fades to the interviewee's own words as the card reaches the reading zone. */
.onyx-design .dz-quote {position:absolute;inset:0;z-index:1;display:grid;align-content:center;gap:12px;padding:clamp(18px,4vw,34px);background:var(--eg-clip);color:var(--eg-on-scrim);opacity:0;transition:opacity .7s ease}
.onyx-design .dz-has-quote {z-index:2}
.onyx-design .dz-has-quote.is-quote .dz-quote {opacity:1}
.onyx-design .dz-quote q {font:650 clamp(19px,3.1vw,31px)/1.16 var(--font-family-sansSerif);letter-spacing:-.035em;text-wrap:balance;quotes:'“' '”'}
.onyx-design .dz-quote cite {font:700 11px/1.3 var(--eg-mono);letter-spacing:.06em;text-transform:uppercase;font-style:normal;color:var(--eg-on-scrim-dim)}
.onyx-design .dz-quote-go {font:700 13px/1 var(--font-family-sansSerif);color:var(--eg-on-scrim)}
.onyx-design .eg-post:hover .dz-has-quote.is-quote img {transform:none}
.onyx-design .dz-quote--inline {position:relative;inset:auto;z-index:2;opacity:1;padding:0;background:none;text-decoration:none}
.onyx-design .dz-quote--inline q {font-size:clamp(20px,2.6vw,28px)}
@media (prefers-reduced-motion:reduce) {.onyx-design .dz-quote {transition:none}}

/* Organiser logo: a white plate so the logo keeps its own colours on any surface. */
.onyx-design .dz-arm {position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 16px;border-radius:14px;background:#fff;border:1px solid var(--eg-rule);text-decoration:none;transition:border-color .2s,transform .2s}
.onyx-design .eg-post a.dz-arm,.onyx-design a.dz-arm {color:#14213a}
.onyx-design .dz-arm:hover {border-color:var(--eg-focus-rule);transform:translateY(-1px)}
.onyx-design .dz-arm-lead {font:700 11px/1.35 var(--eg-mono);letter-spacing:.05em;text-transform:uppercase;max-width:26ch}
.onyx-design .dz-arm img {display:block;height:46px;width:auto;max-width:100%}
.onyx-design .dz-arm--hot {margin-left:auto;padding:8px 14px}
.onyx-design .dz-arm--hot img {height:38px}
.onyx-design .dz-arm--article {max-width:640px;margin:18px 0 0}
.onyx-design .dz--article {max-width:640px;margin:18px 0 0}
.onyx-design .dz--article .dz-figure strong,.onyx-design .dz--article .dz-fact strong,.onyx-design .dz--article .dz-stage strong,.onyx-design .dz--article .dz-next {color:var(--lf-ink)}

/* Muted autoplay: the player's own controls handle sound. */
.onyx-design .eg-post-video.dz-auto::after {display:none}
.onyx-design .eg-post-video.dz-auto iframe {position:absolute;inset:0;width:100%;height:100%;border:0}

@media (max-width:700px) {
  .onyx-design .dz-arm img {height:34px}
  .onyx-design .dz-arm--hot {margin-left:0;width:100%}
  .onyx-design .dz-fact {padding:8px 11px 9px}
}

/* Lead poster with facts: leave room for the section label pinned to its top edge. */
.onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child:has(.dz,.dz-arm) {padding-top:64px}