@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-card {
    --lotics-card-gutter: var(--lotics-space-16);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    /* A `View` never shrank, and four years of screens were laid out against
       that: a card in a constrained row held its size and overflowed rather
       than squashing its content. A caller that wants it to give way says so —
       `style={{ flex: 1 }}` sets a shrink of its own and wins inline. */
    flex-shrink: 0;
    padding: var(--lotics-card-gutter);
    border-width: 1px;
    border-style: solid;
    border-color: var(--border);
    border-radius: var(--lotics-radius-card);
    background: var(--card);
    /* A sticky register head inside this surface paints the surface's ground. */
    --lotics-register-ground: var(--card);
    /* The SURFACE's own ink pair. `--lotics-ink-default` is the page's
       answer, and on a theme whose card ground differs from the page's
       that is the difference between readable and not. */
    color: var(--card-foreground);
    overflow: hidden;
  }

  /* The banded shape — the bands own the gutter, so the card must not. */
  .lotics-card[data-padding="none"] {
    padding: 0;
  }

  .lotics-card__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
    min-width: 0;
    padding-inline: var(--lotics-card-gutter);
    padding-block: var(--lotics-space-12);
    row-gap: var(--lotics-space-4);
    column-gap: var(--lotics-space-12);
  }

  .lotics-card__title {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    /* `flex: 1` alone does NOT shrink below its content: the default minimum is
       "wide enough to hold it", so a long title pushes the row wider than the
       card. This lets it give way; the band's `flex-wrap` is the escape once
       there is no room left. */
    min-width: 0;
    gap: var(--lotics-space-2);
  }

  .lotics-card__title-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
    gap: var(--lotics-space-2);
  }

  .lotics-card__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    min-width: 0;
    padding-inline: var(--lotics-card-gutter);
    padding-block: var(--lotics-space-16);
  }

  .lotics-card__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
    padding-inline: var(--lotics-card-gutter);
    padding-block: var(--lotics-space-12);
    gap: var(--lotics-space-12);
  }
}