/* ==========================================================================
   Card Subcomponent: Media
   ========================================================================== */

/* Media - Full width, no padding, at edges */
.c-card__media {
  background-color: var(--surface-hover);
  margin: calc(var(--space-lg) * -1); /* Negative margin to extend to edges */
  margin-bottom: var(--space-lg); /* Space below media */
  overflow: hidden;
  position: relative;
}

/* Adjust media margin based on card size */
.c-card--sm .c-card__media {
  margin: calc(var(--space-md) * -1);
  margin-bottom: var(--space-md);
}

.c-card--lg .c-card__media {
  margin: calc(var(--space-xl) * -1);
  margin-bottom: var(--space-xl);
}

/* Media - First child extends to top edge */
.c-card__media:first-child {
  margin-bottom: var(--space-lg);
}

.c-card--sm .c-card__media:first-child {
  margin-bottom: var(--space-md);
}

.c-card--lg .c-card__media:first-child {
  margin-bottom: var(--space-xl);
}

/* Media Image */
.c-card__media-image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Media Aspect Ratios */
.c-card__media--16-9 {
  aspect-ratio: 16 / 9;
}

.c-card__media--4-3 {
  aspect-ratio: 4 / 3;
}

.c-card__media--1-1 {
  aspect-ratio: 1 / 1;
}

.c-card__media--21-9 {
  aspect-ratio: 21 / 9;
}