/* Icons, images, photos, video — sizing, fit, and public asset paths */
:root {
  /* Public asset roots (files live under /wp/public/style/) */
  --asset-icons: "/style/icons/";
  --asset-images: "/style/images/";
  --asset-photos: "/style/photos/";
  --asset-video: "/style/video/";

  /* Icon scale */
  --icon-xs: 0.75rem;
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.75rem;
  --icon-xl: 2.5rem;

  /* Media radii & frames */
  --media-radius-sm: 0.375rem;
  --media-radius-md: 0.75rem;
  --media-radius-lg: 1.25rem;

  /* Aspect helpers */
  --aspect-square: 1 / 1;
  --aspect-photo: 4 / 3;
  --aspect-wide: 16 / 9;
  --aspect-story: 9 / 16;
}

/* Generic media shell */
.media,
.icon,
.photo,
.video {
  display: block;
  max-width: 100%;
}

.icon {
  width: var(--icon-md);
  height: var(--icon-md);
  flex-shrink: 0;
  object-fit: contain;
  object-position: center;
}

.icon--xs { width: var(--icon-xs); height: var(--icon-xs); }
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }

.icon--current {
  fill: currentColor;
  color: inherit;
}

img.photo,
.photo {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: var(--media-radius-md);
  background: var(--color-bg-muted);
}

.photo--square { aspect-ratio: var(--aspect-square); }
.photo--landscape { aspect-ratio: var(--aspect-photo); }
.photo--wide { aspect-ratio: var(--aspect-wide); }
.photo--portrait { aspect-ratio: var(--aspect-story); }

.image {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.video,
video.video {
  width: 100%;
  height: auto;
  aspect-ratio: var(--aspect-wide);
  object-fit: cover;
  background: var(--color-bg-inverse);
  border-radius: var(--media-radius-md);
}

.video--portrait {
  aspect-ratio: var(--aspect-story);
}

.media-frame {
  overflow: hidden;
  border-radius: var(--media-radius-md);
  background: var(--color-bg-muted);
}

.media-frame > img,
.media-frame > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Favicon link helpers are path tokens only; markup lives in documents */