/* CUIImageCard - mirrors cui_image_card.dart. Variants: lg (80 box / 56 image) | sm (66 / 44) | naked (56, no chrome).
   Optional bottom tag overlay (lg only), clipped to the card's bottom corners. Static, non-interactive.
   Also hosts the small tag pill (.cui-imgtag) used by the card family (mirrors CUITag pill + swap layouts). */
.cui-image-card {
  --_img: var(--cui-img-sm-modify-tile-image); --_pad: var(--cui-space-sm); --_r: var(--cui-radius-lg);
  position: relative; box-sizing: border-box; flex: none; width: fit-content;
  padding: calc(var(--_pad) + var(--cui-border-default));
  background: var(--cui-color-surface-bg-sunken); border-radius: var(--_r);
}
.cui-image-card--sm { --_img: var(--cui-img-xs3); }
.cui-image-card--naked { --_img: var(--cui-img-sm-naked-image); --_pad: 0px; padding: 0; background: none; }
.cui-image-card--small-cover { --_img: 30px; --_pad: var(--cui-space-3xs); --_r: var(--cui-radius-md); }
.cui-image-card__image { width: var(--_img); height: var(--_img); overflow: hidden; }
/* fillWidth: take the width the parent offers, keep the photo square */
.cui-image-card--fill { width: 100%; }
.cui-image-card--fill .cui-image-card__image { width: 100%; height: auto; aspect-ratio: 1; }
/* border is painted above the tag so the seam is always covered; it grows the box (padding includes it) */
.cui-image-card:not(.cui-image-card--naked)::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--_r); pointer-events: none;
  border: var(--cui-border-default) solid var(--cui-color-border-subtle);
}
.cui-image-card__tag { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden;
  border-radius: 0 0 var(--_r) var(--_r); }
/* mock photo: just the emoji (no background), fills whatever box it is in */
.cui-photo { --_a: var(--cui-color-surface-bg-warning-muted); --_b: var(--cui-color-surface-bg-accent-subtle);
  width: 100%; height: 100%; container-type: size; display: grid; place-items: center;
  background: none; overflow: hidden; }
.cui-photo > span { font-size: 56cqmin; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.cui-photo--green { --_a: var(--cui-color-surface-bg-success-muted); --_b: var(--cui-color-surface-bg-success-subtle); }
.cui-photo--red { --_a: var(--cui-color-surface-bg-danger-muted); --_b: var(--cui-color-surface-bg-warning-subtle); }
.cui-photo--brand { --_a: var(--cui-color-surface-bg-brand-muted); --_b: var(--cui-color-surface-bg-brand-subtle); }
.cui-photo--neutral { --_a: var(--cui-color-surface-bg-disabled); --_b: var(--cui-color-surface-bg-sunken); }

/* the overlay tag stretches to the card's full width (Positioned left 0 / right 0); content stays centred */
.cui-image-card__tag .cui-tag { display: block; width: 100%; text-align: center; }

/* Flutter rounds fractional line heights up; keep tags inside cards in step (device tokens are fractional) */
.cui-image-card .cui-tag, .cui-recipe-card .cui-tag, .cui-summary-card .cui-tag, .cui-ingredient-tile .cui-tag { line-height: round(var(--cui-type-code-sm-line), 1px); }