.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--caramel-200);
}

.media-frame--hero {
  aspect-ratio: 4 / 3;
  min-height: 280px;
}

.media-frame--card {
  aspect-ratio: 16 / 10;
}

.media-frame--square {
  aspect-ratio: 1;
}

.img-wood-fallback {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, var(--caramel-300) 0%, var(--caramel-500) 40%, var(--wood-500) 100%);
}

.img-wood-fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M0 60 Q30 20 60 60 T120 60' fill='none' stroke='%233D2E24' stroke-width='0.5' opacity='0.2'/%3E%3Cpath d='M0 80 Q40 40 80 80 T160 80' fill='none' stroke='%233D2E24' stroke-width='0.5' opacity='0.15'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}

.img-wood-fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 252, 248, 0.25), transparent 60%);
}

.media-frame picture,
.media-frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-frame img.is-error,
.media-frame img:not([src]),
.media-frame img[src=""] {
  opacity: 0;
  position: absolute;
}

.media-frame.has-error .img-wood-fallback,
.media-frame:not(:has(img[src])) .img-wood-fallback {
  z-index: 0;
}

.media-placeholder-label {
  position: absolute;
  bottom: var(--space-sm);
  left: var(--space-sm);
  z-index: 2;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-100);
  text-shadow: 0 1px 4px rgba(61, 46, 36, 0.5);
  pointer-events: none;
}

picture {
  display: contents;
}