/* OE – Branching Cards
 *
 * Designed for a light or muted section (e.g. oe-section-muted): white cards,
 * navy number box. Card colour comes in per card as --oe-branching-cards-c.
 * Animation: only the branch-line dashes move, starting once in view
 * (.is-visible). Nothing is hidden first. The editor (--static) and reduced
 * motion show it still.
 */

.oe-block-branching-cards {
  --oe-branching-cards-c: var(--oe-color-sky-blue);
  --oe-branching-cards-base: var(--oe-color-sky-blue);
  /* Hex exception, this block only (user-approved 2026-10-07): prototype brand
     colours with no --oe-* token, for card tops and the fixed chart colours */
  --oe-branching-cards-teal: #30B5AE;
  --oe-branching-cards-teal-dark: #1F7F7A;
  --oe-branching-cards-pink: #D268AE;
  --oe-branching-cards-amber: #E7A800;
  --oe-branching-cards-magenta: #B3107A;
  --oe-branching-cards-grid: #7C8891;
  --oe-branching-cards-heading: var(--oe-color-secondary);
  --oe-branching-cards-muted: var(--oe-color-cool-grey);
  --oe-branching-cards-card: var(--oe-color-primary-4);
  /* Card description and link: halfway between the small and base sizes (about 14.4px) */
  --oe-branching-cards-text-size: calc((var(--oe-font-size-small) + var(--oe-font-size-base)) / 2);
  --oe-branching-cards-wire: color-mix(in srgb, var(--oe-color-sky-blue) 30%, var(--oe-color-primary-4));
  --oe-branching-cards-ease: cubic-bezier(.2, .8, .2, 1);
  container: oe-branching-cards / inline-size;
  position: relative;
}

.oe-block-branching-cards *,
.oe-block-branching-cards *::before,
.oe-block-branching-cards *::after {
  box-sizing: border-box;
}

/* ---------- Number box ---------- */

.oe-block-branching-cards__source {
  position: relative;
  z-index: 1;
  width: min(100%, var(--oe-width-fixed-medium));
  margin: 0 auto;
  padding: var(--oe-spacing-medium);
  border-radius: var(--oe-border-radius-base);
  background: var(--oe-color-heritage-blue);
  color: var(--oe-color-primary-4);
  text-align: center;
}

.oe-block-branching-cards .oe-block-branching-cards__source-label {
  margin: 0;
  font-size: var(--oe-font-size-small);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-color-secondary-9-300);
}

.oe-block-branching-cards__source-row {
  display: flex;
  flex-wrap: wrap;
  /* Caption's last line sits on the number's baseline (older browsers: first line) */
  align-items: baseline;
  align-items: last baseline;
  justify-content: center;
  gap: var(--oe-spacing-2xsmall) var(--oe-spacing-small);
  margin-top: var(--oe-spacing-xsmall);
}

.oe-block-branching-cards__source-value {
  font-size: clamp(var(--oe-font-size-2xlarge), 5cqi, calc(var(--oe-font-size-2xlarge) * 1.2));
  line-height: var(--oe-line-height-medium);
  font-variant-numeric: tabular-nums;
}

.oe-block-branching-cards__source-caption {
  font-size: var(--oe-font-size-base);
  line-height: var(--oe-line-height-medium-large);
  text-align: left;
  color: color-mix(in srgb, var(--oe-color-primary-4) 85%, transparent);
}

/* ---------- Branch lines ---------- */

.oe-block-branching-cards__wires {
  display: block;
  width: 100%;
  height: calc(var(--oe-spacing-2xlarge) + var(--oe-spacing-xlarge));
  overflow: visible;
}

