/* ═══════════════════════════════════════════════════════════════════════════
   ARTICLE COVER — the shared component.

   biiq_Posts emits ONE of three things into a cover slot, chosen per article:

       <img class="pg-cover-img">      a real image (generated or uploaded)
       <span class="pg-composed">      our frame + a real subject mark
       <svg class="pg-cover-icon">     the topic icon (the never-empty fallback)

   Those three live HERE, in their own file, because the same PHP renders them
   on more than one route: /pages/ and /pages/{slug}/ load them beside
   pages.css, and the home page's "تازه‌ترین مطالب" teaser loads them beside
   home-prices.css. Copying the rules into both stylesheets was the alternative
   and it is the classic silent-divergence bug — one copy gets updated, the
   other keeps rendering the old component with no error anywhere.
   (`pagecss` takes a comma-separated list for exactly this reason; see
   biiq_Theme::DisplayPage.)

   ⚠️ THIS FILE STYLES THE CONTENTS OF A COVER SLOT, NEVER THE SLOT ITSELF.
   The box — its size, aspect ratio, radius and background — belongs to the page
   that owns the card, because a 132px card cover, a near-square featured cover
   and the home teaser's small tile are three different boxes holding the same
   component. Every rule below therefore assumes only that its parent is
   `position: relative` and clips overflow.

   --pg-accent is set per card by js/pages.js from a data-pg-accent attribute
   (never a style="" attribute — the frontend is CSP-clean). The :root fallback
   is declared by whichever page stylesheet loads alongside this one.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. A REAL IMAGE ─── */
.pg-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── 2. COMPOSED: our frame, a real subject mark ───
   The frame takes OUR category accent; the mark keeps its own brand colour.
   That is what editorial composition normally does — the page stays one
   palette while the subject stays recognisable. */
.pg-composed {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* A dot lattice, so the mark sits on something with depth rather than on flat
   black. Two gradients, no image file. */
.pg-composed-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size: 15px 15px;
  /* Faded at the edges so the lattice never fights the card border. */
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 25%, transparent 78%);
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 25%, transparent 78%);
}
.pg-composed-glow {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--pg-accent) 46%, transparent), transparent 68%);
  filter: blur(26px);
}
.pg-composed-disc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(12,14,22,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--pg-accent) 40%, transparent),
    0 0 0 8px color-mix(in srgb, var(--pg-accent) 8%, transparent),
    0 14px 40px rgba(0,0,0,0.5);
}
.pg-composed-mark {
  width: 46px;
  height: 46px;
  object-fit: contain;
  display: block;
}

/* ─── 3. THE TOPIC ICON — the fallback that is never empty ───
   Colour is currentColor, set on the slot by the owning page, so one icon set
   serves every category and a new category needs no CSS here. */
.pg-cover-icon {
  width: 46px;
  height: 46px;
  /* Authored at 24×24 and drawn much larger, so the stroke has to stop scaling
     with the box or a big cover renders a noticeably fatter line than the
     small ones beside it. */
  vector-effect: non-scaling-stroke;
  opacity: 0.9;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.45));
}