$quote-breakpoint: 880px;

// ─────────────────────────────────────────────────────────────────────────────
// Zweispalter Text + Bild  (bgm-theme-awinta/twocol-media)
//
// Structure
//   .twocol-media                       block wrapper (transparent bg)
//     &--text-image                     modifier: text left, image right (default)
//     &--image-text                     modifier: image left, text right
//     &__rule                           dotted Schmucklinie (top + bottom)
//     &__inner                          2-column flex row
//       &__text                         text column
//         &__headline                   multiline headline (nl2br)
//         &__body                       richtext body
//       &__media                        image column
//         &__img                        image (natural proportions)
//
// Column swap: CSS order property — no duplicate markup.
// Mobile: single column, image always below text.
// ─────────────────────────────────────────────────────────────────────────────

.twocol-media {
  width: 100%;
  background: transparent;

  // ── Schmucklinien ──────────────────────────────────────────────────
  &__rule {
    width: 100%;
    border: none;
    border-top: 2px dotted currentColor;
    opacity: 0.3;

    &--top    { margin-bottom: 32px; }
    &--bottom { margin-top: 32px; }
  }

  // ── Inner 2-column row ─────────────────────────────────────────────
  &__inner {
    display: flex;
    flex-direction: column;   // mobile: stacked
    gap: 32px;

    @media (min-width: $quote-breakpoint) {
      flex-direction: row;
      align-items: flex-start;
      gap: 55px;
    }
  }

  // ── Text column ────────────────────────────────────────────────────
  &__text {
    flex: 1;
    order: 1;   // default: text first
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  &__headline {
      font-size: 22px;
      color:#000;
      font-weight: bold;
      margin:0;
      margin-bottom: 8px;
  }

  &__body {
    color: #243d51;

    p {
      margin: 0 0 0.75em;
      &:last-child { margin-bottom: 0; }
    }
  }

  // ── Media column ───────────────────────────────────────────────────
  &__media {
    flex: 1;
    order: 2;   // default: image second
  }

  &__img {
    display: block;
    width: 100%;
    height: auto;
  }

  // ── Column order: image-text ───────────────────────────────────────
  // Flip order only on desktop — mobile always stacks text first.
  &--image-text {
      @media (min-width: $quote-breakpoint) {
          .twocol-media__media { order: 1; }
          .twocol-media__text  { order: 2; }
      }
  }
}