/* ════════════════════════════════════════════════════════════
   CAAT Design System — Image / Embed Component
   BEM: .caat-image, .caat-embed
   ════════════════════════════════════════════════════════════ */

/* ── Responsive image ───────────────────────────────────── */
.caat-image {
  font-family: var(--caat-font-primary);
}

.caat-image__figure {
  margin: 0;
  padding: 0;
}

.caat-image__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--caat-radius);
  max-width: 100%;
}

.caat-image__caption {
  padding-top: 0.5rem;
  font-size: var(--caat-font-size-xs);
  color: var(--caat-color-text);
  opacity: 0.7;
  font-family: var(--caat-font-primary);
}

/* ── Aspect ratio containers ────────────────────────────── */
.caat-image--16-9 {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--caat-radius);
}

.caat-image--4-3 {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--caat-radius);
}

.caat-image--1-1 {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--caat-radius);
}

.caat-image--3-2 {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--caat-radius);
}

.caat-image--4-5 {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--caat-radius);
}

.caat-image--16-9 .caat-image__img,
.caat-image--4-3 .caat-image__img,
.caat-image--3-2 .caat-image__img,
.caat-image--4-5 .caat-image__img,
.caat-image--1-1 .caat-image__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Embed wrapper ──────────────────────────────────────── */
.caat-embed {
  font-family: var(--caat-font-primary);
}

.caat-embed__wrapper {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--caat-radius);
  background-color: var(--caat-grey-200);
  position: relative;
}

.caat-embed__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── Placeholder (for demo) ─────────────────────────────── */
.caat-embed__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--caat-grey-200);
  color: var(--caat-color-text);
  font-size: 3rem;
}

/* ── Responsive fallback ────────────────────────────────── */
@media (max-width: 575.98px) {
  .caat-image__img {
    border-radius: calc(var(--caat-radius) * 0.5);
  }

  .caat-embed__wrapper {
    border-radius: calc(var(--caat-radius) * 0.5);
  }
}