/* ============================================================ HIS INSIGHTS SCHEME — THREE FRAMES, FOUR PLACEMENTS, NO CROP ============================================================ His instruction, 28 September 2026: "for insights we have only 3 images. 1 (1:1) for cover (which should also be used as side image WITHOUT CHANGING THE ASPECT RATIO) and 2 (16:9) for implementing withing content WITHOUT CHANGING IMAGE ASPECT RATIO. We won't be implementing the overlapping 2 images like we did in many other pages. We will be implementing those 16:9 images within content randomly, one on top, and one within content in between somehwere." and, plainly: "you don't even have to crop images or change aspect too, so you can focus on infographics". ── WHAT THIS FILE IS AND IS NOT ────────────────────────────── Every rule here is scoped to `.cz-insightpix`, the body class set by `cz_insight_photo_body_class()` only where a plan declares `"scheme": "insight"`. Nothing here can reach the five Business Setup pages, `/visa-services/`, the homepage or the 24 pages of 27 September. That is R82.4: the surface he has called correct is not mine to move, and on 27 September I moved it once already (B284) by making a "fix" apply that had been dormant for a week. ── WHY EVERY BOX NEEDS A RULE AT ALL ───────────────────────── The three treatments this site already owns all crop on purpose, because they were built for a mixed-ratio library: cover .cz-masthead__plate 360x288 1.25:1 strip .cz-fig--strip aspect auto + height clamp ~715x325 2.20:1 margin .cz-fig--margin aspect auto + height clamp ~277x432 0.64:1 (portrait) A 1:1 frame in a 1.25:1 plate loses 20% of its height. A 16:9 frame in a 2.20:1 strip loses 19% of its height. A 1:1 frame in a 0.64:1 margin loses 36% of its WIDTH. He asked for none of that, so each box is given the frame's own ratio and its height is released to `auto`. ── THE ONE TRAP, AND IT HAS ITS OWN BUG NUMBER ─────────────── R3 forbids pairing `aspect-ratio` with `max-height`, and B296's neighbourhood is littered with the consequences: the two RESIZE a box rather than cap it, which is the documented origin of this project's "empty spaces" complaint. So every rule below sets `height: auto` EXPLICITLY alongside the ratio — it is not enough to add a ratio and leave the inherited `height: clamp(...)` in place, because the clamp would win and the ratio would simply be ignored while appearing, in the stylesheet, to be doing something. `editorial.css` is the last sheet in the cascade with zero `!important` (see its own header), and `insights.css` is registered AFTER it at priority 50, so these rules win on order rather than on specificity. No `!important` here either. ============================================================ */ /* ------------------------------------------------------------ 1. THE COVER — 1:1, IN THE MASTHEAD PLATE ------------------------------------------------------------ The plate is the one frame a reader cannot scroll past, and the LCP candidate on every insight. Square is the whole point of his 1:1 file: it reads as a portrait of the subject rather than as a letterbox banner, which is what 17-ART-DIRECTION means by "one plate per document and it is earned". `max-height` is deliberately ABSENT. See the trap above. ------------------------------------------------------------ */ .cz-insightpix .cz-masthead__plate { aspect-ratio: 1 / 1; height: auto; } .cz-insightpix .cz-masthead__plate img { width: 100%; height: 100%; object-fit: cover; /* with a 1:1 box and a 1:1 file, crops nothing */ object-position: center center; } /* A SQUARE PLATE IS TALLER THAN A LANDSCAPE ONE, AND IN THE TABLET BAND THAT MATTERS. Measured at 768, against a page he has approved: /mainland-company/ (approved) plate 718 x 404 1.78:1 an insight, square plate 718 x 718 1.00:1 = 70% of a 1024px viewport Below 1000px the plate takes the full prose width; above it, it is 380px. So the same instruction produces a modest 360px square on a desktop and a screen-filling one on a tablet, and a reader at 768 would meet the cover and almost nothing else. HIS RATIO IS NOT TOUCHED. He was explicit and repeated it inside one sentence — "without changing image aspect ratio" — so the box stays exactly 1:1 and still crops nothing. What is capped is the SIZE, which he said nothing about, and capping it makes the tablet agree with the desktop rather than disagree with it. 520px is the largest square that stays around half the height of a 1024px viewport. It is centred, because a capped block left against a 718px column reads as a mistake. Bounded at BOTH ends (621 and 1000), per R7. An open-ended max-width query would reach phones, where 343 x 343 is 42% of the viewport and correct — and B282 is the reminder that a rule written for one width has to be measured from both sides of its own breakpoint. */ @media (min-width: 621px) and (max-width: 1000px) { .cz-insightpix .cz-masthead__plate { max-width: 520px; margin-inline: auto; } } /* ------------------------------------------------------------ 2. THE TWO STRIPS — 16:9, FULL WIDTH, IN THE PROSE ------------------------------------------------------------ `figures.css:74` sets `aspect-ratio: auto` and then a height clamp, with its own comment recording that a 3.67:1 band was "the lame thin strip" the client rejected three times. 16:9 is 1.78:1 — well clear of that complaint, and it is his number. ------------------------------------------------------------ */ .cz-insightpix .cz-fig--strip .cz-fig__media { aspect-ratio: 16 / 9; height: auto; } .cz-insightpix .cz-fig--strip .cz-fig__media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* ------------------------------------------------------------ 3. THE SIDE FRAME — THE SAME 1:1 FILE, ALSO SQUARE ------------------------------------------------------------ Both selectors, because the marginalia is emitted with `.cz-fig--aside` in one path and `.cz-marginalia` in the other, and editorial.css:308 addresses exactly this pair at (0,3,0) with `aspect-ratio: auto; height: clamp(340px, 30vw, 460px)`. Matching its selector shape is what makes these rules land; being later in the cascade is what makes them win. editorial.css argues at length that this frame should be PORTRAIT — "Tall frames and small objects belong in the marginalia, where narrow is CORRECT", and a square here "would be the wide-column defect the client photographed, just smaller". That reasoning was sound for a library of mixed ratios where the alternative was a crop. It does not survive his instruction: he supplied ONE square file and said to use it in both places without changing its aspect ratio. Where our craft argument and his instruction collide, his instruction binds and the argument is recorded, not obeyed (R82.2, and §27 — "if the rule is ours, the answer may be that the rule was wrong"). ------------------------------------------------------------ */ .cz-insightpix .cz-reading__body .cz-fig.cz-fig--aside .cz-fig__media, .cz-insightpix .cz-reading__body .cz-fig.cz-marginalia .cz-fig__media { aspect-ratio: 1 / 1; height: auto; } .cz-insightpix .cz-reading__body .cz-fig.cz-fig--aside .cz-fig__media img, .cz-insightpix .cz-reading__body .cz-fig.cz-marginalia .cz-fig__media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* ------------------------------------------------------------ 4. PHONE ------------------------------------------------------------ `figures.css:429` gives the strip `height: clamp(200px, 52vw, 260px)` below 620px, and `article.css:1951` sets `aspect-ratio: 16 / 10` there. Both are crops, and both have to be answered inside the same query or the desktop rule silently loses on the device that matters most. At 375 the prose column is 343px, so 16:9 renders 343x193 — the figure a phone actually flatters, and the same height the 27 September pages measure. No horizontal scrollbar can appear inside the figure, which R70 forbids by name. The margin frame is not addressed here: below 1401px the margin track folds into the rail and the side figure does not draw, so there is no box to size. A rule for it would be a rule that cannot apply — this project's commonest defect (B259, B283, B286, B289). ------------------------------------------------------------ */ @media (max-width: 620px) { .cz-insightpix .cz-fig--strip .cz-fig__media { aspect-ratio: 16 / 9; height: auto; } .cz-insightpix .cz-masthead__plate { aspect-ratio: 1 / 1; height: auto; } }