/* ==========================================================================
   Cohesion Insight scrollytelling stack (FIG-11A2B)
   New in v7.45. Ported from the scroll-pattern demo (pattern 1) with every
   demo selectors re-prefixed to the scrolly namespace. Sticky brief panel on the left,
   five full-height story steps on the right.

   Palette is read from css/site.css tokens where they exist; local fallbacks
   are declared on .scrolly-wrap so this file can drop onto any page.
   ========================================================================== */

.scrolly-wrap {
  --sc-magenta: #B83280;      /* Signal Magenta */
  --sc-deep-plum: #7A1F5C;    /* Deep Plum */
  --sc-gold: #8A6800;         /* A11y Gold */
  --sc-plum-ink: #351437;     /* Plum Ink */
  --sc-magenta-wash: #FDE7F3;
  --sc-ink-80: rgba(53, 20, 55, 0.8);
  --sc-ink-70: rgba(53, 20, 55, 0.7);
  --sc-ink-60: rgba(53, 20, 55, 0.6);
  --sc-ink-55: rgba(53, 20, 55, 0.55);
  --sc-ink-12: rgba(53, 20, 55, 0.12);
  --sc-radius: 4px;

  display: grid;
  grid-template-columns: 46fr 54fr;
  gap: 64px;
  align-items: start;
}

.scrolly-sticky { position: sticky; top: 15vh; height: 70vh; }

.scrolly-panel {
  position: relative;
  height: 100%;
  border: 1px solid var(--sc-ink-12);
  border-radius: var(--sc-radius);
  background: linear-gradient(180deg, #ffffff 0%, var(--sc-magenta-wash) 100%);
  overflow: hidden;
}

.scrolly-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--sc-ink-12);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sc-ink-55);
  background: #fff;
}

.scrolly-panel-head .live { color: var(--sc-magenta); }

.scrolly-brief-stack { position: relative; height: calc(100% - 59px); }

.scrolly-brief {
  position: absolute;
  inset: 0;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 450ms ease, transform 450ms ease;
  pointer-events: none;
}

.scrolly-brief[data-on="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; }

.scrolly-brief p { margin: 0; }

/* --- per-step image: dominant visual on both desktop and mobile --- */
.scrolly-brief-media {
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 4px;
  background: var(--sc-magenta-wash);
  border: 1px solid var(--sc-ink-12);
  /* Desktop: cap the image so it fits in the sticky panel next to the
     metadata row. Panel is ~70vh tall; ~59px is the panel head; leave
     room for a small metadata row below. */
  width: 100%;
  max-width: min(90%, calc(70vh - 160px));
  max-height: calc(70vh - 160px);
  margin: 0 auto;
  align-self: center;
}

/* --- decision-card type, scoped so it cannot collide with site.css --- */
.scrolly-wrap .dcard-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--sc-magenta);
  margin: 0;
}

.scrolly-wrap .dcard-number {
  font-size: 56px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--sc-plum-ink);
  margin: 0;
}

.scrolly-wrap .dcard-sub { font-size: 15px; color: var(--sc-ink-70); margin: -6px 0 0; }

.scrolly-wrap .dcard-rule {
  height: 1px;
  width: 100%;
  background: var(--sc-gold);
  border: 0;
  margin: 4px 0;
}

/* mini bar chart, pure CSS, scoped under the panel */
.scrolly-panel .mini-bars,
.scrolly-mobile-brief .mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  height: 82px;
}
.scrolly-panel .mini-bars i,
.scrolly-mobile-brief .mini-bars i {
  display: block;
  width: 22px;
  background: var(--sc-magenta-wash);
  border-bottom: 2px solid rgba(184, 50, 128, 0.25);
}
.scrolly-panel .mini-bars i.on,
.scrolly-mobile-brief .mini-bars i.on {
  background: var(--sc-magenta);
  border-bottom-color: var(--sc-deep-plum);
}

/* Desktop: image is the hero. Hide dcard-number, dcard-rule, mini-bars, and
   the redundant secondary dcard-sub (the image contains headline + caption).
   Keep only: idx (STEP), dcard-eyebrow, and the FIRST dcard-sub (context). */
.scrolly-brief .dcard-number,
.scrolly-brief .dcard-rule,
.scrolly-brief .mini-bars { display: none; }
.scrolly-brief .dcard-sub { font-size: 14px; text-align: center; margin: 0; }
/* hide any dcard-sub after the first one */
.scrolly-brief .dcard-sub ~ .dcard-sub { display: none; }

.scrolly-brief .idx {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--sc-deep-plum);
}

.scrolly-steps { display: flex; flex-direction: column; }

/* seamless cadence: no padding buffer, step height is min-height only,
   so the next step's content starts immediately when the previous one ends */
.scrolly-step {
  box-sizing: border-box;
  min-height: 82vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}

/* editorial block: type only, no card. the sticky panel owns the data weight. */
.scrolly-ed {
  display: flex;
  flex-direction: column;
  padding: 2.5rem 3rem;
  max-width: 60ch;
  opacity: 0.34;
  transform: translateY(10px);
  transition: opacity 450ms ease, transform 450ms ease;
}

.scrolly-step[data-active="true"] .scrolly-ed { opacity: 1; transform: translateY(0); }

.scrolly-ed-num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sc-ink-60);
  margin: 0 0 1.6rem;
}

.scrolly-ed-head {
  font-size: 44px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sc-plum-ink);
  margin: 0 0 1.4rem;
}

.scrolly-ed-sub {
  font-size: 21px;
  line-height: 1.42;
  font-weight: 500;
  color: var(--sc-deep-plum);
  margin: 0 0 1.75rem;
  max-width: 46ch;
}

