/* Numbered Card Grid */

.ncg {
  --ncg-cols: 3;
  --ncg-gap: 16px;
  --ncg-accent: #F7931E;
  --ncg-text: #211A21;
  --ncg-muted: #58504E;
  --ncg-border: #E4E0DF;
  --ncg-card-bg: #FFFFFF;
  --ncg-highlight-bg: #F7931E;
  --ncg-highlight-text: #211A21;
  --ncg-link-hover: #F26522;
  --ncg-duration: 700ms;
  --ncg-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color: var(--ncg-text);
  padding: var(--fs-section-spacing, 80px) 0;
}

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

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

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

/* Layout */

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

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

@media (min-width: 1024px) {
  .ncg__grid {
    grid-template-columns: repeat(var(--ncg-cols), minmax(0, 1fr));
  }
  .ncg__intro {
    grid-column: auto;
    padding: 4px 40px 0 0;
  }
  .ncg__card {
    min-height: 340px;
  }
}

/* Intro */

.ncg__intro {
  padding: 0 0 24px;
}

.ncg__title {
  font-family: var(--fs-heading-font);
  margin: 0 0 0.85em;
  font-size: clamp(calc(var(--fs-h2-size) * 0.6), 5vw, var(--fs-h2-size));
  font-weight: var(--fs-h2-weight);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ncg-text);
}

.ncg__lead {
  margin: 0 0 1.5rem;
  font-size: var(--fs-body-size);
  line-height: 1.65;
  color: var(--ncg-muted);
}

.ncg__lead p {
  margin: 0 0 1em;
}

.ncg__lead p:last-child {
  margin-bottom: 0;
}

.ncg__link {
  display: inline-block;
  padding-bottom: 2px;
  font-size: var(--fs-body-size);
  color: var(--ncg-text);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color 200ms ease;
}

.ncg__link:hover,
.ncg__link:focus-visible {
  color: var(--ncg-link-hover);
}

/* Cards */

.ncg__card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 36px);
  background: var(--ncg-card-bg);
  border: 1px solid var(--ncg-border);
}

.ncg__num {
  font-family: var(--fs-heading-font);
  display: block;
  margin-bottom: 26px;
  font-size: clamp(calc(var(--fs-h2-size) * 0.73), 4vw, calc(var(--fs-h2-size) * 0.93));
  font-weight: var(--fs-h2-weight);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ncg-accent);
}

.ncg__card-title {
  font-family: var(--fs-heading-font);
  margin: 0 0 14px;
  font-size: clamp(calc(var(--fs-h3-size) * 0.86), 2.2vw, var(--fs-h3-size));
  font-weight: var(--fs-h3-weight);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: inherit;
}

.ncg__card-text {
  margin: 0;
  font-size: var(--fs-body-size);
  line-height: 1.6;
}

.ncg__card-foot {
  margin-top: auto;
  padding-top: 32px;
}

/* Line up the footers (and their rules) across each row: every item spans
   two rows, and each card shares those rows through subgrid, so the tallest
   body in a row sets where all the footers start. Browsers without subgrid
   keep the flex layout above, with footers pushed to the card bottom. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .ncg__item {
      grid-row: span 2;
    }

    .ncg__card {
      display: grid;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    .ncg__card-foot {
      margin-top: 0;
    }
  }

  @media (min-width: 1024px) {
    /* min-height moves to the body so spare height sits above the rule */
    .ncg__card {
      min-height: 0;
    }

    .ncg__card-body {
      min-height: 190px;
    }
  }
}

.ncg__rule {
  display: block;
  height: 1px;
  margin-bottom: 18px;
  background: var(--ncg-border);
  transform-origin: left center;
}

.ncg__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small-size);
  line-height: 1.3;
  color: var(--ncg-muted);
}

.ncg__tag {
  margin: 0;
  padding: 4px 10px;
  border: 1px solid var(--ncg-border);
  border-radius: 999px;
  transition: border-color 300ms ease;
}

.ncg__note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  font-size: var(--fs-small-size);
  font-weight: 700;
  line-height: 1.4;
}

.ncg__note-icon {
  flex: none;
}

/* Highlight: orange fill that sweeps up from the bottom.
   Applied on hover/focus (.ncg--hover) or permanently (.ncg__card--highlight). */

.ncg__card {
  --ncg-hover-speed: 450ms;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    translate var(--ncg-hover-speed) var(--ncg-ease),
    box-shadow var(--ncg-hover-speed) var(--ncg-ease),
    border-color var(--ncg-hover-speed) var(--ncg-ease),
    color 300ms ease;
}

.ncg__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ncg-highlight-bg);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 550ms var(--ncg-ease);
}

.ncg__num {
  transition: color 300ms ease, translate var(--ncg-hover-speed) var(--ncg-ease);
}

