/* ==========================================================================
   Media Block Component
   Reusable image/video containers with consistent styling
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base Media Block
   Container for images with consistent aspect ratio and shadow
   -------------------------------------------------------------------------- */
.media-block {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--color-surface);
}

/* --------------------------------------------------------------------------
   Aspect Ratio Modifiers
   -------------------------------------------------------------------------- */
.media-block--portrait {
  aspect-ratio: 3 / 4;
}

.media-block--landscape {
  aspect-ratio: 16 / 10;
}

.media-block--widescreen {
  aspect-ratio: 16 / 9;
}

.media-block--square {
  aspect-ratio: 1 / 1;
}

/* --------------------------------------------------------------------------
   Size Modifiers
   -------------------------------------------------------------------------- */
.media-block--sm {
  width: clamp(220px, 22vw, 320px);
}

.media-block--md {
  width: clamp(240px, 32vw, 360px);
}

.media-block--lg {
  width: clamp(260px, 38vw, 420px);
}

.media-block--xl {
  width: clamp(320px, 45vw, 500px);
}

.media-block--full {
  width: 100%;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Shadow Modifiers (disabled - no shadows in design)
   -------------------------------------------------------------------------- */
.media-block--shadow,
.media-block--shadow-lg {
  /* shadows removed */
}

/* --------------------------------------------------------------------------
   Border Modifiers
   -------------------------------------------------------------------------- */
.media-block--bordered {
  border: 1px solid rgba(26, 26, 26, 0.08);
}

/* --------------------------------------------------------------------------
   Image Styling
   -------------------------------------------------------------------------- */
.media-block img,
.media-block video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Saturation filter */
.media-block--muted img {
  filter: saturate(0.9);
}