/* card-face.css: Card face (component 32). Owner: group E (P2.T8). Tokens only, logical properties only. 02 "32. Card face".
   Artwork: 320 wide at the ISO ID-1 ratio (240 in drawers and lists), radius-overlay, padding 20. Physical is a brand fill, virtual is sunken
   with a control outline. The only large brand fill allowed on a page. No shadow: it floats nowhere. */
[data-component="card-face"] { display: grid; gap: var(--space-4); justify-items: start; inline-size: var(--size-card-w); min-inline-size: 0; max-inline-size: 100%; color: var(--text); }
[data-component="card-face"][data-size="sm"] { inline-size: var(--size-card-w-sm); }

[data-component="card-face"] .card-face__art {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto 1fr auto auto auto;
  inline-size: 100%;
  aspect-ratio: var(--ratio-card);
  padding: var(--space-6);
  overflow: hidden;
  border-radius: var(--radius-overlay);
  background: var(--surface-sunken);
  border: var(--border-width) solid var(--border-control);
  color: var(--text);
}
[data-component="card-face"][data-size="sm"] .card-face__art { padding: var(--space-5); }
[data-component="card-face"][data-kind="physical"] .card-face__art { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }

[data-component="card-face"] .card-face__top { grid-row: 1; display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; }
[data-component="card-face"] .card-face__programme { margin-inline-end: auto; font: var(--type-label); overflow-wrap: anywhere; }
[data-component="card-face"] .card-face__logo { flex: none; inline-size: var(--size-logo); block-size: var(--size-logo); color: var(--brand); }
[data-component="card-face"][data-kind="physical"] .card-face__logo { color: var(--brand-contrast); --logo-mark: var(--brand); }
[data-component="card-face"] .card-face__number { grid-row: 3; align-self: end; margin: 0; font: var(--type-card); font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
[data-component="card-face"] .card-face__bottom { grid-row: 4; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-block-start: var(--space-3); font: var(--type-label); }
[data-component="card-face"] .card-face__holder { font-weight: 500; overflow-wrap: anywhere; }
[data-component="card-face"] .card-face__expiry { font-variant-numeric: tabular-nums lining-nums; }

/* Status bands sit below the number and the holder row, across the block-end: they never cover the last four. */
[data-component="card-face"] .card-face__band {
  grid-row: 5;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--size-header-slim);
  margin-block: var(--space-3) calc(-1 * var(--space-6));
  margin-inline: calc(-1 * var(--space-6));
  padding-inline: var(--space-6);
  background: var(--info-subtle);
  color: var(--info);
  font: var(--type-label);
}
[data-component="card-face"][data-size="sm"] .card-face__band { margin-block-end: calc(-1 * var(--space-5)); margin-inline: calc(-1 * var(--space-5)); padding-inline: var(--space-5); }
[data-component="card-face"] .card-face__band[data-tone="critical"] { background: var(--critical-subtle); color: var(--critical); }
[data-component="card-face"] .card-face__band[data-tone="sunken"] { background: var(--surface-sunken); color: var(--text-secondary); border-block-start: var(--border-width) solid var(--border-control); }

[data-component="card-face"] .card-face__skeleton { background: var(--border); border-color: var(--border); animation: card-face-pulse var(--duration-pulse) var(--ease-standard) infinite alternate; }
@keyframes card-face-pulse { from { opacity: 1; } to { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { [data-component="card-face"] .card-face__skeleton { animation: none; } }

/* The reveal: a secondary 32 px button below the artwork, then (while shown) the field list and the test-data caption. */
[data-component="card-face"] .card-face__reveal { display: grid; gap: var(--space-4); justify-items: start; inline-size: 100%; }
[data-component="card-face"] .card-face__details { display: grid; gap: var(--space-4); inline-size: 100%; padding: var(--space-4) var(--space-5); border: var(--border-width) solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
[data-component="card-face"] .card-face__fields { margin: 0; display: grid; gap: var(--space-3); }
[data-component="card-face"] .card-face__fields > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: baseline; }
[data-component="card-face"] .card-face__fields dt { color: var(--text-secondary); font: var(--type-label); }
[data-component="card-face"] .card-face__fields dd { margin: 0; font: var(--type-table); font-variant-numeric: tabular-nums lining-nums; }
[data-component="card-face"] .card-face__field-number { font: var(--type-card); }
[data-component="card-face"] .card-face__test { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin: 0; font: var(--type-caption); }
[data-component="card-face"] .card-face__test strong { font-weight: 600; }
[data-component="card-face"] .card-face__countdown { color: var(--text-secondary); font-variant-numeric: tabular-nums lining-nums; margin-inline-end: auto; }
[data-component="card-face"] .card-face__note { margin: 0; color: var(--text-secondary); font: var(--type-caption); }

/* Kitchen sink sample column (the demo only). */
.card-face-demo { display: grid; gap: var(--space-4); justify-items: start; inline-size: min(var(--size-form-max), 100%); min-inline-size: 0; }