.egr-cta-mixed {
  padding: 2rem 0;
  background: #fff;
}

.egr-cta-mixed .image {
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
}

.egr-cta-mixed .image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.egr-cta-mixed .image:hover img {
  transform: scale(1.05);
}

.egr-cta-mixed .background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

.egr-cta-mixed .content {
  padding: 1rem;
}

.egr-cta-mixed .line {
  font-size: 1.875rem;
  line-height: 1.33;
  letter-spacing: -.04px;
  color: #151a22;
  position: relative;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.egr-cta-mixed .line::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 60px;
  height: 4px;
  background-color: #1E8449; /* Updated for WCAG AA compliance - 4.5:1 contrast ratio */
}

.egr-cta-mixed .mixed-content-text {
  margin-bottom: 1.5rem;
}

.egr-cta-mixed .mixed-content-text p {
  font-size: 1rem;
  line-height: 1.6;
  color: #495057; /* Changed from #555 to meet WCAG AA contrast */
  margin-bottom: 0;
}

/* CTA Button Styles */
.egr-cta-mixed .cta {
  display: inline-block;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 0;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.egr-cta-mixed .cta.green {
  background-color: #1E8449; /* Updated for WCAG AA compliance - 4.5:1 contrast ratio */
  color: white;
  border-color: #1E8449;
}

.egr-cta-mixed .cta.green:hover {
  background-color: #186F3A; /* Darker green for hover state - maintains WCAG AA compliance */
  border-color: #186F3A;
  transform: translateY(-2px);
}

.egr-cta-mixed .cta.blue {
  background-color: #3498db;
  color: white;
  border-color: #3498db;
}

.egr-cta-mixed .cta.blue:hover {
  background-color: #2980b9;
  border-color: #2980b9;
  transform: translateY(-2px);
}

.egr-cta-mixed .cta.red {
  background-color: #e74c3c;
  color: white;
  border-color: #e74c3c;
}

.egr-cta-mixed .cta.red:hover {
  background-color: #c0392b;
  border-color: #c0392b;
  transform: translateY(-2px);
}

.egr-cta-mixed .cta.default {
  background-color: #113D34;
  color: white;
  border-color: #113D34;
}

.egr-cta-mixed .cta.default:hover {
  background-color: #0d2e26;
  border-color: #0d2e26;
  transform: translateY(-2px);
}

/* External link icon */
.egr-cta-mixed .cta.external::after {
  content: ' ↗';
  font-size: 0.8em;
  margin-left: 4px;
}

/* Layout-specific styles */
.egr-cta-mixed.image-above .image {
  width: 100%;
  height: 500px;
}

.egr-cta-mixed.image-above .image img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

/* Image below layout */
.egr-cta-mixed.image-below .image {
  width: 100%;
  height: 500px;
  margin-top: 2rem;
}

.egr-cta-mixed.image-below .image img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

/* Layout-specific adjustments */
/* Remove flex overrides - let Bootstrap handle column widths */

/* Side image heights */
.egr-cta-mixed.image-left .image,
.egr-cta-mixed.image-right .image {
  height: 300px;
}

.egr-cta-mixed.image-left .image img,
.egr-cta-mixed.image-right .image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

/* 50/50 layout image heights - taller since they have more space */
.egr-cta-mixed.image-left-50 .image,
.egr-cta-mixed.image-right-50 .image {
  height: 400px;
}

.egr-cta-mixed.image-left-50 .image img,
.egr-cta-mixed.image-right-50 .image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/* No-image layout styles */
.egr-cta-mixed.no-image .content {
  text-align: left;
  padding: 2rem 2rem 2rem 0;
  margin: 0 auto;
}

.egr-cta-mixed.no-image .line {
  font-size: 2rem;
}

.egr-cta-mixed.no-image .line::after {
  left: 0;
  transform: none;
}

/* Mobile Image Position Support */
@media (max-width: 767.98px) {
  /* Ensure object-fit is preserved for mobile positioning to work */
  .egr-cta-mixed[data-mobile-image-position] .image img {
    object-fit: cover !important;
  }
  
  /* Top positions */
  .egr-cta-mixed[data-mobile-image-position="top"] .image img,
  .egr-cta-mixed[data-mobile-image-position="top"] .background-image {
    object-position: center top !important;
  }
  
  .egr-cta-mixed[data-mobile-image-position="top-left"] .image img,
  .egr-cta-mixed[data-mobile-image-position="top-left"] .background-image {
    object-position: left top !important;
  }
  
  .egr-cta-mixed[data-mobile-image-position="top-right"] .image img,
  .egr-cta-mixed[data-mobile-image-position="top-right"] .background-image {
    object-position: right top !important;
  }
  
  /* Center positions */
  .egr-cta-mixed[data-mobile-image-position="center"] .image img,
  .egr-cta-mixed[data-mobile-image-position="center"] .background-image {
    object-position: center center !important;
  }
  
  .egr-cta-mixed[data-mobile-image-position="left"] .image img,
  .egr-cta-mixed[data-mobile-image-position="left"] .background-image {
    object-position: left center !important;
  }
  
  .egr-cta-mixed[data-mobile-image-position="right"] .image img,
  .egr-cta-mixed[data-mobile-image-position="right"] .background-image {
    object-position: right center !important;
  }
  
  /* Bottom positions */
  .egr-cta-mixed[data-mobile-image-position="bottom"] .image img,
  .egr-cta-mixed[data-mobile-image-position="bottom"] .background-image {
    object-position: center bottom !important;
  }
  
  .egr-cta-mixed[data-mobile-image-position="bottom-left"] .image img,
  .egr-cta-mixed[data-mobile-image-position="bottom-left"] .background-image {
    object-position: left bottom !important;
  }
  
  .egr-cta-mixed[data-mobile-image-position="bottom-right"] .image img,
  .egr-cta-mixed[data-mobile-image-position="bottom-right"] .background-image {
    object-position: right bottom !important;
  }
  
  /* Apply background-position for background images */
  .egr-cta-mixed[data-mobile-image-position="top"] .background-image {
    background-position: center top !important;
  }
  
  .egr-cta-mixed[data-mobile-image-position="top-left"] .background-image {
    background-position: left top !important;
  }
  
  .egr-cta-mixed[data-mobile-image-position="top-right"] .background-image {
    background-position: right top !important;
  }
  
  .egr-cta-mixed[data-mobile-image-position="center"] .background-image {
    background-position: center center !important;
  }
  
  .egr-cta-mixed[data-mobile-image-position="left"] .background-image {
    background-position: left center !important;
  }
  
  .egr-cta-mixed[data-mobile-image-position="right"] .background-image {
    background-position: right center !important;
  }
  
  .egr-cta-mixed[data-mobile-image-position="bottom"] .background-image {
    background-position: center bottom !important;
  }
  
  .egr-cta-mixed[data-mobile-image-position="bottom-left"] .background-image {
    background-position: left bottom !important;
  }
  
  .egr-cta-mixed[data-mobile-image-position="bottom-right"] .background-image {
    background-position: right bottom !important;
  }
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
  .egr-cta-mixed .content {
    padding: 1rem 0;
    text-align: left;
  }
  
  .egr-cta-mixed.no-image .content {
    text-align: left;
    padding: 1rem 1rem 1rem 0;
  }
  
  .egr-cta-mixed.image-left .image,
  .egr-cta-mixed.image-right .image,
  .egr-cta-mixed.image-left-50 .image,
  .egr-cta-mixed.image-right-50 .image {
    margin-bottom: 1.5rem;
    height: 250px;
  }
  
  .egr-cta-mixed.image-left .image img,
  .egr-cta-mixed.image-right .image img,
  .egr-cta-mixed.image-left-50 .image img,
  .egr-cta-mixed.image-right-50 .image img {
    height: 250px;
  }
  
  .egr-cta-mixed.image-below .image {
    height: 300px;
    margin-top: 1.5rem;
  }
  
  .egr-cta-mixed.image-below .image img {
    height: 300px;
  }
  
  /* Bootstrap handles column widths on mobile */
}

@media (min-width: 768px) {
  .egr-cta-mixed.image-left .content,
  .egr-cta-mixed.image-right .content,
  .egr-cta-mixed.image-left-50 .content,
  .egr-cta-mixed.image-right-50 .content {
    padding: 2rem;
  }
  
  .egr-cta-mixed.no-image .content {
    padding: 2rem 2rem 2rem 0 !important;
  }
  
  .egr-cta-mixed.image-left .image,
  .egr-cta-mixed.image-right .image,
  .egr-cta-mixed.image-left-50 .image,
  .egr-cta-mixed.image-right-50 .image {
    margin-bottom: 0;
  }
}