/* Banner Background Variants - Simple and Clean */

/* Base styles for all background variants - using higher specificity */
.banner-bg[class*="-bg"] {
  padding: var(--spacing-600) var(--spacing-300);
  text-align: center;
  margin: 0 auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
}

.banner-bg.light-bg {
  background-image: url('/express/code/blocks/banner-bg/img/light-bg.jpg');
}

.banner-bg.blue-green-pink-bg {
  background-image: url('/express/code/blocks/banner-bg/img/blue-green-pink-bg.jpg');
}

.banner-bg.blue-bg {
  background-image: url('/express/code/blocks/banner-bg/img/blue-bg.jpg');
}

.banner-bg.blue-pink-orange-bg {
  background-image: url('/express/code/blocks/banner-bg/img/blue-pink-orange-bg.jpg');
}

.banner-bg.cool-dark-bg {
  background: var(--color-black);
}

.banner-bg.green-blue-red-bg {
  background-image: url('/express/code/blocks/banner-bg/img/green-blue-red-bg.jpg');
}

.banner-bg.blue-purple-gray-bg {
  background-image: url('/express/code/blocks/banner-bg/img/blue-purple-gray-bg.jpg');
}

.banner-bg.yellow-pink-blue-bg {
  background-image: url('/express/code/blocks/banner-bg/img/yellow-pink-blue-bg.jpg');
}

/* Default gradient when no custom background is authored in first row */
.banner-bg.template-page-bg:not(.has-custom-bg) {
  background: linear-gradient(156deg, #BFE4FF -0.25%, #CECEF6 104.12%);
}

/* Background container */
.banner-bg[class*="-bg"] .background-container {
  border-radius: var(--spacing-300);
  border: var(--border-width-2) solid var(--color-white);
  background: linear-gradient(95deg, rgba(255, 255, 255, 0.80) 18%, rgba(255, 255, 255, 0.40) 93%);
  padding: var(--spacing-600) var(--spacing-500);
  width: 100%;
  box-sizing: border-box;
  max-width: none;
}

.banner-bg.cool-dark-bg .background-container {
  border-radius: var(--spacing-300);
  border: var(--border-width-2) solid transparent;
  background: linear-gradient(var(--color-black), var(--color-black)) padding-box,
    linear-gradient(90deg, var(--color-green-800), var(--color-blue-800), var(--color-purple-1000), var(--color-orange-700)) border-box;
  padding: var(--spacing-600) var(--spacing-500);
  width: 100%;
  box-sizing: border-box;
  max-width: none;
}

.banner-bg[class*="-bg"] h2 {
  color: var(--color-content-neutral);
  margin-top: 0;
  margin-bottom: 0;
  font-style: normal;
  line-height: 130%;
  font-size: var(--heading-font-size-l);
  font-weight: var(--heading-font-weight-extra);
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

/* Paragraph styling for background variants */
.banner-bg[class*="-bg"] p:not(.button-container) {
  color: var(--color-content-neutral);
  margin-top: var(--spacing-100);
  margin-bottom: var(--spacing-400);
  font-size: var(--body-font-size-xl);
}

/* Last paragraph styling for background variants */
.banner-bg[class*="-bg"] p:not(.button-container):last-child {
  margin-top: 0;
  margin-bottom: 0;
  font-size: var(--body-font-size-l);
}

/* Link styling within last paragraph */
.banner-bg[class*="-bg"] p:not(.button-container):last-child a {
  color: var(--color-content-neutral);
  font-weight: var(--subheading-font-weight);
  text-decoration: underline;
}

/* Logo styling */
.banner-bg[class*="-bg"] .express-logo {
  display: block;
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: var(--spacing-200);
  width: 168px;
  height: auto;
}

/* Reduce spacing between stacked buttons on mobile */
@media (max-width: 767px) {
  .banner-bg[class*="-bg"].multi-button .button-container {
    margin-top: var(--spacing-100);
    margin-bottom: var(--spacing-100);
  }
  
  .banner-bg[class*="-bg"].multi-button .button-container:first-child {
    margin-top: var(--spacing-500);
  }
  
  .banner-bg[class*="-bg"].multi-button .button-container:last-child {
    margin-bottom: var(--spacing-300);
  }
}

/* Make buttons display inline when there are multiple buttons */
.banner-bg[class*="-bg"].multi-button .button-container {
  display: inline-block;
  margin-top: 0;
  margin-bottom: var(--spacing-300);
  margin-right: var(--spacing-300);
}

.banner-bg[class*="-bg"].multi-button .button-container:last-child {
  margin-right: 0;
}

/* Single button container styling */
.banner-bg[class*="-bg"] .button-container:not(.multi-button .button-container) {
  margin-bottom: var(--spacing-300)
}

.banner-bg[class*="-bg"] .button-container a.button.bg-banner-button {
  font-size: var(--body-font-size-l);
  line-height: 1;
  padding: 13px var(--spacing-400);
  border-radius: var(--border-radius-max);
  background-color: var(--color-content-neutral);
  border: var(--border-width-2) solid var(--color-content-neutral);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 var(--spacing-50) 0 0;
}

/* Hover effects for banner button */
.banner-bg[class*="-bg"] .button-container a.button.bg-banner-button:hover {
  color: var(--color-white);
  background-color: var(--color-black);
  border-color: var(--color-black);
}

/* Second button styling for multi-button banners - using specific class */
.banner-bg[class*="-bg"] .button-container a.button.bg-banner-button-secondary {
  color: var(--color-content-neutral);;
  background-color: transparent;
  border-color: var(--color-content-neutral);;
  border: var(--border-width-2) solid var(--color-content-neutral);;
}

.banner-bg[class*="-bg"] .button-container a.button.bg-banner-button-secondary:hover {
  color: var(--color-black);
  background-color: var(--color-gray-325);
  border-color: var(--color-black);
}

/* cool-dark-bg overrides */
.banner-bg.cool-dark-bg h2 {
  color: var(--color-white);
}

.banner-bg.cool-dark-bg p:not(.button-container) {
  color: var(--color-white);
}

.banner-bg.cool-dark-bg p:not(.button-container):last-child a {
  color: var(--color-white);
}

.banner-bg.cool-dark-bg .button-container a.button.bg-banner-button {
  background-color: var(--S2-Buttons-Accent-Color-Default);
  border: var(--border-width-2) solid var(--S2-Buttons-Accent-Color-Default);
  color: var(--color-white);
}

.banner-bg.cool-dark-bg .button-container a.button.bg-banner-button:hover,
.banner-bg.cool-dark-bg .button-container a.button.bg-banner-button:active {
  background-color: var(--S2-Buttons-Accent-Color-Hover);
  border-color: var(--S2-Buttons-Accent-Color-Hover);
  color: var(--color-white);
}

.banner-bg.cool-dark-bg .button-container a.button.bg-banner-button:focus {
  background-color: var(--S2-Buttons-Accent-Color-Hover);
  border-color: var(--S2-Buttons-Accent-Color-Hover);
  color: var(--color-white);
  box-shadow: none;
}

.banner-bg.cool-dark-bg .button-container a.button.bg-banner-button-secondary {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.17);
  background-color: transparent;
}

.banner-bg.cool-dark-bg .button-container a.button.bg-banner-button-secondary:hover,
.banner-bg.cool-dark-bg .button-container a.button.bg-banner-button-secondary:active {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.17);
  background-color: rgba(255, 255, 255, 0.12);
}

