/**
 * CTA Section Block Styles
 * Uses Publideals design tokens
 */

.cta-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Background Image Overlay */
.cta-section--has-bg-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.cta-section--has-bg-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 26, 46, 0.7);
  z-index: 1;
}

.cta-section--has-bg-image .cta-section__container {
  position: relative;
  z-index: 2;
}

/* Container - max-width applied inline */
/* .cta-section__container {
  padding: 0 var(--container-padding, 24px);
} */

/* Background Colors - Publideals */
.cta-section--bg-white {
  background-color: var(--color-white, #ffffff) !important;
  color: var(--color-dark-text, #1a1a2e);
}

.cta-section--bg-light {
  background-color: var(--color-light-bg, #f9fafb) !important;
  color: var(--color-dark-text, #1a1a2e);
}

.cta-section--bg-primary {
  background-color: var(--color-primary-orange, #DA6630) !important;
  color: var(--color-white, #ffffff);
}

.cta-section--bg-tertiary {
  background-color: var(--color-light-purple, #f5f3f7) !important;
  color: var(--color-dark-text, #1a1a2e);
}

.cta-section--bg-accent {
  background-color: var(--color-primary-purple, #68468F) !important;
  color: var(--color-white, #ffffff);
}

.cta-section--bg-info {
  background-color: var(--color-info, #3B82F6) !important;
  color: #ffffff;
}

.cta-section--bg-warning {
  background-color: var(--color-warning, #F59E0B) !important;
  color: var(--color-dark-text, #1a1a2e);
}

.cta-section--bg-custom {
  /* Custom background color is applied via inline style */
}

/* Text Color Overrides */
.cta-section--text-white {
  color: #ffffff;
}

.cta-section--text-white .cta-section__subheading,
.cta-section--text-white .cta-section__heading,
.cta-section--text-white .cta-section__description {
  color: #ffffff;
}

.cta-section--text-dark {
  color: var(--color-dark-text, #1a1a2e);
}

.cta-section--text-dark .cta-section__subheading,
.cta-section--text-dark .cta-section__heading,
.cta-section--text-dark .cta-section__description {
  color: var(--color-dark-text, #1a1a2e);
}

/* Custom text color - applied via inline style, inherit to children */
.cta-section--text-custom .cta-section__subheading,
.cta-section--text-custom .cta-section__heading,
.cta-section--text-custom .cta-section__description {
  color: inherit;
}

/* Content Wrapper - flex column for gap support */
.cta-section__content-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32, 32px);
}

/* Layout Styles */
/* .cta-section--layout-only-text .cta-section__content-wrapper {
  max-width: 800px;
  margin: 0 auto;
} */

/* Split Layout */
.cta-section--layout-split .cta-section__split {
  display: grid;
  /* Use CSS custom properties for dynamic split ratio, default to 50-50 */
  grid-template-columns: var(--content-ratio, 50%) var(--image-ratio, 50%);
  align-items: center;
}

/* Image Left: Reorder so image appears first (left) */
.cta-section--layout-split.cta-section--image-left .cta-section__content {
  order: 2;
}

.cta-section--layout-split.cta-section--image-left .cta-section__image {
  order: 1;
}

/* Image Right: Content first (left), image second (right) - default order */
.cta-section--layout-split.cta-section--image-right .cta-section__content {
  order: 1;
}

.cta-section--layout-split.cta-section--image-right .cta-section__image {
  order: 2;
}

/* Stacked Layout for Top/Bottom Image Positions */
.cta-section--has-stacked-image .cta-section__stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Image Top */
.cta-section--image-top .cta-section__image--top {
  width: 100%;
  max-width: 800px;
}

/* Image Bottom */
.cta-section--layout-split.cta-section--image-bottom .cta-section__image--bottom,
.cta-section--image-bottom .cta-section__image--bottom {
  width: 100%;
  max-width: 800px;
}

/* Text Elements - font-size applied inline */
.cta-section__subheading {
  font-weight: var(--font-weight-semibold-16, 600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-12, 12px);
  opacity: 0.8;
}

.cta-section__heading {
  font-weight: var(--font-weight-semibold-40, 600);
  line-height: 1.2;
  margin: 0 0 var(--spacing-20, 20px) 0;
}

.cta-section__description {
  line-height: 1.6;
  /* margin: 0 0 var(--spacing-32, 32px) 0; */
  opacity: 0.9;
  text-align: left; /* Default to left, CKEditor styles will override */
}

/* CKEditor content - ensure inline styles have highest priority */
.cta-section__description [style] {
  all: revert !important;
}

.cta-section__description [style] * {
  all: revert !important;
}

/* Ensure CKEditor content can override parent text-align */
.cta-section__description p,
.cta-section__description div,
.cta-section__description h1,
.cta-section__description h2,
.cta-section__description h3,
.cta-section__description h4,
.cta-section__description h5,
.cta-section__description h6,
.cta-section__description ul,
.cta-section__description ol,
.cta-section__description li,
.cta-section__description blockquote {
  text-align: inherit;
}

/* CKEditor alignment classes - highest priority */
.cta-section__description .text-align-left,
.cta-section__description [style*="text-align: left"],
.cta-section__description [style*="text-align:left"] {
  text-align: left !important;
}

.cta-section__description .text-align-center,
.cta-section__description [style*="text-align: center"],
.cta-section__description [style*="text-align:center"] {
  text-align: center !important;
}

.cta-section__description .text-align-right,
.cta-section__description [style*="text-align: right"],
.cta-section__description [style*="text-align:right"] {
  text-align: right !important;
}

.cta-section__description .text-align-justify,
.cta-section__description [style*="text-align: justify"],
.cta-section__description [style*="text-align:justify"] {
  text-align: justify !important;
}

/* Preserve specific CKEditor formatting elements */
.cta-section__description strong,
.cta-section__description b,
.cta-section__description em,
.cta-section__description i,
.cta-section__description u,
.cta-section__description s,
.cta-section__description sub,
.cta-section__description sup {
  all: revert !important;
}

/* Actions */
.cta-section__actions {
  display: flex;
  gap: var(--spacing-16, 16px);
  flex-wrap: wrap;
}

/* Justify actions based on text alignment - inherited from parent */
.cta-section[style*="text-align: center"] .cta-section__actions {
  justify-content: center;
}

.cta-section[style*="text-align: left"] .cta-section__actions {
  justify-content: flex-start;
}

.cta-section[style*="text-align: right"] .cta-section__actions {
  justify-content: flex-end;
}

.cta-section__button {
  display: inline-block;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

/* Image */
.cta-section__image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-section__image img {
  width: 100%;
  height: auto;
  border-radius: var(--corner-radius-8, 8px);
  object-fit: cover;
}

/* Responsive */
@media (max-width: 767px) {
  .cta-section--layout-split .cta-section__split {
    grid-template-columns: 1fr;
    gap: var(--spacing-32, 32px);
  }

  .cta-section--layout-split.cta-section--image-left .cta-section__content,
  .cta-section--layout-split.cta-section--image-right .cta-section__content {
    order: 2;
  }

  .cta-section--layout-split.cta-section--image-left .cta-section__image,
  .cta-section--layout-split.cta-section--image-right .cta-section__image {
    order: 1;
  }

  /* Stacked layouts on mobile */
  .cta-section--layout-split.cta-section--image-top .cta-section__image--top,
  .cta-section--layout-split.cta-section--image-bottom .cta-section__image--bottom {
    max-width: 100%;
  }

  .cta-section__actions {
    flex-direction: column;
  }

  .cta-section__button {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .cta-section[style*="text-align: center"] .cta-section__actions {
    justify-content: stretch;
  }
}
.block-cta-section {
  max-width: 100% !important;
  padding: 0 !important;
  background-color: transparent !important;
}