.fluid-resource-card {
  display: grid;
  gap: var(--content-gap, var(--space-sm));
  text-decoration: none;
  color: var(--clr-body);
  background: var(--card-bg, #fff);
  padding: var(--card-padding, 16px);
  border-radius: var(--card-radius, 12px);
  border: var(--card-border-width, 1px) var(--card-border-style, solid) var(--card-border-color, rgba(0,0,0,0.08));
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fluid-resource-card:hover {
  transform: translateY(-4px);
}

.fluid-resource-card__media {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--card-radius, 12px) - 2px);
}

.fluid-resource-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.fluid-resource-card:hover .fluid-resource-card__media img { transform: scale(1.04); }

.fluid-resource-card__media.media-square    { aspect-ratio: 1 / 1; }
.fluid-resource-card__media.media-portrait  { aspect-ratio: 4 / 5; }
.fluid-resource-card__media.media-landscape { aspect-ratio: 16 / 10; }
.fluid-resource-card__media.media-adapt     { aspect-ratio: auto; }

.fluid-resource-card__placeholder {
  width: 100%;
  height: 100%;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-gray-100);
}

.fluid-resource-card__placeholder svg { width: 40%; height: 40%; opacity: 0.25; }

.fluid-resource-card__body { display: flex; flex-direction: column; }

.fluid-resource-card__title { margin-top: var(--space-sm); }

.fluid-resource-card__meta { margin: 0; color: var(--clr-gray-500, #9ca3af); }

/* On-image */
.fluid-resource-card.placement-on_image {
  padding: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--card-radius, 12px);
}

.fluid-resource-card.placement-on_image .fluid-resource-card__media {
  border-radius: var(--card-radius, 12px);
  min-height: 200px;
}

.fluid-resource-card.placement-on_image .fluid-resource-card__body {
  position: absolute;
  inset: 0;
  padding: var(--content-gap, var(--space-md));
  background: rgba(0, 0, 0, var(--overlay-opacity, 0.5));
  color: #fff;
  justify-content: flex-end;
  border-radius: inherit;
}

.fluid-resource-card.placement-on_image .fluid-resource-card__meta { color: rgba(255,255,255,0.75); }
.fluid-resource-card.placement-on_image.align-center .fluid-resource-card__body { text-align: center; align-items: center; }
.fluid-resource-card.placement-on_image.align-right  .fluid-resource-card__body { text-align: right; align-items: flex-end; }
.fluid-resource-card.placement-on_image.position-top    .fluid-resource-card__body { justify-content: flex-start; }
.fluid-resource-card.placement-on_image.position-center .fluid-resource-card__body { justify-content: center; }