/* ============================================================================
   MY LIBRARY CARD — single source of truth.
   The saved-document card (.lib-card) used in "Moje knihovna". Built on the
   catalogue (document) card: the SAME 2-col grid heading (doc-type chip +
   title, availability chip top-right via grid-area, code-cell sub-row with the
   doc-card num + edition/amendment pills) and the SAME container-query collapse
   (achip floats + → icon, STANAG → NAG, action labels → icons).

   Library-specific detail layered on top: a favourite ★ toggle in the actions
   row, a "Nové" badge by the added-date for freshly-saved docs, and an icon +
   label + value meta row (added-date / expiry) whose LABELS collapse to icons
   when space is tight while the dates stay visible.

   Each card is its OWN size container (cards sit in a responsive grid, so the
   container must be the card). The bottom block is pinned with margin-top:auto
   so a row of cards aligns its CTAs + meta to the bottom edge.

   Import AFTER colors_and_type.css (+ _chips.css, _buttons.css). Surface rides
   --color-bg-raised (white→subtle dark). Rules live in @layer components (chip
   overrides beat the shared chip base by specificity within the same layer).
   ============================================================================ */

@layer components {

.lib-card {
  container-type: inline-size;
  container-name: libcard;

  background: var(--color-bg-raised);
  color: var(--color-fg-default);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  box-shadow: var(--shadow-1);
  padding: 16px 20px;
  cursor: pointer;

  display: flex; flex-direction: column;
  gap: 12px;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.lib-card:hover,
.lib-card[data-state~="hover"] { background: var(--gov-color-primary-50); }
.lib-card:active,
.lib-card[data-state~="pressed"] { box-shadow: inset 0 1px 3px rgba(12,24,56,0.10); }

/* ── Top: the achip FLOATS top-right so the TITLE FLOWS AROUND / UNDER it (the
   document card's narrow-mode float, applied at ALL widths so a long title uses
   the full card width instead of being squeezed into a column). The achip is
   DOM-FIRST in the markup so the float wraps the title; code-cell sub below. ── */
.lib-card__top::after { content: ""; display: block; clear: both; } /* contain the float */

.lib-card__heading {
  margin: 0;
  font-size: 16px; font-weight: 600; line-height: 1.4;
  color: var(--color-fg-default);
}
.lib-card__heading::after { content: ""; display: block; clear: right; }
.lib-card__heading .dc-chip { margin: 0 8px 0 0; vertical-align: 3px; }
.lib-card__title { font-weight: 600; }

/* Availability chip floats top-right; the title flows around / under it. The
   negative bottom margin shrinks the float's wrap region (~1 line) so line 2+
   of the title flows directly under the chip. */
.lib-card__achip { float: right; margin: 0 0 -4px 12px; white-space: nowrap; }

/* Code-cell — the catalogue-card num + edition / amendment pills (NO type
   prefix — the chip carries the type). */
.lib-card__sub { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lib-card .code-cell { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.lib-card .num { font-family: var(--font-mono); font-weight: 600; font-size: 14px; color: var(--color-fg-default); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.lib-card .pill { font-family: var(--font-mono); font-weight: 500; font-size: 11px; color: var(--color-fg-secondary); background: var(--gov-color-neutral-100); padding: 2px 6px; border-radius: 3px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lib-card .pill .abbr { color: var(--gov-color-neutral-500); font-weight: 400; }
.lib-card .pill--am { background: var(--gov-color-warning-50); color: var(--gov-color-warning-700); }
.lib-card .pill--am .abbr { color: var(--gov-color-warning-700); opacity: 0.65; }

/* ── Bottom: actions (+ ★ favourite) + meta, pinned to the card bottom ────── */
.lib-card__bottom { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.lib-card__actions { display: flex; gap: 8px; align-items: center; }
.lib-card__actions .btn { white-space: nowrap; }

/* Favourite ★ — shared `.fav` component (_favourite.css/js); pinned to the
   right end of the actions row. */
.lib-card__actions .fav { margin-left: auto; }

/* Meta — icon + collapsible label + value (date). Labels drop to icon-only
   when the card is narrow; values (dates) stay. */
.lib-card__meta {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  font-size: 12px; color: var(--color-fg-secondary);
  padding-top: 10px; border-top: 1px solid var(--color-border-default);
}
.lib-card__added,
.lib-card__expire { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.lib-card__expire { justify-content: flex-end; text-align: right; }
.lib-card__added > i,
.lib-card__expire > i { flex: none; font-size: 12.5px; color: var(--color-fg-tertiary); }
.lib-card__mlabel { color: var(--color-fg-secondary); }
.lib-card__mval { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-fg-secondary); }

/* "Nové" badge is the shared `.nchip` (_chips.css); it sits right after the
   added date inside .lib-card__added (the flex gap spaces it). */
.lib-card__added .nchip { flex: none; }

/* Expiring-soon warning — amber, with a leading warning glyph. */
.lib-card__expire--soon .lib-card__mval { color: var(--gov-color-warning-700); font-weight: 500; }
.lib-card__expire--soon i { color: var(--gov-color-warning-600); }

/* ── Chip hover-active (mirror the catalogue card) ─────────────────────── */
.lib-card:is(:hover, [data-state~="hover"]) .achip.a-public     { background: var(--gov-color-success-100); border-style: solid; border-color: var(--gov-color-success-500); }
.lib-card:is(:hover, [data-state~="hover"]) .achip.a-login      { background: var(--gov-color-info-100);    border-style: solid; border-color: var(--gov-color-info-500); }
.lib-card:is(:hover, [data-state~="hover"]) .achip.a-controlled { background: var(--gov-color-warning-100); border-style: solid; border-color: var(--gov-color-warning-500); }
.lib-card:is(:hover, [data-state~="hover"]) .achip.a-metadata   { background: var(--gov-color-neutral-200); border-style: solid; border-color: var(--gov-color-neutral-400); }

body[data-theme="dark"] .lib-card:is(:hover, [data-state~="hover"]) .dc-chip--cos     { box-shadow: inset 0 0 0 1px #98c0e8; }
body[data-theme="dark"] .lib-card:is(:hover, [data-state~="hover"]) .dc-chip--stanag  { box-shadow: inset 0 0 0 1px #cdd4dc; }
body[data-theme="dark"] .lib-card:is(:hover, [data-state~="hover"]) .dc-chip--stanrec { box-shadow: inset 0 0 0 1px #c8b9e0; }
body[data-theme="dark"] .lib-card:is(:hover, [data-state~="hover"]) .dc-chip--ap      { box-shadow: inset 0 0 0 1px #a8d2c4; }

/* ── Responsive collapse (per-card container) ──────────────────────────────
   NOTE: a size container's query length is its CONTENT-box width, so subtract
   the card's 40px horizontal padding — a 430px card reads as ~390px here.
   Tuned so the full availability chip + meta labels show at comfortable widths
   and only shed when the card is genuinely narrow. */

/* Meta labels → icon-only first (they're the tightest row); dates stay. */
@container libcard (max-width: 370px) {
  .lib-card__mlabel { display: none; }
}

/* Genuinely narrow — achip collapses to its icon (title still flows around it),
   STANAG → NAG. The float layout is already the default. */
@container libcard (max-width: 330px) {
  .lib-card .dc-chip__full  { display: none; }
  .lib-card .dc-chip__short { display: inline; }

  .lib-card .achip { padding: 0; gap: 0; justify-content: center; width: 22px; height: 22px; box-sizing: border-box; }
  .lib-card .achip .chip-label { display: none; }
  .lib-card .achip i { font-size: 12px; width: 12px; height: 12px; top: 0; margin: 0; }
}

/* Narrowest — action labels → icons, meta stacks vertically. NOTE: the "Nové"
   badge is NOT collapsed here — once the meta stacks, the added row spans the
   full card width, so the full "Nové" label has ample room. It only collapses
   on a genuinely tiny card (below), as a safety. */
@container libcard (max-width: 285px) {
  .lib-card__actions .btn__label { display: none; }
  .lib-card__actions .btn { padding: 6px 9px; }
  .lib-card__meta { flex-direction: column; align-items: flex-start; gap: 6px; }
  .lib-card__expire { justify-content: flex-start; text-align: left; }
}

/* Very narrow safety — "Nové" → icon-only (collapsed .nchip). */
@container libcard (max-width: 210px) {
  .lib-card__added .nchip__label { display: none; }
  .lib-card__added .nchip { gap: 0; padding: 3px 5px; }
}

} /* end @layer components — lib-card */