/**
 * @file
 * Layout styles for EGR CTA Mixed component.
 */

/* Background wrapper - always edge to edge */
.egr-cta-mixed-bg-wrapper {
  width: 100%;
  padding: 0;
  margin: 0;
}

/* When background color is applied */
.egr-cta-mixed-bg-wrapper[style*="background-color"] {
  padding: 3rem 0;
}

/* Ensure transparent background for component when wrapper has color */
.egr-cta-mixed-bg-wrapper[style*="background-color"] .egr-cta-mixed {
  background-color: transparent;
}

/* Add white background to row with padding when wrapper has background color */
.egr-cta-mixed-bg-wrapper[style*="background-color"] .row.align-items-center {
  background-color: #ffffff;
  padding: 2rem;
  margin: 0;
}

/* Also apply to single row layouts (image above or no image) */
.egr-cta-mixed-bg-wrapper[style*="background-color"] .row {
  background-color: #ffffff;
  padding: 2rem;
  margin: 0;
}

/* Add padding around images */
.egr-cta-mixed .image {
  padding: 1rem;
}

/* Adjust image padding for different layouts */
.egr-cta-mixed.image-above .image {
  padding: 0 1rem 1rem 1rem;
}

.egr-cta-mixed.image-below .image {
  padding: 1rem 1rem 0 1rem;
}

.egr-cta-mixed.image-left .image,
.egr-cta-mixed.image-right .image {
  padding: 1rem;
}


/* Edge to edge layout */
.egr-cta-mixed-edge-to-edge {
  width: 100%;
  max-width: 100%;
  padding: 0 2rem;
  margin: 0;
}

/* Remove default container padding for our custom layouts */
.egr-cta-mixed .container,
.egr-cta-mixed .container-fluid {
  padding-top: 0;
  padding-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .egr-cta-mixed-edge-to-edge {
    padding: 0 1rem;
  }
  
  .egr-cta-mixed-bg-wrapper[style*="background-color"] {
    padding: 2rem 0;
  }
  
  /* Adjust row padding on mobile */
  .egr-cta-mixed-bg-wrapper[style*="background-color"] .row,
  .egr-cta-mixed-bg-wrapper[style*="background-color"] .row.align-items-center {
    padding: 1.5rem;
  }
}

/* Adjust padding when no background color */
.egr-cta-mixed-bg-wrapper:not([style*="background-color"]) .egr-cta-mixed {
  padding: 3rem 0;
}

/* Special handling for edge-to-edge with images - override default padding */
.egr-cta-mixed-edge-to-edge.image-above .image {
  padding: 0;
  margin-left: -2rem;
  margin-right: -2rem;
  width: calc(100% + 4rem);
  max-width: calc(100% + 4rem);
}

@media (max-width: 768px) {
  .egr-cta-mixed-edge-to-edge.image-above .image {
    margin-left: -1rem;
    margin-right: -1rem;
    width: calc(100% + 2rem);
    max-width: calc(100% + 2rem);
  }
}

/* Ensure consistent spacing for all layout types */
.container.egr-cta-mixed-wrapper,
.container-fluid.egr-cta-mixed-wrapper {
  position: relative;
}