/* =====================================================================
   SEGAL KEY OUTCOMES WIDGET  (.seg-ko)  —  v6 (hardened)
   ---------------------------------------------------------------------
   - Every selector is scoped under .seg-ko. Nothing global.
   - Layout comes from a count modifier on the root:
       .seg-ko--2 | .seg-ko--3 | .seg-ko--4 | .seg-ko--5
     (no modifier = single column)
   - Responsive via CONTAINER queries (widget width, not viewport), so it
     lays out correctly in full-width rows, narrow grid columns, AND the
     Umbraco back office grid preview.
   - Count-up hooks (wired in a later step):
       root   : [data-ko-animate]
       number : .seg-ko__num[data-ko-to]
                (+ optional data-ko-decimals, data-ko-separator)
     The final value is always rendered in the HTML so crawlers, no-JS,
     and screen readers get the real number.
   ===================================================================== */

.seg-ko {
  /* Brand tokens (scoped to the widget only) */
  --seg-ko-navy: #001c71;
  --seg-ko-teal: #1dcad3;
  --seg-ko-white: #ffffff;
  --seg-ko-text: rgba(255, 255, 255, 0.88);
  --seg-ko-muted: rgba(255, 255, 255, 0.70);
  --seg-ko-sans: aktiv-grotesk, sans-serif;
  --seg-ko-serif: linotype-sabon, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;

  /* Sizing tokens (adjusted by container queries below) */
  --seg-ko-pad-x: 22px;
  --seg-ko-num-size: 46px;

  container-type: inline-size;
  container-name: seg-ko;
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 40px;
  padding: 0;
  overflow: hidden;
  color: var(--seg-ko-white);
  background-color: var(--seg-ko-navy);
  background-image: linear-gradient(105deg, #001c71 0%, #00238a 55%, #0a3196 100%);
  font-family: var(--seg-ko-sans);
  font-size: 16px;
  line-height: 24px;
  text-align: left;
  text-transform: none;
}

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

/* Hard reset: the widget has NO borders anywhere. Beats global ul/li/p/h2/section rules. */
.seg-ko,
.seg-ko .seg-ko__header,
.seg-ko .seg-ko__body,
.seg-ko .seg-ko__grid,
.seg-ko .seg-ko__grid > li.seg-ko__item,
.seg-ko .seg-ko__stat,
.seg-ko .seg-ko__value,
.seg-ko .seg-ko__desc,
.seg-ko .seg-ko__footer,
.seg-ko .seg-ko__source {
  border: 0;
  box-shadow: none;
  outline: 0;
}

.seg-ko .seg-ko__grid > li.seg-ko__item::after,
.seg-ko .seg-ko__header h2.seg-ko__title::before,
.seg-ko .seg-ko__header h2.seg-ko__title::after {
  content: none;
  display: none;
}

/* ---------- Header ---------- */
.seg-ko .seg-ko__header {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 16px var(--seg-ko-pad-x);
}

/* Rendered as an h2 for document outline. Selector is deliberately specific
   (0,3,1) so global/theme h2 rules can't change size, color, or spacing. */
.seg-ko .seg-ko__header h2.seg-ko__title {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #ffffff;
  font-family: aktiv-grotesk, sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.02em;
  text-transform: none;
  text-align: left;
  text-shadow: none;
}

/* ---------- Grid ---------- */
.seg-ko .seg-ko__body {
  overflow: hidden;
}

.seg-ko .seg-ko__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.seg-ko .seg-ko__grid > li.seg-ko__item {
  position: relative;
  list-style: none;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 30px var(--seg-ko-pad-x) 26px;
}

/* Teal accent tab at the top of each outcome */
.seg-ko .seg-ko__grid > li.seg-ko__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--seg-ko-pad-x);
  width: 40px;
  height: 4px;
  background-color: var(--seg-ko-teal);
}

/* ---------- Stat (prefix + number + suffix) ---------- */
.seg-ko .seg-ko__item .seg-ko__stat {
  display: flex;
  padding: 0;
  align-items: flex-start;
  flex-wrap: nowrap;
  margin: 0 0 12px;
  color: var(--seg-ko-white);
  font-family: var(--seg-ko-serif);
  font-size: var(--seg-ko-num-size);
  line-height: 1;
  font-weight: 400;
  white-space: nowrap;
}

/* Visual value wrapper: keeps suffix top-aligned like the mockup */
.seg-ko .seg-ko__stat .seg-ko__value {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  line-height: 1;
}

