@layer components {

/* ── Aegis Card (ported from surfaces-card--guidelines) ──
 * Composable container: optional header / optional media (image)
 * / content / optional actions row at bottom. Subtle shadow + rounded
 * corners. Click target available via .ds-card--clickable. */
.ds-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface);
  border: var(--border-width-1) solid var(--color-divider);
  border-radius: var(--radius-md);
  overflow: hidden;
  /* MODEC look: subtle 2-layer shadow so cards pop against soft-grey bg */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  color: var(--color-text-primary);
}
.ds-card--clickable { cursor: pointer; }
.ds-card--clickable:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--c-neutral-300);
}
.ds-card--clickable:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(63, 91, 255, 0.3);
}

/* Elevation variants — none / default / raised */
.ds-card--flat   { box-shadow: none; }
.ds-card--raised { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }

/* Header — title + optional subtitle/avatar/action */
.ds-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) 0;
}
.ds-card__header-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds-card__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--color-text-primary);
}
.ds-card__subtitle {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.ds-card__header-action { margin-left: auto; flex-shrink: 0; }
.ds-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--c-neutral-300);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.ds-card__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Media — full-bleed image area */
.ds-card__media {
  width: 100%;
  background: var(--c-neutral-200);
  display: block;
  position: relative;
}
.ds-card__media img,
.ds-card__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-card__media--16-9 { aspect-ratio: 16 / 9; }
.ds-card__media--4-3  { aspect-ratio: 4 / 3; }
.ds-card__media--1-1  { aspect-ratio: 1 / 1; }

/* Content — main body area */
.ds-card__content {
  padding: var(--space-4);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-primary);
  flex: 1;
}
.ds-card__content > :first-child { margin-top: 0; }
.ds-card__content > :last-child  { margin-bottom: 0; }

/* Actions — bottom row of buttons */
.ds-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
}
.ds-card__actions--right { justify-content: flex-end; }
.ds-card__actions--between { justify-content: space-between; }
.ds-card__actions--top-divider { border-top: var(--border-width-1) solid var(--color-divider); }

/* When a section directly follows another, tighten the gap */
.ds-card__header + .ds-card__content { padding-top: var(--space-3); }
.ds-card__media  + .ds-card__header  { padding-top: var(--space-4); }
.ds-card__media  + .ds-card__content { padding-top: var(--space-4); }
.ds-card__content + .ds-card__actions { padding-top: 0; }

} /* end @layer components */