/* ========================================================================== COMPANY OVERVIEW (page 117) — ARABIC CORRECTIONS Every rule is behind [dir="rtl"], so the English page cannot match any of it. "ENVIRONMENTAL, HEALTH, & SAFETY" (section 9fbd1c2): a heading, a paragraph, and a row of three picture cards under them. ------------------------------------------------------------------------ THE CAUSE — physical offsets in a mirrored layout Elementor writes these offsets as PHYSICAL left margins, set in the editor against an English layout: 38d3574 (first card) -60px pulls it outward, away from the row 3042272 (second card) 45px adds to the gap before it 91023de (third card) 45px adds to the gap before it f424d1e (the heading) 75px indents it from the reading edge 933fcc9 (the paragraph) 74px indents it from the reading edge In English, left IS the reading start and the outward side of the first card, so each value lands where it was meant to. In Arabic the row runs the other way and every one of them is now on the opposite side of the box. The first card's -60px is the visible damage. In English it pulls the card away from the row; in Arabic the same -60px pulls it INTO its neighbour. Measured at 1440, the gaps between the three cards were: card 3 -> card 2 69px card 2 -> card 1 -36px <- overlapping, which is why the second and third pictures looked stuck together in the screenshot ------------------------------------------------------------------------ THE FIX — let the row do the spacing Rather than mirror five separate offsets, the per-card margins come off and the ROW carries the spacing, as one `column-gap`. 69px is what English actually produces between its cards (its own 24px gap plus the editor's 45px), so the rhythm is the one the section was designed with — it is just stated once instead of being assembled out of a gap and three margins that only add up in one reading direction. The first card has no side padding while the other two have 10px, so equal card gaps would still leave unequal PICTURE gaps (79px and 89px — English has exactly this 10px discrepancy). A 10px margin on the first card's trailing side absorbs the difference and all three pictures end up 89px apart. Nothing is resized: the padding, the cards and the pictures keep the widths they have. ------------------------------------------------------------------------ THE HEADING AND PARAGRAPH Asked for: the same left/right boundaries as the picture row. The row centres its cards, so once the per-card margins are gone the grid is a centred block whose width is "three cards plus the two gaps plus the 10px". Giving the heading and the paragraph that same width and centring them in the same container is enough — two centred blocks of equal width share their edges, at every viewport, with nothing to keep in sync by hand: 3 x 25% + 69 + 79 = calc(75% + 148px) three across 2 x 33.33% + 24 = calc(66.66% + 24px) two across (tablet) The percentages are the card widths Elementor already holds, and the pixel terms are the gaps above. `margin-inline: auto` replaces the editor's 75/74 indent: the text is no longer indented from the edge of the section, it is bounded by the pictures, which is what was asked for. The text keeps its own RTL direction and stays right-aligned inside that box — only the box moves. PHONES NEED NOTHING. Below 768 the cards go one per row at full width and the editor drops both indents to 0, so the heading, the paragraph and the single card already share the same edges. The desktop query is written as the exact complement of Elementor's tablet query rather than `min-width: 1025px`: on a scaled display the viewport can be a fraction of a pixel wide (1024.8px), where `max-width: 1024px` and `min-width: 1025px` are BOTH false and neither set of rules would apply. The same reasoning is written up in csr-ehs-cards.css, where this pattern was first needed. ========================================================================== */ /* ------------------------------------------------------- three across --- */ @media not all and (max-width: 1024px) { /* The row carries the spacing. */ [dir="rtl"] .elementor-117 .elementor-element.elementor-element-5138cb9 { column-gap: 69px; } [dir="rtl"] .elementor-117 .elementor-element-5138cb9 > .elementor-element.sud-hv__card { margin-inline: 0; } /* The unpadded card gives back the 10px the other two spend on padding, so the three PICTURES are evenly spaced and not just the three boxes. Written through the row, like the rule above it: a plain element selector is one class less specific and the blanket `margin-inline: 0` would win. */ [dir="rtl"] .elementor-117 .elementor-element-5138cb9 > .elementor-element.elementor-element-38d3574 { margin-inline-end: 10px; } /* Heading and paragraph: the picture row's width, centred as it is. */ [dir="rtl"] .elementor-117 .elementor-element.elementor-element-f424d1e, [dir="rtl"] .elementor-117 .elementor-element.elementor-element-933fcc9 { inline-size: calc(75% + 148px); max-inline-size: 100%; margin-inline: auto; } } /* --------------------------------------------------------- two across --- */ /* * The row wraps to 2 + 1 here, with the cards already at 0 margin and the * row's own 24px gap, so the spacing is correct on its own. Only the heading * and the paragraph need bounding, to the pair on the first line. */ @media (min-width: 768px) and (max-width: 1024px) { [dir="rtl"] .elementor-117 .elementor-element.elementor-element-f424d1e, [dir="rtl"] .elementor-117 .elementor-element.elementor-element-933fcc9 { inline-size: calc(66.66% + 24px); max-inline-size: 100%; margin-inline: auto; } } /* -------------------------------------------------------------------------- HORIZONTAL PAGE SCROLL ON DESKTOP — 199px at 1440, Arabic only The page could be dragged sideways. Measured scrollWidth against clientWidth on the Arabic page: 1440 -> 200px 1366 -> 189px 1280 -> 177px 1024 -> 141px English measured 0 at all four. WHICH ELEMENT. Not a container, image or text block — every box on the page sits inside the viewport. It is one decorative pseudo-element, the wash that visual.css puts on every `.sud-field` section: .sud-field::before inline-size: min(46vw, 620px) inset-inline-end: -14% Proved by toggling rather than by eye, in one settled page state at 1440: as shipped 200px of overflow ::before content:none 0px <- this is the one ::after content:none 200px <- contributes nothing both content:none 0px The overflow is 14% of the viewport at every width, which is that inset exactly: -199.5px measured used `left` at 1440, against 200px of travel. WHY ARABIC AND NOT ENGLISH. The asymmetry is not just the logical offset mirroring; English is immune by accident, because of a second rule on the same pseudo. Elementor's own `.e-con::before` declares a PHYSICAL `left: calc(0px - var(--border-left-width))`, i.e. 0: English left: 0 (Elementor) + right: -14% (ours) + width: 620 -> over-constrained, and in a left-to-right box the browser DISCARDS `right`. The wash sits at left 0, fully inside, and the -14% never takes effect at all. Arabic `inset-inline-end` resolves to the physical LEFT, the same property Elementor set, and visual.css is the later sheet, so ours wins outright: left: -14%. `right` is then auto, the box is no longer over-constrained, and the wash really does hang 199px off the left — which in RTL is the scrollable end of the document, so the page gains 199px of travel. WHY IT IS NOT CLIPPED. `.sud-field` sets `overflow: hidden` to clip this wash. journey-timeline.js deliberately removes that clip here, putting `.sud-tj-unclip` (`overflow: visible !important`) on every clipping ancestor so the sticky year rail can stick. The clip cannot come back. The two alternatives were measured and rejected when this same fault was fixed for phones in mobile-fixes.css: restoring `overflow: hidden` does cure the overflow and does stop the year strip sticking, and `clip-path: inset(0)` clips painting but leaves scrollable overflow untouched. THE FIX. The wash stops crossing the end edge. `inset-inline-end: 0` parks it flush inside instead of 14% outside, so the element that caused the overflow is the element that changes — nothing is hidden and nothing else moves. It keeps its size, blur, colour and z-index, and it is a transparent radial gradient sitting behind the content at `z-index: -1`, so what moves is the soft edge of a wash. It also lands the Arabic wash at used left 0 — the exact physical position English already renders it at, by way of the Elementor rule above — so the two languages now agree rather than diverge. SCOPE. `[dir="rtl"]` keeps English, which has no fault, from matching. `.elementor-117` keeps it to Company Overview. `.sud-tj-unclip` keeps it to the one section that has actually lost its clip, so the other `.sud-field` sections on the page, which still clip their own washes, are untouched. The query is `min-width: 1024px` and not the `not all and (max-width: 1024px) complement used above, because 1024 is one of the widths that had to come out clean and that complement excludes it. Phones keep the identical fix they already have in mobile-fixes.css at max-width 767. The tablet band between them, 768 to 1023, still carries the fault (105px at 768) and is left alone: the brief was desktop, and not affecting tablet. Lowering this one number to 768 is all it would take to finish it. -------------------------------------------------------------------------- */ @media (min-width: 1024px) { [dir="rtl"] .elementor-117 .sud-field.sud-tj-unclip::before { inset-inline-end: 0; } }