/* data-bi-capability-menu
 *
 * Reusable capability menu: a numbered menu of the three things the practice does,
 * built as stacked full-width rows on one dark ground so it reads as a single menu
 * rather than three detached cards. The row numerals are the spine: the capability
 * sections that follow repeat the same numeral in their own rail.
 * Approved as a new library template candidate (manifest section `data-bi-capability-menu`).
 * Depends on: css/tokens.css, assets-premium/fonts/fonts.css.
 *
 * Library spacing standard:
 *  - section root renders 80px top and bottom padding, with 56px between the title block and the menu;
 *  - large menu numerals (display type above --fs-content-index) so the menu index
 *    can be read back in each capability section.
 */

.data-bi-capability-menu,
.data-bi-capability-menu *{box-sizing:border-box}

.data-bi-capability-menu{
  scroll-margin-top:var(--hdr-h);
  width:100vw;
  max-width:none;
  padding-block:80px;
  border-top:1px solid rgba(255,255,255,.16);
  background:var(--deep);
  color:var(--on-dark-soft);
  font-family:var(--body);
}

.data-bi-capability-menu__in{width:var(--shell);margin:0 auto}

.data-bi-capability-menu__head{display:flex;flex-direction:column;gap:18px}
.data-bi-capability-menu__kicker{color:var(--gold)}
.data-bi-capability-menu__title{color:var(--paper)}
.data-bi-capability-menu__lede{color:var(--on-sage)}

.data-bi-capability-menu__list{
  margin-top:56px;
  border-top:1px solid rgba(255,255,255,.22);
}

.data-bi-capability-menu__row{
  display:grid;
  grid-template-columns:150px minmax(0,1fr) minmax(0,1.15fr) 56px;
  gap:clamp(20px,3vw,44px);
  align-items:center;
  padding:34px 0;
  border-bottom:1px solid rgba(255,255,255,.22);
  color:inherit;
  transition:background .24s var(--ease),padding-left .24s var(--ease);
}
.data-bi-capability-menu__row:hover,
.data-bi-capability-menu__row:focus-visible{
  background:rgba(255,255,255,.06);
  padding-left:20px;
}

.data-bi-capability-menu__index{
  font-family:var(--display);
  font-weight:var(--display-weight);
  font-size:clamp(66px,7vw,104px);
  line-height:.82;
  letter-spacing:-.01em;
  color:var(--gold);
}
.data-bi-capability-menu__row-title{color:var(--paper)}
.data-bi-capability-menu__copy{color:var(--on-sage)}
.data-bi-capability-menu__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border:1px solid var(--gold);
  color:var(--gold);
  font-size:20px;
  line-height:1;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.data-bi-capability-menu__row:hover .data-bi-capability-menu__cta,
.data-bi-capability-menu__row:focus-visible .data-bi-capability-menu__cta{
  background:var(--gold);
  color:var(--cta-ink);
}

@media (max-width:900px){
  .data-bi-capability-menu__row{
    grid-template-columns:96px minmax(0,1fr);
    gap:18px 22px;
    align-items:start;
  }
  .data-bi-capability-menu__index{font-size:clamp(52px,12vw,72px)}
  .data-bi-capability-menu__copy{grid-column:2}
  .data-bi-capability-menu__cta{grid-column:2;width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){
  .data-bi-capability-menu__row,.data-bi-capability-menu__cta{transition:none}
  .data-bi-capability-menu__row:hover,.data-bi-capability-menu__row:focus-visible{padding-left:0}
}

/* Template title standard: section H2 */
[data-section="data-bi-capability-menu"][data-section="data-bi-capability-menu"] h2,
.data-bi-capability-menu.data-bi-capability-menu h2{
  font-size:50px !important;
  font-weight:500 !important;
  line-height:var(--lh-tight) !important;
  overflow-wrap:anywhere;
}

/* Title/description stack standard: main title stacks above description at 75% content width. */
[data-section="data-bi-capability-menu"] .data-bi-capability-menu__title,
[data-section="data-bi-capability-menu"] .data-bi-capability-menu__lede{
  width:var(--title-description-width) !important;
  max-width:var(--title-description-width) !important;
  margin-left:0 !important;
  margin-right:auto !important;
}