/*
 * THE SAME ROWS AS A GRID OF CARDS.
 *
 * THE GRID FILLS THE WIDTH IT IS GIVEN. `auto-fill` against a floor rather than
 * a hand-picked column count: a card grid inside a record's column and the same
 * grid on a desk are the same object at two widths, and a fixed count makes the
 * narrow one unreadable and the wide one sparse.
 *
 * A TILE HOLDS ITS SQUARE whatever the row has. A grid whose cells change height
 * row by row is not a grid — it is a masonry nobody asked for — so the picture
 * box is square and an absent photograph draws the empty face inside it.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-card-grid {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .lotics-card-grid__run {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  /* Peers: one run and the next (constitution §2). */
  .lotics-card-grid__run + .lotics-card-grid__run {
    margin-top: var(--lotics-space-24);
  }

  /* The run's words and how many it holds, on one line — the register's own
     band reads the same way (`table.css`, `__group-heading`). */
  .lotics-card-grid__subhead {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-8);
    min-width: 0;
    padding-block: var(--lotics-space-4);
  }

  /* The cells STRETCH to the tallest in their row: a grid whose cards each stop
     at their own content is a ragged foot down every row of it. */
  .lotics-card-grid__grid {
    display: grid;
    align-items: stretch;
    gap: var(--lotics-space-12);
    min-width: 0;
  }

  /* The narrowest a card stays READABLE — a control's floor plus room for a name
     that wraps twice over its qualifying line. The board's column is the same
     measure for the same reason; this one is narrower because a card grid is
     read down the page rather than scrolled sideways. */
  .lotics-card-grid__grid[data-variant="card"] {
    --lotics-card-grid-card: 240px;
    grid-template-columns: repeat(auto-fill, minmax(var(--lotics-card-grid-card), 1fr));
  }

  /* Recognition density: about the width a photograph is identified at, and
     small enough that a screenful is a set rather than a page. */
  .lotics-card-grid__grid[data-variant="tile"] {
    --lotics-card-grid-tile: 144px;
    grid-template-columns: repeat(auto-fill, minmax(var(--lotics-card-grid-tile), 1fr));
  }

  .lotics-card-grid__item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-8);
    min-width: 0;
    position: relative;
  }

  /* The tick sits ON the card's own corner rather than in the reading order of
     its lines: a checkbox above the name would push every card's subject down a
     rung for a control that is not part of what the card SAYS. */
  .lotics-card-grid__tick {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    top: var(--lotics-space-8);
    inset-inline-start: var(--lotics-space-8);
    z-index: var(--lotics-z-row-content);
  }

  .lotics-card-grid__picture {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    width: 100%;
    overflow: hidden;
    border-radius: var(--lotics-radius-control);
    background-color: var(--lotics-wash-hover);
  }

  /* A CARD IS READ, so its lead is a BANNER: squared to the card's own width the
     photograph took 240px of height on every one of them and the facts under it
     fell below the fold, which is the tile variant with three figures bolted on.
     A tile keeps the square — there the picture IS the card. */
  .lotics-card-grid__picture[data-variant="card"] {
    aspect-ratio: 16 / 9;
  }

  .lotics-card-grid__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .lotics-card-grid__blank {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .lotics-card-grid__head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-8);
    min-width: 0;
  }

  /* NO GAP between the name and its qualifying line: each tight line box already
     contributes its own space, and a gap here is a third source of it between
     two lines meant to read as one object (`cell_stack.css`). */
  .lotics-card-grid__lines {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    flex: 1;
  }

  .lotics-card-grid__facts {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--lotics-space-12);
    min-width: 0;
  }

  .lotics-card-grid__fact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
  }

  .lotics-card-grid__foot {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--lotics-space-8);
    min-width: 0;
  }
}