/* ═══════════════════════════════════════════════════════════════════
   Marstaller-Universum — Per-Image Focal-Point (v3.2.16)
   ───────────────────────────────────────────────────────────────────
   object-position pro Gerät auf das img-Element setzen.
   CSS-Variablen werden vom Inspector-Picker als Inline-Style gesetzt:
     --mup-img-focal   (Desktop)
     --mup-img-focal-t (Tablet, ≤ 1024 px)
     --mup-img-focal-m (Mobile, ≤ 640 px)
   ═══════════════════════════════════════════════════════════════════ */

/* Desktop / Default */
.wp-block-image.has-mup-img-focal img,
.kb-image.has-mup-img-focal img,
.kb-image.has-mup-img-focal .kt-image {
  object-position: var(--mup-img-focal, 50% 50%);
}

/* Tablet (≤ 1024 px) */
@media (max-width: 1024px) {
  .wp-block-image.has-mup-img-focal[style*="--mup-img-focal-t"] img,
  .kb-image.has-mup-img-focal[style*="--mup-img-focal-t"] img,
  .kb-image.has-mup-img-focal[style*="--mup-img-focal-t"] .kt-image {
    object-position: var(--mup-img-focal-t, var(--mup-img-focal, 50% 50%)) !important;
  }
}

/* Mobile (≤ 640 px) */
@media (max-width: 640px) {
  .wp-block-image.has-mup-img-focal[style*="--mup-img-focal-m"] img,
  .kb-image.has-mup-img-focal[style*="--mup-img-focal-m"] img,
  .kb-image.has-mup-img-focal[style*="--mup-img-focal-m"] .kt-image {
    object-position: var(--mup-img-focal-m, var(--mup-img-focal-t, var(--mup-img-focal, 50% 50%))) !important;
  }
}

/* Editor-Badge: Per-Viewport-Fokuspunkt aktiv */
.editor-styles-wrapper .wp-block-image.has-mup-img-focal[style*="--mup-img-focal-m"]::before,
.editor-styles-wrapper .wp-block-image.has-mup-img-focal[style*="--mup-img-focal-t"]::before {
  content: "🎯 Fokuspunkt pro Gerät aktiv";
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(201, 168, 76, 0.92);
  color: #1f1a12;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  z-index: 10;
  pointer-events: none;
}

/* Hinweis: damit object-position wirkt, braucht img object-fit:cover.
   Shape-Styles bringen das mit; bei Standard-Bildern ohne fixe Höhe
   ist object-position unsichtbar — kein Schaden, nur unauffällig. */