/* CF image scale — one tier per role. Frames carry data-img; the photo fills the frame. */

[data-img] {
  width: 100%;
  overflow: hidden;
  background: var(--cf-green-50);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
}

[data-img] > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* image-slot sizes itself — never give it a percentage height inside an
   aspect-ratio box: it observes its own size and would re-render forever. */
[data-img] > image-slot { display: block; }

/* full-width banner — 1920 × 900 */
[data-img="banner"] { aspect-ratio: 32 / 15; max-width: 1920px; border-radius: 0; border-left: 0; border-right: 0; }

/* feature card — 900 × 600, half width */
[data-img="feature"] { aspect-ratio: 3 / 2; max-width: 900px; }

/* content card — 600 × 400 */
[data-img="content"] { aspect-ratio: 3 / 2; max-width: 600px; }

/* square content card — 400 × 400 */
[data-img="square"] { aspect-ratio: 1 / 1; max-width: 400px; }

/* casting portrait — the one deliberate exception to the landscape tiers */
[data-img="portrait"] { aspect-ratio: 3 / 4; max-width: 400px; }

/* thumbnail — 200 × 200 */
[data-img="thumb"] { aspect-ratio: 1 / 1; max-width: 200px; }

/* logo cell — a mark, not a photograph */
[data-img="logo"] { aspect-ratio: 5 / 2; max-width: 300px; border-radius: var(--radius-sm); }
[data-img="logo"] > img { object-fit: contain; }

/* icon — 24 to 64 */
[data-img="icon"] { aspect-ratio: 1 / 1; width: clamp(24px, 4vw, 64px); border: 0; background: none; border-radius: 0; }
[data-img="icon"] > img { object-fit: contain; }

/* device mockup — fixed by the hardware, not by the scale */
[data-img="device"] { aspect-ratio: 9 / 19; max-width: 320px; }

@media (max-width: 640px) {
  [data-img="feature"], [data-img="content"], [data-img="square"], [data-img="portrait"] { max-width: 100%; }
  [data-img="thumb"] { max-width: 150px; }
}