/**
 * mod_vr_split_section frontend styles
 *
 * Ziel: Ein schlanker, wiederverwendbarer Inhaltsbaustein ohne Pagebuilder.
 * Pro Modulinstanz werden nur sichere CSS-Variablen und ein kleiner
 * instanzbezogener Media-Query-Block inline ergänzt.
 */

.vrsplit-section {
  background: var(--vrsplit-section-bg, #fff);
  scroll-margin-top: var(--vrsplit-scroll-margin-top, 96px);
}

/* Volle Browserbreite, auch wenn das Modul in einem begrenzten Template-Container liegt. */
.vrsplit-section--width-full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* Begrenzte Box. Die Hintergrundfarbe liegt weiterhin am Abschnitt. */
.vrsplit-section--width-box .vrsplit-section__shell {
  width: min(100%, var(--vrsplit-max-width, 1400px));
}

.vrsplit-section--align-left .vrsplit-section__shell {
  margin-left: 0;
  margin-right: auto;
}

.vrsplit-section--align-center .vrsplit-section__shell {
  margin-left: auto;
  margin-right: auto;
}

.vrsplit-section--align-right .vrsplit-section__shell {
  margin-left: auto;
  margin-right: 0;
}

.vrsplit-section__shell {
  width: 100%;
}

.vrsplit-section__inner {
  display: grid;
  grid-template-columns: minmax(0, var(--vrsplit-left-col, 1fr)) minmax(0, var(--vrsplit-right-col, 1fr));
  align-items: var(--vrsplit-column-align, stretch);
  width: 100%;
}

.vrsplit-section__left,
.vrsplit-section__right {
  min-width: 0;
  margin: 0;
  padding: 0;
}

.vrsplit-section__left img.vrsplit-section__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: var(--vrsplit-left-image-position, center center);
}

.vrsplit-section__right {
  background: var(--vrsplit-text-bg, #fff);
  display: flex;
  flex-direction: column;
  justify-content: var(--vrsplit-text-justify, flex-start);
  text-align: var(--vrsplit-text-align, left);
}

.vrsplit-section__content {
  padding: var(--vrsplit-text-padding-desktop, 50px);
}

.vrsplit-section__content > :first-child {
  margin-top: 0;
}

.vrsplit-section__content > :last-child {
  margin-bottom: 0;
}

.vrsplit-section__heading {
  margin-top: 0;
}

/* Nur wenn diese Modulinstanz es verlangt: typischen Abstand des Joomla-Contentbereichs entfernen.
   Die Regel ist bewusst durch :has() auf diese Modulklasse eingegrenzt. */
.vrb-template main:has(.vrsplit-section[data-flush-content="1"]),
.vrb-template .vrb-main:has(.vrsplit-section[data-flush-content="1"]),
.vrb-template .vrb-content:has(.vrsplit-section[data-flush-content="1"]),
.vrb-template .vrb-component:has(.vrsplit-section[data-flush-content="1"]),
.vrb-template .com-content-article:has(.vrsplit-section[data-flush-content="1"]),
.vrb-template .item-page:has(.vrsplit-section[data-flush-content="1"]) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.vrsplit-section[data-flush-content="1"] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 600px) {
  .vrsplit-section__content {
    padding: var(--vrsplit-text-padding-mobile, 34px 24px 46px);
  }
}