/* ==========================================================================
   THE GENESYS - editorial pages (Blocco 5)
   Design: "Nuova proposta grafica.dc.html" -> Turn 8, screens
   "Web - Chi siamo", "Web - Hermes, il Communication Hub", "Web - Shop e G-Coin"

   ⚠️ READ THIS BEFORE EXTENDING.

   All three of these pages are built in Elementor - the content lives in
   `_elementor_data` (25-47KB of JSON per page), not in a PHP template. That
   makes this block different from every other screen in the redesign:

     - The layout and copy are AUTHORED CONTENT. The client edits them in
       Elementor. Hard-coding the canvas's compositions into a page template
       would take that away and bake marketing facts (prices, "70.000 file",
       "96 hub attivi") into code.
     - The canvas's copy is NOT the copy on these pages. The design's "Chi
       siamo" is a new hero, a stats band and a three-column PROBLEMA / SVOLTA
       / MOVIMENTO narrative; the live page is a long prose piece about the
       founder. The two do not correspond.

   So this file does the half that belongs in code: it brings Elementor's
   output onto the GENESYS ground, type scale and palette. Rebuilding the
   compositions themselves is Elementor authoring work, and it needs the
   canvas's copy translated and its numbers confirmed first.

   HOW IT WORKS - and the honest caveat:

   Elementor exposes global colour variables, and remapping those to --gns-*
   tokens is the clean seam. But on these pages it only covers a fraction of
   the work: a count of the loaded stylesheets found 520 hard-coded colour
   declarations against 20 that go through a global variable. The authors
   picked colours per widget, against a white page, and Elementor bakes each
   one into `.elementor-<page> .elementor-element.elementor-element-<hash> ...`
   at roughly (0,4,1). The hash differs per widget, so there is no generic
   selector that out-specifies them.

   So the legibility block below DOES use !important, deliberately and
   narrowly: only on text-bearing classes, only on these pages. Without it a
   near-black icon-box title (#0F0F10, chosen for a white ground) renders on
   the dark ground and disappears.

   The cost: an intentional accent colour on a text element is flattened to a
   token. That is the trade for a legible page. The durable fix is content-side
   - move those per-widget colours onto Elementor's global colours in Site
   Settings, after which this block can shrink to the variable map alone.
   ========================================================================== */

/* ------------------------------------------------- Elementor global map --- */
/*
 * The kit (post-1024.css) declares these on `.elementor-kit-1024` - a single
 * class, (0,1,0). The selector below is (0,1,1), so it wins on specificity and
 * does not depend on stylesheet order (Elementor's kit actually loads *after*
 * this file).
 *
 * The two hashed names are custom colours the client picked in the kit:
 *   --e-global-color-9b601ec  #0F0F10  near-black body text
 *   --e-global-color-8781700  #7D7D7D  muted grey
 * Both were chosen against a white page, so both have to invert here.
 */
body.gns-editorial {
  --e-global-color-primary: var(--gns-text);
  --e-global-color-secondary: var(--gns-body);
  --e-global-color-text: var(--gns-body);
  --e-global-color-accent: var(--gns-cyan);
  --e-global-color-9b601ec: var(--gns-text);
  --e-global-color-8781700: var(--gns-secondary);
}

/* ---------------------------------------------------------- page ground --- */

/*
 * ⚠️ !important on the ground. An Elementor Theme Builder template sets a page
 * background on the body itself, keyed to its own id - for the single-post
 * template that is
 *
 *     body.elementor-page-2018:not(.elementor-motion-effects-element-type-background)
 *
 * at (0,2,1), which out-specifies `body.gns-editorial` (0,1,1). Without this
 * the post content went dark while the page behind it stayed white, leaving a
 * white band under the header. The id differs per template, so there is no
 * generic selector to out-specify.
 */
body.gns-editorial {
  background-color: var(--gns-bg) !important;
  color: var(--gns-body);
}
body.gns-editorial .site,
body.gns-editorial #page,
body.gns-editorial #content,
body.gns-editorial .site-main {
  background-color: var(--gns-bg);
}

/*
 * Elementor sections often carry an explicit white from the kit. Only clear it
 * where the author did not set one of their own - a section with a deliberate
 * background image or colour keeps it.
 */
body.gns-editorial .elementor-section,
body.gns-editorial .e-con,
body.gns-editorial .elementor-widget-container {
  background-color: transparent;
}

