/**
 * cards.css - Card Components
 * 
 * Defines various card components and their variations
 */

/* ===== Card Components ===== */

[class$="-card"] {
  display: grid;
  grid-auto-rows: auto;
  column-gap: 0;
}

[class$="-card"] .content__header {
  --flow-space: var(--space-2xs);
  row-gap: var(--flow-space);
}

[class$="-card"] .content__body {
  gap: var(--space-3xs);
}

[class$="-card"] .content__footer {
  --flow-space: var(--space-xs);
  row-gap: var(--flow-space);
}

[class$="-card"] .content__visual {
  width: fit-content;
  height: auto;
}

[class$="-card"] :is(img, picture) {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1/0.666;
}

:is([class$="-card"]) :is(.content__body, .content__footer)  {
  gap: var(--flow-space);
  padding-inline: var(--gap);
  padding-block: var(--gap);
}

/* Image Card Styles */
.image-card {
  display: grid;
  grid-auto-rows: auto;
  gap: 0;
  overflow: clip;
  border-radius: var(--border-radius-medium);
  background-color: var(--slate-3);
}

.image-card .image-card__footer {
  padding-block-start: var(--space-xs);
}

/* Icon Card Styles */
.icon-card {
  display: flex;
  flex-flow: column;
  gap: var(--space-m);
  padding-inline: var(--gap);
  padding-block: var(--gap);
  border-radius: var(--border-radius-medium);
  border: 2px solid var(--color-border-strong);
}

.icon-card .icon-card__visual {
  aspect-ratio: 1/1;
  width: fit-content;
  height: auto;
}

/* List Icon Card Styles */
.list-icon-card {
  display: flex;
  gap: var(--gap);
}

.list-icon-card .list-icon-card__visual {
  aspect-ratio: 1/1;
}

/* Body and Footer Styles for Icon Cards */
:is([class*="icon-card"]) :is(.content__body, .content__footer)  {
  gap: var(--flow-space);
  padding-inline: 0;
  padding-block: 0;
}