/* OM IMDB card — component styles (ported from imdb-info-card.html). Scoped .omic-* */
/* ==========================================================================
   COMPONENT — .omic-card
   ========================================================================== */
.omic-card{
  /* ---- design tokens (LIGHT = default) ---- */
  --accent:#6b5b95;          /* muted violet            */
  --accent-tint:#eef2ff;     /* soft violet tint        */
  --star:#f5c518;            /* IMDb gold               */
  --bg:#ffffff;
  --surface:#f3f3f8;         /* chips / placeholder     */
  --border:#e7e6f0;
  --text:#1b1a22;
  --muted:#63626f;
  --faint:#9d9caa;
  --btn-bg:#6b5b95; --btn-bg-hover:#584a7d; --btn-fg:#ffffff;
  --radius:14px;
  --shadow:0 8px 30px rgba(24,20,52,.12), 0 1px 2px rgba(0,0,0,.05);

  /* head text/chip tokens — swapped by .has-backdrop (see below) */
  --head-fg:var(--text);
  --head-muted:var(--muted);
  --chip-bg:var(--surface);
  --chip-fg:var(--text);
  --chip-bd:var(--border);

  /* ---- layout metrics ---- */
  /* --gap is the poster→content gutter; a bit wider than the card padding so the
     busy poster art has breathing room from the title/plot/credits column. */
  --pad:clamp(16px,3vw,20px);
  --gap:clamp(22px,4vw,34px);
  --posterw:clamp(138px,33%,208px);

  position:relative;
  display:grid;
  grid-template-columns:var(--posterw) 1fr;
  grid-template-areas:"poster head" "poster main";
  grid-template-rows:auto 1fr;
  column-gap:var(--gap); row-gap:14px;
  padding:var(--pad);
  /* Full width of its container (the .gridlove-content single-layout column) —
     no 720px cap, so the card spans the whole post column above entry-header. */
  width:100%; max-width:100%;
  margin-inline:auto;
  margin-bottom:20px;
  background:var(--bg); color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
}
.omic-card *{ box-sizing:border-box; }

/* ---- DARK tokens — identical across both signals ---- */
@media (prefers-color-scheme: dark){
  .omic-wrap,
  .omic-card{
    --accent:#b3a6df; --accent-tint:rgba(150,133,214,.16); --star:#f5c518;
    --bg:#1a1922; --surface:#26252f; --border:#33323f;
    --text:#dfe1e3; --muted:#a6a5b3; --faint:#6f6e7d;
    --btn-bg:#7a69ad; --btn-bg-hover:#8c7bc0; --btn-fg:#ffffff;
    --shadow:0 10px 34px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
  }
}
html[data-wp-dark-mode-active] .omic-wrap,
html[data-wp-dark-mode-active] .omic-card{
  --accent:#b3a6df; --accent-tint:rgba(150,133,214,.16); --star:#f5c518;
  --bg:#1a1922; --surface:#26252f; --border:#33323f;
  --text:#dfe1e3; --muted:#a6a5b3; --faint:#6f6e7d;
  --btn-bg:#7a69ad; --btn-bg-hover:#8c7bc0; --btn-fg:#ffffff;
  --shadow:0 10px 34px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
}