/* ------------------------------------------------ background overlays ---- */
/*
 * ⚠️ The rule above clears background-COLOR. Elementor's "background overlay"
 * is a background-IMAGE on a ::before pseudo-element, so it sails straight
 * through:
 *
 *   .elementor-313 .elementor-element-8727575::before {
 *       background-image: linear-gradient(99deg, #D7F5FF 0%, #FFE9FF 99%) }
 *
 * That is the G-Coin page's four "Opportunities" cards. Fixed pastel, no
 * inversion, so in dark mode they stayed light panels with the editorial
 * layer's light text on them - the bold labels effectively invisible.
 *
 * ⚠️ It is also invisible to every probe in doc 17: getComputedStyle(el)
 * without a pseudo-element argument does not see ::before, so the contrast
 * probe, the gradient-panel probe and the pale-panel probe all reported this
 * page clean while it looked like that.
 *
 * --gns-band is the same token the Terms header band uses: the parent's pastel
 * on light, the elevated surface on dark. So the cards keep their identity in
 * light and become panels in dark.
 *
 * Blanket ::before rather than the four element hashes, which are page
 * specific and would not survive re-authoring. Checked before writing it:
 * across every post-*.css Elementor has generated, these 8 overlays (4 EN,
 * 4 IT) are the ONLY ::before background-images in existence - there is no
 * image scrim to break. !important because the generated selector is (0,3,0)
 * and carries the page id.
 */
body.gns-editorial .elementor-element::before {
  background-image: var(--gns-band) !important;
}

/* ------------------------------------------------- container fallback ---- */
/*
 * Elementor lays containers out with `display: var(--display)` and sets
 * `--display: flex` per element in the page's generated CSS. On About us, one
 * container (5faffd9, the opening prose block) has no such rule - every other
 * container on the page does. With --display unset, `var(--display)` is
 * invalid at computed-value time, so `display` falls back to its initial value
 * `inline`; the box then ignores width, max-width and auto margins, which is
 * why that block sat flush against the viewport edge while everything else was
 * centred. It predates the redesign - it is visible on the page as it shipped.
 *
 * The real fix is to regenerate Elementor's CSS (Elementor > Tools >
 * Regenerate Files & Data), which is an admin action on the client's site.
 * This gives the declaration a sane fallback in the meantime, and guards the
 * same failure on any other container whose CSS is stale.
 */
body.gns-editorial .e-con,
body.gns-editorial .e-con > .e-con-inner {
  display: var(--display, flex);
}

/* ------------------------------------------------- over-stuffed rows ----- */
/*
 * ⚠️ A row of raw WIDGETS is an authoring mistake, and there is one on the
 * G-Coin page. The "Payout in Euros for Creators" container carries
 * `--flex-direction: row` with five widgets in it - a heading, a lead
 * paragraph, a sub-heading, a bullet list and a closing paragraph - and no
 * wrap. Five article parts side by side at 1140px leaves the headings 126px
 * and 61px wide, so "Payout in Euros for Creators" sets one word per line.
 *
 * Checked before touching it: with `gns-editorial` removed the proportions are
 * identical (134/327/74/332/336 against our 126/298/61/302/305), so this is the
 * client's Elementor data, not the redesign. Every OTHER container on the page
 * is `--flex-direction: column`.
 *
 * Two rules, narrow on purpose:
 *
 *  1. Rows wrap. A two- or three-column row still fits on one line and is
 *     unchanged; only a row that cannot fit breaks onto the next line, which is
 *     what it should have done in the first place.
 *  2. A row holding FOUR OR MORE direct widgets is stacked. `:has()` reads the
 *     child count, and the selector requires `.elementor-widget` children -
 *     so a genuine four-column row of nested CONTAINERS (cards, features) is
 *     untouched. It is only raw widgets in a row that get straightened out.
 *
 * The real fix is in Elementor: set that container back to a column. This makes
 * the page readable until someone does, and becomes a no-op when they do.
 */
body.gns-editorial .e-con > .e-con-inner {
  flex-wrap: wrap;
}
body.gns-editorial .e-con > .e-con-inner:has(> .elementor-widget:nth-child(4)) {
  flex-direction: column;
}
/* Nothing should be squeezed below a readable measure while wrapping. */
body.gns-editorial .e-con > .e-con-inner > .elementor-widget {
  min-width: 0;
}

