/* Sector Cards
   Width, side gutter and vertical padding follow the theme Spacing settings
   via --fs-container-width / --fs-inner-width / --fs-side-gutter /
   --fs-section-spacing (set in theme-overrides.css), matching Moment Cards. */

.sc {
  --sc-bg: #FFFFFF;
  --sc-text: #211A21;
  --sc-accent: #F7931E;
  --sc-hover: #F26522;
  --sc-divider: #B0AAA8;
  --sc-gap: 24px;
  --sc-pad-x: clamp(24px, 2.6vw, 28px);
  --sc-icon-on-accent: #FFFFFF;
  --sc-shadow-hover: 0 30px 60px -34px rgba(33, 26, 33, .32), 0 2px 10px rgba(33, 26, 33, .04);
  --sc-ease: cubic-bezier(.22, .61, .36, 1);
  --sc-hover-ease: cubic-bezier(.22, 1, .36, 1);

  background: var(--sc-bg);
  color: var(--sc-text);
  padding: var(--fs-section-spacing, 80px) 0;
}

.sc--bordered {
  border-bottom: 1px solid var(--sc-section-border, #B0AAA8);
}

.sc--dark {
  --sc-bg: #211A21;
  --sc-text: #FFFFFF;
  --sc-divider: rgba(176, 170, 168, .35);
  --sc-shadow-hover: 0 30px 60px -30px rgba(0, 0, 0, .6);
}

/* Same box as the theme's .content-wrapper: content area is exactly the
   "Maximum content width" setting, with the side gutter sitting outside it. */
.sc__inner {
  width: 100%;
  max-width: calc(var(--fs-container-width, 1240px) + (var(--fs-side-gutter, 16px) * 2));
  margin: 0 auto;
  padding: 0 var(--fs-side-gutter, 16px);
}

/* Theme settings > Spacing > Inner content width */
.sc--inner .sc__inner {
  max-width: calc(var(--fs-inner-width, 1040px) + (var(--fs-side-gutter, 16px) * 2));
}

.sc *,
.sc *::before,
.sc *::after {
  box-sizing: border-box;
}

.sc__heading {
  max-width: 14em;
  margin: 0 0 clamp(40px, 5vw, 56px);
  font-family: var(--fs-heading-font);
  font-size: clamp(calc(var(--fs-h2-size) * 0.6), 5.4vw, var(--fs-h2-size));
  font-weight: var(--fs-h2-weight);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--sc-text);
}

/* Grid */

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

@media (min-width: 768px) {
  .sc__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .sc__grid {
    grid-template-columns: repeat(var(--sc-cols, 3), minmax(0, 1fr));
  }
}

/* Cards
   Each card spans three subgrid rows (icon + title, description, footer) so
   the descriptions start at the same height and the footer dividers line up
   across a row, however long the titles and descriptions are. */

.sc__card {
  display: flex;
  flex-direction: column;
  background: var(--sc-bg);
  border: 1px solid var(--sc-divider);
  border-top: 4px solid var(--sc-accent);
  transition:
    translate .5s var(--sc-hover-ease),
    box-shadow .5s var(--sc-hover-ease);
}

@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .sc__card {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    .sc__main {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
  }
}

.sc__main {
  flex: 1 1 auto;
  padding: clamp(32px, 3.4vw, 40px) var(--sc-pad-x) clamp(32px, 3.4vw, 40px);
}

/* Icon tile above the title */
.sc__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  color: var(--sc-hover);
  transition:
    background-color .35s var(--sc-hover-ease),
    border-color .35s var(--sc-hover-ease),
    color .35s var(--sc-hover-ease);
}

.sc__icon svg,
.sc__icon img {
  display: block;
  width: 48px;
  height: 48px;
  transition: scale .5s var(--sc-hover-ease);
}

.sc__icon img {
  object-fit: contain;
}

.sc__title {
  margin: 0 0 clamp(24px, 3vw, 48px);
  font-family: var(--fs-heading-font);
  font-size: clamp(calc(var(--fs-h3-size) * 0.8), 2.6vw, var(--fs-h3-size));
  font-weight: var(--fs-h3-weight);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--sc-text);
}

.sc__text {
  font-family: var(--fs-body-font);
  font-size: var(--fs-small-size);
  line-height: var(--fs-body-line-height, 1.7);
}

/* .sc__text p {
  margin: 0 0 1em;
  font-size: inherit;
  line-height: inherit;
} */

.sc__text > :last-child {
  margin-bottom: 0;
}

.sc__text a,
.sc__stage-text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--sc-accent);
  text-underline-offset: 3px;
}

.sc__text a:hover,
.sc__text a:focus-visible,
.sc__stage-text a:hover,
.sc__stage-text a:focus-visible {
  color: var(--sc-hover);
}

/* Footer */

.sc__foot {
  padding: 28px var(--sc-pad-x) 32px;
  border-top: 1px solid var(--sc-divider);
}

.sc__foot-heading {
  margin: 0 0 16px;
  font-family: var(--fs-body-font);
  font-size: var(--fs-eyebrow-size);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sc-text);
  opacity: .75;
}

.sc__stages {
  margin: 0;
}

.sc__stage + .sc__stage {
  margin-top: 12px;
}

.sc__stage-name {
  margin: 0 0 2px;
  font-family: var(--fs-body-font);
  font-size: var(--fs-eyebrow-size);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-hover);
}

.sc__stage-text {
  margin: 0;
  font-family: var(--fs-body-font);
  font-size: var(--fs-small-size);
  line-height: 1.5;
}

/* Hover: card lifts and the icon tile fills with the accent.
   Uses `translate` rather than `transform` so it doesn't fight the scroll
   reveal. Mouse only, so touch screens don't get a stuck lift. */

@media (hover: hover) and (pointer: fine) {
  .sc--hover .sc__card:hover {
    translate: 0 -6px;
    box-shadow: var(--sc-shadow-hover);
  }

  .sc--hover .sc__card:hover .sc__icon {
    background-color: var(--sc-accent);
    border-color: var(--sc-accent);
    color: var(--sc-icon-on-accent);
  }

  /* Custom images keep their own colours, so only the border changes */
  .sc--hover .sc__card:hover .sc__icon--img {
    background-color: transparent;
  }

  .sc--hover .sc__card:hover .sc__icon svg,
  .sc--hover .sc__card:hover .sc__icon img {
    scale: 1.1;
  }
}

/* Scroll animation
   .is-animated is printed server-side so nothing flashes before the JS loads.
   The JS adds .is-visible to each item as it enters the viewport. */

.sc.is-animated .sc__reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 700ms var(--sc-ease) var(--sc-delay, 0ms),
    transform 700ms var(--sc-ease) var(--sc-delay, 0ms),
    translate .5s var(--sc-hover-ease),
    box-shadow .5s var(--sc-hover-ease);
}

.sc.is-animated .sc__reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .sc.is-animated .sc__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Keep the colour change on hover, drop the movement */
  .sc--hover .sc__card:hover,
  .sc--hover .sc__card:hover .sc__icon svg,
  .sc--hover .sc__card:hover .sc__icon img {
    translate: none;
    scale: none;
  }
}