/* ─────────────────────────────────────────────────────────────────────────
   timeline-skill — three coexisting timeline variants, token-driven.
   Selectors are namespaced .ts-* to avoid colliding with host-project styles.

   Variants:
     .ts-blueprint      → 5-step horizontal sticky-scrolly (desktop ≥1201px)
     .ts-vertical       → vertical light timeline with line fill + step fade
     .ts-bold           → sticky-icon left column + .ts-vertical right column
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Colors */
  --ts-color-track:               #d1d5db;
  --ts-color-fill:                #2ecc71;
  --ts-color-circle-active-bg:    #2ecc71;
  --ts-color-circle-active-glow:  rgba(46, 204, 113, 0.14);
  --ts-color-step-label:          #2ecc71;
  --ts-color-step-title:          #1a2233;
  --ts-color-step-body:           #4b5563;
  --ts-color-card-bg:             #ffffff;
  --ts-color-card-border:         #d1d5db;
  --ts-color-section-bg:          #f3f4f6;
  --ts-color-icon-bg:             #ffffff;
  --ts-color-icon-active-border:  #14b8a6;
  --ts-color-icon-active-glow:    rgba(38, 166, 154, 0.15);
  --ts-color-cta:                 #00b8d4;
  --ts-color-cta-hover:           #2b3990;

  /* Per-step accent palette (bold variant icon backgrounds + colors) */
  --ts-accent-cyan:        #00b8d4;
  --ts-accent-cyan-glow:   rgba(0, 191, 200, 0.14);
  --ts-accent-teal:        #14b8a6;
  --ts-accent-teal-glow:   rgba(38, 166, 154, 0.16);
  --ts-accent-amber:       #f59e0b;
  --ts-accent-amber-glow:  rgba(255, 180, 0, 0.18);
  --ts-accent-green:       #2ecc71;
  --ts-accent-green-glow:  rgba(46, 204, 113, 0.16);
  --ts-accent-magenta:     #ec407a;
  --ts-accent-magenta-glow: rgba(236, 64, 122, 0.14);
  --ts-accent-navy:        #2b3990;
  --ts-accent-navy-glow:   rgba(43, 57, 144, 0.12);

  /* Geometry */
  --ts-circle-size:       48px;
  --ts-icon-size:         54px;
  --ts-bold-icon-size:    260px;
  --ts-bold-icon-glyph:   140px;
  --ts-line-thickness:    2px;
  --ts-vertical-line-thickness: 3px;
  --ts-step-gap:          24px;
  --ts-card-radius:       12px;
  --ts-blueprint-label-lead-size: 1.5rem;
  --ts-blueprint-eyebrow-size:    0.8125rem;

  /* Typography */
  --ts-font-heading:      "Roboto Condensed", system-ui, sans-serif;
  --ts-font-body:         "Roboto", system-ui, sans-serif;
  --ts-weight-black:      900;
  --ts-weight-bold:       700;

  /* Behavior */
  --ts-breakpoint:        1200px;
  --ts-trigger-ratio:     0.7;
  --ts-fill-transition:   width 0.1s linear;
}

/* ─────────────────────────────────────────────
   BLUEPRINT — 5-step horizontal sticky-scrolly
   ───────────────────────────────────────────── */

.ts-blueprint {
  background: var(--ts-color-section-bg);
  padding: 80px 0;
  color: var(--ts-color-step-title);
  position: relative;
  /* overflow:clip (not hidden) so position:sticky on the inner element still binds to the page. */
  overflow: clip;
}
.ts-blueprint__container { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

/* Outer is tall (150vh); inner sticks during the scroll-through. */
.ts-blueprint__outer  { position: relative; height: 150vh; }
.ts-blueprint__sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; }

.ts-blueprint__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--ts-blueprint-cols, 5), 1fr);
  gap: var(--ts-step-gap);
}