/* ------------------------------------------------------------- measure --- */
/*
 * The pages currently run edge to edge - text lines cross the full 1400px,
 * well past a readable measure. Elementor's own boxed width is not set, so
 * constrain the top-level containers here.
 */
body.gns-editorial .elementor > .elementor-element,
body.gns-editorial .elementor > .elementor-section {
  /*
   * ⚠️ `min(1180px, 100%)`, never a bare 1180px.
   *
   * Elementor clamps its own containers with
   *   :is(.elementor-section-wrap,[data-elementor-id]) > .e-con
   *     { max-width: min(100%, var(--width)) }
   * and that clamp is what stops an author's hard width from escaping. The NFT
   * page has one: post-1972.css sets `.box-gradient2 { width: 1140px }` on a
   * container. A bare `max-width: 1180px` here REPLACED Elementor's clamp, so
   * below about 1200px that 1140px container ran straight past the viewport and
   * scrolled the whole page sideways.
   *
   * Keeping the 100% term means this caps the measure without ever removing the
   * guard.
   */
  max-width: min(1180px, 100%);
  margin-inline: auto;
}
/*
 * Per-widget horizontal padding differs across these containers (some authored
 * with padding, some without), which left the heading indented and the prose
 * flush left. Normalise the inner gutter so a column edge is a column edge.
 */
body.gns-editorial .elementor > .elementor-element > .e-con-inner {
  padding-inline: 24px;
}

/*
 * ...and the same for the measure itself, which is the other half of why these
 * pages read as "not centred".
 *
 * Every top-level container IS centred - measured at 1885px wide, all ten on
 * About us sit at left 353 / right 353. What differs is the INNER width:
 * Elementor stores a per-container `--content-width`, and the author left most
 * sections on `85%` (986px here) while two carry `min(100%, 1140px)` (1140px).
 * Both are centred, so nothing looks crooked on its own - but the text edge
 * jumps 77px in and out as you scroll past those sections, which reads as the
 * page wandering rather than as two different widths.
 *
 * One measure for all of them. Set on the direct children of .elementor only:
 * --content-width is a custom property and therefore inherits, and nested
 * containers that carry their own value still win. A nested one WITHOUT a
 * value inherits min(100%, 1140px), which inside an already-narrower parent
 * resolves to 100% - the default it would have had anyway.
 */
body.gns-editorial .elementor > .elementor-element {
  /*
   * ⚠️ Viewport-based, not percentage-based, and that is the whole point.
   *
   * This was `min(100%, 1140px)` first, which broke /nft/ below about 1200px:
   * Elementor applies --content-width to the CONTAINER on a full-width
   * (`e-con-full`) container rather than to its inner, and the percentage there
   * does not resolve against the box you expect - the container came out 1140px
   * inside a 703px parent and pushed the whole page sideways.
   *
   * `calc(100vw - 48px)` cannot exceed the screen whatever the containing block
   * turns out to be, and 48px is the page gutter. Above 1188px the 1140px cap
   * wins, which is the measure this rule exists to normalise.
   */
  --content-width: min(1140px, calc(100vw - 48px));
  /*
   * The last 20px of the same problem. Beyond the measure, the top-level
   * containers also carry their own horizontal padding, and the author used
   * 10px on most and 40px on two (Hermes' "Welcome to Hermes" and its closing
   * block; Upload has the same pair). Zeroing it inline leaves the 24px on
   * .e-con-inner above as the single gutter for every section.
   *
   * `padding-inline`, not `padding`: the vertical padding is the section
   * rhythm and is deliberate, so it is left exactly as authored.
   */
  padding-inline: 0;
}

/* --------------------------------------------------------- typography ---- */

