/* ═══════════════════════════════════════════════════════════════════════════
   Home page — the live-price section, now that its cards are links.

   WHY THIS FILE EXISTS AT ALL, AND WHY IT IS NOT IN index.css
   -----------------------------------------------------------
   `css/style.min.css` is a GENERATED bundle (grid + index + hero-anim + btn-fx)
   and the build script that produces it is not in this repo yet. Adding these
   four rules to index.css would edit a source the served bundle is NOT rebuilt
   from: the cards would render as underlined blue links with nothing failing
   anywhere. So the home page now asks for its own stylesheet through the same
   `[@page->pagecss]` hook /about/ and /crypto/ already use.

   It is deliberately TINY. When the bundle build script lands, the right move
   is to fold these rules into index.css and drop `pagecss` from the index
   handler — at which point this file and its extra request disappear. Until
   then, an extra 1 KB request beats an unstyled section.

   Everything here is ADDITIVE: .price-full-card, .glass, .btn and the hover
   lift all come from the bundle unchanged. These rules only undo the element
   defaults an <a> brings that a <div> did not.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The price cards became <a> elements so a visitor can go from a price straight
   to that coin's page. As flex children of .prices-track their display is
   blockified automatically, so the layout is untouched — but an anchor still
   arrives with its own colour and underline, and both have to go. */
.prices-track > a.price-full-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
/* Keyboard users get a visible target. The rail scrolls horizontally, so the
   outline has to sit inside the card — an offset ring is clipped by the
   track's overflow-x and the focused card looks unfocused. */
.prices-track > a.price-full-card:focus-visible {
  outline: 2px solid var(--blue2);
  outline-offset: -2px;
}

/* ─── LONG COIN NAMES vs THE CHANGE BADGE ───
   Measured at the 5-up desktop rail: «بیت‌کوین‌کش» left EXACTLY 0px between the
   name block and the ▼٪ badge, and «بایننس‌کوین» left 6px. Nothing was clipped —
   the two simply touched, which reads as a collision.

   ⚠️ THE OBVIOUS FIX IS THE DANGEROUS ONE. `.pfc-name-fa` already carries
   `white-space: nowrap` + `text-overflow: ellipsis`, so squeezing it just a
   little more would truncate «بیت‌کوین‌کش» to «بیت‌کوین…» — the name of a
   DIFFERENT COIN. On an exchange, a label that silently becomes another asset's
   label is worse than an ugly one. So the name is allowed to WRAP instead:
   two lines is honest, an ellipsis here is not.

   `gap` guarantees the two can never touch again no matter how the rail is
   resized; `line-clamp: 2` is only a guard so a pathological name cannot grow
   the whole row without limit. At two lines every real name fits, so the clamp
   never actually truncates anything today.

   Scoped to `.prices-track >` — the same reason the rest of this file is: these
   rules belong to the home rail, not to `.price-full-card` wherever it appears. */
