/* ============================================================
   CEW — Elementor layout guards
   ------------------------------------------------------------
   Deliberately tiny. This file does NOT restyle anything in styles.css.
   It only stops Elementor's own wrappers from constraining the full-bleed
   <section> elements our widgets output.

   The CCI sections manage their own width via .wrap (max-width:1320px),
   so they must be dropped into a FULL WIDTH container with ZERO padding.
   ============================================================ */

.elementor-widget-cci-header,
.elementor-widget-cci-hero,
.elementor-widget-cci-brands,
.elementor-widget-cci-burst,
.elementor-widget-cci-about,
.elementor-widget-cci-news,
.elementor-widget-cci-footer,
.elementor-widget-cci-breadcrumb,
.elementor-widget-cci-career-hero,
.elementor-widget-cci-people,
.elementor-widget-cci-positions,
.elementor-widget-cci-news-hero,
.elementor-widget-cci-news-archive,
.elementor-widget-cci-contact-hero,
.elementor-widget-cci-enquiry,
.elementor-widget-cci-locations,
.elementor-widget-cci-cta {
  width: 100%;
}

/* The burst carousel parks off-screen slides to the right; without this the
   editor canvas gets a horizontal scrollbar while they're parked. */
.elementor-widget-cci-burst > .elementor-widget-container {
  overflow-x: clip;
}

/* ============================================================
   Grid repair for hidden blocks
   ------------------------------------------------------------
   styles.css sizes several grids for a fixed number of children
   (.stats is repeat(3,1fr), .foot__grid is 1.6fr 1fr 1fr 1.2fr …).
   Switch a block off in a widget and the remaining children would
   sit in the wrong tracks, leaving a gap.

   A widget adds one of these modifier classes ONLY when a Show
   switcher has actually removed something, or when a repeater has
   a different number of rows than the design assumed. With
   everything visible, no class is added and the markup is
   byte-identical to the static site.

   Why classes rather than Elementor's generated per-element CSS:
   styles.css re-columns at 1100px and 720px, but Elementor's
   responsive controls break at 1024/767 — they don't line up, and
   a generated `.elementor-element-x .stats {…}` rule (0,2,0) would
   outrank the media queries at every width. Scoping to
   min-width:1101px here keeps both breakpoints intact.

   .wrap sits on every affected grid, so `.wrap.cew-cols-N` is
   (0,2,0) and cleanly outranks the single-class rules it replaces.
   ============================================================ */
@media (min-width: 1101px) {
  .wrap.cew-cols-1 { grid-template-columns: 1fr; }
  .wrap.cew-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .wrap.cew-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .wrap.cew-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .wrap.cew-cols-5 { grid-template-columns: repeat(5, 1fr); }
  .wrap.cew-cols-6 { grid-template-columns: repeat(6, 1fr); }

  /* These two have no .wrap — one class each is enough to reach (0,2,0). */
  .about__vm.cew-cols-1 { grid-template-columns: 1fr; }
  .pillars.cew-cols-1   { grid-template-columns: 1fr; }

  /* The footer's brand column is deliberately wider, so it keeps its own
     track list rather than falling back to equal columns. */
  .foot__grid.cew-foot-3 { grid-template-columns: 1.6fr 1fr 1.2fr; }
  .foot__grid.cew-foot-2 { grid-template-columns: 1.6fr 1.4fr; }
  .foot__grid.cew-foot-1 { grid-template-columns: 1fr; }

  /* .jobs is repeat(2,1fr) — a lone card would sit in a half-width track. */
  .jobs.cew-cols-1 { grid-template-columns: 1fr; }
}

.elementor-widget-cci-header > .elementor-widget-container,
.elementor-widget-cci-hero > .elementor-widget-container,
.elementor-widget-cci-brands > .elementor-widget-container,
.elementor-widget-cci-burst > .elementor-widget-container,
.elementor-widget-cci-about > .elementor-widget-container,
.elementor-widget-cci-news > .elementor-widget-container,
.elementor-widget-cci-footer > .elementor-widget-container,
.elementor-widget-cci-breadcrumb > .elementor-widget-container,
.elementor-widget-cci-career-hero > .elementor-widget-container,
.elementor-widget-cci-people > .elementor-widget-container,
.elementor-widget-cci-positions > .elementor-widget-container,
.elementor-widget-cci-news-hero > .elementor-widget-container,
.elementor-widget-cci-news-archive > .elementor-widget-container,
.elementor-widget-cci-contact-hero > .elementor-widget-container,
.elementor-widget-cci-enquiry > .elementor-widget-container,
.elementor-widget-cci-locations > .elementor-widget-container,
.elementor-widget-cci-cta > .elementor-widget-container {
  width: 100%;
}

/* .nav is position:sticky and .drawer is position:fixed. Both are killed by an
   ancestor that creates a containing block — which is exactly what Elementor
   does when a container has overflow:hidden, a transform, or a motion effect.
   Neutralise it on the wrappers we own; the theme-builder container itself
   must be left at Overflow: Default with no motion effects. */
.elementor-widget-cci-header,
.elementor-widget-cci-header > .elementor-widget-container {
  overflow: visible;
  transform: none;
  filter: none;
  perspective: none;
}

/* The hero is min-height:calc(100vh - var(--nav-h)). Inside the editor canvas
   the toolbar eats vertical space, which makes it look shorter than it is on
   the live site — nothing to fix, but the outline helps while dragging. */
.elementor-editor-active .elementor-widget-cci-hero .hero {
  outline: none;
}