body.gns-editorial .elementor-heading-title {
  /*
   * !important only on the family. Elementor bakes an author's per-widget
   * choice into `.elementor-<page> .elementor-element.elementor-element-<hash>
   * .elementor-heading-title` (0,4,1), and the hash differs per widget, so
   * there is no generic selector to out-specify it. The baked value here is
   * Roboto - Elementor's stock default, not a brand decision; the brand faces
   * are DM Sans and DM Mono.
   *
   * Size is deliberately NOT forced: authors vary heading sizes on purpose, so
   * the scale below applies only where no per-widget size was set.
   */
  font-family: var(--gns-font) !important;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: var(--gns-text);
  /* The parent paints some headings as transparent gradient text. */
  background: none !important;
  -webkit-background-clip: border-box !important;
          background-clip: border-box !important;
  -webkit-text-fill-color: var(--gns-text) !important;
}
body.gns-editorial h1.elementor-heading-title { font-size: clamp(32px, 4.4vw, 52px); }
body.gns-editorial h2.elementor-heading-title { font-size: clamp(26px, 3.2vw, 38px); }
body.gns-editorial h3.elementor-heading-title { font-size: clamp(20px, 2.2vw, 26px); }
body.gns-editorial h4.elementor-heading-title,
body.gns-editorial h5.elementor-heading-title { font-size: 18px; }

/*
 * A short all-caps heading is the canvas's eyebrow ("CHI SIAMO",
 * "HERMES - COMMUNICATION HUB", "PAGHI UNA VOLTA, STAMPI PER SEMPRE"). There
 * is no marker in the content to detect that, so authors opt in by giving the
 * widget the CSS class `gns-eyebrow` in Elementor.
 */
body.gns-editorial .gns-eyebrow .elementor-heading-title,
body.gns-editorial .gns-eyebrow p {
  font: 500 10.5px var(--gns-font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gns-cyan-ink);
  -webkit-text-fill-color: var(--gns-cyan-ink) !important;
}

body.gns-editorial .elementor-widget-text-editor {
  font-family: var(--gns-font);
  font-size: 15px;
  line-height: 1.75;
  color: var(--gns-body);
}
body.gns-editorial .elementor-widget-text-editor p {
  margin: 0 0 1em;
  color: var(--gns-body);
  max-width: 72ch;      /* readable measure; blocks that need full width */
  text-wrap: pretty;    /* can override per widget in Elementor */
}
body.gns-editorial .elementor-widget-text-editor strong,
body.gns-editorial .elementor-widget-text-editor b {
  color: var(--gns-text);
  font-weight: 700;
}

body.gns-editorial .site-main a:not(.elementor-button) {
  color: var(--gns-cyan-ink);
  text-decoration: none;
}
body.gns-editorial .site-main a:not(.elementor-button):hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------- media ----- */

body.gns-editorial .elementor-widget-image img,
body.gns-editorial .elementor-widget-video .elementor-wrapper {
  border-radius: var(--gns-r-card);
  border: 1px solid var(--gns-border);
  background: var(--gns-elevated);
}
body.gns-editorial .elementor-widget-image img {
  display: block;
  height: auto;
}

/* ------------------------------------------------------- icon boxes ------ */
/*
 * Hermes uses icon-box for its four numbered steps, G-Coin for the kit cards.
 * The canvas draws both as panels, so give the widget the panel treatment.
 */
body.gns-editorial .elementor-widget-icon-box .elementor-icon-box-wrapper {
  padding: 20px;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-panel);
  background: var(--gns-surface);
  height: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.gns-editorial .elementor-widget-icon-box .elementor-icon-box-wrapper:hover {
  border-color: var(--gns-border-cyan);
  box-shadow: var(--gns-glow-card);
}
body.gns-editorial .elementor-icon-box-title,
body.gns-editorial .elementor-icon-box-title a {
  font-family: var(--gns-font);
  font-size: 16px;
  font-weight: 700;
  color: var(--gns-text);
}
body.gns-editorial .elementor-icon-box-description {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--gns-secondary);
}
body.gns-editorial .elementor-icon-box-icon .elementor-icon,
body.gns-editorial .elementor-widget-icon .elementor-icon {
  color: var(--gns-cyan-ink);
  fill: var(--gns-cyan);
}

/* --------------------------------------------------------- icon lists ---- */

body.gns-editorial .elementor-icon-list-item,
body.gns-editorial .elementor-icon-list-text {
  font-family: var(--gns-font);
  font-size: 14px;
  color: var(--gns-body);
}
body.gns-editorial .elementor-icon-list-icon i,
body.gns-editorial .elementor-icon-list-icon svg {
  color: var(--gns-cyan-ink);
  fill: var(--gns-cyan);
}

/* ----------------------------------------------------------- buttons ----- */

