/* Shared styles for all CTA banners embedding cta_banner_template.latte. */

/* --- Template shell (card + layout) --- */
.cta-banner .cta-card {
  width: min(900px, 100%);
  margin-inline: auto;
  border-radius: var(--borderRadius-extra-large);
  padding: 38px;
  color: #fff;
}
.cta-banner .ad-banner__img,
.cta-banner__wlc-img {
  width: 100%;
  max-width: 350px;
  border-radius: 15px;
}

.cta-banner__media {
  max-width: 350px;
  width: 100%;
}

.cta-banner__desc {
  align-items: center;
  text-align: center;
}
.cta-banner__desc p {
  font-size: 20px;
  margin-bottom: 1rem !important;
}

.cta-banner--media-right .ad-banner__content,
.cta-banner--media-left .ad-banner__content {
  gap: 60px;
  justify-items: center;
}
.cta-banner--pavel .ad-banner__content {
  gap: 20px;
}
.cta-banner--robert .ad-banner__content {
  gap: 10px;
}
.cta-banner--live-gallery .ad-banner__content {
  gap: 20px;
}
.cta-banner--contact .ad-banner__content {
  gap: 60px;
}
.cta-banner--contact .cta-banner__media {
  max-width: 220px;
}
.cta-banner--media-left .cta-banner__media {
  order: -1;
}

/* Give the text more room on the left and let the image sit at the right edge. */
@media (min-width: 993px) {
  .cta-banner--media-right .ad-banner__content {
    grid-template-columns: 1fr auto;
  }
  .cta-banner--media-right .cta-banner__media {
    justify-self: end;
  }
  /* Contact: shrink the image column so the text gets the remaining space. */
  .cta-banner--contact .ad-banner__content {
    grid-template-columns: auto 1fr;
  }
}

.cta-banner__heading {
  color: #fff !important;
  font-size: 30px !important;
  line-height: 38px !important;
  font-weight: 400 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* --- Reusable centered vertical stack --- */
.cta-banner__blog,
.cta-banner__blog-content,
.cta-banner__get-in-touch,
.cta-banner__wlc-text,
.cta-banner__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta-banner__blog,
.cta-banner__wlc-text {
  gap: 30px;
}
/* Keep the blog banner centered across the full card width. */
.cta-banner__blog,
.cta-banner__blog > *,
.cta-banner__blog-content {
  width: 100%;
  text-align: center;
}
.cta-banner__blog .max-width-text {
  margin-inline: auto;
}
.cta-banner__get-in-touch {
  gap: 20px;
}
.cta-banner__blog-content,
.cta-banner__logo {
  gap: 10px;
}

/* --- Streaming bundle --- */
.cta-banner__desc:has(.cta-banner__logo) {
  gap: 60px;
}
.cta-banner__logo {
  background: linear-gradient(90deg, #2d71dc 0%, #129eff 100%);
  padding: 20px 40px;
  border-radius: 15px;
}
.cta-banner__logo img {
  height: 24px;
}
/* Larger heading than the other banners (which use the default cta-banner__heading size).
   Desktop only — the max-width: 992px block below shrinks all headings to 28px. */
@media (min-width: 993px) {
  .cta-banner__logo .cta-banner__heading {
    font-size: 40px !important;
    line-height: 48px !important;
  }
}
.cta-banner__content {
  display: flex;
  align-items: center;
  gap: 30px;
}
.cta-banner__content p {
  margin-bottom: 0 !important;
  text-align: right;
}

/* --- Contact form --- */
.cta-banner__contact-img {
  display: block;
  margin-inline: auto;
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 15px;
}

/* --- White-label cloud --- */
.cta-banner__wlc-body {
  display: flex;
  align-items: center;
}

@media (max-width: 992px) {
  .cta-banner .cta-card {
    padding: 30px;
  }
  .cta-banner--media-right .ad-banner__content,
  .cta-banner--media-left .ad-banner__content {
    gap: 40px;
  }
  .cta-banner--media-left .cta-banner__media {
    order: 0;
  }
  .cta-banner__content {
    flex-direction: column;
  }
  .cta-banner__content p {
    text-align: center;
  }
  .cta-banner__heading {
    font-size: 28px !important;
  }
  .cta-banner--media-left .cta-banner__media:has(.cta-banner__contact-img) {
    order: -1;
    text-align: center;
  }
  .cta-banner__contact-img {
    width: 140px;
    height: 140px;
  }
  .cta-banner__wlc-body {
    flex-direction: column;
    gap: 40px;
  }
}