/* ZRM Banner — 50/50 split CTA / promo banner */

.zrm-banner {
  display: grid;
  grid-template-columns: var(--zrm-banner-cols, 1fr 1fr);
  min-height: 400px; /* fallback; override via Min height control (supports breakpoints) */
  overflow: hidden;
  border-radius: var(--zrm-banner-radius, 0);
}

/* Image column */
.zrm-banner__image {
  overflow: hidden;
  min-width: 0;
}

/* Optional: image stays fixed height when content expands (e.g. Read more) */
.zrm-banner--image-fixed .zrm-banner__image {
  align-self: start;
}

.zrm-banner__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content column */
.zrm-banner__content {
  display: flex;
  flex-direction: column;
  justify-content: var(--zrm-banner-content-align, center);
  min-width: 0;
  gap: 1rem;
  /* Default padding — each side can be overridden independently via the four
     "Content padding" number controls, which emit valid px CSS per breakpoint. */
  padding: 48px;
}

/* Image right: swap visual order */
.zrm-banner--image-right .zrm-banner__image {
  order: 2;
}

.zrm-banner--image-right .zrm-banner__content {
  order: 1;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .zrm-banner {
    grid-template-columns: 1fr;
  }

  .zrm-banner__image {
    aspect-ratio: 16 / 9;
  }

  .zrm-banner--image-right .zrm-banner__image {
    order: 0;
  }

  .zrm-banner--image-right .zrm-banner__content {
    order: 0;
  }
}