.oe-block-branching-cards__wire,
.oe-block-branching-cards__flow {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.oe-block-branching-cards__wire {
  stroke: var(--oe-branching-cards-wire);
}

.oe-block-branching-cards__flow {
  stroke: var(--oe-color-sky-blue);
  stroke-dasharray: 6 10;
  transition: opacity .25s, stroke .25s, stroke-width .25s;
}

/* Hover or focus a card: its line lights up in the card colour and keeps flowing */
.oe-block-branching-cards:has(.oe-block-branching-cards__card:hover, .oe-block-branching-cards__card:focus-within) .oe-block-branching-cards__flow {
  opacity: .25;
}

.oe-block-branching-cards:has(.oe-block-branching-cards__card[data-k="0"]:is(:hover, :focus-within)) .oe-block-branching-cards__flow[data-k="0"],
.oe-block-branching-cards:has(.oe-block-branching-cards__card[data-k="1"]:is(:hover, :focus-within)) .oe-block-branching-cards__flow[data-k="1"],
.oe-block-branching-cards:has(.oe-block-branching-cards__card[data-k="2"]:is(:hover, :focus-within)) .oe-block-branching-cards__flow[data-k="2"],
.oe-block-branching-cards:has(.oe-block-branching-cards__card[data-k="3"]:is(:hover, :focus-within)) .oe-block-branching-cards__flow[data-k="3"] {
  opacity: 1;
  stroke: var(--oe-branching-cards-c);
  stroke-width: 3;
  /* Only the count changes, so the entrance animation never restarts: it resumes while hovered and stops again after */
  animation-iteration-count: infinite;
}

/* ---------- Cards ---------- */

.oe-block-branching-cards__cards {
  display: grid;
  grid-template-columns: repeat(var(--oe-branching-cards-cols, 4), minmax(0, 1fr));
  gap: var(--oe-spacing-base);
}

.oe-block-branching-cards--1 { --oe-branching-cards-cols: 1; }
.oe-block-branching-cards--2 { --oe-branching-cards-cols: 2; }
.oe-block-branching-cards--3 { --oe-branching-cards-cols: 3; }

.oe-block-branching-cards__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--oe-spacing-medium);
  border-top: var(--oe-border-width-medium) solid var(--oe-branching-cards-c);
  border-radius: var(--oe-border-radius-base);
  background: var(--oe-branching-cards-card);
  transition: transform .25s var(--oe-branching-cards-ease);
}

.oe-block-branching-cards__card--linked:hover,
.oe-block-branching-cards__card--linked:focus-within {
  transform: translateY(calc(-1 * var(--oe-spacing-2xsmall)));
}

.oe-block-branching-cards .oe-block-branching-cards__title {
  margin: 0;
  font-size: var(--oe-font-size-large);
  line-height: var(--oe-line-height-medium);
  color: var(--oe-branching-cards-heading);
}

.oe-block-branching-cards .oe-block-branching-cards__subtitle {
  margin: var(--oe-spacing-2xsmall) 0 0;
  font-size: var(--oe-font-size-small);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-branching-cards-muted);
}

.oe-block-branching-cards .oe-block-branching-cards__text {
  margin: 0;
  font-size: var(--oe-branching-cards-text-size);
  line-height: var(--oe-line-height-large);
  color: var(--oe-branching-cards-muted);
}

/* One link per card; its ::after stretches over the whole card */
.oe-block-branching-cards .oe-block-branching-cards__link {
  position: static;
  margin-top: auto;
  padding-top: var(--oe-spacing-small);
  font-size: var(--oe-branching-cards-text-size);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-color-sky-blue);
  text-decoration: none;
}

.oe-block-branching-cards .oe-block-branching-cards__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--oe-border-radius-base);
}

.oe-block-branching-cards .oe-block-branching-cards__link:hover {
  text-decoration: underline;
}

.oe-block-branching-cards .oe-block-branching-cards__link:focus-visible {
  outline: none;
}

.oe-block-branching-cards .oe-block-branching-cards__link:focus-visible::after {
  outline: var(--oe-spacing-3xsmall) solid var(--oe-color-secondary-8);
  outline-offset: var(--oe-spacing-3xsmall);
}

/* ---------- Card charts ---------- */

.oe-block-branching-cards__chart {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--oe-spacing-small) 0;
  overflow: visible;
}

.oe-block-branching-cards__chart text {
  font-family: inherit;
  font-size: var(--oe-font-size-xsmall);
}

.oe-block-branching-cards__chart .oe-block-branching-cards__small {
  font-size: var(--oe-font-size-2xsmall);
}

