/* persona-tabs block deltas (plan §5.2) — web-only layout on top of SDS type
 * and the .sph-chart-panel evidence card. @layer web so it sorts above the SDS
 * layers. Matches V2: head row (title | lead), a quiet tab strip, then a
 * two-column panel (persona pitch | evidence card). Without the JS island all
 * panels render stacked; .ptabs--js switches to one-at-a-time (via [hidden]). */
@layer web {
  .ptabs__head {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: end;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  }
  .ptabs__heading {
    font-family: var(--sph-font-display);
    font-weight: var(--sph-weight-extrabold);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: var(--sph-tracking-tight);
    color: var(--sph-text);
    margin: 0.75rem 0 0;
  }
  .ptabs__heading .sph-accent { color: var(--sph-primary); }
  .ptabs__lead { margin: 0; }

  .ptabs__strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.75rem;
    border-bottom: 1px solid var(--sph-border);
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  }
  .ptabs__tab {
    font-family: var(--sph-font-display);
    font-weight: var(--sph-weight-semibold);
    font-size: var(--sph-fs-sm);
    color: var(--sph-text-soft);
    text-decoration: none;
    padding-block: 0.6rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;              /* sit on the strip's hairline */
  }
  .ptabs__tab:hover { color: var(--sph-primary); }
  .ptabs__tab[aria-selected="true"] {
    color: var(--sph-text);
    border-bottom-color: var(--sph-primary);
  }

  .ptabs__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
  }
  .ptabs__panel[hidden] { display: none; }
  /* No-JS: the panels stack; give them breathing room between personas. */
  .ptabs__panel + .ptabs__panel { margin-top: clamp(2rem, 5vw, 3.5rem); }

  /* With no authored eyebrow, reclaim its row and align the copy with the
     evidence figure instead of vertically centering the shorter text stack. */
  .ptabs__body--without-eyebrow { align-self: start; }
  .ptabs__panel-eyebrow { color: var(--sph-text-muted); }
  .ptabs__title {
    font-family: var(--sph-font-display);
    font-weight: var(--sph-weight-extrabold);
    font-size: clamp(1.5rem, 3.2vw, 2.25rem);
    line-height: 1.1;
    letter-spacing: var(--sph-tracking-tight);
    color: var(--sph-text);
    margin: 0.75rem 0 0;
    max-width: 18ch;
  }
  .ptabs__title .sph-accent { color: var(--sph-primary); }
  .ptabs__text {
    margin: 1rem 0 0;
    max-width: 42ch;
    color: var(--sph-text-soft);
  }
  /* The persona one-liner — V2's quoted bar ("Today you see cost. …"). */
  .ptabs__tagline {
    font-family: var(--sph-font-display);
    font-weight: var(--sph-weight-semibold);
    font-style: italic;
    color: var(--sph-text);
    border-left: 3px solid var(--sph-primary);
    padding-left: 0.9rem;
    margin: 1.25rem 0 0;
    max-width: 36ch;
  }
  .ptabs__link {
    display: inline-block;
    font-family: var(--sph-font-display);
    font-weight: var(--sph-weight-semibold);
    font-size: var(--sph-fs-sm);
    color: var(--sph-info);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
    margin-top: 1.5rem;
  }
  .ptabs__link:hover { color: var(--sph-primary-deep); }

  .ptabs__figure { margin: 0; }
  .ptabs__figure svg { width: 100%; height: auto; display: block; }

  @media (max-width: 52rem) {
    .ptabs__head, .ptabs__panel { grid-template-columns: 1fr; }
  }
}