.banner-bg.cool-dark-bg .button-container a.button.bg-banner-button-secondary:focus {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--color-white);
  box-shadow: none;
}

.banner-bg.cool-dark-bg a.button:focus-visible,
.banner-bg.cool-dark-bg a:any-link:focus-visible {
  outline: var(--border-width-2) solid var(--S2-Buttons-Accent-Color-Hover);
  outline-offset: var(--border-width-2);
}

/* Tablet styles */
@media (min-width: 768px) {
  .banner-bg[class*="-bg"] {
    padding: var(--spacing-600) var(--spacing-500);
  }

  .banner-bg[class*="-bg"] .background-container {
    padding: var(--spacing-700) var(--spacing-500);
    width: 100%;
  }

  /* Paragraph styling for background variants */
  .banner-bg[class*="-bg"] p:not(.button-container) {
    margin-top: var(--spacing-200);
    margin-bottom: var(--spacing-500);
  }

  .banner-bg[class*="-bg"] h2 {
    max-width: 812px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Desktop styles */
@media (min-width: 1200px) {
  .banner-bg[class*="-bg"] {
    padding: var(--spacing-900) var(--spacing-600);
    margin: 0 auto;
    box-sizing: border-box;
  }

  .banner-bg[class*="-bg"] .background-container {
    padding: var(--spacing-800) var(--spacing-500);
    max-width: var(--block-wd-max-width);
    margin: 0 auto;
  }

  .banner-bg[class*="-bg"] h2 {
    font-size: var(--heading-font-size-xl);
  }
}