/* shift block — the "today's pain → what changes" transformation pair.
 * Two SDS cream cards (tone system: burgundy = pain, emerald = value — the
 * evidence-figure semantic palette) joined by a gold shift mark. The mark is
 * decoration only (aria-hidden in the partial): a hairline growing an
 * arrowhead, gold like other decorative brand marks; it turns to point down
 * when the cards stack. @layer web sorts above the SDS layers, so the card
 * can retire the cream card's legacy left bar without specificity fights. */
@layer web {
  .shift__head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
  .shift__title {
    font-family: var(--sph-font-display);
    font-weight: var(--sph-weight-extrabold);
    font-size: clamp(1.6rem, 4vw, 2.75rem);
    line-height: 1.05;
    letter-spacing: var(--sph-tracking-tight);
    color: var(--sph-text);
    margin: 0.5rem 0 0;
    max-width: 22ch;
  }
  .shift__title .sph-accent { color: var(--sph-primary); }

  .shift__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 1.75rem);
    align-items: stretch;
  }

  .shift__card {
    border-left: 0;                        /* retire the cream card's legacy bar */
    border-top: 2px solid var(--sph-tone); /* the tone hairline */
    padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(1.25rem, 3vw, 2rem);
    gap: 0.85rem;
  }
  .shift__label {
    margin: 0;
    font-family: var(--sph-font-display);
    font-weight: var(--sph-weight-bold);
    font-size: var(--sph-fs-xs);
    line-height: 1;
    letter-spacing: var(--sph-tracking-wider);
    text-transform: uppercase;
    /* Tone-coded, pulled toward the text ink so the small size passes AA on
       the cream card in BOTH themes (light: emerald 4.8:1, burgundy 9.0:1;
       dark: lifted tones 5.7:1+). Full-strength tone stays on the hairline. */
    color: color-mix(in srgb, var(--sph-tone) 80%, var(--sph-text));
  }
  .shift__claim {
    margin: 0;
    font-family: var(--sph-font-display);
    font-weight: var(--sph-weight-bold);
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--sph-text);
    text-wrap: balance;
  }
  .shift__text {
    margin: 0;
    color: var(--sph-text-soft);
    font-size: var(--sph-fs-sm);
    line-height: var(--sph-lh-normal);
  }

  /* The shift mark — hairline + arrowhead, centred between the cards. */
  .shift__mark {
    align-self: center;
    width: clamp(2rem, 4vw, 3.25rem);
    height: 2px;
    background: var(--sph-primary);
    position: relative;
  }
  .shift__mark::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--sph-primary);
    border-right: 2px solid var(--sph-primary);
    transform: translateY(-50%) rotate(45deg);
  }

  @media (max-width: 44rem) {
    .shift__pair { grid-template-columns: 1fr; }
    .shift__mark {
      justify-self: center;
      width: 2px;
      height: clamp(1.5rem, 6vw, 2.5rem);
    }
    .shift__mark::after {
      right: auto;
      left: 50%;
      top: auto;
      bottom: -1px;
      transform: translateX(-50%) rotate(135deg);
    }
  }
}