/* ═══════════════════════════════════════════════════════════════════
   Marstaller-Universum — Image-Shapes (v3.2.6)
   Block-Style-Variations: rund, oval, blob, hex · Größe per Slider
   ═══════════════════════════════════════════════════════════════════ */

/* Größen-CSS-Variable: --mup-img-size (vom Editor-Slider gesetzt) */
.wp-block-image[data-mup-img-size] img,
.wp-block-image.has-mup-shape img {
  --mup-img-size: 100%;
  width: var(--mup-img-size, 100%);
  max-width: 100%;
  height: auto;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* RUND (perfekter Kreis) */
.wp-block-image.is-style-mup-circle img,
.wp-block-image.is-style-mup-rund img {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  box-shadow: 0 18px 50px -20px rgba(31, 26, 18, 0.28);
}

/* OVAL (Ellipse) */
.wp-block-image.is-style-mup-oval img {
  border-radius: 50% / 35% !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: 0 18px 50px -20px rgba(31, 26, 18, 0.28);
}

/* OVAL HOCH (Portrait-Ellipse) */
.wp-block-image.is-style-mup-oval-portrait img {
  border-radius: 50% / 38% !important;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  box-shadow: 0 18px 50px -20px rgba(31, 26, 18, 0.28);
}

/* BLOB (organische Form) */
.wp-block-image.is-style-mup-blob img {
  border-radius: 60% 40% 50% 50% / 50% 60% 40% 50% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  box-shadow: 0 18px 50px -20px rgba(31, 26, 18, 0.28);
  animation: mup-blob-morph 18s ease-in-out infinite;
}
@keyframes mup-blob-morph {
  0%, 100% { border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%; }
  33%      { border-radius: 50% 50% 60% 40% / 60% 40% 50% 50%; }
  66%      { border-radius: 40% 60% 45% 55% / 50% 50% 60% 40%; }
}

/* HEX (Sechseck) */
.wp-block-image.is-style-mup-hex img {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* SOFT (große Rundungen, kein Kreis) */
.wp-block-image.is-style-mup-soft img {
  border-radius: 18px !important;
  box-shadow: 0 12px 36px -16px rgba(31, 26, 18, 0.22);
}

/* Caption: bei runden Formen zentrieren */
.wp-block-image.is-style-mup-circle figcaption,
.wp-block-image.is-style-mup-rund figcaption,
.wp-block-image.is-style-mup-oval figcaption,
.wp-block-image.is-style-mup-oval-portrait figcaption,
.wp-block-image.is-style-mup-blob figcaption,
.wp-block-image.is-style-mup-hex figcaption {
  text-align: center;
  font-style: italic;
  margin-top: 0.8rem;
}

/* Hover-Lift bei runden Shapes */
.wp-block-image.is-style-mup-circle:hover img,
.wp-block-image.is-style-mup-oval:hover img,
.wp-block-image.is-style-mup-oval-portrait:hover img,
.wp-block-image.is-style-mup-blob:hover img,
.wp-block-image.is-style-mup-soft:hover img {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 24px 60px -20px rgba(31, 26, 18, 0.35);
}

/* Wrapper-Width-Container für Größen-Slider (figure-level) */
.wp-block-image[data-mup-img-size] {
  max-width: 100%;
}
.wp-block-image[data-mup-img-size="30"]   { max-width: 30%; }
.wp-block-image[data-mup-img-size="40"]   { max-width: 40%; }
.wp-block-image[data-mup-img-size="50"]   { max-width: 50%; }
.wp-block-image[data-mup-img-size="60"]   { max-width: 60%; }
.wp-block-image[data-mup-img-size="70"]   { max-width: 70%; }
.wp-block-image[data-mup-img-size="80"]   { max-width: 80%; }
.wp-block-image[data-mup-img-size="90"]   { max-width: 90%; }
.wp-block-image[data-mup-img-size="100"]  { max-width: 100%; }

/* Alignment respect: wenn img in column ist, nicht über column-width */
.wp-block-column .wp-block-image[data-mup-img-size] { margin-inline: auto; }

/* Mobile: Größen-Begrenzungen lockerer (immer mind. 70%) */
@media (max-width: 640px) {
  .wp-block-image[data-mup-img-size="30"],
  .wp-block-image[data-mup-img-size="40"],
  .wp-block-image[data-mup-img-size="50"] { max-width: 70%; margin-inline: auto; }
}