.ts-blueprint__step {
  position: relative;
  padding-top: 72px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.ts-blueprint__circle {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: var(--ts-circle-size);
  height: var(--ts-circle-size);
  border-radius: 50%;
  background: var(--ts-color-track);
  color: #ffffff;
  font-family: var(--ts-font-heading);
  font-weight: var(--ts-weight-black);
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.ts-blueprint__step.is-reached .ts-blueprint__circle {
  background: var(--ts-color-circle-active-bg);
  box-shadow: 0 0 0 8px var(--ts-color-circle-active-glow);
}

/* Continuous track + fill — span first to last circle center.
   Math assumes N equal columns: first center = 100/(2N)% , last = 100 - 100/(2N)%
   With gap g, line width spans (1 - 1/N) * 100% + ((N-1)/N) * g.
   For N=5 (default): left = 10% - 0.4·g, width = 80% + 0.8·g. */
.ts-blueprint__track::before,
.ts-blueprint__track::after {
  content: '';
  position: absolute;
  top: calc(var(--ts-circle-size) / 2 - var(--ts-line-thickness) / 2);
  left: calc(10% - 0.4 * var(--ts-step-gap));
  height: var(--ts-line-thickness);
  z-index: 1;
  pointer-events: none;
}
.ts-blueprint__track::before {
  width: calc(80% + 0.8 * var(--ts-step-gap));
  background: var(--ts-color-track);
}
.ts-blueprint__track::after {
  width: calc((80% + 0.8 * var(--ts-step-gap)) * var(--ts-progress, 0));
  background: var(--ts-color-fill);
  transition: var(--ts-fill-transition);
}

/* Card entrance */
.ts-blueprint__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--ts-color-card-bg);
  border: 1px solid var(--ts-color-card-border);
  border-radius: var(--ts-card-radius);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-out, border-color 0.35s ease, box-shadow 0.35s ease;
}
.ts-blueprint__step.is-reached .ts-blueprint__card { opacity: 1; }
/* First card never starts invisible — already on screen when section enters viewport. */
.ts-blueprint__step:first-child .ts-blueprint__card { opacity: 1; }

.ts-blueprint__card-img img {
  width: 100%; height: 200px; object-fit: cover;
  transition: transform 0.5s ease;
}
.ts-blueprint__card:hover .ts-blueprint__card-img img { transform: scale(1.06); }

.ts-blueprint__card-body { padding: 20px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.ts-blueprint__step-label {
  font-family: var(--ts-font-body);
  font-size: 0.875rem;
  font-weight: var(--ts-weight-bold);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ts-color-step-label);
  margin-bottom: 4px;
}
.ts-blueprint__card h3 {
  font-family: var(--ts-font-heading);
  font-size: 1.125rem;
  color: var(--ts-color-step-title);
  margin: 0 0 12px;
}
.ts-blueprint__card p {
  font-family: var(--ts-font-body);
  color: var(--ts-color-step-body);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 16px;
}

/* Optional per-card CTA link. margin-top:auto pins it to the card bottom.
   The arrow is CSS-generated so Font Awesome is not required — but if you
   drop an <i> icon inside the link, the generated arrow steps aside. */
.ts-blueprint__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: var(--ts-color-cta);
  font-family: var(--ts-font-heading);
  font-weight: var(--ts-weight-bold);
  text-decoration: none;
  transition: color 0.35s ease;
}
.ts-blueprint__cta:hover { color: var(--ts-color-cta-hover); }
.ts-blueprint__cta:not(:has(i))::after { content: "\2192"; }

/* Opt-in "label-lead" card typography: a large plain step label as the card's
   lead heading, with the <h3> demoted to a small uppercase colored eyebrow
   underneath. Add `ts-blueprint--label-lead` to the section root to enable. */
.ts-blueprint--label-lead .ts-blueprint__step-label {
  font-family: var(--ts-font-heading);
  font-size: var(--ts-blueprint-label-lead-size);
  font-weight: var(--ts-weight-black);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--ts-color-step-title);
}
.ts-blueprint--label-lead .ts-blueprint__card h3 {
  font-family: var(--ts-font-heading);
  font-size: var(--ts-blueprint-eyebrow-size);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ts-color-step-label);
}

