/* FRAME block graphics: frame-blocks.css v1.0, LOCKED (Phase 2, October 24, 2026).
   Design reviewed by Shirley Coco. Do not change this spec during rollout.

   SPEC
   - Square boxes only: box 26px, gap 10px (5/13 of the box), radius 2.6px (0.1 of the box),
     the same as the site's .road-grid. Boxes stay 26/10 at every width, including 390.
   - Deep Navy #0B1D33 carries meaning. Steel Gray #5E6E7E carries secondary content.
     Grid Blue Gray #DFE9F4 is for empty cells only: it never gets a legend entry or a meaning.
   - Background White (#FFFFFF) or #F8FAFC. No outlines, shadows, gradients, rotation or transparency.
   - Every road run is whole boxes. Never more than 8 boxes across (284px panel).
     If a graphic needs more than 8 across, rethink the graphic; do not widen the panel.
   - Labels are live HTML in Manrope: 800 caps for titles, 400 for labels, 14px or larger.
     A source line sits under any figure. Each figure has a figcaption; the cells are aria-hidden.
   - Placement at 1100px and wider: modules 10 to 12 of the 12 module .sub-move
     (left 75%, width 25%: x 1004 to 1288, 284px, at 1440). Module 9 stays clear of the text.
     Fallback .fb-stack: a figure taller than its text follows the section content, still in modules 10 to 12.
     Below 1100px the figure stacks under the section content, max 350px wide.

   ACCENT HOOK (off): one cell per figure may take the class fb-c--accent. Until Jonathan approves
   the accent, --fb-accent resolves to Deep Navy. To enable later, set --fb-accent: var(--hero-blue)
   on that figure. Never more than one accent cell per figure.

   FORMS
   .fb--cluster  groups of boxes compared side by side, with a legend for navy and steel only
   .fb--road     one connected vertical run of navy boxes with labeled stops (structural sequences)
   .fb--div      divider rows: equal rows, each a short navy run plus a label beside it
   .fb--step     step bar: groups of four boxes filling by stage; only for sourced, real stages */

.fb{--fb-box:26px;--fb-gap:10px;--fb-navy:#0B1D33;--fb-steel:#5E6E7E;--fb-empty:#DFE9F4;--fb-accent:var(--fb-navy);
  margin:40px 0 0;padding:0;background:#FFFFFF;color:var(--fb-navy);font-family:"Manrope",sans-serif}
.fb p,.fb ul{margin:0;letter-spacing:0}
.fb figcaption{margin:0 0 20px}
.fb .fb-t{font-weight:800;font-size:15px;line-height:1.35;letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px;color:var(--fb-navy)}
.fb .fb-fig{font-weight:800;font-size:28px;line-height:1.15;margin:0 0 6px;color:var(--fb-navy)}
.fb .fb-l{font-weight:400;font-size:15px;line-height:1.45;color:var(--fb-navy)}
.fb .fb-note{font-weight:400;font-size:15px;line-height:1.45;margin:12px 0 0;color:var(--fb-navy)}
.fb .fb-src{font-weight:400;font-size:14px;line-height:1.45;margin:20px 0 0;color:var(--fb-steel)}
.fb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* cells */
.fb-g{display:grid;grid-template-columns:repeat(var(--cols,1),var(--fb-box));grid-auto-rows:var(--fb-box);gap:var(--fb-gap)}
.fb-c{display:block;width:var(--fb-box);height:var(--fb-box);border-radius:calc(var(--fb-box)*.1);background:var(--fb-empty)}
.fb-c--n{background:var(--fb-navy)}
.fb-c--s{background:var(--fb-steel)}
.fb-c--accent{background:var(--fb-accent)}

/* cluster */
.fb-cluster{display:flex;gap:calc(var(--fb-box) + var(--fb-gap));align-items:flex-start}
.fb .fb-key{display:flex;flex-direction:column;gap:10px;margin:20px 0 0;padding:0;list-style:none}
.fb-key li{display:grid;grid-template-columns:var(--fb-box) 1fr;column-gap:var(--fb-gap);align-items:start;font-size:15px;line-height:1.4}

/* road: cells placed on a 36px pitch; stops are labeled in the second column */
.fb-road{display:grid;grid-template-columns:var(--fb-box) 1fr;grid-auto-rows:var(--fb-box);column-gap:18px;row-gap:var(--fb-gap)}
.fb-road > .fb-c{grid-column:1}
.fb-road > .fb-lab{grid-column:2}

/* divider rows: equal height rows, short navy run then the label beside it */
.fb-rows{display:grid;grid-auto-rows:1fr;row-gap:calc(var(--fb-box) + var(--fb-gap))}
.fb-row{display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:start}
.fb-row > .fb-g{--cols:3}

/* step bar: one group of four boxes per stage */
.fb-steps{display:grid;grid-auto-rows:auto;row-gap:calc(var(--fb-box) + var(--fb-gap))}
.fb-steps .fb-g{--cols:4;margin:0 0 10px}

/* shared label style for road stops, divider rows and steps */
.fb .fb-lab{margin:0;font-size:15px;line-height:1.4;color:var(--fb-navy)}
.fb .fb-lab b{display:block;font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase}

/* placement */
@media (min-width:1100px){
  .sub-move.has-fb{position:relative}
  .sub-move.has-fb > .fb{position:absolute;top:0;left:75%;width:25%;margin:0}
  /* fallback when the figure is taller than the text beside it (it would reach a full width stat row):
     add .fb-stack to the .sub-move; the figure then follows the section content, still in modules 10 to 12 */
  .sub-move.has-fb.fb-stack > .fb{position:static;width:25%;margin:40px 0 0 75%}
}
@media (max-width:1099px){ .fb{max-width:350px} }