.cta-section {
  position: relative;
  overflow: hidden;
}

.section.cta-section:has(.cta-image-intrinsic) {
  overflow: visible;
}

.cta-container {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.cta-container.cta-image-intrinsic {
  overflow: visible;
}

.container-full .cta-container {
  max-width: 100%;
  border-radius: 0;
}

/* Full-width CTA + image: section track must match viewport band so intrinsic height math matches rendered image width */
.cta-section .container-full .section-body {
  width: 100%;
  max-width: none;
}

.cta-section .container-full .cta-container.cta-image-intrinsic {
  width: 100%;
  max-width: none;
}

/* Base Rounded Style for all CTA Layouts */
.cta-container {
  border-radius: var(--radius-lg);
}

/* Fill media (video / gradient / solid): minimum area so absolute media + split columns have height */
.cta-container.cta-layout-one_piece:not(.cta-image-intrinsic) {
  min-height: 420px;
}

.cta-container.cta-layout-two_piece:not(.cta-image-intrinsic) .cta-split-inner {
  min-height: 420px;
}

/* Overlay Layout */
.cta-layout-one_piece {
  position: relative;
}

.cta-media-wrapper {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cta-layout-two_piece .cta-media-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
}

.cta-media-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Split + image */
.cta-layout-two_piece.cta-image-intrinsic .cta-split-inner {
  height: auto;
}

.cta-layout-two_piece.cta-image-intrinsic .cta-split-media {
  min-height: 0;
  align-items: center;
}

.cta-layout-two_piece.cta-image-intrinsic .cta-media-wrapper {
  height: auto;
  width: 100%;
  display: block;
}

.cta-layout-two_piece.cta-image-intrinsic img.cta-media-item {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
}

.cta-layout-two_piece.cta-image-intrinsic .cta-image-link {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.cta-layout-two_piece.cta-image-intrinsic .cta-media-item.cta-placeholder {
  width: 100%;
  height: auto;
  min-height: 280px;
  aspect-ratio: 16 / 9;
}

/* One-piece overlay + image: stack media and content so row height follows image/content */
.cta-layout-one_piece.cta-image-intrinsic.cta-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, auto);
  align-content: start;
  min-height: 200px;
}

.cta-layout-one_piece.cta-image-intrinsic .cta-media-wrapper {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
  min-height: 0;
  z-index: 1;
}

.cta-layout-one_piece.cta-image-intrinsic .cta-overlay-content {
  grid-column: 1;
  grid-row: 1;
  z-index: 10;
  align-self: stretch;
  flex: none;
  min-height: 0;
}

.cta-layout-one_piece.cta-image-intrinsic img.cta-media-item {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
  margin-inline: 0;
}

.cta-layout-one_piece.cta-image-intrinsic .cta-image-link {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin-inline: 0;
}

.cta-layout-one_piece.cta-image-intrinsic .cta-media-item.cta-placeholder {
  width: 100%;
  height: auto;
  min-height: 280px;
  aspect-ratio: 16 / 9;
}

.cta-video {
  border: none;
  width: 100%;
  height: 100%;
}

.cta-media-wrapper iframe.cta-media-item {
  width: 100%;
  height: 100%;
  transform: scale(1.05); /* Slight over-scale to hide potential edges */
}

.cta-placeholder {
  background: #eee;
}

.cta-image-link {
  display: block;
  width: 100%;
  height: 100%;
}

.cta-image-intrinsic .cta-image-link {
  height: auto;
  min-height: 0;
}

.cta-overlay-mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.cta-overlay-content {
  position: relative;
  z-index: 10;
  width: 100%;
  flex: 1;
  display: flex;
  padding: 40px;
}

/* Content Positioning - Shared for Overlay and Split Content Area */
/* Default LTR / Logical Start */
.cta-pos-top-left,
.cta-pos-middle-left,
.cta-pos-bottom-left {
  justify-content: flex-start;
  text-align: left;
}
.cta-pos-top-center,
.cta-pos-middle-center,
.cta-pos-bottom-center {
  justify-content: center;
  text-align: center;
}
.cta-pos-top-right,
.cta-pos-middle-right,
.cta-pos-bottom-right {
  justify-content: flex-end;
  text-align: right;
}

.cta-pos-top-left,
.cta-pos-top-center,
.cta-pos-top-right {
  align-items: flex-start;
}
.cta-pos-middle-left,
.cta-pos-middle-center,
.cta-pos-middle-right {
  align-items: center;
}
.cta-pos-bottom-left,
.cta-pos-bottom-center,
.cta-pos-bottom-right {
  align-items: flex-end;
}

