/* ============================================================================
   LIBRARY COVER CARD — below-cover strip + cover interactions (extends _cover.css).
   The "cover" view of a saved document in "Moje knihovna". The cover image
   itself is the shared .cv (see _cover.css); this file adds:
     • the library strip beneath it — title + read / download / ★ favourite +
       icon meta (added-date / expiry; labels are NEVER shown on covers — too
       narrow — so it's icon + date);
     • a "Nové" tag ON the cover (shared .nchip) for freshly-saved docs;
     • cover hover / press motion (mirrors the quick tile) — the code colourises
       to the doc-type ink, a doc-type gradient grows from the body's top-left
       corner (on the WHITE paper, NOT over the coloured band), and the rule
       between code and title slowly grows.

   The ★ favourite is the shared `.fav` component (_favourite.css/js) so forced
   states + the add-burst work. Library context is SIMPLIFIED: saved docs are
   valid, no validity overlays. Import AFTER _cover.css (+ _buttons.css,
   _chips.css, _favourite.css). Rules are UNLAYERED so the few .cv overrides
   beat the shared @layer components base.
   ============================================================================ */

/* @property registration makes the gradient stop-saturation percentages
   ANIMATABLE, so the cover hover glow can intensify in place (see below). */
@property --lcv-g1 { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --lcv-g2 { syntax: "<percentage>"; inherits: true; initial-value: 0%; }

/* Pin the strip to the bottom so CTAs + meta align across a row; the card is
   ALSO its own size container so the strip can collapse at narrow card widths
   (it sits OUTSIDE .cv__img's container, so .cv__img can't drive it). */
.lib-cv { height: 100%; container-type: inline-size; container-name: libcv; }
.lib-cv .cv__meta { margin-top: auto; gap: 9px; }

/* ── Actions: Číst (primary) + Stáhnout (ghost) + ★ favourite ───────────── */
.lib-cv__actions { display: flex; gap: 8px; align-items: stretch; margin-top: 2px; }
.lib-cv__actions .btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }

/* ── Meta: icon + value (date). Labels are never shown on covers. ───────── */
.lib-cv__meta-line {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 11.5px; color: var(--color-fg-secondary);
  padding-top: 9px; border-top: 1px solid var(--color-border-default);
}
.lib-cv__mlabel { display: none; }
.lib-cv__added,
.lib-cv__expire { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.lib-cv__expire { justify-content: flex-end; text-align: right; }
.lib-cv__added i,
.lib-cv__expire i { flex: none; font-size: 12px; color: var(--color-fg-tertiary); }
.lib-cv__mval { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lib-cv__expire--soon .lib-cv__mval { color: var(--gov-color-warning-700); font-weight: 500; }
.lib-cv__expire--soon i { color: var(--gov-color-warning-600); }

/* ── "Nové" tag ON the cover (shared .nchip) — sits in the body, just above
   the foot. Local rule = position + cqw sizing only; colour/shape from .nchip. */
.lib-cv__new {
  position: absolute; z-index: 4;
  right: clamp(8px, 5cqw, 14px);
  bottom: clamp(8px, 5cqw, 12px);
  font-size: clamp(8px, 4.6cqw, 10px);
  padding: clamp(2px, 1.4cqw, 3px) clamp(5px, 3.4cqw, 8px);
  box-shadow: 0 1px 3px rgba(12,24,56,0.25);
}

/* ── Cover hover / press motion (mirrors the quick tile) ─────────────────── */
/* 1) Code colourises to the doc-type ink (--band-bg lives on .cv__img). */
.lib-cv .cv__code { transition: color 240ms ease; }
.lib-cv:hover .cv__code,
.lib-cv[data-state~="hover"] .cv__code,
.lib-cv:active .cv__code,
.lib-cv[data-state~="pressed"] .cv__code { color: var(--band-bg); }

/* 2) The rule between code and title slowly grows. */
.lib-cv .cv__rule { transition: width 380ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.lib-cv:hover .cv__rule,
.lib-cv[data-state~="hover"] .cv__rule { width: clamp(40px, 30cqw, 92px); }
.lib-cv:active .cv__rule,
.lib-cv[data-state~="pressed"] .cv__rule { width: clamp(52px, 40cqw, 120px); }

/* 3) A doc-type radial glow blooms from the BODY's top-left corner — on the
   WHITE paper, NOT over the coloured band (the gradient lives on .cv__body, a
   sibling of the band). Body content is lifted above it; the availability chip
   (a body child) stays above too. The gradient's POSITION + SIZE are FIXED —
   only the stop COLOURS intensify (the --lcv-g* percentages are @property-
   registered so they're animatable), so it reads as the gradient blooming /
   its edge shifting in place, never translating. Press intensifies further. */
.lib-cv .cv__body { --lcv-g1: 0%; --lcv-g2: 0%; transition: --lcv-g1 460ms ease, --lcv-g2 460ms ease; }
.lib-cv .cv__body > :not(.lib-cv__new) { position: relative; z-index: 1; }
.lib-cv .cv__body::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background: radial-gradient(125% 118% at 0% 0%,
    color-mix(in oklab, var(--band-bg) var(--lcv-g1), transparent) 0%,
    color-mix(in oklab, var(--band-bg) var(--lcv-g2), transparent) 36%,
    transparent 66%);
}
.lib-cv:hover .cv__body,
.lib-cv[data-state~="hover"] .cv__body { --lcv-g1: 24%; --lcv-g2: 9%; }
.lib-cv:active .cv__body,
.lib-cv[data-state~="pressed"] .cv__body { --lcv-g1: 42%; --lcv-g2: 17%; }

/* ── Collapse — CTAs to icon-only (all on one line, incl. ★); meta stacks at
   the very smallest. Labels are already always hidden on covers. ─────────── */
@container libcv (max-width: 250px) {
  .lib-cv__actions .btn__label { display: none; }
  .lib-cv__actions .btn { padding: 6px 0; }
}
@container libcv (max-width: 165px) {
  .lib-cv__meta-line { flex-direction: column; align-items: flex-start; gap: 3px; }
  .lib-cv__expire { justify-content: flex-start; text-align: left; }
  /* collapse the "Nové" tag to icon-only on the tiniest covers */
  .lib-cv__new { gap: 0; padding: clamp(2px, 1.4cqw, 3px) clamp(4px, 2.6cqw, 6px); }
  .lib-cv__new .nchip__label { display: none; }
}