/* ---- cinematic backdrop behind the header (title + ratings) ---- */
.omic-card.has-backdrop{
  --head-fg:#f0f2f4;
  --head-muted:rgba(255,255,255,.80);
  --chip-bg:rgba(255,255,255,.15);
  --chip-fg:#f0f2f4;
  --chip-bd:rgba(255,255,255,.26);
}
.omic-head{ position:relative; }
.omic-card.has-backdrop .omic-head::before,
.omic-card.has-backdrop .omic-head::after{
  content:""; position:absolute; z-index:0;
  top:calc(-1 * var(--pad));
  right:calc(-1 * var(--pad));
  left:calc(-1 * (var(--posterw) + var(--gap) + var(--pad)));
  bottom:-10px;
}
.omic-card.has-backdrop .omic-head::before{
  /* real TMDB backdrop (var --bd, set inline) under a violet-tinted scrim for legibility;
     when --bd is absent the gradients alone still give a cinematic header. */
  background:
    radial-gradient(120% 130% at 42% -20%, rgba(154,133,209,.45) 0%, rgba(154,133,209,0) 52%),
    linear-gradient(118deg, rgba(30,25,52,.72) 0%, rgba(24,20,42,.80) 46%, rgba(15,12,24,.90) 100%),
    var(--bd, linear-gradient(118deg, #2c2545 0%, #1c1830 48%, #120f1b 100%));
  background-size:cover, cover, cover;
  background-position:center, center, center;
  background-repeat:no-repeat;
}
.omic-card.has-backdrop .omic-head::after{
  background:linear-gradient(180deg,
    rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 22%, rgba(0,0,0,0) 58%, rgba(0,0,0,.30) 100%);
}
.omic-head > *{ position:relative; z-index:1; }

/* ---- poster ---- */
.omic-poster{
  grid-area:poster; align-self:start; position:relative; z-index:1;
  aspect-ratio:2/3; width:100%;
  border-radius:10px; overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
}
.omic-card.has-backdrop .omic-poster{
  border-color:rgba(255,255,255,.14);
  box-shadow:0 8px 22px rgba(0,0,0,.4);
}
.omic-poster img{ width:100%; height:100%; object-fit:cover; display:block; }
/* IMDb badge overlaid on the poster corner */
.omic-pbadge{ position:absolute; top:9px; left:9px; z-index:2;
  display:inline-flex; align-items:baseline; gap:4px;
  padding:4px 8px; border-radius:9px;
  background:rgba(8,6,16,.62); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#f0f2f4; font-weight:800; font-size:.9rem; letter-spacing:-.01em;
  box-shadow:0 3px 10px rgba(0,0,0,.4); }
.omic-pbadge .star{ color:var(--star); font-size:.95em; align-self:center; }
.omic-pbadge small{ font-weight:600; font-size:.66em; opacity:.7; }
/* built-in "no poster" placeholder */
.omic-noposter{ display:grid; place-items:center; gap:12px; width:100%; height:100%; padding:14%; }
.omic-film{
  width:min(72%,86px); aspect-ratio:5/4; border-radius:6px; opacity:.55;
  border:2px solid var(--faint); background:
    repeating-linear-gradient(90deg,var(--faint) 0 5px,transparent 5px 13px) top   /100% 7px no-repeat,
    repeating-linear-gradient(90deg,var(--faint) 0 5px,transparent 5px 13px) bottom/100% 7px no-repeat;
}
.omic-noposter span{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--faint);
}

/* ---- header content ---- */
.omic-head{ grid-area:head; align-self:start; min-width:0; padding-top:2px; }
.omic-title{
  margin:0; font-weight:800; letter-spacing:-.02em; color:var(--head-fg);
  font-size:clamp(1.18rem,1rem + 2vw,1.9rem); line-height:1.15;
  text-wrap:balance;
}
.omic-card.has-backdrop .omic-title{ text-shadow:0 1px 12px rgba(0,0,0,.45); }
.omic-tagline{
  margin:5px 0 0; font-style:italic; color:var(--head-muted);
  font-size:clamp(.82rem,.78rem + .4vw,.95rem);
}
.omic-meta{ display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.omic-chip{
  font-size:.74rem; font-weight:600; line-height:1;
  padding:5px 9px; border-radius:7px;
  background:var(--chip-bg); color:var(--chip-fg);
  border:1px solid var(--chip-bd); white-space:nowrap;
}

/* ---- ratings stat strip (body) ---- */
.omic-stats{ display:flex; flex-wrap:wrap; align-items:stretch;
  background:var(--surface); border:1px solid var(--border);
  border-radius:11px; overflow:hidden; }
.omic-stat{ flex:1 1 0; min-width:82px; padding:9px 12px;
  display:flex; flex-direction:column; gap:4px; }
.omic-stat + .omic-stat{ border-left:1px solid var(--border); }
.omic-stat .sv{ display:inline-flex; align-items:center; gap:5px;
  font-size:1.1rem; font-weight:800; letter-spacing:-.01em; line-height:1; color:var(--text); }
.omic-stat .sv .star{ color:var(--star); font-size:1.02em; }
.omic-stat.rt .sv{ color:var(--rt,#e0483b); }
.omic-stat .sl{ font-size:.56rem; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.omic-mcbox{ display:inline-flex; align-items:center; justify-content:center;
  min-width:25px; height:23px; padding:0 5px; border-radius:5px;
  font-size:.9rem; font-weight:800; color:#0d130c; }
.omic-mcbox.good{ background:#57bf4a; }
.omic-mcbox.mixed{ background:#f5c518; }
.omic-mcbox.bad{ background:#e0483b; color:#fff; }
@media (prefers-color-scheme: dark){ .omic-card{ --rt:#ff6f61; } }
html[data-wp-dark-mode-active] .omic-card{ --rt:#ff6f61; }

/* ---- main body ---- */
.omic-main{ grid-area:main; min-width:0; display:flex; flex-direction:column; gap:13px; }
.omic-plot{
  margin:0; color:var(--text); font-size:clamp(.86rem,.82rem + .3vw,.95rem);
  display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.omic-credits{ display:flex; flex-direction:column; gap:7px; font-size:.86rem; }
.omic-credits .row{ display:grid; grid-template-columns:76px 1fr; gap:10px; align-items:baseline; }
.omic-credits .k{ font-size:.63rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.omic-credits .v{ color:var(--text); }
.omic-footline{
  font-size:.76rem; color:var(--faint);
  display:flex; flex-wrap:wrap; gap:4px 10px;
}
.omic-genres{ display:flex; flex-wrap:wrap; gap:7px; }
.omic-gchip{
  font-size:.74rem; font-weight:600; line-height:1;
  padding:5px 10px; border-radius:999px;
  background:var(--accent-tint); color:var(--accent); white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--accent) 22%, transparent);
}
/* genre chip that links to a matching site category/tag archive */
a.omic-gchip{
  text-decoration:none; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
a.omic-gchip:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }

.omic-actions{ margin-top:2px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
/* IMDb badge — links to the title's IMDb page (new tab) */
.omic-imdb-badge{
  display:inline-flex; align-items:center;
  font-weight:800; font-size:.86rem; letter-spacing:-.02em;
  padding:10px 13px; border-radius:10px;
  background:#f5c518; color:#0a0a0a; text-decoration:none; white-space:nowrap;
  box-shadow:0 4px 14px rgba(245,197,24,.34);
  transition:background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.omic-imdb-badge:hover{ background:#ffd21a; transform:translateY(-1px); box-shadow:0 6px 18px rgba(245,197,24,.5); }
.omic-imdb-badge:active{ transform:translateY(0); }

/* "Google it!" — moved here from the entry-header so both outbound lookups sit
   together. Deliberately SECONDARY to the IMDb badge: that one is a solid brand
   fill, so a second solid fill beside it would fight for the same attention.
   This is an outline chip on the card's own tokens, which means it follows the
   light/dark palette for free; Google's green only appears on hover. */
.omic-gbtn{
  display:inline-flex; align-items:center;
  font-weight:700; font-size:.86rem; letter-spacing:-.01em;
  padding:10px 13px; border-radius:10px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); text-decoration:none; white-space:nowrap;
  transition:border-color .16s ease, color .16s ease, transform .16s ease;
}
.omic-gbtn:hover{ border-color:#21a366; color:#21a366; transform:translateY(-1px); }
.omic-gbtn:active{ transform:translateY(0); }

/* Hide control — the quietest thing in the actions row on purpose. IMDb is a
   brand fill, "Google it!" is an outline; this is text-only so the row reads
   primary / secondary / tertiary rather than three competing buttons. */
.omic-hide{
  margin-left:auto;                /* pushed to the far end, away from the two links */
  font:inherit; font-size:.8rem; font-weight:600;
  padding:8px 10px; border-radius:8px;
  background:transparent; color:var(--muted);
  border:1px solid transparent; cursor:pointer;
  transition:color .16s ease, border-color .16s ease;
}
.omic-hide:hover{ color:var(--text); border-color:var(--border); }
.omic-hide:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* The restore chip is a SIBLING of .omic-card, so it inherits none of the card's
   token block — and the card block also carries layout (display:grid etc.), so
   the wrap can't just be added to that selector. Light defaults live here; the
   two DARK token blocks near the top already list .omic-wrap alongside
   .omic-card, so dark values reach the chip normally. */
.omic-wrap{ --accent:#6b5b95; --surface:#f3f3f8; --border:#e7e6f0; --text:#1b1a22; --muted:#63626f; }

/* Restore chip — all that is left on the page when the card is hidden, so it
   has to be findable without being loud. Same outline language as .omic-gbtn.
   display is owned by the inlined head CSS (none by default, inline-flex when
   html[data-omic-hidden]); never set it here or the no-flash rule loses. */
.omic-restore{
  align-items:center; gap:7px;
  font:inherit; font-size:.84rem; font-weight:600;
  /* padding absorbs the 1px the removed border used to occupy, so the chip
     keeps its size */
  padding:10px 15px; border-radius:10px;
  /* Translucent, NOT theme-coloured. This chip sits on the post's cover artwork
     (the card it replaces overlaps the hero the same way), and that artwork is
     dark whatever the site theme is — so a colour derived from --text was
     exactly wrong in light mode: near-black ink on dark photography, invisible.
     A dark scrim + blur keeps it see-through while making the label's contrast
     independent of both the theme AND whatever image happens to be behind it.
     #f0f2f4 is the same "text over imagery" value the card header uses. */
  background:rgba(10,10,14,.46);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  backdrop-filter:blur(10px) saturate(1.1);
  color:#f0f2f4;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  border:none;
  cursor:pointer;
  margin:6px 0 18px;
  transition:background .16s ease;
}
.omic-restore:hover{
  background:rgba(10,10,14,.62);
  color:#ffffff;
}
.omic-restore:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.omic-restore svg{ flex:none; }

/* ---- collapse animation ----------------------------------------------------
   display:none can't be transitioned, so the card sits in a grid whose single
   row animates 1fr -> 0fr while .omic-fold-inner clips the overflow. This eases
   to the card's real height with no JS measurement and no magic max-height.

   Everything here is gated behind html[data-omic-anim], which card.js sets one
   frame after load. Without that gate a visitor who has hidden the card would
   watch it animate closed on every page load. */
html[data-omic-anim] .omic-fold{
  transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1);
}
html[data-omic-anim] .omic-fold-inner{
  transition:opacity .26s ease, transform .34s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
  opacity:1; transform:none;
}
/* collapsing: fade + a small lift, and hold visibility until the row finishes */
html[data-omic-anim][data-omic-hidden] .omic-fold-inner{
  opacity:0; transform:translateY(-6px);
  transition:opacity .2s ease, transform .34s cubic-bezier(.4,0,.2,1), visibility 0s linear .34s;
}
/* the chip replaces the card, so let it fade in rather than pop */
@keyframes omic-chip-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
html[data-omic-anim][data-omic-hidden] .omic-restore{ animation:omic-chip-in .3s ease both .06s; }

@media (prefers-reduced-motion: reduce){
  html[data-omic-anim] .omic-fold,
  html[data-omic-anim] .omic-fold-inner{ transition:none; }
  html[data-omic-anim][data-omic-hidden] .omic-fold-inner{ transition:none; transform:none; }
  html[data-omic-anim][data-omic-hidden] .omic-restore{ animation:none; }
}

@media (prefers-reduced-motion: reduce){
  .omic-hide, .omic-restore{ transition:none; }
}
.omic-gbtn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .omic-gbtn, .omic-imdb-badge{ transition:none; }
  .omic-gbtn:hover, .omic-imdb-badge:hover{ transform:none; }
}
.omic-btn{
  display:inline-flex; align-items:center; gap:8px;
  font:inherit; font-size:.9rem; font-weight:700; text-decoration:none;
  padding:10px 18px; border-radius:10px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:none; cursor:pointer;
  box-shadow:0 4px 14px color-mix(in srgb,var(--btn-bg) 45%, transparent);
  transition:background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.omic-btn:hover{ background:var(--btn-bg-hover); transform:translateY(-1px);
  box-shadow:0 6px 18px color-mix(in srgb,var(--btn-bg) 55%, transparent); }
.omic-btn:active{ transform:translateY(0); }
.omic-btn .tri{ font-size:.78em; }

/* ==========================================================================
   RESPONSIVE — <640px: compact poster-thumb + title beside it, details below
   ========================================================================== */
@media (max-width:639px){
  .omic-card{
    /* larger poster so the corner rating badge fits without clipping; column-gap
       is left to --gap so the has-backdrop bleed math stays consistent. */
    --posterw:104px;
    grid-template-columns:var(--posterw) 1fr;
    grid-template-areas:"poster head" "main main";
  }
  .omic-title{ font-size:clamp(1.05rem,4.4vw,1.35rem); }
  /* trim the badge on small posters so "/10" never gets cut */
  .omic-pbadge{ top:7px; left:7px; padding:3px 7px; font-size:.8rem; gap:3px; }
  .omic-stat{ min-width:72px; padding:8px 11px; }
}

/* ==========================================================================
   TRAILER MODAL — body-level overlay (created by card.js), theme-independent.
   High z-index so it clears the gridlove footer max-z popup ad.
   ========================================================================== */
.omic-modal-overlay{
  position:fixed; inset:0; z-index:2147483000;
  display:none; align-items:center; justify-content:center;
  box-sizing:border-box; padding:clamp(16px,4vw,40px);
  background:rgba(6,5,12,.82);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.omic-modal-overlay.is-open{ display:flex; }
.omic-modal-overlay *{ box-sizing:border-box; }
.omic-modal{ position:relative; width:min(940px,100%); }
.omic-modal-frame{
  position:relative; width:100%; aspect-ratio:16/9;
  background:#000; border-radius:12px; overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.omic-modal-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* glass close control — reads as a premium video-player button over the embed */
.omic-modal-close{
  position:absolute; top:-14px; right:-14px; z-index:2;
  width:44px; height:44px; padding:0; border-radius:999px; cursor:pointer;
  display:grid; place-items:center;
  color:#fff;
  background:rgba(18,16,24,.55);
  border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px) saturate(1.25); backdrop-filter:blur(10px) saturate(1.25);
  box-shadow:0 6px 20px rgba(0,0,0,.5);
  transition:background .18s ease, color .18s ease, border-color .18s ease,
             box-shadow .18s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.omic-modal-close svg{ display:block; transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.omic-modal-close:hover{
  background:#fff; color:#141018; border-color:#fff;
  transform:scale(1.08); box-shadow:0 8px 26px rgba(0,0,0,.55);
}
.omic-modal-close:hover svg{ transform:rotate(90deg); }
.omic-modal-close:active{ transform:scale(.95); }
.omic-modal-close:focus-visible{ outline:2px solid #f5c518; outline-offset:3px; }
@media (max-width:560px){
  .omic-modal-close{ top:-52px; right:0; }
}
@media (prefers-reduced-motion:reduce){
  .omic-modal-close,
  .omic-modal-close svg{ transition:none; }
  .omic-modal-close:hover{ transform:none; }
  .omic-modal-close:hover svg{ transform:none; }
}

/* ==========================================================================
   INLINE TRAILER POSTER — sits between entry-header and the download buttons.
   Facade only (one thumbnail); clicking opens the trailer modal via card.js.
   ========================================================================== */
.omic-trailer{ margin:0 0 22px; }
.omic-trailer-poster{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  border-radius:12px; overflow:hidden; cursor:pointer; text-decoration:none;
  background:#0d0b14; box-shadow:0 8px 26px rgba(24,20,52,.18);
  transition:transform .18s ease, box-shadow .18s ease;
}
.omic-trailer-poster img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease, filter .25s ease;
}
.omic-trailer-poster::after{ /* legibility scrim for the caption */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%);
}
.omic-trailer-poster:hover{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(24,20,52,.28); }
.omic-trailer-poster:hover img{ transform:scale(1.03); filter:brightness(1.05); }
.omic-trailer-poster:focus-visible{ outline:3px solid var(--accent,#6b5b95); outline-offset:3px; }

/* play button */
.omic-trailer-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:68px; height:48px; border-radius:12px;
  background:rgba(12,10,18,.62); border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:grid; place-items:center;
  transition:background .18s ease, transform .18s ease, border-color .18s ease;
}
.omic-trailer-play::before{ /* triangle */
  content:""; display:block;
  border-style:solid; border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;
  margin-left:3px;
}
.omic-trailer-poster:hover .omic-trailer-play{
  background:#f5c518; border-color:#f5c518; transform:translate(-50%,-50%) scale(1.06);
}
.omic-trailer-poster:hover .omic-trailer-play::before{ border-left-color:#0a0a0a; }

/* caption */
.omic-trailer-cap{
  position:absolute; left:14px; bottom:11px; z-index:2;
  color:#f0f2f4; font-weight:700; font-size:.86rem; letter-spacing:-.01em;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-reduced-motion:reduce){
  .omic-trailer-poster,.omic-trailer-poster img,.omic-trailer-play{ transition:none; }
  .omic-trailer-poster:hover{ transform:none; }
  .omic-trailer-poster:hover img{ transform:none; }
  .omic-trailer-poster:hover .omic-trailer-play{ transform:translate(-50%,-50%); }
}

/* All thumbnail sources failed (deleted/private video, or YouTube's grey
   placeholder survived the whole chain). card.js removes the <img> and adds
   .omic-noimg — paint a deliberate poster instead of an empty box. */
.omic-trailer-poster.omic-noimg{
  background:
    radial-gradient(120% 140% at 22% 0%, rgba(154,133,209,.5) 0%, rgba(154,133,209,0) 55%),
    linear-gradient(122deg, #2c2545 0%, #1c1830 52%, #120f1b 100%);
}
.omic-trailer-poster.omic-noimg::after{ background:none; } /* no scrim needed */
.omic-trailer-poster.omic-noimg .omic-trailer-play{
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.32);
}

/* ==========================================================================
   SYNOPSIS — deliberately has almost NO styling of its own.
   It reuses the theme's .kd-card component (gridlove custom.css) wholesale, so
   it inherits the Knowledge Desk look, its light/dark token set and its
   <details> chevron behaviour, and stays in sync if that component changes.
   Only the two things kd-card has no equivalent for are defined here.
   ========================================================================== */
.om-wiki-card{ margin: 0 0 22px; }
.om-wiki-card .om-wiki-text{
  margin: 6px 0 0;
  font-size: 14.5px; line-height: 1.62;
  color: var(--kd-body);
}
.om-wiki-card .om-wiki-credit{ margin-top: 12px; font-size: 12.5px; }

/* Wrapper the animation script injects around a <details> body so one box is
   animated instead of several siblings. Layout-neutral by design — kd-card's own
   padding lives on .kd-section/.kd-readfirst, which keep their class selectors. */
.om-details-wrap{ display:block; }
/* kd-card's reveal keyframe targets `details[open] > .kd-section`, which no longer
   matches once the body is wrapped. The height transition replaces it, so suppress
   the now-orphaned animation rather than leaving a half-applied effect. */
.om-details-wrap > .kd-section,
.om-details-wrap > .kd-readfirst{ animation:none !important; }