/* ==========================================================================
   ResponsiveImage, ArtworkFigure, Breadcrumbs
   07 §10.1, §10.2, §8.5
   ========================================================================== */

/* --- ResponsiveImage — 07 §10.1 ------------------------------------------
   width and height are always emitted as attributes, so the aspect ratio is
   reserved before the file arrives and CLS stays at zero. */

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-image);
}

/* Crop variants. object-position comes from the media asset's focal point,
   set inline per image, never guessed in CSS. */
.responsive-image--cover {
  height: 100%;
  object-fit: cover;
}

.responsive-image--contain {
  object-fit: contain;
}

/* Editorial moments may drop the radius entirely (03 §14.2). */
.responsive-image--flush {
  border-radius: 0;
}

/* --- ArtworkFigure — 07 §10.2 -------------------------------------------
   The artwork keeps its real ratio. No text overlay, no arbitrary crop. */

.artwork-figure__media {
  display: block;
  background-color: var(--surface-raised);
  border-radius: var(--radius-image);
  overflow: hidden;
}

.artwork-figure--full .artwork-figure__media {
  border-radius: 0;
}

.artwork-figure__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* --- Breadcrumbs — 07 §8.5 ----------------------------------------------- */

.breadcrumbs {
  padding-block: var(--space-5);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* The separator is decorative and must not be announced, so it is generated
   rather than sitting in the DOM as text. */
.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/";
  color: var(--border-active);
}

.breadcrumbs__link {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.breadcrumbs__link:hover {
  color: var(--text-accent);
  border-bottom-color: var(--border-active);
}

.breadcrumbs__current {
  color: var(--text-strong);
  font-weight: 500;
}

/* --- ProjectVideo — Fase 6B batch 2 ---------------------------------------
   No forced ratio on purpose: horizontal, vertical or square all render at
   their own intrinsic size (never cropped), unlike ResponsiveImage above
   which always knows its ratio in advance. */

.project-video {
  display: block;
  width: 100%;
  max-width: 40rem;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-image);
}