/* ==========================================================================
   parts/tabs.css — parts/tabs.php (generic WAI-ARIA tabs; skin .tabs--wlp = live's Bricks nested tabs
   .brxe-tabs-nested.wlp-tabs on /the-monarch-team/). Template-scoped (WFX_SCOPED_PART_STYLES).
   Spec: docs/R3-PLAN.md §1.4.2 (binding, incl. the §11 critic fixes); live: docs/scout/r3/TEAM.md §4.1–§4.4.

   Live boxes (founders tabs):                      390              768                 1440
     tab title (1 line / label wrapped)             49.25, 100% wide 76.5 (2 lines)      49.25
     titles side by side                            stacked          151.75 / 150.97     209.95 / 208.48
     tab list                                       122.67           76.5                49.25
   The title is padding 10 + one 27.25px line (the body's computed line-height, inherited) + 10 + 1px borders.
   Breakpoints: ≤478 every title 100% wide, centred (live .wlp-tabs__title{width:100%}); the list wraps only ≤767
   (Bricks' @media (max-width:767px){.brxe-block{flex-wrap:wrap}} is its only wrap rule), so at 768–≈1000 the two
   titles shrink side by side and their labels wrap inside them (quirk 6, reproduced).
   ========================================================================== */

/* ---- Mechanics --------------------------------------------------------------------------------------- */
.tabs {
  display: flex;
  flex-direction: column;                            /* live .brxe-tabs-nested: no gap, panels right under the list */
}

.tabs__list {
  display: flex;
  flex-direction: row;
}

/* No JS: no tab list, every panel shown, stacked (live shows no founder bio at all without JS; DI-R3-02).
   !important is required: base.css has [hidden] { display: none !important } (0,1,0); this is (0,3,1). */
html:not(.js) .tabs__list { display: none; }
html:not(.js) .tabs__panel[hidden] { display: block !important; }

/* ---- Skin: wlp (live .wlp-tabs; tokens only) ---------------------------------------------------------- */
.tabs--wlp .tabs__list {
  flex-wrap: wrap;                                   /* ≤767 only (live Bricks .brxe-block) */
  align-items: flex-start;                           /* the Bricks block default: unequal titles stay unequal */
  gap: var(--content-gap);
}

/* The title <button> (DI-R3-01) renders exactly like live's div.tab-title: the UA button chrome is reset, and
   `font: inherit` brings the inherited 27.25px line-height with it (the UA button font would reset it). */
.tabs--wlp .tabs__tab {
  display: block;
  inline-size: 100%;                                 /* ≤478: live .wlp-tabs__title{width:100%} */
  margin: 0;
  padding: 1rem 4rem;
  border: 1px solid var(--secondary-semi-light);
  border-radius: .6rem;                              /* live verbatim (6px) */
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: center;
  text-transform: none;
  white-space: normal;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* Active = the border colour only (live; quirk 5, kept). No hover change (live). Focus: the site ring (base.css). */
.tabs--wlp .tabs__tab[aria-selected="true"] { border-color: var(--primary); }

/* Label: live's div.wlp-tabs__text-basic. A block (an inline span would add the button's 16px strut to the line
   box), Inter 700 at --text-l, #79ACD2 for both states. No line-height rule: it inherits the computed 27.25px, as
   live (var(--text-line-height) would re-resolve calc(10px + 2ex) at 19–21px: ≈31.6px, +4.4px per title). */
.tabs--wlp .tabs__label {
  display: block;
  color: var(--secondary-semi-light);
  font-size: var(--text-l);
  font-weight: 700;
}

/* live .tab-content: 20px all round (the pane itself has none, so its focus ring hugs the content). */
.tabs--wlp .tabs__panels { padding: 2rem; }

@media (forced-colors: active) {
  .tabs--wlp .tabs__tab[aria-selected="true"] { border-width: 2px; border-color: Highlight; }
}

/* ≥479: titles content-width, side by side, text at the start. */
@media (min-width: 479px) {
  .tabs--wlp .tabs__tab {
    inline-size: auto;
    text-align: start;
  }
}

/* ≥768: the list no longer wraps (live #brxe-sipult{flex-direction:row}, no wrap rule from 768). */
@media (min-width: 768px) {
  .tabs--wlp .tabs__list { flex-wrap: nowrap; }
}