body.gns-editorial .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--gns-r-pill);
  background: var(--gns-gradient);
  color: var(--gns-on-accent) !important;
  font-family: var(--gns-font);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  transition: box-shadow .15s ease;
}
body.gns-editorial .elementor-button:hover {
  color: var(--gns-on-accent) !important;
  box-shadow: var(--gns-glow-cta);
}
/* Authors opt a button into the quieter outline treatment. */
body.gns-editorial .gns-btn-ghost .elementor-button {
  background: transparent;
  border: 1px solid var(--gns-border-heavy);
  color: var(--gns-text) !important;
}
body.gns-editorial .gns-btn-ghost .elementor-button:hover {
  border-color: var(--gns-cyan);
  background: var(--gns-cyan-tint);
  color: var(--gns-text) !important;
  box-shadow: none;
}

/* ---------------------------------------------------------- dividers ----- */

body.gns-editorial .elementor-divider-separator {
  border-top-color: var(--gns-border);
}

/* ------------------------------------------------------------ tables ----- */
/*
 * The G-Coin page carries a feature-comparison table whose header cells come
 * with a light grey ground (#E3E3E3) from outside Elementor, so scoping this
 * to the html widget was not enough - it is matched on the content region
 * instead.
 */
body.gns-editorial .site-main table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  font-size: 13.5px;
  color: var(--gns-body);
}
body.gns-editorial .site-main th,
body.gns-editorial .site-main td {
  background-color: transparent !important;
  border-color: var(--gns-border-faint) !important;
  color: inherit;
}
body.gns-editorial .site-main thead th,
body.gns-editorial .site-main tr > th {
  background-color: var(--gns-elevated) !important;
  color: var(--gns-text) !important;
}

body.gns-editorial .elementor-widget-html table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  color: var(--gns-body);
}
body.gns-editorial .elementor-widget-html th,
body.gns-editorial .elementor-widget-html td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--gns-border-faint);
  text-align: left;
}
body.gns-editorial .elementor-widget-html th {
  font: 500 10px var(--gns-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gns-muted);
}

/* --------------------------------------------------------- responsive ---- */

@media (max-width: 767px) {
  body.gns-editorial .site-main > .entry-content > .elementor > .e-con,
  body.gns-editorial .site-main > .entry-content > .elementor > .elementor-section {
    padding-inline: 16px;
  }
  body.gns-editorial .elementor-button {
    width: 100%;
  }
}

/* --------------------------------------------------------- legibility --- */
/*
 * The override block the header note explains. Elementor bakes ~520 per-widget
 * colours into these pages, all chosen against a white ground, at a
 * specificity no generic selector can beat. Left alone they render dark on
 * dark. This forces the text-bearing classes onto tokens.
 *
 * Scope is deliberately narrow:
 *   - text only; backgrounds, borders and icon colours are left to the author
 *   - only on body.gns-editorial, so no other screen is affected
 *   - headings, prose, icon-box and icon-list text, list items, table cells
 *
 * `.gns-eyebrow`, `.gns-accent` and links are excluded so an author can still
 * opt a run of text into the brand colours.
 */
body.gns-editorial .elementor-widget-text-editor,
body.gns-editorial .elementor-widget-text-editor p,
body.gns-editorial .elementor-widget-text-editor li,
body.gns-editorial .elementor-widget-text-editor span:not(.gns-accent) {
  color: var(--gns-body) !important;
}
body.gns-editorial .elementor-widget-text-editor strong,
body.gns-editorial .elementor-widget-text-editor b,
body.gns-editorial .elementor-heading-title:not(.gns-accent) {
  color: var(--gns-text) !important;
}
body.gns-editorial .elementor-icon-box-title,
body.gns-editorial .elementor-icon-box-title a {
  color: var(--gns-text) !important;
}
body.gns-editorial .elementor-icon-box-description,
body.gns-editorial .elementor-icon-list-text,
body.gns-editorial .elementor-icon-list-item,
body.gns-editorial .elementor-icon-list-item a {
  color: var(--gns-secondary) !important;
}
body.gns-editorial .elementor-widget-html,
body.gns-editorial .elementor-widget-html td {
  color: var(--gns-body) !important;
}

/*
 * Inline emphasis carries its own baked colour too. On Upload your 3D models
 * the lead-ins inside each icon-box description are `<strong>` wrapped in a
 * `<span>` at #0F0F10 - 1.13:1 here, i.e. invisible. Setting the block colour
 * is not enough; the inline runs have to be brought along.
 *
 * Emphasis resolves to --gns-text, everything else inherits from the block, so
 * a description stays --gns-secondary and a paragraph stays --gns-body.
 */