.oe-block-branching-cards__axis {
  stroke: color-mix(in srgb, var(--oe-branching-cards-grid) 30%, transparent);
  stroke-width: 1;
}

.oe-block-branching-cards__base,
.oe-block-branching-cards__line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oe-block-branching-cards__base {
  stroke: var(--oe-branching-cards-base);
}

.oe-block-branching-cards__line {
  stroke: var(--oe-branching-cards-ink, var(--oe-branching-cards-c));
}

/* Fixed chart colours, as in the prototype */
.oe-block-branching-cards__ink--magenta { --oe-branching-cards-ink: var(--oe-branching-cards-magenta); }
.oe-block-branching-cards__ink--teal { --oe-branching-cards-ink: var(--oe-branching-cards-teal); }
.oe-block-branching-cards__ink--teal-dark { --oe-branching-cards-ink: var(--oe-branching-cards-teal-dark); }
.oe-block-branching-cards__ink--pink { --oe-branching-cards-ink: var(--oe-branching-cards-pink); }

.oe-block-branching-cards__line--thin {
  stroke-width: 2;
}

.oe-block-branching-cards__line--dashed {
  stroke-dasharray: 5 4;
  stroke-linecap: butt;
}

.oe-block-branching-cards__dot {
  fill: var(--oe-branching-cards-base);
}

.oe-block-branching-cards__base-label {
  fill: var(--oe-branching-cards-base);
}

.oe-block-branching-cards__line-label {
  fill: var(--oe-branching-cards-ink, var(--oe-branching-cards-c));
}

.oe-block-branching-cards__tile {
  fill: color-mix(in srgb, var(--oe-branching-cards-ink, var(--oe-branching-cards-c)) 12%, transparent);
}

.oe-block-branching-cards__panel {
  fill: color-mix(in srgb, var(--oe-branching-cards-grid) 12%, transparent);
}

.oe-block-branching-cards__tile-label {
  fill: var(--oe-branching-cards-muted);
}

.oe-block-branching-cards__chart .oe-block-branching-cards__tile-value {
  font-size: var(--oe-font-size-large);
  fill: var(--oe-color-heritage-blue);
}

/* ---------- Footer ---------- */

.oe-block-branching-cards__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--oe-spacing-xsmall) var(--oe-spacing-medium);
  margin-top: var(--oe-spacing-medium);
}

.oe-block-branching-cards .oe-block-branching-cards__footer-text {
  margin: 0;
  font-size: var(--oe-font-size-base);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-branching-cards-heading);
}

.oe-block-branching-cards__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--oe-spacing-xsmall);
  margin-left: auto;
  font-size: var(--oe-font-size-small);
  color: var(--oe-branching-cards-muted);
}

/* ---------- Narrow widths: hide the lines, stack the cards ---------- */

@container oe-branching-cards (max-width: 60rem) {
  .oe-block-branching-cards__wires {
    display: none;
  }

  .oe-block-branching-cards__source {
    margin-bottom: var(--oe-spacing-medium);
  }

  .oe-block-branching-cards__cards {
    grid-template-columns: repeat(min(2, var(--oe-branching-cards-cols, 4)), minmax(0, 1fr));
  }
}

@container oe-branching-cards (max-width: 34rem) {
  .oe-block-branching-cards__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Branch animation (the only movement; everything else shows at once) ---------- */

@keyframes oe-branching-cards-flow {
  to { stroke-dashoffset: -32; }
}

/* Dashes run for 4 cycles (under 5s, WCAG 2.2.2) once in view, then rest */
.oe-block-branching-cards.is-visible .oe-block-branching-cards__flow {
  animation: oe-branching-cards-flow 1.2s linear 4;
}

/* ---------- Editor and reduced motion: final state, no movement ---------- */

.oe-block-branching-cards--static * {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .oe-block-branching-cards *,
  .oe-block-branching-cards.is-visible * {
    animation: none !important;
    transition-duration: 0s !important;
  }

  .oe-block-branching-cards__card--linked:hover,
  .oe-block-branching-cards__card--linked:focus-within {
    transform: none;
  }
}