/* ==========================================================================
   EXPERIENCE MODEL — DIAMOND DIAGRAM  (single source of truth)

   This file owns ALL diamond/deck rules: desktop AND mobile.
   The old diamond rules in transforming2.css must be deleted (see notes),
   otherwise the two files fight each other and the later one wins.

   KNOBS (px; + = down, - = up):
     --deck-step     distance between diamonds
     --diamond-y     slides all diamond backgrounds up/down
     --icon-y        slides all icon squares up/down
     --icon-gap      extra spacing between icons (stretches icon column)
     --callout-y     slides all lines + dots + labels up/down
     --callout-gap   extra spacing between callouts
   ========================================================================== */

.diamond-diagram {
  /* geometry */
  --card-w: 380px;
  --card-h: 150px;
  --deck-step: 72px;

  /* knobs */
  --diamond-start: 130.5px;           /* top diamond's centre, measured from the top of the deck (+ = down) */
  --diamond-step: var(--deck-step);   /* distance between diamonds; set a px value to decouple from --deck-step */
  --diamond-y: 0px;                   /* global nudge for all diamonds + icons (keep) */
  --icon-gap: 0px;                    /* now only an optional extra offset on top of the diamond; 0 = perfectly centred */
  
  --icon-y: 0px;
  --callout-y: 56px;
  --callout-gap: 0px;

  /* sizes */
  --icon-box: 72px;
  --icon-sq: 46px;
  --line-len: 250px;
  --dot: 9px;

  position: relative;
  display: flex;
  width: min(100%, 900px);
  height: 590px;
  min-height: 590px;
  margin: 86px auto 49px;
}

.diamond-deck {
  position: relative;
  width: var(--card-w);
  height: calc(var(--card-h) + var(--deck-step) * 5);
  margin-left: 170px;
  overflow: visible;
}

.deck-spine {
  position: absolute;
  top: 6%;
  left: 50%;
  z-index: 100;
  width: 150px;
  height: 110%;
  box-sizing: border-box;
  border: 1px solid rgba(192, 0, 255, .05);
  border-radius: 24px;
  background: radial-gradient(circle, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, .01) 100%);
  transform: translateX(-50%);
  pointer-events: none;
}