.prices-track > .price-full-card .pfc-header {
  gap: 10px;
  align-items: flex-start;
}
.prices-track > .price-full-card .pfc-name-fa {
  white-space: normal;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The badge must never be the thing that shrinks — it is 4 characters and it
   carries the sign, so a squeezed one is unreadable in a way a wrapped name is
   not. (It is already flex:0 0 auto in the bundle; restated here so a future
   edit to that file cannot quietly take it away.) */
.prices-track > .price-full-card .pc-change-sm {
  flex: 0 0 auto;
}

/* ─── "THIS IS A LINK" ───
   The cards became <a> elements but still looked like read-only data tiles, so
   a whole navigation path — the per-coin page — was invisible. A sentence in
   the section subtitle was the other half of the fix; this is the half that
   works, because nobody reads a subtitle before tapping.

   ALWAYS VISIBLE, not hover-only. Hover does not exist on a phone, and the rail
   is most used on a phone — a hover-only affordance would tell the visitors who
   need it least. It sits at 0.3 and comes up to full on hover/focus, so it
   reads as a hint at rest and as a target once you are on it.

   An inline SVG data URI rather than a rotated-border triangle: the arrow has
   to be a LEFT chevron (forward, in RTL) and match the one on the "همه‌ی ارزها"
   button exactly. `data:` is permitted by the CSP's img-src, which governs
   background-image too. */
.prices-track > a.price-full-card {
  position: relative;
}
.prices-track > a.price-full-card::after {
  content: '';
  position: absolute;
  bottom: 26px;
  inset-inline-end: 16px;
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
  opacity: 0.3;
  /* Nudged toward the direction it points, so the motion agrees with the arrow
     instead of fighting it. translateX is physical, and in RTL "forward" is
     negative — hence the minus. */
  transition: opacity 220ms ease, transform 220ms ease;
}
.prices-track > a.price-full-card:hover::after,
.prices-track > a.price-full-card:focus-visible::after {
  opacity: 1;
  transform: translateX(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .prices-track > a.price-full-card::after { transition: opacity 220ms ease; }
  .prices-track > a.price-full-card:hover::after,
  .prices-track > a.price-full-card:focus-visible::after { transform: none; }
}

/* "See all coins", under the rail. */
.prices-cta {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.prices-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.prices-cta-btn svg {
  width: 16px;
  height: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME — "تازه‌ترین مطالب": the three-article teaser for /pages/.
   Added 2026-08-02.

   ⚠️ WHY THIS BLOCK IS IN A FILE CALLED home-prices.css.
   `pagecss` is ONE filename per route (biiq_Theme::DisplayPage whitelists it as
   a single `^[a-z0-9._-]+\.(css|js)$` and v2head emits one <link>), and the
   home route's single slot is already this file. The alternatives were to widen
   that mechanism to a list — touching the shared theme lib and v2head for a
   cosmetic reason — or to contort the markup to avoid needing any CSS. Neither
   is worth it, so the home route's page stylesheet now carries two blocks and
   its NAME is under-descriptive. Rename it home.css when the bundle build
   script lands and all of these page files fold into index.css.

   The cards are NOT .pg-card: those live in pages.css, which this route does
   not load, for the same one-slot reason. They are deliberately simpler than
   the ones on /pages/ — a teaser has no cover art.

   --pg-accent per card comes from js/pages.js, which the index handler loads
   through the `pagejs` slot; that script is route-agnostic and does nothing but
   copy [data-pg-accent] into the custom property (no style="" — the frontend is
   CSP-clean). The `--pg-accent` declared on .news-card below is the REAL
   default for this route, not a safety net: pages.css, which declares the
   :root fallback, is not loaded here.
   ═══════════════════════════════════════════════════════════════════════════ */
.news-head { margin-bottom: 40px; }
.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.news-card {
  --pg-accent: #3d7bff;                /* the real default here — see above */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 26px 24px;
  border-radius: 22px;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform 240ms, border-color 240ms;
}
.news-card:hover { transform: translateY(-4px); border-color: var(--border-h); }
.news-card:focus-visible { outline: 2px solid var(--blue2); outline-offset: 2px; }
/* The accent bloom, same gesture as .why-card's — it is what makes these read
   as part of this page rather than as a widget dropped onto it. */
.news-card::before {
  content: '';
  position: absolute;
  inset-block-start: -70px;
  inset-inline-end: -70px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pg-accent), transparent);
  opacity: 0;
  transition: opacity 300ms;
  pointer-events: none;
}
.news-card:hover::before { opacity: 0.09; }
.news-card > * { position: relative; }

/* ─── THE COVER SLOT ───
   Only the BOX is defined here. What goes inside it — a real image, a composed
   frame, or the topic icon — is the shared component in css/post-cover.css,
   which this route now loads alongside this file (`pagecss` takes a list). The
   same PHP renders the same markup on /pages/; duplicating its styles into two
   stylesheets is how one copy silently stops matching the other.

   The card is padded, so the cover is pulled out to the card's edges by its own
   negative margin rather than the card losing its padding — the text below it
   still needs that padding. */
.news-cover {
  position: relative;
  display: block;
  overflow: hidden;
  /* align-self, and it is load-bearing. .news-card is a flex column with
     `align-items: flex-start` (so the category chip hugs its text), which makes
     every child size to its CONTENT — and this box's content is absolutely
     positioned, so its content width is 0. The cover rendered, occupied no
     space, and looked like it had failed to load. */
  align-self: stretch;
  margin: -26px -24px 4px;
  height: 132px;
  border-radius: 22px 22px 0 0;
  /* The ground for the icon and composed variants. A real image covers it and
     brings its own; see the :has() rule below. */
  background:
    radial-gradient(120% 120% at 78% 12%, color-mix(in srgb, var(--pg-accent) 30%, transparent), transparent 62%),
    linear-gradient(140deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  /* Inherited by .pg-cover-icon, which draws in currentColor. */
  color: var(--pg-accent);
}
.news-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. */
.news-cover::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pg-accent), transparent);
  opacity: 0.55;
}
.news-cat {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--pg-accent);
}
.news-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
}
.news-excerpt {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-sub);
  margin: 0;
  /* Excerpts are author-written and their lengths differ a lot; without a clamp
     one long excerpt sets the height of every card in the row. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  /* Pushed to the bottom so a row of cards with different title lengths still
     has its dates on one line. */
  margin-top: auto;
  padding-top: 4px;
}
.news-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  flex: 0 0 auto;
}
.news-more { margin-top: 32px; display: flex; justify-content: center; }

@media (min-width: 576px) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .news-card { transition: border-color 240ms; }
  .news-card:hover { transform: none; }
}