/*
Card

Builds on the .card family in style/base/card.css (.card, .card-head,
.card-body, .card-foot) and keeps its look: a surface with a soft rule
under the header and a tinted footer. Adds a title, a description, an
action at the header's top right, two sizes, and one spacing variable
every part pads with.

  .card.ui-card              the surface, padded parts from --card-spacing
  .card.ui-card.is-sm        --surface-padding-sm
  .card-head                 grid: title and description, action at right
  .card-title / .card-description / .card-action
  .card-body / .card-foot
  .card-bleed                content that runs edge to edge
  .card > img                media that runs edge to edge
*/

/* The package's layer order, repeated in every sheet so it holds whichever sheet loads first. */
@layer reset, tokens, base, components, templates, utilities, overrides;

@layer templates {

.card.ui-card {
  --card-spacing: var(--surface-padding);

  display:        flex;
  flex-direction: column;
  min-width:      0;
  border-width:   var(--surface-border-width);
  border-radius:  var(--radius-surface);
  color:          var(--ink);
  font-size:      var(--text-ui);
}

.card.ui-card.is-sm {
  --card-spacing: var(--surface-padding-sm);
}

.ui-card > .card-head {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-auto-rows:        auto;
  align-items:           start;
  column-gap:            var(--surface-gap);
  row-gap:               var(--space-1);
  padding:               var(--card-spacing);
}

.ui-card > .card-head > :not(.card-action) {
  grid-column: 1;
}

.ui-card > .card-body {
  padding: var(--card-spacing);
}

/* A body right under a header with no rule between them would double the
   padding; the header's rule stays, so the spacing stays even. */

.ui-card > .card-foot {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: flex-end;
  gap:             var(--space-2);
  padding:         calc(var(--card-spacing) * 0.75) var(--card-spacing);
  margin-top:      auto;
}

.ui-card > .card-foot.is-start {
  justify-content: flex-start;
}

.ui-card > .card-foot.is-stack {
  flex-direction:  column;
  align-items:     stretch;
}

.card-title {
  margin:         0;
  font-family:    var(--font-heading);
  font-size:      var(--text-title);
  font-weight:    var(--weight-strong);
  letter-spacing: var(--tracking-heading);
  line-height:    var(--leading-heading);
  color:          var(--ink);
  overflow-wrap:  anywhere;
}

/* A small card steps the title down a size. */
.card.ui-card.is-sm .card-title {
  font-size: var(--text-ui);
}

.card-description {
  margin:      0;
  color:       var(--ink-soft);
  font-size:   var(--text-ui);
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
}

.card-action:empty {
  display: none;
}

.card-action {
  grid-column:  2;
  grid-row:     1 / span 2;
  align-self:   start;
  justify-self: end;
  display:      flex;
  align-items:  center;
  gap:          var(--space-2);
}

.ui-card > img,
.ui-card > picture,
.ui-card > video,
.ui-card > .aspect-ratio {
  display:    block;
  width:      100%;
  object-fit: cover;
}

.card-bleed {
  margin-inline: calc(var(--card-spacing) * -1);
}

.ui-card > .card-body > .card-bleed:first-child {
  margin-top: calc(var(--card-spacing) * -1);
}

.ui-card > .card-body > .card-bleed:last-child {
  margin-bottom: calc(var(--card-spacing) * -1);
}

/* A focusable bleed (a scrolling box is a tab stop) is flush with the
   card's edges, where the card clips its overflow and the footer meets it,
   so an outer ring would be cut off. Its ring is drawn inside the edge.
   The transparent outline is what forced colors paints once it drops the
   box-shadow; its negative offset keeps it inside the edge too. */
.card-bleed:focus-visible {
  outline:        var(--focus-ring-width) solid transparent;
  outline-offset: calc(var(--focus-ring-width) * -1);
  box-shadow:     inset 0 0 0 var(--focus-ring-width) var(--focus);
}

}