/**
 * @file
 * sHTG Section Container component styles.
 */

/* ==========================================================================
   Section
   ========================================================================== */

.shtg-section-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 48px;
  padding-bottom: 48px;
  padding-left: 16px;
  padding-right: 16px;
}

/* ==========================================================================
   Background variants (CSS layer — sits beneath any background image)
   ========================================================================== */

.shtg-section-container--bg-white {
  background: #ffffff;
}

.shtg-section-container--bg-purple-light {
  background: linear-gradient(180deg, #FFF 0%, #D9D9FF 100%);
}

.shtg-section-container--bg-purple-dark {
  background:
    radial-gradient(201.86% 117.32% at 109.78% 18.17%, rgba(193, 152, 217, 0.60) 0%, rgba(193, 152, 217, 0.60) 8.42%, rgba(121, 54, 197, 0.60) 36.89%, rgba(53, 0, 160, 0.60) 93.09%),
    linear-gradient(84deg, #3300A0 -5.35%, #6C26BE 67.27%, #B685E0 91.94%);
  color: #ffffff;
}

.shtg-section-container--bg-purple-peach-light {
  background:
    radial-gradient(101.33% 115.04% at 4.61% 88.19%, rgba(243, 215, 223, 0.77) 0%, rgba(216, 212, 248, 0.77) 58.51%, rgba(216, 212, 248, 0.00) 100%),
    radial-gradient(402.23% 104.99% at 25.21% 86.57%, #DBD5FF 0%, #ECE8FA 100%);
}

/* ==========================================================================
   Background image (renders over CSS gradient, below content)
   ========================================================================== */

/* Higher specificity than .layout-container > main img (0-1-2) to prevent height/max-width overrides */
.shtg-section-container img.shtg-section-container__bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  pointer-events: none;
  z-index: 0;
  object-position: var(--bg-pos-desktop, center);
}

.shtg-section-container__bg-image--cover {
  object-fit: cover;
}

.shtg-section-container__bg-image--contain {
  object-fit: contain;
}

.shtg-section-container__bg-image--none {
  object-fit: none;
}

@media (max-width: 991px) {
  .shtg-section-container img.shtg-section-container__bg-image {
    object-position: var(--bg-pos-mobile, var(--bg-pos-desktop, center));
  }
}

/* Desktop image hidden on mobile when a mobile image is also provided */
.shtg-section-container__bg-image--mobile {
  display: none;
}

@media (max-width: 991px) {
  .shtg-section-container--has-bg-image .shtg-section-container__bg-image--desktop {
    display: none;
  }

  .shtg-section-container__bg-image--mobile {
    display: block;
  }
}

/* ==========================================================================
   Inner container (sits above background image via z-index)
   ========================================================================== */

.shtg-section-container__inner {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 0 24px;
}

/* Width variants */
.shtg-section-container__inner--extra-narrow {
  max-width: calc(746px + 48px);
}

.shtg-section-container__inner--narrow {
  max-width: calc(940px + 48px);
}

.shtg-section-container__inner--standard {
  max-width: calc(var(--container-max-content-width, 1011px) + 48px);
}

.shtg-section-container__inner--medium-wide {
  max-width: calc(1140px + 48px);
}

.shtg-section-container__inner--wide {
  max-width: calc(1336px + 48px);
}

.shtg-section-container__inner--full {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Nested section containers strip inner padding to avoid double-guttering */
.shtg-section-container .shtg-section-container .shtg-section-container__inner {
  padding-left: 0;
  padding-right: 0;
}

/* Canvas WYSIWYG phone links inside section content */
.layout-container .shtg-section-container a.shtg-section-container__inner__tel,
.layout-container .shtg-section-container a.shtg-section-container__inner__tel:visited {
  color: #444444;
  text-decoration-color: #444444;
}

.layout-container .shtg-section-container a.shtg-section-container__inner__tel:hover,
.layout-container .shtg-section-container a.shtg-section-container__inner__tel:focus {
  color: #444444;
}

.layout-container .shtg-section-container a.shtg-section-container__signedup__tel,
.layout-container .shtg-section-container a.shtg-section-container__signedup__tel:visited {
  color: #ffffff;
  text-decoration-color: #ffffff;
}

.layout-container .shtg-section-container a.shtg-section-container__signedup__tel:hover,
.layout-container .shtg-section-container a.shtg-section-container__signedup__tel:focus {
  color: #ffffff;
}

/* ==========================================================================
   Vertical padding variants
   ========================================================================== */

.shtg-section-container--pt-none {
  padding-top: 0;
}

.shtg-section-container--pt-small {
  padding-top: 24px;
}

.shtg-section-container--pt-large {
  padding-top: 90px;
}

.shtg-section-container--pb-none {
  padding-bottom: 0;
}

.shtg-section-container--pb-small {
  padding-bottom: 24px;
}

.shtg-section-container--pb-large {
  padding-bottom: 90px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991px) {
  .shtg-section-container {
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .shtg-section-container--pt-small {
    padding-top: 16px;
  }

  .shtg-section-container--pt-large {
    padding-top: 48px;
  }

  .shtg-section-container--pb-small {
    padding-bottom: 16px;
  }

  .shtg-section-container--pb-large {
    padding-bottom: 48px;
  }
  
  .shtg-section-container--pt-none {
    padding-top: 0px;
  }

  .shtg-section-container--pb-none {
    padding-bottom: 0px;
  }

  .shtg-section-container__inner {
    padding: 0;
  }

  .shtg-section-container__inner--full {
    padding-left: 0;
    padding-right: 0;
  }
}