/* Mobile fallback — sticky off, line off, circle becomes a "Step N" pill. */
@media (max-width: 1200px) {
  .ts-blueprint__outer  { height: auto; }
  .ts-blueprint__sticky { position: static; height: auto; overflow: visible; }
  .ts-blueprint__track::before,
  .ts-blueprint__track::after { display: none; }
  .ts-blueprint__track { grid-template-columns: 1fr; }
  .ts-blueprint__circle {
    width: auto; min-width: var(--ts-circle-size);
    padding: 0 18px;
    border-radius: 999px;
    font-size: 16px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    gap: 6px;
  }
  .ts-blueprint__circle::before { content: "Step"; }
}

@media (prefers-reduced-motion: reduce) {
  .ts-blueprint__card { opacity: 1; transition: none; }
  .ts-blueprint__outer  { height: auto; }
  .ts-blueprint__sticky { position: static; height: auto; overflow: visible; }
  .ts-blueprint__track::after { transition: none; }
}

/* ─────────────────────────────────────────────
   VERTICAL — light timeline (line fill + step fade)
   ───────────────────────────────────────────── */

.ts-vertical {
  max-width: 800px;
  margin: 0 auto 40px;
  position: relative;
}
.ts-vertical__line {
  position: absolute;
  left: calc(var(--ts-icon-size) / 2 - var(--ts-vertical-line-thickness) / 2);
  top: 0; bottom: 0;
  width: var(--ts-vertical-line-thickness);
  background: var(--ts-color-track);
  z-index: 0;
}
.ts-vertical__line-fill {
  position: absolute;
  left: calc(var(--ts-icon-size) / 2 - var(--ts-vertical-line-thickness) / 2);
  top: 0;
  width: var(--ts-vertical-line-thickness);
  height: 0;
  background: var(--ts-color-fill);
  z-index: 0;
  transition: height 0.05s linear;
}
.ts-vertical__step {
  padding: 24px 64px 28px calc(var(--ts-icon-size) + 28px);
  position: relative;
  margin-bottom: 120px; /* generous gap so the bold variant's sticky label dwells on each step */
  opacity: 0.3;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.ts-vertical__step:last-child { margin-bottom: 0; }
.ts-vertical__step.is-active {
  opacity: 1;
  transform: translateY(0);
}
.ts-vertical__step-icon {
  position: absolute;
  left: 0;
  top: 22px;
  width: var(--ts-icon-size);
  height: var(--ts-icon-size);
  border-radius: 50%;
  background: var(--ts-color-icon-bg);
  border: 3px solid var(--ts-color-icon-bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.ts-vertical__step-icon img,
.ts-vertical__step-icon i {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  object-fit: contain;
  transition: transform 0.1s linear;
}
.ts-vertical__step-icon i { font-size: calc(var(--ts-icon-size) * 0.55); color: var(--ts-color-step-label); }
.ts-vertical__step.is-active .ts-vertical__step-icon {
  border-color: var(--ts-color-icon-active-border);
  box-shadow: 0 0 0 6px var(--ts-color-icon-active-glow);
}
.ts-vertical__step-label {
  font-family: var(--ts-font-heading);
  font-size: 1.4rem;
  font-weight: var(--ts-weight-black);
  text-transform: uppercase;
  color: var(--ts-color-step-label);
  margin-bottom: 12px;
}
.ts-vertical__step h3 {
  font-family: var(--ts-font-heading);
  font-size: 28px;
  font-weight: var(--ts-weight-black);
  color: var(--ts-color-step-title);
  margin: 0 0 12px;
  line-height: 1.25;
}
.ts-vertical__step p {
  font-family: var(--ts-font-body);
  font-size: 20px;
  color: var(--ts-color-step-body);
  line-height: 1.65;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ts-vertical__step { opacity: 1; transform: none; transition: none; }
  .ts-vertical__line-fill { transition: none; }
}

/* ─────────────────────────────────────────────
   BOLD — sticky icon badge + right-side .ts-vertical
   ───────────────────────────────────────────── */

.ts-bold {
  background: var(--ts-color-section-bg);
  padding: 80px 0;
  border-top: 1px solid var(--ts-color-card-border);
  border-bottom: 1px solid var(--ts-color-card-border);
}
.ts-bold__container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.ts-bold__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-top: 48px;
  align-items: flex-start;
}

.ts-bold__track {
  position: sticky;
  top: 20vh;
  display: flex; flex-direction: column; align-items: center;
  gap: 24px;
}

.ts-bold__wheel {
  width: var(--ts-bold-icon-size);
  height: var(--ts-bold-icon-size);
  position: relative;
}

.ts-bold__icon {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--ts-accent-cyan-glow) 0%, transparent 72%);
  transition: background 0.35s ease;
}
.ts-bold__icon i {
  font-size: var(--ts-bold-icon-glyph);
  color: var(--ts-accent-cyan);
  transition: color 0.35s ease, transform 0.35s ease;
}
.ts-bold__icon img {
  width: 64%; height: 64%; object-fit: contain;
  transition: transform 0.35s ease;
}
.ts-bold__icon[data-color="cyan"]    { background: radial-gradient(circle at center, var(--ts-accent-cyan-glow) 0%, transparent 72%); }
.ts-bold__icon[data-color="cyan"] i  { color: var(--ts-accent-cyan); }
.ts-bold__icon[data-color="teal"]    { background: radial-gradient(circle at center, var(--ts-accent-teal-glow) 0%, transparent 72%); }
.ts-bold__icon[data-color="teal"] i  { color: var(--ts-accent-teal); }
.ts-bold__icon[data-color="amber"]   { background: radial-gradient(circle at center, var(--ts-accent-amber-glow) 0%, transparent 72%); }
.ts-bold__icon[data-color="amber"] i { color: var(--ts-accent-amber); }
.ts-bold__icon[data-color="green"]   { background: radial-gradient(circle at center, var(--ts-accent-green-glow) 0%, transparent 72%); }
.ts-bold__icon[data-color="green"] i { color: var(--ts-accent-green); }
.ts-bold__icon[data-color="magenta"] { background: radial-gradient(circle at center, var(--ts-accent-magenta-glow) 0%, transparent 72%); }
.ts-bold__icon[data-color="magenta"] i { color: var(--ts-accent-magenta); }
.ts-bold__icon[data-color="navy"]    { background: radial-gradient(circle at center, var(--ts-accent-navy-glow) 0%, transparent 72%); }
.ts-bold__icon[data-color="navy"] i  { color: var(--ts-accent-navy); }

.ts-bold__label {
  font-family: var(--ts-font-heading);
  font-weight: var(--ts-weight-black);
  font-size: 1.4rem;
  text-transform: uppercase;
  color: var(--ts-color-step-label);
  text-align: center;
  min-height: 32px;
  transition: opacity 0.35s ease;
}
.ts-bold__title {
  font-family: var(--ts-font-heading);
  font-size: 28px;
  font-weight: var(--ts-weight-bold);
  color: var(--ts-color-step-title);
  text-align: center;
  line-height: 1.2;
  min-height: 44px;
  transition: opacity 0.35s ease;
}

/* Right column reuses .ts-vertical — shed default max-width so it fills the column. */
.ts-bold__grid .ts-vertical { max-width: none; margin: 0; }

@media (max-width: 1024px) {
  .ts-bold__grid { grid-template-columns: 35% 65%; gap: 32px; }
}
@media (max-width: 768px) {
  .ts-bold__grid { grid-template-columns: 1fr; gap: 0; }
  .ts-bold__track { display: none; }
  .ts-bold__grid .ts-vertical { max-width: 800px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ts-bold__icon,
  .ts-bold__icon i { transition: none; }
}