/* static-fixes.css — reproduces JS-driven layout that breaks once JS is stripped.
   The "storied" theme lays the post-listing grid out with a JS masonry script that
   absolute-positions each card. Without JS the cards fall back to `float:left` with
   uneven heights, so tall cards snag shorter ones and the grid staggers/overlaps and
   the page background bleeds through the gaps. Fix: lay the grid out with flexbox so
   cards tile into clean rows regardless of height. The theme still computes each card's
   width + right-margin responsively (4-up wide, 3-up narrower), so we keep those and
   only change the flow. */

/* the post-listing grid container (home + category archives) */
.wrp .bSe.fullWidth {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;      /* all cards in a row take the row's full height... */
  align-content: flex-start;
}

/* the individual post cards — drop the float that caused the stagger. Stretch each
   card's inner white panel to fill the equalised row height so the page background
   can't bleed through the gaps between cards of different content lengths. */
.wrp .bSe.fullWidth > article.gr-i {
  float: none !important;
  display: flex;
}
.wrp .bSe.fullWidth > article.gr-i > .awr-e {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.wrp .bSe.fullWidth > article.gr-i > .awr-e > .awr {
  flex: 1 1 auto;            /* the white card body fills the equalised height */
}

/* the pagination row ("1 2 3") should sit on its own full-width line below the grid */
.wrp .bSe.fullWidth > .pgn,
.wrp .bSe.fullWidth > .clear {
  flex: 0 0 100%;
  width: 100%;
}