/* OneQrew v7 — Bildblock (Handle "bild", Block oneqrew/image-block).

   Bewusst OHNE eigenes v7-Design: auf Zuruf des Anwenders bleibt image-block
   1:1 wie in v6 — dieselbe Twig-Vorlage (image-block.twig), dieselben
   Klassen, keine Redesign-Arbeit. Diese Datei repliziert nur die Handvoll
   Tailwind-Utilities, die genau dieses eine, unveraenderliche Markup
   tatsaechlich benutzt (kein allgemeines Utility-System) — Ziel ist allein,
   den Block von den globalen Legacy-Bundles (app.css/tailwind*.css) zu
   loesen, damit die ElementRegistry ihn kennt und er keinen Fallback auf
   diese Bundles mehr erzwingt (siehe App\V7\ElementRegistry). Werte 1:1 aus
   den kompilierten Legacy-Bundles uebernommen: .container (dist/css/
   tailwind.css), pt-lgOQ/pt-mdOQ/pb-lgOQ/pb-mdOQ (dist/css/tailwind*.css),
   .image-block__image--full-width (dist/css/app.css). Aenderungen immer
   auch in bild.min.css. */

.oq-v7 .image-block {
  padding-top: 48px;
  padding-bottom: 48px;
}

@media (min-width: 1080px) {
  .oq-v7 .image-block {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

.oq-v7 .image-block .container {
  margin-inline: auto;
  padding-inline: 32px;
  width: 100%;
}

@media (min-width: 1088px) {
  .oq-v7 .image-block .container {
    max-width: 1088px;
  }
}

.oq-v7 .image-block .w-full {
  width: 100%;
}

.oq-v7 .image-block .mx-auto {
  margin-inline: auto;
}

.oq-v7 .image-block .relative {
  position: relative;
}

.oq-v7 .image-block__image {
  position: relative;
  /* Seitenverhaeltnis-Trick per Padding-Top, wie im Original (49.286%). */
  padding-top: 49.286%;
}

.oq-v7 .image-block__image--full-width {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.oq-v7 .image-block__image .absolute {
  position: absolute;
}

.oq-v7 .image-block__image .top-0 {
  top: 0;
}

.oq-v7 .image-block__image .left-0 {
  left: 0;
}

.oq-v7 .image-block__image .\!w-full {
  width: 100% !important;
}

.oq-v7 .image-block__image .\!h-full {
  height: 100% !important;
}

.oq-v7 .image-block__image .object-cover {
  object-fit: cover;
}

.oq-v7 .image-block__image .object-center {
  object-position: center;
}

.oq-v7 .image-block__image .rounded-\[8px\] {
  border-radius: 8px;
}

.oq-v7 .image-block__image .hidden {
  display: none;
}

@media (min-width: 768px) {
  .oq-v7 .image-block__image .md\:block {
    display: block;
  }

  .oq-v7 .image-block__image .md\:hidden {
    display: none;
  }
}

@media (min-width: 1080px) {
  .oq-v7 .image-block__image .lg\:block {
    display: block;
  }

  .oq-v7 .image-block__image .lg\:hidden {
    display: none;
  }
}

/* Imagify-Kompatibilitaet (Bild-Wrap-Modus): Imagify verschiebt Klasse und
   style-Attribut vom nackten <img> auf das umschliessende <picture>, das
   innere <img> bleibt dann klassenlos. Gleiches Muster wie stage.css/
   text-media.css (siehe dort fuer die ausfuehrliche Begruendung). */
.oq-v7 .image-block__image picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}

.oq-v7 .image-block .text-13 {
  font-size: 13px;
  line-height: 22.1px;
}

.oq-v7 .image-block .block {
  display: block;
}

.oq-v7 .image-block .mt-sm {
  margin-top: 8px;
}