/* Responsive fix for the "8 resource cards + photo" section on test-homepage-2 (post 8679, Figma node 1427:1701 "Responsive"). Card-flip and column-count are scoped to this page's specific block uniqueIDs so no other rowlayout/column on the site is affected. Card internal layout (vertical -> horizontal on mobile) is handled natively via Kadence's own infobox mediaAlignMobile block attribute (set on all 8 cards) — no CSS needed for that piece. Column A (.kadence-column8679_14b070-ca) isn't a real side-by-side layout at the block level — it's a single full-width wrapper around the ENTIRE section (heading + card grid), with the photo set as its own background-image. Kadence doesn't expose a responsive variant of the column's bgImgSize/bgImgPosition attributes, and there's no native way to turn a background-image column into a real sized grid track, so the photo is rebuilt entirely in CSS below as a ::before pseudo-element at every breakpoint (Kadence's own native background- image attribute is suppressed unconditionally, not just responsively): - Desktop (>=1025px): ::before becomes a real CSS Grid column (~40% width, Figma's Rectangle 1 is 570/1440 of its "Container" frame) beside Column B (which carries the actual heading+cards content) via `display:grid` on Column A's own inner wrapper. Column B has no explicit grid-column set, so it auto-places into the second track after ::before (source-order rule: generated ::before content is always first in flow). Column C's own maxWidth:754 attribute is wider than this ~40%-narrower track, so it's capped to 100% here to avoid overflow/pushing the grid wider than intended. - Tablet/mobile (<=1024px): ::before becomes a fixed-height top banner instead (independently sized from the huge stacked box under it, since stacking makes Column A's own box 2500px+ tall), matching Figma's tablet (804x263, node 1427:1031) and mobile (full-bleed x200, node 1427:1603/1846) "Homepage" frames. Kadence's rowlayout `columns` attribute is a flat number with no columnsTablet/columnsMobile counterpart (confirmed against kadence-blocks/dist/blocks/rowlayout/block.json), so the native 3-column desktop grid (set directly on the block, matching Figma's 3-column card grid) needs a manual override to reach Figma's tablet 2-column grid. Mobile already collapses to 1 column via Kadence's own native stacking at its 767px breakpoint, so the 2-column override is scoped to (min-width:768px) only — letting it leak below 767px would fight that native behavior. NOTE: the desktop ::before (grid layout below) reuses the same narrow portrait crop as Column A's own Background Image setting (Media ID 8654, student-working-at-desk.png) as a relative-path duplicate, since a CSS pseudo-element can't reference a block attribute directly. If that image is ever swapped in the block editor, this url() must be updated to match. The tablet/mobile banner ::before intentionally points at a DIFFERENT, wider source file instead (student-working-at-desk.jpg, 1880x1253 -- the uncropped landscape original the portrait PNG was cropped from, already present in the same uploads folder but not registered as its own media library attachment). The portrait PNG is far too narrow to cover a wide short banner box without cropping out the subject entirely (confirmed by testing: background-size:cover on the 570x1054 PNG in an 804x263 box showed only the top of his head), so the wider landscape file is needed to match Figma's tablet/mobile crop, which shows more of the scene (face, hands, window, radiator) than the desktop crop does. All overrides below need !important: Kadence generates its own inline