.ncg__meta,
.ncg__rule {
  transition: color 300ms ease, background-color 300ms ease;
}

/* Highlighted state (shared by hover, focus and "always highlighted") */
.ncg__card--highlight,
.ncg--hover .ncg__card:focus-within {
  border-color: var(--ncg-highlight-bg);
  color: var(--ncg-highlight-text);
}

.ncg__card--highlight::before,
.ncg--hover .ncg__card:focus-within::before {
  transform: scaleY(1);
}

.ncg__card--highlight .ncg__num,
.ncg__card--highlight .ncg__meta,
.ncg--hover .ncg__card:focus-within .ncg__num,
.ncg--hover .ncg__card:focus-within .ncg__meta {
  color: var(--ncg-highlight-text);
}

.ncg__card--highlight .ncg__rule,
.ncg--hover .ncg__card:focus-within .ncg__rule {
  background-color: rgba(33, 26, 33, 0.22);
  background-color: color-mix(in srgb, var(--ncg-highlight-text) 22%, transparent);
}

.ncg__card--highlight .ncg__tag,
.ncg--hover .ncg__card:focus-within .ncg__tag {
  border-color: rgba(33, 26, 33, 0.35);
  border-color: color-mix(in srgb, var(--ncg-highlight-text) 35%, transparent);
}

/* Mouse hover only, so touch screens don't get a stuck highlight */
@media (hover: hover) and (pointer: fine) {
  .ncg--hover .ncg__card:hover {
    border-color: var(--ncg-highlight-bg);
    color: var(--ncg-highlight-text);
    translate: 0 -6px;
    box-shadow: 0 22px 40px -22px rgba(33, 26, 33, 0.45);
  }

  .ncg--hover .ncg__card:hover::before {
    transform: scaleY(1);
  }

  .ncg--hover .ncg__card:hover .ncg__num {
    color: var(--ncg-highlight-text);
    translate: 6px 0;
  }

  .ncg--hover .ncg__card:hover .ncg__meta {
    color: var(--ncg-highlight-text);
  }

  .ncg--hover .ncg__card:hover .ncg__rule {
    background-color: rgba(33, 26, 33, 0.22);
  background-color: color-mix(in srgb, var(--ncg-highlight-text) 22%, transparent);
  }

  .ncg--hover .ncg__card:hover .ncg__tag {
    border-color: rgba(33, 26, 33, 0.35);
    border-color: color-mix(in srgb, var(--ncg-highlight-text) 35%, transparent);
  }
}

/* Optional whole-card link */
.ncg__card-link {
  color: inherit;
  text-decoration: none;
}

.ncg__card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ncg__card-link:focus-visible {
  outline: none;
}

.ncg__card--linked:has(.ncg__card-link:focus-visible) {
  outline: 2px solid var(--ncg-text);
  outline-offset: 3px;
}

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

.ncg--anim .ncg__item {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity var(--ncg-duration) var(--ncg-ease) var(--ncg-delay, 0ms),
    transform var(--ncg-duration) var(--ncg-ease) var(--ncg-delay, 0ms);
  will-change: opacity, transform;
}

.ncg--anim[data-ncg-effect="fade"] .ncg__item {
  transform: none;
}

.ncg--anim[data-ncg-effect="zoom"] .ncg__item {
  transform: scale(0.95);
}

.ncg--anim .ncg__item.is-visible {
  opacity: 1;
  transform: none;
}

/* Cards: keep the scroll reveal (with its stagger delay) and the
   hover transitions (no delay) running side by side */
.ncg--anim .ncg__card {
  transition:
    opacity var(--ncg-duration) var(--ncg-ease) var(--ncg-delay, 0ms),
    transform var(--ncg-duration) var(--ncg-ease) var(--ncg-delay, 0ms),
    translate var(--ncg-hover-speed) var(--ncg-ease),
    box-shadow var(--ncg-hover-speed) var(--ncg-ease),
    border-color var(--ncg-hover-speed) var(--ncg-ease),
    color 300ms ease;
}

/* Divider draws in just after its card lands */
.ncg--anim .ncg__rule {
  transform: scaleX(0);
  transition:
    transform calc(var(--ncg-duration) + 300ms) var(--ncg-ease)
      calc(var(--ncg-delay, 0ms) + var(--ncg-duration) * 0.4),
    background-color 300ms ease;
}

.ncg--anim .is-visible .ncg__rule {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .ncg--anim .ncg__item,
  .ncg--anim .ncg__rule {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Hover keeps the colour change but drops the movement */
  .ncg .ncg__card,
  .ncg .ncg__num {
    translate: none !important;
  }

  .ncg .ncg__card::before {
    transition: none;
  }
}