/* ============================================================
   Role Tab Strip — folder-tab style matching Solutions hub-tabs.
   Overlaps the hero bottom and bridges into content area below.
   Includes hub-level tabs (By Role / By Problem) on the left,
   then role-detail tabs on the right.
   ============================================================ */

.role-tabs {
  position: relative;
  z-index: 10;
  max-width: var(--mp-max-width);
  margin: -40px auto 0;
  padding: 0 var(--mp-space-6);
  display: flex;
  align-items: stretch;
  gap: var(--mp-space-2);
}

.role-tabs a {
  position: relative;
  font-family: var(--mp-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mp-neutral-500);
  background: var(--mp-warm-bg);
  border: 1px solid var(--mp-neutral-200);
  border-radius: 6px 6px 0 0;
  padding: 11px 18px 10px;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.role-tabs a:hover {
  color: var(--mp-primary-700);
  background: var(--mp-warm-bg-alt, #f2efe6);
}

.role-tabs a.is-active {
  background: #fff;
  color: var(--mp-primary-700);
  font-weight: 600;
  border-bottom-color: #fff;
  z-index: 1;
}

/* Roman numeral styling — match hub-tabs */
.role-tabs a .roman {
  font-family: var(--mp-font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--mp-accent-500);
  margin-right: 2px;
}

/* ── Hub-level tabs (By Role / By Problem) ─────────────────── */
.role-tabs .hub-tab {
  font-weight: 500;
}
.role-tabs .hub-tab .roman {
  font-weight: 600;
}

/* ── Separator between hub tabs and role detail tabs ────────── */
.role-tabs .tab-sep {
  display: flex;
  align-items: center;
  padding: 0 6px;
  align-self: center;
  color: var(--mp-neutral-300);
  font-size: 16px;
  user-select: none;
  pointer-events: none;
}

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .role-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding: 0 var(--mp-space-4);
  }
  .role-tabs::-webkit-scrollbar { display: none; }
  .role-tabs a { font-size: 10px; padding: 9px 12px 8px; }
}

/* ── Consistent hero height across all role + solutions pages ─ */
.persona-hero,
.page-hero.solutions-hero {
  box-sizing: border-box;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
}
.persona-hero .persona-hero-inner,
.page-hero.solutions-hero .page-hero-inner {
  width: 100%;
  max-width: var(--mp-max-width);
  margin: 0 auto;
}
/* Account for tabs overlapping the bottom 40px */
.persona-hero { padding-bottom: calc(var(--mp-space-20) + 40px); }
.page-hero.solutions-hero { padding-bottom: calc(var(--mp-space-20) + 40px); }