/**
 * Funding LIST view — row layout repair.  bbn-portal, added 2026-09-13.
 *
 * DEFECT (Browser QA P1-3): in List view some card titles rendered one character per line.
 *
 * MEASURED ROOT CAUSE, at 993x800 on the live grid. The list row (.elementor-element-5ac6b68b)
 * is `flex-flow: row nowrap`, 750px wide, with four children:
 *
 *                       healthy card (post-3498)     broken card (post-3433)
 *   badges  0 0 auto            106px                        91px
 *   TITLE   1 1 auto            369px                        27px   <-- collapses
 *   funder  0 0 auto             47px                       404px   <-- cannot shrink
 *   button  0 0 auto            130px                       130px
 *
 * The funder column is flex: 0 0 auto, so it NEVER yields. "MEDA (Metropolitan Economic
 * Development Association)" claimed 404px of a 750px row; the title is the only flexible child,
 * so it absorbed the entire shortfall, fell to 27px — narrower than one word — and
 * overflow-wrap: break-word then broke it at every character. The worst case measured 6px wide
 * by 700px tall.
 *
 * NOT A WIDTH BUG. The cards that looked fine were the ones with MISSING funder data: an empty
 * "FUNDER:" label is only 47px. Filling that data in (P2-5) would have broken more cards, not
 * fewer.
 *
 * THE FIX IS THE SHARED ROW RULE, NOT PER-CARD WIDTHS
 *   1. let the row WRAP — when the pieces no longer fit, they move to a second line instead of
 *      crushing the one flexible child. This is what makes the repair width-independent.
 *   2. give the title a readable floor, capped by min() so it can never exceed its container
 *      and therefore cannot cause overflow on a narrow screen.
 *   3. let the funder column shrink like everything else.
 *
 * No fixed pixel widths and no desktop-only breakpoint: the existing <=700px rules keep working
 * underneath, and wrapping degrades correctly at any width in between — the 701-1024px band that
 * had no wrap rule at all is exactly where this was reported.
 */

/* The repeated .bbn-fund-list class is deliberate. The rules being corrected live in the page's
 * own inline <style> and already use !important at the same specificity — with equal specificity
 * and equal !important the LAST sheet parsed wins, and an enqueued file cannot guarantee it is
 * last. Repeating the class raises specificity so this file wins on merit rather than on load
 * order. Notably the inline rule sets `min-width: 0 !important` on the title column, which is
 * precisely what allows it to collapse to 27px. */

/* 1. The row may wrap. */
body.bbn-fund-list.bbn-fund-list .e-loop-item .elementor-element-5ac6b68b {
  flex-wrap: wrap !important;
  row-gap: 8px !important;
}

/* 2. The title keeps a readable minimum, never wider than its container. */
body.bbn-fund-list.bbn-fund-list .e-loop-item .elementor-element-fd9d30d {
  flex: 1 1 auto !important;
  min-width: min(100%, 15rem) !important;
}

/* 3. The funder column yields instead of pinning the row open. */
body.bbn-fund-list.bbn-fund-list .e-loop-item .elementor-element-7e13505,
body.bbn-fund-list.bbn-fund-list .e-loop-item .elementor-element-7cfe637 {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

/* ---------------------------------------------------------------------------------------------
 * Cards/List toggle — accessibility, fixed in the same pass.
 *
 * funding-grid.js builds the toggle as two <button>s and marks the current one with .active,
 * but ships no styling for focus, hover or the active state, so the selected view was signalled
 * by nothing an assistive technology could read and the keyboard focus ring was the browser
 * default over a light background.
 *
 * aria-pressed is set from JS (see funding-grid.js); this supplies the visible half:
 *   - .active gets fill + weight, not colour alone
 *   - :focus-visible gets the same two-tone ring used by the Save control, because the measured
 *     portal gold #C89A3C is only 2.58:1 on white and fails SC 1.4.11's 3:1 floor.
 *     #0B4437 on white measures 11.07:1; white on #0F5C4A measures 7.92:1.
 * ------------------------------------------------------------------------------------------- */
/* Tokenised (Gate 1 triage): #0F5C4A was a fifth dark green unique to this file and
 * saved-toggle.js. Never an accessibility defect (7.92:1), purely palette drift on an
 * interactive control. Brand border + deep-brand label matches .bbn-btn--secondary, and the
 * label contrast improves to 9.40:1. */
.bbn-view-toggle button {
  min-height: 36px;
  padding: 6px 14px;
  border: 1.5px solid var(--bbn-brand, #0A5A45);
  background: var(--bbn-surface, #FFFFFF);
  color: var(--bbn-brand-deep, #07493B);
  font: 600 13px Poppins, system-ui, sans-serif;
  cursor: pointer;
}
/* Outer corners only — the join between the two halves stays square so they read as one control.
   Uses the token rather than a literal so the pair follows the 6px product standard. */
.bbn-view-toggle button:first-child { border-radius: var(--bbn-radius) 0 0 var(--bbn-radius); }
.bbn-view-toggle button:last-child  { border-radius: 0 var(--bbn-radius) var(--bbn-radius) 0; border-left-width: 0; }
.bbn-view-toggle button:hover { background: var(--bbn-brand-deep, #07493B); color: #FFFFFF; }
.bbn-view-toggle button.active {
  background: var(--bbn-brand-deep, #07493B);
  color: #FFFFFF;
  font-weight: 700;          /* non-colour cue */
}
.bbn-view-toggle button:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 0;
  box-shadow: 0 0 0 5px #0B4437;
  position: relative;
  z-index: 1;
}