/*
 * THE SAME ROWS AS A GRID OF CARDS. `auto-fill` against a floor, so the grid in a record's column
 * and on a desk is one object at two widths. A tile holds its square whatever the row has, so rows
 * never change height.
 */
@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 (constitution §2). */
  .lotics-card-grid__run + .lotics-card-grid__run {
    margin-top: var(--lotics-space-24);
  }

  /* Read the same way as the register's band (`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);
  }

  /* Cards stop at their own content would leave a ragged foot. */
  .lotics-card-grid__grid {
    display: grid;
    align-items: stretch;
    gap: var(--lotics-space-12);
    min-width: 0;
  }

  /*
   * The narrowest readable card; narrower than the board's column because a grid is read down the
   * page.
   */
  .lotics-card-grid__grid[data-variant="card"] {
    --lotics-card-grid-card: 240px;
    /* Wider than the widest gap inside a card (its facts' 12), so two cards never read as one (§2). */
    gap: var(--lotics-space-16);
    grid-template-columns: repeat(auto-fill, minmax(var(--lotics-card-grid-card), 1fr));
  }

  /* About the width a photograph is recognised at. */
  .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));
  }

  /* The card's own stack, inside the surface's inset; it fills the card so the foot pins to its bottom. */
  .lotics-card-grid__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    gap: var(--lotics-space-8);
    min-width: 0;
  }

  /* On the corner, so the control does not push every card's subject down a rung. */
  .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 picture is a banner: squared, it took 240px and pushed the facts below
   * the fold. The banner stops at its height on the card's floor, so a phone's one-column card is as
   * tall as what it says, never as the screen is wide; the image covers the rest. A tile keeps the square.
   */
  .lotics-card-grid__picture[data-variant="card"] {
    aspect-ratio: 16 / 9;
    max-height: calc(var(--lotics-card-grid-card) * 9 / 16);
  }

  .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: flex-start;
    gap: var(--lotics-space-8);
    min-width: 0;
  }

  /* The kit's one row (`row.css`), whose gaps this restates. */
  .lotics-card-grid__lines {
    display: grid;
    align-items: start;
    min-width: 0;
    flex: 1;
  }

  /* The state and what needs the reader, between the name and the foot; it takes what it holds, so a card
     with more to say grows here and never moves another card's foot off the row's line. */
  .lotics-card-grid__middle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lotics-space-4);
    min-width: 0;
  }

  .lotics-card-grid__notes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lotics-space-2);
    min-width: 0;
  }

  /* Pinned to the card's foot: the row's cards stand one height (`__grid` stretches them), so every foot
     starts where the tallest card's does. */
  .lotics-card-grid__bottom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-8);
    min-width: 0;
    margin-top: auto;
  }

  /* The foot's width, so a meter's track reads whole. */
  .lotics-card-grid__figure {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  .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;
  }

}