/* Cards: position, stacking, colour. --i is the card's index (0–5). */
.deck-card {
  position: absolute;
  left: 0;
  top: calc(var(--i) * var(--deck-step));
  width: var(--card-w);
  height: var(--card-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}



/* Shared: diamond centre (Y) relative to its own card's top.
   Cards sit at i * deck-step, so we add the difference to land on the desired position. */
.deck-card,
.deck-callouts p {
  --dy: calc(
    var(--diamond-start) + var(--diamond-y)
    + var(--i) * (var(--diamond-step) - var(--deck-step))
  );
}

/* big faint diamond (was centred on the card; now rides 55.5px above the coloured one, same look as before) */
.deck-card::before {
  content: "";
  position: absolute;
  top: calc(var(--dy) - 55.5px);
  left: 50%;
  width: 500px;
  height: 500px;
  border-radius: 22px;
  z-index: calc(var(--z) + 5);
  transform: translate(-50%, -50%) scaleY(.35) rotate(45deg);
  mask-image: linear-gradient(315deg, #000 24%, transparent 67%);
  -webkit-mask-image: linear-gradient(315deg, #000 24%, transparent 67%);
  background: radial-gradient(circle, rgba(255,255,255,.25) 0%, rgba(var(--rgb), .96) 100%);
  opacity: .1;
}

/* coloured diamond */
.deck-card::after {
  content: "";
  position: absolute;
  top: var(--dy);
  left: 50%;
  width: 250px;
  height: 250px;
  border-radius: 22px;
  z-index: var(--z);
  pointer-events: none;
  transform: translate(-50%, -50%) scaleY(.35) rotate(45deg);
  background: radial-gradient(circle, rgba(255,255,255,.25) 0%, rgba(var(--rgb), .96) 100%);
  opacity: .3;
}

/* Icon: pinned to the diamond's centre */
.deck-card .deck-icon {
  position: absolute;
  top: var(--dy);
  left: 50%;
  z-index: 200;
  display: grid;
  place-items: center;
  width: var(--icon-box);
  height: var(--icon-box);
  margin: 0;
  transform: translate(-50%, -50%)
             translateY(calc(var(--icon-y) + var(--i) * var(--icon-gap)));
}

.deck-card:nth-child(2) { --i: 0; --z: 20; --rgb: 255, 84, 194;}
.deck-card:nth-child(3) { --i: 1; --z: 30; --rgb: 229, 67, 198;}
.deck-card:nth-child(4) { --i: 2; --z: 40; --rgb: 202, 50, 202;}
.deck-card:nth-child(5) { --i: 3; --z: 50; --rgb: 176, 34, 207;}
.deck-card:nth-child(6) { --i: 4; --z: 60; --rgb: 149, 17, 211;}
.deck-card:nth-child(7) { --i: 5; --z: 70; --rgb: 123, 0, 215; }


.deck-card:nth-of-type(1)::before { opacity: .01; }
.deck-card:nth-of-type(2)::before { opacity: .0275; }
.deck-card:nth-of-type(3)::before { opacity: .035; }
.deck-card:nth-of-type(4)::before { opacity: .05; }
.deck-card:nth-of-type(5)::before { opacity: .0685; }
.deck-card:nth-of-type(6)::before { opacity: .0875; }
/* .deck-card::before:nth-of-type(7) {} */

.deck-card:nth-of-type(1)::after { opacity: .05; }
.deck-card:nth-of-type(2)::after { opacity: .035; }
.deck-card:nth-of-type(3)::after { opacity: .05; }
.deck-card:nth-of-type(4)::after { opacity: .08; }
.deck-card:nth-of-type(5)::after { opacity: .1; }
.deck-card:nth-of-type(6)::after { opacity: .175; }

.deck-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--icon-sq);
  height: var(--icon-sq);
  background: rgb(var(--rgb));
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.deck-icon svg {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Callouts: line + dot + label share the same vertical centre */
.deck-callouts {
  position: relative;
  display: block;
  flex: 1;
  height: 590px;
  margin-left: -158px;
  padding: 0;
}

.deck-callouts p {
  position: absolute;
  right: 0;
  left: 0;
  top: calc(var(--card-h) / 2 + var(--i) * (var(--deck-step) + var(--callout-gap)) + var(--callout-y));
  margin: 0;
  padding-left: calc(var(--line-len) + 16px);
  display: block;
  line-height: 1;
  transform: translateY(-50%);
  color: #2b3540;
  font-size: 12px;
  font-weight: 700;
  /*letter-spacing: .055em;*/
  letter-spacing: .015em;
  /*text-transform: uppercase;*/
}

.deck-callouts p::before,
.deck-callouts p::after {
  content: "";
  position: absolute;
  top: 50%;
  margin: 0;
  background: var(--c, #f098d7);
  transform: translateY(-50%);
}

.deck-callouts p::before {
  left: 0;
  width: var(--line-len);
  height: 1px;
}

.deck-callouts p::after {
  left: calc(var(--line-len) - var(--dot) / 1);
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
}

.deck-callouts p:nth-child(1) { --i: 0; --c: #f098d7; }
.deck-callouts p:nth-child(2) { --i: 1; --c: #f098d7; }
.deck-callouts p:nth-child(3) { --i: 2; --c: #e28dd8; }
.deck-callouts p:nth-child(4) { --i: 3; --c: #d687db; }
.deck-callouts p:nth-child(5) { --i: 4; --c: #bb7bde; }
.deck-callouts p:nth-child(6) { --i: 5; --c: #b17ae3; }


/* Callout text: eyebrow / number + title / description */
.deck-callouts p {
  font-weight: 400;      /* spans now carry the weight */
  line-height: 1.2;      /* was 1; the block is now 3 lines */
}

.deck-callouts .co-eyebrow,
.deck-callouts .co-title,
.deck-callouts .co-desc { display: block; }

.deck-callouts .co-eyebrow {
  margin-bottom: 2px;
  padding-left: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 55%, #4a0066);
}

.deck-callouts .co-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
  color: #1c242d;
  /* color: #ff0000; */
}

.deck-callouts .co-title,
.deck-callouts .co-eyebrow,
.deck-callouts .co-desc {
  padding-left: 16px;
}

.deck-callouts .co-num {
  margin-right: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #8a93a0;
  vertical-align: .15em;
}

.deck-callouts .co-desc {
  margin-top: 3px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 400;
  color: #2b3540;
}

/* ==========================================================================
   MOBILE / TABLET — diamonds only, labels centred on each diamond.
   Lives in THIS file so it always comes after (and beats) the desktop rules.
   Raise/lower the 960px if the labels start to clip on tablets.
   ========================================================================== */
@media (max-width: 960px) {

  /* .case-lede {
      margin-top: 80px;
  } */
  .diamond-diagram {
    --m-scale: .85;
    --card-w: 320px;
    --deck-step: 90px;
    --icon-gap: 0px;
    --callout-gap: 0px;

    display: block;
    width: 100%;
    height: calc(var(--m-scale) * 1000px);
    min-height: 0;
    /* margin: 40px auto 20px; */
    margin: 0px auto 70px;
    --deck-step: 140px;
    --diamond-step: 160px;     /* add (or leave it to follow --deck-step) */
  }

  .diamond-deck {
    margin: 0 auto;
    transform: scale(var(--m-scale));
    transform-origin: top center;
    opacity: .5;
  }

  /* no spine or icons on mobile */
  .diamond-diagram .deck-spine,
  .diamond-diagram .deck-icon {
    display: none;
  }

  .deck-card::before {
    width: 300px;
    height: 300px;
  }

  /* overlay the callouts on the diamonds */
  .diamond-diagram .deck-callouts {
    position: absolute;
    inset: 0 0 auto 0;
    height: 0;
    margin: 0;
    padding: 0;
    z-index: 200;
  }

  .diamond-diagram .deck-callouts p {
    left: 50%;
    right: auto;
    width: min(92%, 340px);
    box-sizing: border-box;
    padding: 16px 14px;
    /* diamond centre = card centre + 55.5px, scaled with the deck */
    /* top: calc(var(--m-scale) * (var(--card-h) / 2 + 55.5px + var(--i) * var(--deck-step))); */
     top: calc(var(--m-scale) * (var(--i) * var(--deck-step) + var(--dy)));
    transform: translate(-50%, -50%);
    /* display: flex; */
    display: block;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: .05em;
    background: rgba(255, 255, 255, .55);
    border-radius: 8px;
    border-left: 4px solid #c000ff;
  }

  .deck-callouts .co-eyebrow {
    display: contents;
    display: flex;
    margin-left: 0px;
    width: 79px;
  }
  .deck-callouts .co-num {
    margin-right: 12px;
    /* margin-left: 24px; */
    margin-left: 0px;
  }

  .diamond-diagram .deck-callouts p::before,
  .diamond-diagram .deck-callouts p::after {
    display: none;
  }

  .deck-callouts .co-desc {
    /* display: none;  */
    white-space: wrap;
  }

}

@media (max-width: 480px) {
  .diamond-diagram { --m-scale: .72; }
}