/* ==========================================================================
   The Foundation programme Support page (analysis 5.5; AB#100745 visitor, AB#100746 content editor)

   ONE RULE LIVES HERE, and it is worth saying why the file exists at all rather than folding the rule
   into foundation-bands.css.

   The two delivered frames disagree about where the contact call to action sits. The desktop draws the
   featured impact story, then the three story cards, then the call to action, then the news. The phone
   draws the featured story, then the CALL TO ACTION, then the story cards, then the news. Measured, not
   read off a thumbnail: on design/foundation-programme-support/reference-mobile.png the card is an
   inset grey panel at y 8374 to 8609, between the featured story's View Impact button at 8283 to 8323
   and the first story card at 8660 to 8790.

   AB#100745's design-verified clause of 7 September 2026 states the DESKTOP order ("when I scroll past
   the Impact Stories section"), so that is the order the markup carries, and this file moves the band
   at phone width so the phone frame is honoured too.

   It is scoped to this page's wrapper because all three bands are SHARED. A reorder in the bands
   stylesheet would reflow 5.1, 5.3 and 5.6, none of which draws the call to action at all today and
   any of which may draw it tomorrow.

   What it costs, recorded as divergence 2 in design/foundation-programme-support/SOURCE.md rather than
   left for a reader to discover: the DOM order and the visual order diverge on phones, so keyboard
   focus reaches the call to action's Contact button after the story cards while the eye reaches it
   before them. That is a WCAG 2.2 2.4.3 concern and the reason the divergence asks HeyGuys to settle on
   one order for both frames. When they do, this file goes.

   Every rule is scoped under .brand-foundation, the class masterFoundation.cshtml puts on the body
   element, so nothing here can reach the ASISA, ESD or Academy layouts (site-within-a-site rule,
   handover 31 Aug 2026). Loaded after foundation-programme-project.css and foundation-bands.css, whose
   tokens it reads.
   ========================================================================== */

/* GRID and not flex, and one column. Each band is then a full row, so the full-bleed bands (the quote,
   the statistics, the SDG strip) still span edge to edge. Flex would do the same here, but a grid says
   what is meant: these are rows in a sequence and the rule below changes which row two of them take.

   Grid and flex both stop margin collapsing, and every band on this page sets its own top margin
   rather than relying on a collapse, so the vertical rhythm is unchanged. That is checked at 360 in
   the acceptance fixture rather than assumed. */
@media (max-width: 767px) {
  .brand-foundation .fnd-project[data-testid="programme-support"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  /* Order is set on every band from the featured story down, and on none of the bands above it.
     That is deliberate rather than minimal: order defaults to 0, so numbering only the two bands that
     swap would put them after the news band as well, and numbering the news band without the ones
     above it would put the news above the whole page. Everything before the featured story keeps the
     default 0 and stays where the DOM puts it, because 0 sorts before 1. */
  .brand-foundation .fnd-project[data-testid="programme-support"] .fnd-project-story {
    order: 1;
  }

  /* The swap. The phone frame draws the call to action here, between the featured story and the cards. */
  .brand-foundation .fnd-project[data-testid="programme-support"] .fnd-band-cta {
    order: 2;
  }

  .brand-foundation .fnd-project[data-testid="programme-support"] .fnd-project-stories {
    order: 3;
  }

  .brand-foundation .fnd-project[data-testid="programme-support"] .fnd-news {
    order: 4;
  }
}