/* Whole System Columns
   Typography follows the theme via --fs-heading-font and the heading/body
   size tokens. Width, side gutter and vertical padding follow the theme
   Spacing settings via --fs-container-width / --fs-side-gutter /
   --fs-section-spacing (set in theme-overrides.css). */

.wsys {
  --wsys-bg: #211A21;
  --wsys-text: #FFFFFF;
  --wsys-muted: #B0AAA8;
  --wsys-accent: #F7931E;
  --wsys-divider: rgba(176, 170, 168, .35);
  --wsys-col-pad: clamp(18px, 2vw, 24px);
  --wsys-ease: cubic-bezier(.22, .61, .36, 1);

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

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

.wsys--light {
  --wsys-bg: #FFFFFF;
  --wsys-text: #211A21;
  --wsys-muted: rgba(33, 26, 33, .72);
  --wsys-divider: rgba(176, 170, 168, .6);
}

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

/* Same box as the theme's .content-wrapper: content area is exactly the
   "Maximum content width" setting, with the side gutter sitting outside it. */
.wsys__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);
}

/* Header: heading left, intro right */

.wsys__head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 32px clamp(40px, 8vw, 120px);
  align-items: start;
  margin-bottom: clamp(48px, 6vw, 64px);
}

.wsys__heading {
  max-width: 9.5em;
  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.02;
  letter-spacing: -0.025em;
  color: var(--wsys-text);
}

.wsys__dot { color: var(--wsys-accent); }

.wsys__intro {
  max-width: 24em;
  padding-top: .6em;
  font-size: var(--fs-lead-size);
  line-height: 1.6;
  color: var(--wsys-muted);
}

.wsys__intro p { margin: 0; }
.wsys__intro p + p { margin-top: .75em; }

/* Columns: each carries its own left rule so wrapped rows stay tidy */

.wsys__grid {
  display: grid;
  --wsys-row-gap: 40px;
  grid-template-columns: repeat(var(--wsys-cols, 5), minmax(0, 1fr));
  row-gap: var(--wsys-row-gap);
}

.wsys__col {
  position: relative;
  padding: 2px var(--wsys-col-pad) 12px;
}

/* Shared rows (marker, tags, title, body) so titles line up across a row
   even when only some columns have tags or a longer eyebrow. Rows a column
   leaves empty collapse to nothing. */
@supports (grid-template-rows: subgrid) {
  .wsys .wsys__grid {
    row-gap: 0;
    margin-bottom: calc(var(--wsys-row-gap) * -1);
  }

  .wsys__col {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
    margin-bottom: var(--wsys-row-gap);
  }

  .wsys__col > .wsys__num,
  .wsys__col > .wsys__eyebrow { grid-row: 1; }
  .wsys__col > .wsys__tags { grid-row: 2; align-self: start; }
  .wsys__col > .wsys__title { grid-row: 3; }
  .wsys__col > .wsys__body { grid-row: 4; }
}

.wsys__col::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--wsys-divider);
  transform-origin: top center;
}

/* Number sits in a mask so it can rise into place */

.wsys__num {
  display: block;
  overflow: hidden;
  margin-bottom: 18px;
  font-family: var(--fs-heading-font);
  font-size: clamp(calc(var(--fs-h3-size) * 1.05), 2.6vw, calc(var(--fs-h3-size) * 1.3));
  font-weight: var(--fs-h2-weight);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--wsys-accent);
}

.wsys__num-inner { display: block; }

/* Eyebrow: replaces the number when "Eyebrow text" is chosen */

.wsys__eyebrow {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .08em;
  /* text-transform: uppercase; */
  color: var(--wsys-muted);
}

/* Tags: small pills between the number and the title */

.wsys__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -4px 0 16px;
  padding: 0;
  list-style: none;
}

