/* ---------------------------------------------------------------------------
   circle-chain — labelled circles threaded onto a connector rail. The coloured
   band IS the section, edge to edge, so it can carry .section-top-round and
   tuck under the section above it. Vertical stack on mobile, horizontal row
   from lg.

   Loaded by resources/views/components/sections/circle-chain.blade.php.
   Plain CSS — no Tailwind @apply here.
   Bump the ?v in that component's <link> whenever this file changes.
--------------------------------------------------------------------------- */

/* The band: the Made in Malaysia campaign ramp, sampled from the pricing
   count-down banner art. The same three stops live in --campaign-* in
   pricing-2026.blade.php and plan-cards.css, and the navy is the fallback
   background-color in pricing-grant-ribbon.blade.php; keep all four in step
   if the art is swapped. Scoped to the section so nothing else picks them up. */
.section-circle-chain {
  --campaign-navy: #000073;
  --campaign-blue: #041089;
  --campaign-blue-bright: #0441cd;
  background: linear-gradient(105deg,
      var(--campaign-navy) 0%,
      var(--campaign-blue) 45%,
      var(--campaign-blue-bright) 100%);
}

/* Title measure matched to story-sections.css, so headings on a page built
   from both families wrap at the same width. */
.section-circle-chain h2 {
  max-width: 52rem;
}

.section-circle-chain {
  padding-top: 3.5rem;
  padding-bottom: 6rem;
}

@media screen and (min-width: 998px) {
  .section-circle-chain {
    padding-top: 4.5rem;
    padding-bottom: 8rem;
  }
}

.section-circle-chain .cc-chain {
  /* One dial for the whole chain: the band height, the type size and the rail
     insets are all derived from the circle diameter. */
  --cc-size: 8.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin: 3rem auto 0;
  /* Sized so the gaps read at roughly a third of the circle diameter, matching
     the spacing in the design. Fits inside the lg container (1072px). */
  max-width: 66rem;
  list-style: none;
  padding: 0;
}

/* The rail — the wide band from the design: it runs centre to centre of the
   outer circles, is near-white in the middle and fades out at both ends, so it
   reads as light passing through the chain rather than a drawn bar. Vertical
   behind the stack on mobile, horizontal behind the row from lg; same
   proportions either way, both derived from --cc-size. */
.section-circle-chain .cc-chain::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: calc(var(--cc-size) / 2);
  bottom: calc(var(--cc-size) / 2);
  width: calc(var(--cc-size) * 0.86);
  border-radius: 0.5rem;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.26) 26%,
      rgba(255, 255, 255, 0.72) 50%,
      rgba(255, 255, 255, 0.26) 74%,
      rgba(255, 255, 255, 0) 100%);
}

.section-circle-chain .cc-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  text-align: center;
  width: var(--cc-size);
  height: var(--cc-size);
  border-radius: 999px;
  background: #fff;
  color: var(--color-blue);
  /* Tied to the diameter so the label keeps the same optical weight at every
     circle size — "YOUR RELATIONSHIP" is the one that has to fit. */
  font-size: calc(var(--cc-size) * 0.105);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0 0.5rem;
  box-shadow: 0 10px 26px rgba(4, 26, 74, 0.26);
  transition: transform 0.3s ease;
}

.section-circle-chain .cc-node:hover {
  transform: scale(1.05);
}

@media screen and (min-width: 998px) {
  .section-circle-chain .cc-chain {
    --cc-size: clamp(8.5rem, 13.5vw, 10.5rem);
    flex-direction: row;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .section-circle-chain .cc-chain::before {
    left: calc(var(--cc-size) / 2);
    right: calc(var(--cc-size) / 2);
    top: 50%;
    bottom: auto;
    width: auto;
    height: calc(var(--cc-size) * 0.86);
    transform: translateY(-50%);
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.26) 26%,
        rgba(255, 255, 255, 0.72) 50%,
        rgba(255, 255, 255, 0.26) 74%,
        rgba(255, 255, 255, 0) 100%);
  }
}