/* qualification_cards block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   qualification cards. (.tabbed / .tabbed-menu styling relocated to
   tabbed_content.css so each block CSS is self-contained for per-page enqueue.) */

.qualification-cards__filters { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.3rem; border-bottom: 1px solid var(--box-border); }
.qualification-cards__filter {
  border-bottom: 4px solid transparent; padding: .8rem 1.1rem;
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.3125rem; color: var(--muted);
}
/* JS sets aria-pressed on the level filter (it is a filter, not a tab). */
.qualification-cards__filter[aria-pressed="true"] { color: var(--em-color); border-bottom-color: var(--em-color); }
/* NB: .tabbed is NOT a grid — it is the tab container (menu + stacked panels).
   It was previously lumped into this 3-col grid, which laid the panels out
   side-by-side as cards and defeated the tab show/hide. */
.qualification-cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.qualification-cards__card { display: flex; flex-direction: column; gap: .5rem; background: var(--white); border: 1px solid var(--line); border-left: var(--card-edge) solid var(--accent); border-radius: var(--radius-sm); padding: 1.5rem 1.6rem; }
/* The level filter (qualification_cards.js) hides a card with the `hidden`
   attribute. `display: flex` above overrides the UA `[hidden] { display: none }`,
   so without this the filter set the attribute but nothing disappeared. More
   specific than the rule above, so it wins without !important. */
.qualification-cards__card[hidden] { display: none; }
/* Same fill/label pairing fix as .comparison-card__badge: --accent-2 is a bright
   accent with no defined label partner, so white on nlc's teal measured 2.15:1.
   --btn-accent-bg / --btn-accent-text are defined per brand as a working pair. */
.qualification-cards__badge { align-self: flex-start; font-size: var(--fs-meta); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--btn-accent-text); background: var(--btn-accent-bg); padding: .3rem .8rem; border-radius: var(--radius-pill); }
.qualification-cards__name { font-size: 1.4375rem; }
.qualification-cards__facts { display: flex; flex-wrap: wrap; gap: .4rem; }
.qualification-cards__fact { font-size: var(--fs-min); font-weight: 700; color: var(--text-heading); border: 1px solid var(--box-border); padding: .2rem .7rem; border-radius: var(--radius-pill); }
.qualification-cards__desc { font-size: var(--fs-min); color: var(--muted); }
.qualification-cards__link { margin-top: auto; padding-top: .8rem; font-size: var(--fs-min); font-weight: 700; }
@media (max-width: 64em) { .qualification-cards__grid { grid-template-columns: 1fr; } }