/* RTL Overrides for physical Left/Right */
[dir="rtl"] .cta-pos-top-left,
[dir="rtl"] .cta-pos-middle-left,
[dir="rtl"] .cta-pos-bottom-left {
  justify-content: flex-end;
  text-align: left;
}
[dir="rtl"] .cta-pos-top-right,
[dir="rtl"] .cta-pos-middle-right,
[dir="rtl"] .cta-pos-bottom-right {
  justify-content: flex-start;
  text-align: right;
}

.cta-pos-middle-center .cta-buttons,
.cta-pos-top-center .cta-buttons,
.cta-pos-bottom-center .cta-buttons {
  justify-content: center;
}

.cta-pos-middle-right .cta-buttons,
.cta-pos-top-right .cta-buttons,
.cta-pos-bottom-right .cta-buttons {
  justify-content: flex-end;
}

[dir="rtl"] .cta-pos-middle-right .cta-buttons,
[dir="rtl"] .cta-pos-top-right .cta-buttons,
[dir="rtl"] .cta-pos-bottom-right .cta-buttons {
  justify-content: flex-start;
}

.cta-pos-middle-left .cta-buttons,
.cta-pos-top-left .cta-buttons,
.cta-pos-bottom-left .cta-buttons {
  justify-content: flex-start;
}

[dir="rtl"] .cta-pos-middle-left .cta-buttons,
[dir="rtl"] .cta-pos-top-left .cta-buttons,
[dir="rtl"] .cta-pos-bottom-left .cta-buttons {
  justify-content: flex-end;
}

/* Split Layout */
.cta-split-inner {
  display: flex;
  width: 100%;
  height: auto;
  flex: 1;
  flex-wrap: nowrap;
  overflow: hidden;
}

.cta-split-media,
.cta-split-content {
  flex: 1 1 50%;
  min-width: 350px;
  display: flex;
  transition: all 0.3s ease;
}

.cta-split-media {
  position: relative;
  overflow: hidden;
}

.cta-split-content {
  padding: 80px 60px; /* Increased padding for more breathing room */
  position: relative;
  background-color: var(--cta-split-bg, #ffffff);
  display: flex;
  flex-direction: column;
}

/* Contain content within split side */
.cta-split-content {
  padding: 80px 40px;
  position: relative;
  background-color: var(--cta-split-bg, #ffffff);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cta-media-left .cta-split-content {
  padding-left: 60px;
}

.cta-media-right .cta-split-content {
  padding-right: 60px;
}

[data-theme="dark"] .cta-split-content,
[data-theme="dark"] .cta-container .cta-split-content {
  background-color: var(--color-surface) !important;
  --cta-title-color: var(--color-text) !important;
  --cta-subtitle-color: var(--color-text-muted) !important;
}

.cta-media-right {
  flex-direction: row-reverse;
}

/* Shared Content */
.cta-content-inner {
  max-width: 550px; 
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.cta-title {
  font-size: clamp(2.25rem, 6vw, 4rem); /* Increased size for premium feel */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.cta-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  line-height: 1.6;
  opacity: 0.9;
}

.cta-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-pos-top-left .cta-buttons,
.cta-pos-middle-left .cta-buttons,
.cta-pos-bottom-left .cta-buttons {
  justify-content: flex-start;
}

/* Button Styles */
.cta-btn {
  /* Inherits from .btn .btn--lg added in template */
  text-decoration: none;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .cta-container.cta-layout-one_piece:not(.cta-image-intrinsic) {
    min-height: 320px;
  }

  .cta-container.cta-layout-two_piece:not(.cta-image-intrinsic) .cta-split-inner {
    min-height: 0;
  }

  .cta-split-media,
  .cta-split-content {
    min-width: 0;
    flex: 1 1 100%;
  }

  .cta-split-inner {
    flex-wrap: wrap; /* Allow wrapping on mobile */
    height: auto;
    flex-direction: column-reverse;
  }

  .cta-media-right {
    flex-direction: column;
  }

  .cta-split-media {
    height: 300px;
  }

  .cta-image-intrinsic .cta-split-media {
    height: auto;
    min-height: 0;
  }

    .cta-overlay-content {
    padding: 20px;
  }
}

/* Custom Video Controls */
.cta-video-controls {
  position: absolute;
  z-index: 20;
  display: flex;
  gap: 0.5rem;
}

.cta-video-controls.pos-bottom-left { bottom: 2rem; left: 2rem; }
.cta-video-controls.pos-bottom-right { bottom: 2rem; right: 2rem; }
.cta-video-controls.pos-bottom-center { bottom: 2rem; left: 50%; transform: translateX(-50%); }

.cta-vc-btn {
  border-radius: 50%;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 0.3s;
}

.cta-vc-btn:hover { background: rgba(0,0,0,0.8); transform: scale(1.05); }

[dir="rtl"] .cta-video-controls.pos-bottom-left { left: auto; right: 2rem; }
[dir="rtl"] .cta-video-controls.pos-bottom-right { right: auto; left: 2rem; }