/* Toddoo BV - image slots (18 Oct 2026, agent IMG, v0.0.46; decisions X-260..X-262). The look of every image box the
 * browser runtime's src/90-images.js binds (.tdr-img[data-slot]); the slots, their ratios and fit rules are in
 * runtime/public/runtime/image-slots.json. Brand-kit tokens only. */

/* the box: the slot's ratio from the start (no layout shift), a neutral surface, the picture absolutely inside */
.tdr-img { position: relative; display: block; width: 100%; aspect-ratio: var(--tdr-ar, 16 / 9); overflow: hidden; isolation: isolate;
  background: var(--surface2, #f2f4f5); color: var(--text3, #8a949c); border-radius: inherit; }
.tdr-img.tdr-img-fill { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; }
.tdr-img > img.tdr-img-main { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; margin: auto;
  object-fit: cover; object-position: center; opacity: 0; transition: opacity .2s ease; }
.tdr-img[data-state="ok"] > img.tdr-img-main { opacity: 1; }

/* the placeholder: a brand-kit icon in the middle while there is no picture, it is loading, or it failed */
.tdr-img > .tdr-img-ph { position: absolute; inset: 0; display: grid; place-items: center; z-index: 0; pointer-events: none; }
.tdr-img > .tdr-img-ph svg, .tdr-img > .tdr-img-ph i { width: clamp(20px, 22%, 48px); height: auto; opacity: .6; }
.tdr-img[data-state="ok"] > .tdr-img-ph { display: none; }
.tdr-img[data-state="broken"] > img.tdr-img-main, .tdr-img[data-state="empty"] > img.tdr-img-main { display: none; }

/* contain: products, logos, cut-outs, graphics: whole, with padding, never beyond 2x their own size (--tdr-maxw/h) */
.tdr-img[data-fit="contain"] > img.tdr-img-main { object-fit: contain; width: calc(100% - 2 * var(--tdr-pad, 5%)); height: calc(100% - 2 * var(--tdr-pad, 5%));
  max-width: var(--tdr-maxw, 100%); max-height: var(--tdr-maxh, 100%); }
.tdr-img[data-kind="contain"] { background: var(--tdr-contain-bg, var(--surface, #fff)); }   /* product shots on white blend in; a cut-out sits on the card's own surface */

/* whole: banners and photos far off the box's ratio (or with text): the whole picture over a soft, darkened blur of itself */
.tdr-img[data-fit="whole"]::before { content: ""; position: absolute; inset: -12%; z-index: 0; background-image: var(--tdr-bg, none);
  background-size: cover; background-position: center; filter: blur(22px) saturate(1.15) brightness(.72); transform: translateZ(0); }
.tdr-img[data-fit="whole"] > img.tdr-img-main { object-fit: contain; max-width: var(--tdr-maxw, 100%); max-height: var(--tdr-maxh, 100%); }

/* avatars: cover in a circle */
.tdr-img[data-kind="avatar"] { border-radius: 50%; aspect-ratio: 1 / 1; }

/* a region of a picture fitted into the box (mini floor plans): the script places the picture */
.tdr-img-region { position: relative; overflow: hidden; }
.tdr-img-region > img.tdr-img-region-pic { position: absolute; display: block; user-select: none; -webkit-user-drag: none; }

/* upload fields: the hint, the preview in the real slot, the warnings */
.tdr-img-hint { margin: var(--sp-1, 4px) 0 0; font-size: 12px; line-height: 1.5; color: var(--text2, #5b6670); }
.tdr-img-preview { display: flex; flex-direction: column; gap: var(--sp-2, 8px); margin-top: var(--sp-2, 8px); max-width: 28rem; }
.tdr-img-preview[hidden] { display: none; }
.tdr-img-preview-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text2, #5b6670); }
.tdr-img-preview .tdr-img { border-radius: var(--radius-lg, 10px); box-shadow: inset 0 0 0 1px var(--border, #e3e7ea); }
.tdr-img-preview .tdr-img[data-kind="avatar"] { width: 8rem; border-radius: 50%; }
.tdr-img-warn { margin: 0; padding: var(--sp-2, 8px) var(--sp-3, 12px); list-style: none; border-radius: var(--radius-lg, 10px); font-size: 12px; line-height: 1.5;
  background: color-mix(in srgb, var(--yellow, #f5c518) 16%, transparent); color: var(--text1, #1d2328); }
.tdr-img-warn[hidden] { display: none; }
.tdr-img-warn li + li { margin-top: var(--sp-1, 4px); }
@media (prefers-reduced-motion: reduce) { .tdr-img > img.tdr-img-main { transition: none; } }