.seg-ko .seg-ko__stat .seg-ko__prefix,
.seg-ko .seg-ko__stat .seg-ko__num {
  display: inline-block;
  position: static;
  align-self: flex-start;
  vertical-align: top;
  margin: 0;
  padding: 0;
  color: var(--seg-ko-white);
  font-size: 1em;
  line-height: 1;
  font-family: var(--seg-ko-serif);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Range separator (89–96): matches the number's type and top alignment */
.seg-ko .seg-ko__stat .seg-ko__value .seg-ko__range-sep {
  display: inline-block;
  position: static;
  align-self: flex-start;
  margin: 0 0.04em;
  padding: 0;
  color: var(--seg-ko-white);
  font-family: var(--seg-ko-serif);
  font-size: 1em;
  line-height: 1;
  font-weight: 400;
}

/* Outline star for stats with no number. The <p> keeps .seg-ko__stat,
   so it gets the same font-size, line-height: 1 and bottom margin as a
   number; the star is 1em tall = the height of a number. */

/* Stat area stays 1em tall (same as a number) so the descriptions align */
.seg-ko .seg-ko__item .seg-ko__stat.seg-ko__stat--star {
  /* Tuning knobs */
  --seg-ko-star-size: 0.85em;  /* ≈ Sabon numeral height */
  --seg-ko-star-nudge: -.1em;    /* + moves down, - moves up */
  display: flex;
  align-items: flex-start;
  height: 1em;
}

.seg-ko .seg-ko__stat--star .seg-ko__star {
  display: block;
  width: auto;
  height: var(--seg-ko-star-size);
  aspect-ratio: 168.6 / 146;
  margin: var(--seg-ko-star-nudge) 0 0;
  padding: 0;
  overflow: visible; /* keep the 2px stroke from clipping at the points */
}

.seg-ko .seg-ko__stat--star .seg-ko__star path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2px;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

.seg-ko .seg-ko__stat .seg-ko__value .seg-ko__suffix {
  display: inline-block;
  position: static;
  top: auto;
  bottom: auto;
  align-self: flex-start;
  vertical-align: top;
  /*margin: 0 0 0 0.08em;
  padding: 0.1em 0 0;*/
  margin: 0;
  padding: 0;
  color: var(--seg-ko-teal);
  font-family: var(--seg-ko-sans);
  /*font-size: 0.38em;
  line-height: 1;
  font-weight: 700;*/
  font-size: 1em;
  line-height: 1;
}

/* ---------- Description ---------- */
.seg-ko .seg-ko__item .seg-ko__desc {
  margin: 0;
  padding: 0;
  max-width: 30ch;
  color: var(--seg-ko-text);
  font-family: var(--seg-ko-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.seg-ko .seg-ko__item .seg-ko__desc p,
.seg-ko .seg-ko__item .seg-ko__desc ul,
.seg-ko .seg-ko__item .seg-ko__desc ol {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  text-transform: none;
}

/* Spacing only BETWEEN blocks, never above the first or below the last */
.seg-ko .seg-ko__item .seg-ko__desc > * + * {
  margin-top: 8px;
}

.seg-ko .seg-ko__item .seg-ko__desc ul,
.seg-ko .seg-ko__item .seg-ko__desc ol {
  padding-left: 1.2em;
}

.seg-ko .seg-ko__item .seg-ko__desc ul { list-style: disc; }
.seg-ko .seg-ko__item .seg-ko__desc ol { list-style: decimal; }

/* Beats global "ul:not(.navbar-nav) > li" margins/borders */
.seg-ko .seg-ko__item .seg-ko__desc ul > li,
.seg-ko .seg-ko__item .seg-ko__desc ol > li {
  margin: 0;
  padding: 0;
  border: 0;
}

.seg-ko .seg-ko__item .seg-ko__desc ul > li::before,
.seg-ko .seg-ko__item .seg-ko__desc ol > li::before {
  content: none;
  display: none;
}

.seg-ko .seg-ko__item .seg-ko__desc strong,
.seg-ko .seg-ko__item .seg-ko__desc b {
  color: var(--seg-ko-white);
  font-weight: 700;
}

.seg-ko .seg-ko__item .seg-ko__desc a,
.seg-ko .seg-ko__item .seg-ko__desc a:visited {
  color: var(--seg-ko-white);
  text-decoration: underline;
}

.seg-ko .seg-ko__item .seg-ko__desc a:hover,
.seg-ko .seg-ko__item .seg-ko__desc a:focus {
  color: var(--seg-ko-teal);
}


/* ---------- Footer (footerText RTE + CTA) ---------- */
.seg-ko .seg-ko__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 24px;
  margin: 0;
  padding: 14px var(--seg-ko-pad-x);
  background-color: rgba(0, 8, 48, 0.35);
  color: var(--seg-ko-muted);
  font-size: 14px;
  line-height: 20px;
}

/* Wrapper for the footerText rich text (a div, since the RTE outputs its own <p>) */
.seg-ko .seg-ko__source {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--seg-ko-muted);
  font-family: var(--seg-ko-sans);
  font-size: 14px;
  line-height: 20px;
}

/* Neutralize global RTE/paragraph styles inside the footer */
.seg-ko .seg-ko__source p,
.seg-ko .seg-ko__source ul,
.seg-ko .seg-ko__source ol {
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.seg-ko .seg-ko__source p + p {
  margin-top: 4px;
}

.seg-ko .seg-ko__source strong,
.seg-ko .seg-ko__source b {
  color: var(--seg-ko-white);
  font-weight: 700;
}

.seg-ko .seg-ko__source a,
.seg-ko .seg-ko__source a:visited {
  color: var(--seg-ko-white);
  text-decoration: underline;
}

.seg-ko .seg-ko__source a:hover,
.seg-ko .seg-ko__source a:focus {
  color: var(--seg-ko-teal);
}

/* Optional middle-dot separator editors can type in the RTE */
.seg-ko .seg-ko__sep {
  display: inline-block;
  margin: 0 6px;
  opacity: 0.6;
}

.seg-ko .seg-ko__cta,
.seg-ko .seg-ko__cta:visited {
  display: inline-flex;
  align-items: center;
  margin-left: auto; /* stays right-aligned even when there's no footerText */
  color: var(--seg-ko-teal);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.seg-ko .seg-ko__cta:hover,
.seg-ko .seg-ko__cta:focus {
  color: var(--seg-ko-white);
  text-decoration: underline;
}

.seg-ko .seg-ko__cta:focus-visible {
  outline: 2px solid var(--seg-ko-teal);
  outline-offset: 3px;
}

.seg-ko .seg-ko__arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s ease;
}

.seg-ko .seg-ko__cta:hover .seg-ko__arrow,
.seg-ko .seg-ko__cta:focus .seg-ko__arrow {
  transform: translateX(3px);
}

/* ---------- Screen-reader-only text ---------- */
.seg-ko .seg-ko__sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   RESPONSIVE LAYOUT (container widths)
   ---------------------------------------------------------------------
   2-up : 1 col  -> 2 cols @ 480
   3-up : 1 col  -> 3 cols @ 640
   4-up : 1 col  -> 2x2 @ 480 -> 4 cols @ 820
   5-up : 1 col  -> 2/2/1 @ 480 -> 3+2 @ 640 -> 5 cols @ 1000
   ===================================================================== */

@container seg-ko (min-width: 480px) {
  .seg-ko.seg-ko--2 .seg-ko__grid,
  .seg-ko.seg-ko--4 .seg-ko__grid,
  .seg-ko.seg-ko--5 .seg-ko__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seg-ko.seg-ko--5 .seg-ko__grid > li.seg-ko__item:last-child {
    grid-column: 1 / -1;
  }
}

@container seg-ko (min-width: 640px) {
  .seg-ko.seg-ko--3 .seg-ko__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 5-up: 3 on top, 2 wider on bottom */
  .seg-ko.seg-ko--5 .seg-ko__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .seg-ko.seg-ko--5 .seg-ko__grid > li.seg-ko__item {
    grid-column: span 2;
  }

  .seg-ko.seg-ko--5 .seg-ko__grid > li.seg-ko__item:nth-child(n+4) {
    grid-column: span 3;
  }
}

@container seg-ko (min-width: 820px) {
  .seg-ko.seg-ko--4 .seg-ko__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@container seg-ko (min-width: 1000px) {
  .seg-ko.seg-ko--5 .seg-ko__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .seg-ko.seg-ko--5 .seg-ko__grid > li.seg-ko__item:nth-child(n) {
    grid-column: auto;
  }
}

/* ---------- Type + spacing scale by container width ---------- */
@container seg-ko (min-width: 640px) {
  .seg-ko .seg-ko__header,
  .seg-ko .seg-ko__grid > li.seg-ko__item,
  .seg-ko .seg-ko__footer,
  .seg-ko .seg-ko__bo-note,
  .seg-ko .seg-ko__bo-empty {
    --seg-ko-pad-x: 28px;
  }
}

@container seg-ko (min-width: 820px) {
  .seg-ko.seg-ko--2 .seg-ko__grid > li.seg-ko__item,
  .seg-ko.seg-ko--3 .seg-ko__grid > li.seg-ko__item,
  .seg-ko.seg-ko--4 .seg-ko__grid > li.seg-ko__item {
    --seg-ko-num-size: 56px;
  }
}

@container seg-ko (min-width: 1000px) {
  .seg-ko.seg-ko--2 .seg-ko__grid > li.seg-ko__item,
  .seg-ko.seg-ko--3 .seg-ko__grid > li.seg-ko__item {
    --seg-ko-num-size: 64px;
  }
}

/* =====================================================================
   BACK OFFICE (LeBlender grid preview) — only applies when the partial
   adds .seg-ko--bo, which it does only inside /umbraco.
   ===================================================================== */
.seg-ko.seg-ko--bo {
  margin: 0;
  cursor: pointer; /* whole tile opens the LeBlender editor on click */
}

.seg-ko.seg-ko--bo a {
  pointer-events: none; /* never navigate away from the editor */
}

.seg-ko .seg-ko__bo-note {
  margin: 0;
  padding: 0 var(--seg-ko-pad-x) 16px;
  color: #ffb71b;
  font-family: var(--seg-ko-sans);
  font-size: 13px;
  line-height: 18px;
}

.seg-ko .seg-ko__bo-empty {
  margin: 0;
  padding: 8px var(--seg-ko-pad-x) 26px;
  color: var(--seg-ko-text);
  font-family: var(--seg-ko-sans);
  font-size: 15px;
  line-height: 22px;
}

/* Respect reduced-motion for the CTA arrow (count-up JS will check this too) */
@media (prefers-reduced-motion: reduce) {
  .seg-ko .seg-ko__arrow {
    transition: none;
  }
}