/*-- -------------------------- -->
<---       Belief Statement      -->
<--- -------------------------- -*/

/* Full-bleed solid-colour band, everything centred in a narrow column.
   Background/text colour are exposed as CSS custom properties
   (--cs-belief-bg / --cs-belief-fg) rather than hardcoded, so this
   section can be dropped onto a different brand colour per page/client
   just by setting those two values -- see the inline style on
   #belief-statement in index.html. Defaults to the site's --secondary
   ink with white text if neither is set. */
@media only screen and (min-width: 0rem) {
  #belief-statement {
    width: 100%;
    padding: 3.5rem 1.5rem;
    background-color: var(--cs-belief-bg, var(--secondary));
    background-image: url("../images/NEWDARKBACKGROUND.svg");
    background-size: cover;
    background-position: center;
    color: var(--cs-belief-fg, #fff);
    text-align: center;
  }
  #belief-statement .cs-container {
    width: 100%;
    max-width: 43.75rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #belief-statement .cs-belief-icon {
    width: 3rem;
    height: 3rem;
    color: #fff;
    margin: 0 0 1.5rem;
    animation: cs-belief-icon-spin 6s linear infinite;
  }
  @keyframes cs-belief-icon-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    #belief-statement .cs-belief-icon {
      animation: none;
    }
  }
  #belief-statement .cs-belief-title {
    font-family: var(--headingFont);
    font-weight: 500;
    font-size: 2rem;
    line-height: 1.25em;
    margin: 0 0 1.5rem;
    color: inherit;
  }
  #belief-statement .cs-belief-text {
    font-family: var(--bodyFont);
    font-size: 1.0625rem;
    line-height: 1.65em;
    margin: 0;
    color: inherit;
    opacity: 0.92;
  }
  #belief-statement .cs-belief-text em {
    font-style: italic;
    opacity: 1;
  }

  /* Optional 3-column sub-grid of short supporting phrases -- stacked
     on mobile */
  #belief-statement .cs-belief-grid {
    width: 100%;
    max-width: 34rem;
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  #belief-statement .cs-belief-grid-item {
    font-family: var(--bodyFont);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: inherit;
    opacity: 0.85;
  }

  /* Optional single pill CTA -- inverted against whichever colour the
     section is currently set to, so it always reads as a solid button
     rather than disappearing into the background */
  #belief-statement .cs-belief-cta {
    margin-top: 2.5rem;
    background-color: var(--cs-belief-fg, #fff);
    color: var(--cs-belief-bg, var(--secondary));
  }
  #belief-statement .cs-belief-cta:before {
    background: var(--cs-belief-fg, #fff);
    opacity: 0.85;
  }
  #belief-statement .cs-belief-cta:hover {
    color: var(--cs-belief-bg, var(--secondary));
  }
}

/* Tablet - 48rem: sub-grid becomes a real 3-column row */
@media only screen and (min-width: 48rem) {
  #belief-statement .cs-belief-grid {
    flex-direction: row;
    justify-content: center;
    gap: 2.5rem;
  }
}

/* Desktop - 64rem: a little more breathing room top/bottom */
@media only screen and (min-width: 64rem) {
  #belief-statement {
    padding: 4.5rem 1.5rem;
  }
}