body.gns-editorial .elementor-icon-box-description strong,
body.gns-editorial .elementor-icon-box-description b,
body.gns-editorial .elementor-widget-text-editor span strong,
body.gns-editorial .elementor-widget-text-editor span b {
  color: var(--gns-text) !important;
}
body.gns-editorial .elementor-icon-box-description span:not(.gns-accent),
body.gns-editorial .elementor-icon-box-description em,
body.gns-editorial .elementor-icon-box-description i,
body.gns-editorial .elementor-widget-text-editor span:not(.gns-accent),
body.gns-editorial .elementor-widget-text-editor em,
body.gns-editorial .elementor-icon-list-text span:not(.gns-accent),
body.gns-editorial .elementor-icon-list-text strong {
  color: inherit !important;
}

/* Author opt-outs: keep the brand colours reachable from Elementor. */
body.gns-editorial .gns-accent,
body.gns-editorial .gns-accent .elementor-heading-title,
body.gns-editorial .gns-eyebrow .elementor-heading-title {
  color: var(--gns-cyan-ink) !important;
  -webkit-text-fill-color: var(--gns-cyan-ink) !important;
}

/* ========================================================= phone gutters === */
/*
 * The measure these pages give text on a phone is eaten by nested padding, and
 * every layer is individually reasonable. On the G-Coin page at 375px:
 *
 *   375  viewport
 *   327  --content-width           calc(100vw - 48px)
 *   279  .e-con-inner              padding-inline: 24px
 *   259  the card                  Elementor's own padding
 *   239  the widget container
 *   199  the <ul>                  the browser's 40px list indent
 *
 * - 176px of inset, 88px a side, to show a line of body copy 199px wide. The
 * desktop values are right; they just do not scale down. These trim the two
 * gutters this file owns and the list indent, which recovers about 60px of
 * measure without touching Elementor's own padding.
 */
@media (max-width: 767.98px) {
  body.gns-editorial .elementor > .elementor-element {
    --content-width: calc(100vw - 24px);
  }
  body.gns-editorial .elementor > .elementor-element > .e-con-inner {
    padding-inline: 12px;
  }
  /* 40px of list indent is a desktop default; 20 still reads as a list. */
  body.gns-editorial .elementor ul,
  body.gns-editorial .elementor ol {
    padding-inline-start: 20px;
  }
}



/* ============================================ about-us: the ragged left ====
   Measured on /about-us/ at 1440px, the page's text sat on FOUR different left
   edges - 167, 177, 209 and 227 - against a content column that starts at 167.
   Each of the three offsets had a different cause, and only two of them were
   mistakes:

     209  LEGITIMATE, left alone. An icon list: a 32px icon at 167, a 10px gap,
          text at 209. Consistent down all five rows.
     177  A container with `padding: 10px` and no background, no border and no
          radius - ten pixels of inset with nothing to be inset from.
     227  The Before / After comparison. Not a padding bug at heart: see below.

   ⚠️ THESE ARE ELEMENTOR-AUTHORED VALUES. The selectors below name Elementor
   element ids, which are unique per element - so each rule reaches exactly one
   block on one page and cannot touch the other five editorial pages this
   stylesheet loads on. The trade is that a rebuild of the page in the builder
   mints new ids and these rules stop matching. The durable fix for all of it is
   in Elementor itself; this is the fix that does not require opening the
   builder against the client's live content.
   ========================================================================= */

/*
 * ------------------------------------------------- the Before / After pair
 *
 * These two panels were built to sit side by side and never have. Each is a
 * fixed `width: 546px` in a row whose CONTENT box is 1092px (the `.e-con-inner`
 * is 1140 wide with 24px of padding a side). 546 + 20 gap + 546 = 1112, which
 * overflows by exactly the width of the gap - so the row wraps, the panels
 * stack, and the right half of the page is left empty while the text sits in a
 * 426px column at x=227.
 *
 * Letting them share the row instead of carrying a fixed width fixes the
 * stacking, the empty half and the left edge in one move: each becomes 536px,
 * the pair spans the measure, and the block starts at 167 with everything else.
 *
 * ⚠️ Specificity, not !important - and `body.gns-editorial`, not bare `body`.
 * Elementor writes its per-element rules as
 * `.elementor-NNN .elementor-element.elementor-element-XXX > .elementor-widget-container`,
 * which is (0,4,0). A leading bare `body` only reaches (0,3,1) and loses; the
 * page's own body class takes the same shape to (0,4,1), which wins on merit.
 */