.wsys__tag {
  display: inline-block;
  margin: 0;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wsys__tag--accent {
  background: var(--wsys-accent);
  border-color: var(--wsys-accent);
  color: #211A21;
}

.wsys__tag--solid {
  background: var(--wsys-text);
  border-color: var(--wsys-text);
  color: var(--wsys-bg);
}

.wsys__tag--outline {
  background: transparent;
  border-color: var(--wsys-text);
  color: var(--wsys-text);
}

.wsys__title {
  margin: 0 0 16px;
  font-family: var(--fs-heading-font);
  font-size: clamp(calc(var(--fs-h4-size) * 0.95), 1.6vw, var(--fs-h4-size));
  font-weight: var(--fs-h3-weight);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--wsys-text);
}

.wsys__body {
  font-size: var(--fs-small-size);
  line-height: 1.65;
  color: var(--wsys-muted);
}

.wsys__body p { margin: 0; }
.wsys__body p + p { margin-top: .75em; }

.wsys__intro a,
.wsys__body a {
  color: inherit;
  text-decoration-color: var(--wsys-accent);
  text-underline-offset: 3px;
}

/* Tablet: three across */

@media (max-width: 1023px) {
  .wsys__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wsys--cols-2 .wsys__grid,
  .wsys--cols-4 .wsys__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile: intro drops under the heading, columns go two then one across */

@media (max-width: 767px) {
  .wsys__head { grid-template-columns: minmax(0, 1fr); }
  .wsys__intro { padding-top: 0; }
  .wsys__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); --wsys-row-gap: 32px; }
}

@media (max-width: 479px) {
  .wsys__grid { grid-template-columns: minmax(0, 1fr); }
  .wsys__col { padding-bottom: 4px; }
}

/* Scroll animation
   .is-animated is printed server-side (never in the editor), so content is
   hidden from first paint. The JS adds .is-visible to the heading, the intro
   and each column as they enter the viewport. */

.wsys.is-animated .wsys__heading,
.wsys.is-animated .wsys__intro {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .8s var(--wsys-ease), transform .8s var(--wsys-ease);
}

.wsys.is-animated .wsys__intro { transition-delay: .15s; }

.wsys.is-animated .wsys__col::before {
  transform: scaleY(0);
  transition: transform .9s var(--wsys-ease);
  transition-delay: calc(var(--i, 0) * .12s);
}

.wsys.is-animated .wsys__num-inner {
  transform: translate3d(0, 105%, 0);
  transition: transform .8s var(--wsys-ease);
  transition-delay: calc(.2s + var(--i, 0) * .12s);
}

.wsys.is-animated .wsys__col .wsys__reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .7s var(--wsys-ease), transform .7s var(--wsys-ease);
}

.wsys.is-animated .wsys__col .wsys__eyebrow { transition-delay: calc(.2s + var(--i, 0) * .12s); }
.wsys.is-animated .wsys__col .wsys__tags { transition-delay: calc(.26s + var(--i, 0) * .12s); }
.wsys.is-animated .wsys__col .wsys__title { transition-delay: calc(.32s + var(--i, 0) * .12s); }
.wsys.is-animated .wsys__col .wsys__body  { transition-delay: calc(.42s + var(--i, 0) * .12s); }

/* In view */

.wsys.is-animated .wsys__heading.is-visible,
.wsys.is-animated .wsys__intro.is-visible,
.wsys.is-animated .wsys__col.is-visible .wsys__reveal,
.wsys.is-animated .wsys__col.is-visible .wsys__num-inner {
  opacity: 1;
  transform: none;
}

.wsys.is-animated .wsys__col.is-visible::before { transform: none; }

/* Wrapped layouts: columns reveal row by row as they scroll in, so no long stagger */
@media (max-width: 767px) {
  .wsys.is-animated .wsys__col { --i: 0; }
  .wsys.is-animated .wsys__col:nth-child(even) { --i: 1; }
}

@media (max-width: 479px) {
  .wsys.is-animated .wsys__col:nth-child(even) { --i: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wsys.is-animated .wsys__heading,
  .wsys.is-animated .wsys__intro,
  .wsys.is-animated .wsys__col::before,
  .wsys.is-animated .wsys__num-inner,
  .wsys.is-animated .wsys__col .wsys__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}