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

   The chip, the meta row and the card itself, extracted from pages.css so the
   SAME card can be rendered by more than one route. Consumers today:

       /pages/  and  /pages/{slug}/   the list, the related rail
       /crypto/{coin}/                the per-coin "اخبار و تحلیل" section

   Extracted rather than copied for the reason post-cover.css exists: the same
   PHP emits this markup on every one of those routes, and two stylesheets
   defining one component is the bug where a change lands in one copy and the
   other keeps rendering the old thing, with nothing failing anywhere.

   ⚠️ PAIR THIS WITH post-cover.css. This file styles the card SHELL; what goes
   inside the cover slot — a real image, a composed mark, or the topic icon —
   lives there. A route that loads one without the other renders half a card.
   (`pagecss` takes a comma-separated list; see biiq_Theme::DisplayPage.)

   --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. Declare the :root
   fallback in whichever page stylesheet loads alongside this one.
   ═══════════════════════════════════════════════════════════════════════════ */

:root { --pg-accent: #3d7bff; }

.pg-cat {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--pg-accent);
  background: color-mix(in srgb, var(--pg-accent) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pg-accent) 26%, transparent) inset;
  text-decoration: none;
}
.pg-cat-lg { font-size: 13px; padding: 7px 16px; margin-bottom: 18px; }
a.pg-cat:hover { background: color-mix(in srgb, var(--pg-accent) 20%, transparent); }

.pg-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
}
.pg-meta-lg { font-size: 13.5px; gap: 12px; }
.pg-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  flex: 0 0 auto;
}


/* ─── LIST: grid ─── */
.pg-grid-wrap { padding-top: 40px; }
.pg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.pg-card {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 240ms, border-color 240ms;
}
.pg-card:hover { transform: translateY(-4px); border-color: var(--border-h); }
.pg-card-cover { height: 132px; }
.pg-card-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* The card is a flex column and the meta row is pushed to the bottom, so a
     row of cards with different title lengths still has its dates aligned. */
  flex: 1 1 auto;
}
.pg-card-body .pg-cat { align-self: flex-start; }
.pg-card-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}
.pg-card-excerpt {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-sub);
  margin: 0;
  /* Three lines, then ellipsis. Excerpts come from a VARCHAR(500) and are
     author-written, so their lengths differ by a lot; without a clamp one long
     excerpt sets the height of every card in its row. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pg-card-body .pg-meta { margin-top: auto; padding-top: 4px; }

/* ─── THE COVER SLOT ───
   The BOX the cover sits in. Its contents come from post-cover.css — see the
   pairing note at the top of this file.
   /pages/ defines a second, near-square slot (.pg-feat-cover) for its featured
   card; that one stays in pages.css because its size is a fact about that
   layout, not about the card. */
.pg-card-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 132px;
  color: var(--pg-accent);              /* inherited by the icon variant */
  background:
    radial-gradient(120% 120% at 78% 12%, color-mix(in srgb, var(--pg-accent) 34%, transparent), transparent 62%),
    linear-gradient(140deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
}
/* A real image carries its own dark ground, so the gradient would only muddy
   it — but it must STAY for the icon and composed variants, which have none. */
.pg-card-cover:has(.pg-cover-img) { background: #05060a; }
/* A hairline of the accent along the bottom edge, so the cover still reads as
   belonging to its category once the mark is scrolled past. */
.pg-card-cover::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pg-accent), transparent);
  opacity: 0.55;
}

/* ─── RESPONSIVE ───
   These live WITH the component, not with the page that happens to host it.
   They were briefly left behind in pages.css during the extraction, which gave
   /crypto/{coin}/ a permanent one-column grid at every width — the class was
   defined, so nothing looked broken enough to notice. A component that carries
   its base rule but not its breakpoints is half-extracted. */
@media (min-width: 576px) {
  .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .pg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .pg-card { transition: border-color 240ms; }
  .pg-card:hover { transform: none; }
}