/* Moment 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 Engagement Stages. */

.mc {
  --mc-bg: #FFFFFF;
  --mc-text: #211A21;
  --mc-accent: #F7931E;
  --mc-hover: #F26522;
  --mc-divider: #B0AAA8;
  --mc-badge-text: #FFFFFF;
  --mc-gap: 16px;
  --mc-ease: cubic-bezier(.22, .61, .36, 1);

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

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

.mc--dark {
  --mc-bg: #211A21;
  --mc-text: #FFFFFF;
  --mc-divider: rgba(176, 170, 168, .35);
}

/* Same box as the theme's .content-wrapper: content area is exactly the
   "Maximum content width" setting, with the side gutter sitting outside it. */
.mc__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 */
.mc--inner .mc__inner {
  max-width: calc(var(--fs-inner-width, 1040px) + (var(--fs-side-gutter, 16px) * 2));
}

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

/* Heading row */

.mc__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin: 0 0 clamp(40px, 5vw, 56px);
}

.mc__heading {
  max-width: 11em;
  margin: 0;
  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(--mc-text);
}

/* Sits roughly level with the last line of the heading */
.mc__rule {
  flex: none;
  width: clamp(64px, 11vw, 120px);
  height: 8px;
  margin-bottom: 0.9em;
  background: linear-gradient(90deg, var(--mc-accent), var(--mc-hover));
  transform-origin: right center;
}

/* Cards */

.mc__grid {
  display: grid;
  grid-template-columns: repeat(var(--mc-cols-mobile, 1), minmax(0, 1fr));
  gap: var(--mc-gap);
}

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

@media (min-width: 1024px) {
  .mc__grid {
    grid-template-columns: repeat(var(--mc-cols, 4), minmax(0, 1fr));
  }
  .mc__card {
    /* min-height: 420px; */
  }
}

.mc__card {
  display: flex;
  flex-direction: column;
  padding: 32px 24px;
  border: 1px solid var(--mc-divider);
}

/* Badge, title and text share row tracks across the cards in a row, so every
   .mc__text starts at the same height however many lines a title wraps to. */
@supports (grid-template-rows: subgrid) {
  .mc__card {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
  }
  .mc__num { grid-row: 1; justify-self: start; }
  .mc__title { grid-row: 2; }
  .mc__text { grid-row: 3; }
}

.mc__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  margin-bottom: 26px;
  font-family: var(--fs-heading-font);
  font-size: var(--fs-small-size);
  font-weight: var(--fs-h3-weight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--mc-badge-text);
  background: var(--mc-accent);
}

.mc__title {
  margin: 0 0 22px;
  font-family: var(--fs-heading-font);
  font-size: var(--fs-lead-size);
  font-weight: var(--fs-h3-weight);
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mc-text);
}

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

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

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

.mc__text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--mc-accent);
  text-underline-offset: 3px;
}

.mc__text a:hover,
.mc__text a:focus-visible {
  color: var(--mc-hover);
}

@media (max-width: 599px) {
  .mc__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .mc__rule {
    order: -1;
    margin-bottom: 0;
    transform-origin: left center;
  }
}

/* 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. */

.mc.is-animated .mc__reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 700ms var(--mc-ease) var(--mc-delay, 0ms),
    transform 700ms var(--mc-ease) var(--mc-delay, 0ms);
}

.mc.is-animated .mc__reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Rule draws in once the heading has landed */
.mc.is-animated .mc__rule {
  transform: scaleX(0);
  transition: transform 900ms var(--mc-ease) 350ms;
}

.mc.is-animated .is-visible .mc__rule {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .mc.is-animated .mc__reveal,
  .mc.is-animated .mc__rule {
    opacity: 1;
    transform: none;
    transition: none;
  }
}