.scrolly-ed-body {
  font-size: 18px;
  line-height: 1.62;
  font-weight: 400;
  color: var(--sc-ink-80);
  max-width: 54ch;
  margin: 0 0 2rem;
}

.scrolly-ed-cta {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-magenta);
  text-decoration: none;
  margin: 0;
  padding: 0 0 6px;
  border-bottom: 1.5px solid var(--sc-magenta);
  cursor: pointer;
  align-self: flex-start;
  transition: color 160ms ease, border-color 160ms ease, transform 200ms ease;
}

.scrolly-ed-cta:hover { color: var(--sc-deep-plum); border-bottom-color: var(--sc-deep-plum); transform: translateY(-1px); }
.scrolly-ed-cta:focus-visible { outline: 2px solid var(--sc-deep-plum); outline-offset: 4px; }

.scrolly-ed-cta .arrow { font-family: inherit; font-weight: 500; transform: translateY(1px); }

.scrolly-ed-cta-final { color: var(--sc-plum-ink); border-bottom-color: var(--sc-plum-ink); }
.scrolly-ed-cta-final:hover { color: var(--sc-magenta); border-bottom-color: var(--sc-magenta); }

.scrolly-mobile-brief { display: none; }
.scrolly-mobile-brief p { margin: 0; }

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 1023px) {
  .scrolly-wrap { gap: 40px; }
  .scrolly-ed { padding: 2rem 0 2rem 2rem; }
  .scrolly-ed-head { font-size: 36px; }
}

@media (max-width: 899px) {
  /* mobile: sticky brief pinned to the top of the viewport, stories scroll beneath (V1 mechanic) */
  .scrolly-wrap { display: block; gap: 0; }

  /* sticky brief becomes a top-pinned strip */
  .scrolly-sticky {
    position: sticky;
    top: 0;
    height: auto;
    z-index: 20;
    margin: 0 calc(-1 * var(--container-padding, 20px));
    background: var(--sc-magenta-wash);
    border-bottom: 1px solid var(--sc-ink-12);
    box-shadow: 0 6px 18px -14px rgba(53, 20, 55, 0.25);
  }
  .scrolly-panel {
    position: relative;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 12px 20px 16px;
  }
  .scrolly-panel-head {
    padding: 0 0 10px;
    border-bottom: 1px solid var(--sc-ink-12);
    background: transparent;
    font-size: 11px;
    margin-bottom: 12px;
  }
  /* Mobile brief: square image is the hero, tiny caption row underneath.
     Height auto-sized to fit whichever step is active. The panel is fixed
     to the top of the viewport, so we cap the visible height with a max
     so the story below still has room. */
  .scrolly-brief-stack {
    position: relative;
    /* Reserve space for the square image (~72vw) + caption row (~34px) + gap. */
    height: calc(72vw + 42px);
    max-height: calc(100vh - 200px);
  }
  .scrolly-brief {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "media media"
      "eyebrow idx";
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    padding: 0;
  }
  .scrolly-brief-media {
    grid-area: media;
    width: 72vw;
    height: 72vw;
    max-width: 340px;
    max-height: 340px;
    justify-self: center;
    align-self: center;
  }
  .scrolly-brief .idx {
    grid-area: idx;
    font-size: 10px;
    letter-spacing: 0.14em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--sc-ink-55);
    margin: 0;
    align-self: center;
    justify-self: end;
  }
  .scrolly-brief .dcard-eyebrow {
    grid-area: eyebrow;
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--sc-ink-70);
    margin: 0;
    align-self: center;
    justify-self: start;
  }
  /* Number, sub, rule, mini-bars all hidden on mobile — the image carries the story */
  .scrolly-wrap .dcard-number,
  .scrolly-brief .dcard-number,
  .scrolly-brief .dcard-sub,
  .scrolly-brief .dcard-rule,
  .scrolly-brief .mini-bars { display: none; }

  /* stories stream underneath the sticky brief */
  .scrolly-steps { display: block; }
  .scrolly-step {
    box-sizing: border-box;
    min-height: 0;
    padding: 32px 0 44px;
    /* the sticky image chip is roughly 72vw + panel head + padding, so
       give the anchor scroll a matching offset */
    scroll-margin-top: calc(72vw + 100px);
  }
  .scrolly-ed { padding: 0; opacity: 1; transform: none; max-width: none; }
  .scrolly-ed-head { font-size: 28px; }
  .scrolly-ed-sub { font-size: 17px; }
  .scrolly-ed-body { font-size: 16px; }
  .scrolly-ed-num { font-size: 14px; margin-bottom: 12px; }

  /* inline mobile brief no longer needed — sticky brief covers the job */
  .scrolly-mobile-brief { display: none; }
}

/* ---------- reduced motion: static reading order -------------------------- */
/* Users with reduced-motion get a flat vertical stack. Sticky and animations are
   disabled; each brief renders inline above its story so the panel data stays
   joined to its decision without any motion. */

@media (prefers-reduced-motion: reduce) {
  .scrolly-brief, .scrolly-ed { transition: none !important; }
  .scrolly-wrap { display: block; }
  .scrolly-sticky { position: static; box-shadow: none; margin: 0; }
  .scrolly-panel { padding: 16px 20px; }
  .scrolly-brief-stack { height: auto; }
  .scrolly-brief {
    position: static;
    display: block;
    opacity: 1;
    transform: none;
    padding: 0;
    margin-bottom: 20px;
  }
  .scrolly-brief .dcard-sub,
  .scrolly-brief .dcard-rule,
  .scrolly-brief .mini-bars { display: revert; }
  .scrolly-step { box-sizing: border-box; min-height: 0; padding: 0 0 36px; }
  .scrolly-ed { padding: 0; opacity: 1; transform: none; max-width: none; }
  .scrolly-mobile-brief { display: none; }
}