/* ============================================================================ * EWPK Hub — balanced grids. v2.12.29. * * The Hub's own themes (Firstborn and the classics) never load the Premium * Suite's render-guards.css, so the identical rules live here too. That is a * duplicated STYLESHEET, not a duplicated RULE: both files are generated from * the same table, and a free-tier site would otherwise keep the three-across- * and-one-below layout this release exists to remove. * ========================================================================== */ /* ── 5. BALANCED GRIDS — never three across and one below ──────────────────── * * v1.25.17. THE DEFECT, in the owner's words: "when pages produce anything in * groups such as how it works they are in a 4 pack yet the page is split in 3 * and 1 below. this looks like a poor designer job." * * He is right and it is systemic. All 236 grids in the library were written as * * grid-template-columns: repeat(auto-fit, minmax(NNNpx, 1fr)) * * which means the column count is whatever happens to fit the container. Nobody * ever chose it, and nothing ever consulted the number of items. Meanwhile the * generator's own JSON skeleton asks for exactly FOUR of nearly everything — * four features, four services, four stats, four FAQs — and four is the worst * number in that system: * * 46 grids with a >=280px floor -> 4 items render 3 + 1 ON DESKTOP * 131 grids at 220-260px -> 4 items render 3 + 1 at tablet width * 55 grids at <=200px -> 4 items render 3 + 1 on a small tablet * * So at some viewport width, essentially every group in every theme orphans an * item. It reads as carelessness because it IS carelessness — just nobody's in * particular. * * THE FIX IS THE ITEM COUNT, WHICH CSS CAN NOW SEE. :has() lets the container * respond to how many children it has, so the column count is chosen per group * rather than per container width. The rule is simply: NEVER LEAVE EXACTLY ONE * ITEM ALONE ON THE LAST ROW. Four goes 4-across or 2x2, never 3+1. Five goes * 3+2. Six goes 3+3. Seven goes 4+3. * * Where a count makes an orphan unavoidable at a given width (seven items in * three columns), THE LAST ITEM SPANS THE FULL ROW instead. A full-width final * card reads as a deliberate finish; a lonely third-width card reads as a bug. * * WHY THIS IS CSS AND NOT PHP: the alternative was passing an item count out of * 236 call sites in 35 themes, which is 236 chances to miss one and a permanent * obligation on every future section. The container already knows how many * children it has. Let it. * * The whole block is inside @supports, so a browser without :has() gets exactly * today's behaviour rather than a broken one. * -------------------------------------------------------------------------- */ .ewpk-g { display: grid; /* The pre-:has() fallback IS today's behaviour, with each grid's own density floor carried across as a custom property — so a browser without :has() renders exactly what it renders now, never worse. */ grid-template-columns: repeat( auto-fit, minmax( var( --ewpk-min, 240px ), 1fr ) ); } @supports selector(:has(*)) { /* Phone: one column, always. Two columns of anything meaningful below 640px produces a card too narrow to read, and the orphan question does not arise in a single column. */ .ewpk-g, [class*="eaa-"] [class*="-grid-2"], [class*="eaa-"] [class*="-grid-3"], [class*="eaa-"] [class*="-grid-4"], [class*="eaa-"] [class*="-grid-5"] { grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { /* Tablet */ .ewpk-g:has(> :nth-child(1):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(1):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(1):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(1):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(1):last-child) { grid-template-columns: repeat(1, minmax(0, 1fr)); } .ewpk-g:has(> :nth-child(2):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(2):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(2):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(2):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ewpk-g:has(> :nth-child(3):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(3):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(3):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(3):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ewpk-g:has(> :nth-child(4):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(4):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(4):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(4):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ewpk-g:has(> :nth-child(5):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(5):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(5):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(5):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ewpk-g:has(> :nth-child(6):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(6):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(6):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(6):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ewpk-g:has(> :nth-child(7):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(7):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(7):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(7):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(7):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ewpk-g:has(> :nth-child(7):last-child) > :last-child, [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(7):last-child) > :last-child, [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(7):last-child) > :last-child, [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(7):last-child) > :last-child, [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(7):last-child) > :last-child { grid-column: 1 / -1; } .ewpk-g:has(> :nth-child(8):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(8):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(8):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(8):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(8):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ewpk-g:has(> :nth-child(9):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(9):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(9):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(9):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ewpk-g:has(> :nth-child(10):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(10):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(10):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(10):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(10):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ewpk-g:has(> :nth-child(11):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(11):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(11):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(11):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(11):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ewpk-g:has(> :nth-child(12):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(12):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(12):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(12):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(12):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { /* Desktop */ .ewpk-g:has(> :nth-child(1):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(1):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(1):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(1):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(1):last-child) { grid-template-columns: repeat(1, minmax(0, 1fr)); } .ewpk-g:has(> :nth-child(2):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(2):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(2):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(2):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ewpk-g:has(> :nth-child(3):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(3):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(3):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(3):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ewpk-g:has(> :nth-child(4):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(4):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(4):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(4):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ewpk-g:has(> :nth-child(5):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(5):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(5):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(5):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ewpk-g:has(> :nth-child(6):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(6):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(6):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(6):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ewpk-g:has(> :nth-child(7):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(7):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(7):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(7):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(7):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ewpk-g:has(> :nth-child(8):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(8):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(8):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(8):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ewpk-g:has(> :nth-child(9):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(9):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(9):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(9):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ewpk-g:has(> :nth-child(10):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(10):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(10):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(10):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(10):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ewpk-g:has(> :nth-child(11):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(11):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(11):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(11):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(11):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ewpk-g:has(> :nth-child(12):last-child), [class*="eaa-"] [class*="-grid-2"]:has(> :nth-child(12):last-child), [class*="eaa-"] [class*="-grid-3"]:has(> :nth-child(12):last-child), [class*="eaa-"] [class*="-grid-4"]:has(> :nth-child(12):last-child), [class*="eaa-"] [class*="-grid-5"]:has(> :nth-child(12):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } }