/**
 * SecureClimate editorial sections: flexible-content layouts, features and
 * superfeatures, calls to action, explore lists. Loaded only on singular
 * types that can hold them.
 *
 * Callout tones map Drupal's palette names onto brand tokens (see
 * inc/sections.php). Text colors follow the Launch Kit pairing rules:
 * white text only on Deep ink, Clear blue or Action green; Deep ink text on
 * Fresh mint and Cloud.
 *
 * @package HelloElementorChild
 */

.sc-section {
  margin-top: var(--sc-space-8);
}

.sc-section--first {
  margin-top: 0;
}

.sc-section--compact {
  margin-top: var(--sc-space-6);
}

.sc-section__intro {
  max-width: var(--sc-reading-width);
  margin: 0 0 var(--sc-space-5);
  font-size: var(--sc-text-body-lg-size);
  color: var(--sc-color-muted-ink);
}

/* ==========================================================================
   Feature / superfeature
   ========================================================================== */

.sc-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sc-space-5);
  align-items: center;
}

.sc-feature__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--sc-radius-md);
  background-color: var(--sc-color-cloud);
}

.sc-feature__label {
  margin: 0 0 var(--sc-space-2);
  color: var(--sc-color-action-green);
}

.sc-main .sc-feature__title {
  margin: 0 0 var(--sc-space-3);
  font-size: var(--sc-text-h3-size-desktop);
  line-height: var(--sc-text-h3-line-height);
}

.sc-feature__teaser {
  margin: 0 0 var(--sc-space-4);
  font-size: var(--sc-text-body-lg-size);
  line-height: var(--sc-text-body-lg-line-height);
}

.sc-feature__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--sc-control-height);
  font-weight: var(--sc-font-weight-semibold);
}

.sc-feature--super {
  padding: var(--sc-space-6);
  border-radius: var(--sc-radius-md);
  background-color: var(--sc-color-cloud);
}

.sc-main .sc-feature--super .sc-feature__title {
  font-size: var(--sc-text-h2-size-desktop);
  line-height: var(--sc-text-h2-line-height);
}

.sc-feature-stack {
  display: grid;
  gap: var(--sc-space-7);
}

/* ==========================================================================
   Call to action (basic / dual callout, cta group)
   ========================================================================== */

.sc-cta {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-4);
  padding: var(--sc-space-6);
  border-radius: var(--sc-radius-md);
  background-color: var(--sc-color-cloud);
  color: var(--sc-color-deep-ink);
}

.sc-cta--center {
  align-items: center;
  text-align: center;
}

.sc-main .sc-cta__title {
  margin: 0;
  font-size: var(--sc-text-h3-size-desktop);
  line-height: var(--sc-text-h3-line-height);
  color: inherit;
}

.sc-cta__teaser {
  max-width: var(--sc-reading-width);
  margin: var(--sc-space-2) 0 0;
}

.sc-cta__button,
.sc-cta__button:hover,
.sc-cta__button:focus {
  background-color: var(--sc-color-action-green);
  border-color: var(--sc-color-action-green);
  color: var(--sc-color-white);
}

.sc-cta--mint {
  background-color: var(--sc-color-fresh-mint);
}

.sc-cta--ink,
.sc-cta--blue,
.sc-cta--green {
  color: var(--sc-color-white);
}

.sc-cta--ink {
  background-color: var(--sc-color-deep-ink);
}

.sc-cta--blue {
  background-color: var(--sc-color-clear-blue);
}

.sc-cta--green {
  background-color: var(--sc-color-action-green);
}

/* On dark tones the button inverts, and focus uses white (Action green on
   Deep ink is only 2.26:1 - same rule as the footer). */
.sc-cta--ink .sc-cta__button,
.sc-cta--blue .sc-cta__button,
.sc-cta--green .sc-cta__button,
.sc-cta--ink .sc-cta__button:hover,
.sc-cta--blue .sc-cta__button:hover,
.sc-cta--green .sc-cta__button:hover {
  background-color: var(--sc-color-white);
  border-color: var(--sc-color-white);
  color: var(--sc-color-deep-ink);
}

.sc-main .sc-cta--ink .sc-cta__button:focus-visible,
.sc-main .sc-cta--blue .sc-cta__button:focus-visible,
.sc-main .sc-cta--green .sc-cta__button:focus-visible {
  outline-color: var(--sc-color-white);
}

.sc-cta-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sc-space-5);
}

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

@media (min-width: 768px) {
  .sc-feature {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sc-space-7);
  }

  .sc-feature--right .sc-feature__media {
    order: 2;
  }

  .sc-feature--smaller {
    grid-template-columns: 2fr 3fr;
  }

  .sc-feature--smaller.sc-feature--right {
    grid-template-columns: 3fr 2fr;
  }

  .sc-feature--no-media {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-cta--side {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .sc-cta-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sc-cta-pair .sc-cta--side {
    flex-direction: column;
    align-items: flex-start;
  }

}

@media (max-width: 1023px) {
  .sc-main .sc-feature__title,
  .sc-main .sc-cta__title {
    font-size: var(--sc-text-h3-size-tablet);
  }

  .sc-main .sc-feature--super .sc-feature__title {
    font-size: var(--sc-text-h2-size-tablet);
  }
}

@media (max-width: 767px) {
  .sc-section {
    margin-top: var(--sc-space-7);
  }

  .sc-feature--super,
  .sc-cta {
    padding: var(--sc-space-5);
  }

  .sc-main .sc-feature__title,
  .sc-main .sc-cta__title {
    font-size: var(--sc-text-h3-size-mobile);
  }

  .sc-main .sc-feature--super .sc-feature__title {
    font-size: var(--sc-text-h2-size-mobile);
  }

}