/*** CMP-LEDGERCARD.CSS v1
- Shared "ledger" list component — numbered, typographic, hairline-ruled rows.
- Used by: top-level indexes (db_agent/index, db_media/index) and beta-style
  archives (beta cat/tag/psd, db_agent main + psd).
- Two row variants:
    --alpha   [num] [title] [count]              (default — index pages)
    --gamma   [num] [title] [excerpt] [arrow]    (taxonomy / agent archives)
##########################
***/

/* #region GRID ####################################################### */
/* 12-col primitive where each .column spans 12 — full-width rows separated
   by hairlines. Preserves .grid/.column contract. */

.cmp-ledger {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* No grid-column-gap declared — rows always span 12, and we don't
     want any horizontal reservation. Keeps the 12-track primitive for
     consistency with the other card grids without the gap-overflow. */
  grid-row-gap: 0;
}

.cmp-ledger .column {
  grid-column: span 12;
  min-width: 0;
  border-bottom: 1px solid var(--color-light);
  row-gap: 0;
}

.cmp-ledger .column:last-child { border-bottom: none; }

/* #endregion */

/* #region ROW — shared chrome ######################################## */

.cmp-ledger-row {
  max-width: 100%;
  min-width: 0;
  background: transparent;
  /* Narrow-viewport safeguard — break long tokens rather than push the
     row past the viewport. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cmp-ledger-row-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.cmp-ledger-row-link:hover {
  text-decoration: none;
  cursor: pointer;
}

/* #endregion */

/* #region ALPHA — [num] [title] [count] ############################## */

.cmp-ledger-row-inner {
  display: grid;
  /* minmax(0, 1fr) — the bare 1fr resolves to minmax(auto, 1fr), which
     lets a long unbroken title bloat the row beyond the viewport. */
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  grid-template-areas: "num title meta";
  align-items: baseline;
  column-gap: var(--space-md);
  padding: 1.5rem 0;
}

.cmp-ledger-num {
  grid-area: num;
  font-family: var(--font-sans);
  font-size: var(--type-xs);
  letter-spacing: var(--track-wider);
  color: var(--color-shade);
  font-variant-numeric: tabular-nums lining-nums;
}

.cmp-ledger-title {
  grid-area: title;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-lg);
  line-height: 1.25em;
  color: var(--color-black);
}

.cmp-ledger-title span { background: none !important; }

.cmp-ledger-meta {
  grid-area: meta;
  display: inline-flex;
  align-items: baseline;
  column-gap: var(--space-xs);
  justify-content: flex-end;
  font-variant-numeric: tabular-nums lining-nums;
}

/* #endregion */

/* #region GAMMA — [num] [title] [excerpt] [arrow] #################### */

.cmp-ledger--gamma .cmp-ledger-row-inner {
  grid-template-columns: 4rem minmax(12rem, 24rem) minmax(0, 1fr) 3rem;
  grid-template-areas: "num title excerpt arrow";
  column-gap: 3rem;
  align-items: baseline;
  padding: 1.5rem 0;
}

.cmp-ledger--gamma .cmp-ledger-title { padding-right: var(--space-sm); }

.cmp-ledger-excerpt {
  grid-area: excerpt;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  line-height: 1.5em;
  color: var(--color-night);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
  text-wrap: pretty;
}

.cmp-ledger-arrow {
  grid-area: arrow;
  justify-self: end;
  align-self: center;
  display: block;
  width: 1.5rem;
  height: 1px;
  background: var(--color-shade);
  transition: width 0.2s ease, background-color 0.2s ease;
}

.cmp-ledger-row-link:hover .cmp-ledger-arrow {
  width: 2rem;
  background: var(--color-black);
}

/* Responsive — collapse gamma on narrow screens. */
@media (max-width: 800px) {
  .cmp-ledger--gamma .cmp-ledger-row-inner {
    grid-template-columns: 3rem minmax(0, 1fr);
    grid-template-areas: "num title" "num excerpt";
    column-gap: var(--space-sm);
    row-gap: var(--space-xs);
  }
  .cmp-ledger--gamma .cmp-ledger-arrow { display: none; }
  .cmp-ledger--gamma .cmp-ledger-excerpt {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

/* #endregion */