/* SC Dynamic Image – plugin asset CSS
   - Eliminates hairline seams around the image area
   - Supports focus point + zoom via CSS custom properties
   - Supports fit modes: cover | contain
*/

/* Root container (mounted by the element code and pinned to all edges) */
.sc-img {
  position: absolute;           /* pinned by JS: top/right/bottom/left = 0 */
  inset: 0;
  display: block;
  overflow: hidden;
  box-sizing: border-box;

  /* Default focal point + zoom */
  --pos-x: 50%;
  --pos-y: 50%;
  --zoom: 1;

  /* Kill any unintended chrome/hairlines */
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent;      /* or 'inherit' if you prefer */
  line-height: 0;               /* avoid inline layout gaps */
}

/* Image fills the container; focus + zoom handled via object-position/transform */
.sc-img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;               /* removes baseline gap */
  object-position: var(--pos-x) var(--pos-y);
  transform-origin: var(--pos-x) var(--pos-y);
  transform: scale(var(--zoom));

  /* Anti-aliasing tweaks that reduce sub-pixel seams on some DPRs */
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Fit modes (controlled by data-fit on .sc-img) */
.sc-img[data-fit="cover"]   > img { object-fit: cover; }   /* crop to fill */
.sc-img[data-fit="contain"] > img { object-fit: contain; } /* letterbox to fit */


/* ---------- Optional: fixed aspect-ratio variant (for non-plugin use) ---------- */
/* Use when you want a standalone ratio box (outside the plugin element). */
.sc-ar {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--ar, 3/2); /* e.g., set --ar: 16/9 on the element */

  --pos-x: 50%;
  --pos-y: 50%;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent;
  line-height: 0;
}

.sc-ar > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-position: var(--pos-x) var(--pos-y);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.sc-ar[data-fit="cover"]   > img { object-fit: cover; }
.sc-ar[data-fit="contain"] > img { object-fit: contain; }