/* Hallmark · macrostructure: Map / Diagram · tone: technical · anchor hue: blue-mint
 * genre: modern-minimal · theme: studied-DNA (source: https://aizoth.com/) · enrichment: supplied product illustration
 * pre-emit critique: P5 H5 E5 S5 R5 V5 · contrast: pass (40–41)
 * nav: preserved N1b · footer: preserved Ft1 · slop: pass (42–45)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30)
 * mobile: pass (34, 49, 50–57) · motion: restrained hover feedback
 * audience: manufacturing and R&D engineers · use: understand Multi-Sigma and start an evaluation
 */
@import url("./tokens.css");

.ms-sigma-hero .ms-product-hero__content h1 {
  font-size: clamp(var(--text-xl), 6vw, var(--text-3xl));
  max-width: none;
}

.ms-sigma-hero .ms-product-hero__content h1 .ms-title-unit {
  display: block;
  white-space: nowrap;
}

.ms-sigma-hero .ms-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.ms-product-hero__visual--sigma {
  align-items: center;
  background-color: var(--color-paper-soft);
  background-image: url("../IMG/bg_main.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  min-height: 24rem;
  padding: var(--space-lg);
}

.ms-product-hero__visual--sigma img {
  height: auto;
  max-height: 32rem;
  object-fit: contain;
  width: auto;
}

.ms-sigma-map {
  background: var(--color-surface);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-lg);
  padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
}

.ms-sigma-map__path {
  display: grid;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
}

.ms-sigma-map__path li {
  background: var(--color-paper-blue);
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-lg);
  position: relative;
}

.ms-sigma-map__path li:nth-child(even) {
  background: var(--color-brand-soft);
}

.ms-sigma-map__path li:not(:last-child)::after {
  color: var(--color-accent-strong);
  content: "↓";
  font-family: var(--font-display);
  font-size: var(--text-lg);
  inset-block-end: calc(var(--space-lg) * -1);
  inset-inline-start: 50%;
  position: absolute;
  transform: translateX(-50%);
  z-index: 1;
}

.ms-sigma-map__path h3 {
  font-size: var(--text-md);
}

.ms-sigma-map__step {
  color: var(--color-accent-strong);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.ms-sigma-map .ms-note {
  max-width: none;
}

.ms-sigma-capabilities {
  border-block-start: var(--rule-thin) solid var(--color-graphite-ink);
  display: grid;
  margin: 0;
}

.ms-sigma-capabilities > div {
  border-block-end: var(--rule-thin) solid var(--color-graphite-soft);
  display: grid;
  gap: var(--space-sm);
  padding-block: var(--space-xl);
}

.ms-sigma-capabilities dt {
  color: var(--color-graphite-ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
}

.ms-sigma-capabilities dd {
  color: var(--color-graphite-ink);
  margin: 0;
  max-width: none;
}

.ms-sigma-scenes {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
}

.ms-sigma-scenes__list {
  background: var(--color-surface);
  display: grid;
  list-style: none;
  padding: 0;
}

.ms-sigma-scenes__list li {
  border-block-start: var(--rule-thin) solid var(--color-rule-strong);
  padding-block: var(--space-lg);
  padding-inline: var(--space-lg);
}

.ms-sigma-scenes__list li:last-child {
  border-block-end: var(--rule-thin) solid var(--color-rule-strong);
}

.ms-sigma-related {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
}

.ms-sigma-related article {
  background: var(--color-surface);
  border-block-start: var(--rule-strong) solid var(--color-accent);
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-lg);
}

.ms-sigma-related article:nth-child(2) {
  border-block-start-color: var(--color-brand-strong);
}

.ms-sigma-related p {
  color: var(--color-muted);
}

.ms-sigma-related h3 {
  color: var(--color-ink);
  font-size: var(--text-md);
  overflow-wrap: anywhere;
}

@media (min-width: 23rem) {
  .ms-sigma-hero .ms-action-row {
    grid-template-columns: repeat(2, max-content);
  }
}
@media (min-width: 40rem) {
  .ms-sigma-map__path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ms-sigma-map__path li:not(:last-child)::after {
    content: none;
  }

  .ms-sigma-capabilities > div {
    grid-template-columns: minmax(10rem, 0.72fr) minmax(0, 1.28fr);
  }

  .ms-sigma-related {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
}

@media (min-width: 60rem) {
  .ms-spec-list > div,
  .ms-sigma-capabilities > div {
    grid-template-columns: minmax(8rem, 0.32fr) minmax(0, 1.68fr);
  }

  .ms-sigma-map__path {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ms-sigma-map__path li:not(:last-child)::after {
    content: "→";
    inset-block-end: auto;
    inset-block-start: 50%;
    inset-inline-end: calc(var(--space-lg) * -1);
    inset-inline-start: auto;
    transform: translateY(-50%);
  }

  .ms-sigma-scenes {
    align-items: start;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .ms-sigma-scenes .ms-section-head {
    margin-block-end: 0;
  }
}