body.gns-editorial .elementor-element.elementor-element-c5dcd7b,
body.gns-editorial .elementor-element.elementor-element-f0ad221 {
  flex: 1 1 0;
  width: auto;
  /* Wrap back to stacked before either panel is too narrow to read, rather
     than at a width guessed from the viewport. */
  min-width: 280px;
}

/*
 * And now the 40px/60px/20px padding those panels carry, plus their 16px
 * radius, finally have something to describe. They were authored as cards and
 * given no surface, which is why the inset read as a stray indent rather than
 * as the inside of a box. This is the redesign's own card, so the pair matches
 * every other panel on the site.
 */
body.gns-editorial .elementor-element.elementor-element-c5dcd7b,
body.gns-editorial .elementor-element.elementor-element-f0ad221 {
  background: var(--gns-card);
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-card);
}

/*
 * -------------------------------------------------------- the 10px inset
 *
 * Three plain flex containers - no background, no border, no radius - each
 * carrying `padding: 10px`. The vertical half is harmless; the horizontal half
 * pushed five paragraphs to 177 while their neighbours sat at 167.
 *
 * ⚠️ All three, found by rule rather than by eye: every `.elementor-element`
 * on the page with horizontal padding and no background, no background-image
 * and no border. That query returns these three and nothing else, so this is
 * the whole set - not the ones that happened to be visible in a screenshot.
 */
body.gns-editorial .elementor-element.elementor-element-90b6103,
body.gns-editorial .elementor-element.elementor-element-b5c235a,
body.gns-editorial .elementor-element.elementor-element-68bd025 {
  padding-inline: 0;
}

/*
 * A fourth, and it only shows on a phone. This one is on the WIDGET container
 * rather than the element, so the sweep above - which walked
 * `.elementor-element` - could not see it. On desktop the paragraph is centred
 * across the full measure and the 10px is invisible; at 440px it put the one
 * all-caps block 10px inside every other line on the page.
 */
body.gns-editorial .elementor-element.elementor-element-f50c54f > .elementor-widget-container {
  padding-inline: 0;
}

/*
 * ------------------------------------------ text left, image right
 *
 * Two of the three image rows on this page were stacking, not sitting side by
 * side. Same arithmetic as the Before / After pair above: the text column is a
 * fixed 612px and the image 546px, which with the 20px gap totals 1178 in a
 * 1092px content box - an 86px overflow, so the row wraps and the image drops
 * under its own text.
 *
 * ⚠️ Nothing here reorders anything. The text is ALREADY first in the DOM in
 * both rows; the only reason the image was not on the right is that there was
 * no room for it to be. Sharing the row is the whole fix, and it keeps reading
 * order and tab order as the page author wrote them.
 *
 * The basis percentages hold the 612:546 proportion the rows were designed
 * with (56/44) rather than splitting them evenly, so the copy keeps the wider
 * column. `- 10px` on each is that row's half of the 20px gap, so the pair adds
 * up to exactly 100%.
 *
 * ⚠️ NOT the first image. `elementor-element-07638f1` is a full-width banner in
 * a `flex-direction: column` row, which is a different shape entirely - it is
 * the one image on the page that is meant to span the measure.
 */
@media (min-width: 901px) {
  /* the copy */
  body.gns-editorial .elementor-element.elementor-element-90b6103,
  body.gns-editorial .elementor-element.elementor-element-68bd025 {
    flex: 0 1 calc(56% - 10px);
    min-width: 0;
  }
  /* the picture */
  body.gns-editorial .elementor-element.elementor-element-d905fe3,
  body.gns-editorial .elementor-element.elementor-element-4d655aa {
    flex: 0 1 calc(44% - 10px);
    min-width: 0;
  }
  /* The widget carries a fixed 546px width for the image inside it; once the
     column is narrower than that, the picture has to follow the column. */
  body.gns-editorial .elementor-element.elementor-element-d905fe3 img,
  body.gns-editorial .elementor-element.elementor-element-4d655aa img {
    width: 100%;
    height: auto;
  }
}