/*
   Elementor bridge.
   ------------------------------------------------------------------
   Elementor gives every container `display:flex` and `max-width:var(--width)`
   with a specificity the design's plain `.container` / `.hero__inner` rules
   cannot beat. Where a design class is applied to an Elementor container,
   this re-asserts the design's own layout at `.e-con` specificity.

   It only ever targets `.e-con` elements, so it cannot affect the five
   theme-rendered pages — those contain no Elementor markup at all.

   Loaded only on pages built with Elementor.

   On !important: Elementor writes per-element CSS at
   `.elementor-73 .elementor-element.elementor-element-XXXXXXX` — specificity
   (0,3,0), which no reasonable selector here can beat. Layout properties that
   Elementor emits for every container (margin, padding, display, width) are
   therefore marked !important. Properties Elementor does not emit are left
   alone. This is a deliberate override layer, not a specificity war fought by
   accident.
*/

/* ---------- Layout containers ------------------------------------ */

.e-con.container {
  --width: var(--maxw);
  width: 100% !important;
  max-width: var(--maxw) !important;
  margin-inline: auto !important;
  padding-inline: var(--pad-x) !important;
  display: block !important;
}

/* ---------- Section rhythm --------------------------------------- */

.e-con.section        { padding-block: var(--sec-y) !important; display: block !important; }
.e-con.section--tight { padding-block: calc(var(--sec-y) * .8) !important; }
.e-con.section--flush { padding-block: 0 var(--sec-y) !important; }
.e-con.section--alt   { background: var(--bg); }

/* ---------- Hero -------------------------------------------------- */

.e-con.hero {
  position: relative;
  padding-block: 2.75rem 3rem !important;
  padding-inline: 0 !important;
  background: linear-gradient(165deg, #f2f6f9 0%, #e9f0f4 46%, #dfe9ee 100%);
  overflow: hidden;
  display: block !important;
}

/* Elementor reserves .e-con::before for its own background overlay and sets
   `content:none`, which removes the design's blurred skyline layer. Restate
   it. The url() is relative to THIS file, which lives in assets/ — hence the
   shorter path than site.css uses. */
.e-con.hero::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: url("photos/bg-skyline.jpg") center 30% / cover no-repeat;
  filter: blur(3px);
  opacity: .34;
  pointer-events: none;
}

.e-con.hero__inner {
  position: relative;
  display: grid !important;
  gap: 2rem !important;
}

.e-con.hero__copy,
.e-con.hero__media {
  display: block !important;
  min-width: 0;
  padding: 0 !important;
}

/* Elementor gives containers an explicit width:100%. A negative margin only
   widens a block whose width is auto — with an explicit width it just shifts
   the box, so the hero car stopped overflowing its column. */
.e-con.hero__media {
  width: auto !important;
}

/* ---------- About band ------------------------------------------- */

.e-con.about-band__inner {
  display: grid !important;
  gap: 2rem !important;
}

/* A plain block wrapper for the copy column, so the design's own spacing
   between headings, paragraphs and lists applies unchanged. */
.e-con.about-band__inner > .e-con.reveal {
  display: block;
  min-width: 0;
}

/* ---------- Custom property collision ---------------------------- */

/*
   The design declares --gap:1.25rem once at :root and uses it for grid gaps
   (.services__grid, .feature-grid, .why__grid …). Elementor ALSO uses --gap,
   redefining it on every .e-con to drive container spacing — and that value
   inherits straight into the design's markup, collapsing those grids to a
   zero gap.

   Restoring it on the widget wrappers is surgical: those wrappers only ever
   contain design markup, so Elementor's own containers keep their value and
   the design's grids get theirs back.
*/
.e-con .elementor-widget-shortcode,
.e-con .elementor-widget-html {
  --gap: 1.25rem;
}

/* ---------- Typography Elementor's kit flattens ------------------- */

/*
   The design ends with `p:last-child{margin-bottom:0}` — correct when
   paragraphs are siblings inside a section. Elementor wraps every widget in
   its own container, so a paragraph that had siblings becomes an only child
   and that rule fires, collapsing the spacing between blocks. `display:contents`
   does not help: :last-child is matched against the real DOM, not the layout.

   Restore the intended bottom margin for a paragraph that is alone inside a
   widget, then restate the specific margins the design gives these blocks.
*/
.e-con .elementor-widget-container > p:last-child,
.e-con .elementor-widget > p:last-child,
.e-con .elementor-shortcode > p:last-child {
  margin-bottom: 1rem;
}

.e-con .eyebrow       { margin: 0 0 .75rem !important; }
.e-con .hero__lead    { margin-bottom: 1.75rem !important; }
.e-con .hero__actions { margin-bottom: 2rem !important; }

/* ---------- Breakpoints, mirroring the design -------------------- */

@media (min-width: 768px) {
  .e-con.about-band__inner { grid-template-columns: 1.35fr 1fr; align-items: center; }
}

@media (min-width: 992px) {
  .e-con.hero { padding-block: 3.5rem 4rem !important; }
  .e-con.hero__inner { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 2.5rem !important; }
  /* The hero car deliberately overflows its column. Elementor zeroes
     container margins, which would shrink it back inside. */
  .e-con.hero__media { margin-right: -4rem !important; }

  /* The services cards ride up over the hero, as in the approved design. */
  .e-con.services {
    margin-top: -3.5rem !important;
    padding-top: 0 !important;
    position: relative;
    z-index: 2;
  }
}

@media (min-width: 1200px) {
  .e-con.hero { padding-block: 4rem 5rem !important; }
  .e-con.hero__media { margin-right: -6rem !important; }
}

/* ---------- Widget wrappers -------------------------------------- */

/* Elementor wraps every widget in .elementor-element with its own margins.
   Inside a design container the design owns the spacing, so stand them down
   and let the markup's own rules apply. */
.e-con.hero__copy > .elementor-element,
.e-con.container > .elementor-element,
.e-con.about-band__inner > .e-con > .elementor-element {
  width: 100%;
  margin: 0;
}

/* The HTML and shortcode widgets output the design's markup directly; they
   must not introduce a block formatting context that breaks grid children. */
.e-con .elementor-widget-html,
.e-con .elementor-widget-shortcode,
.e-con .elementor-widget-html .elementor-widget-container,
.e-con .elementor-widget-shortcode .elementor-widget-container,
.e-con .elementor-shortcode {
  display: contents;
}

/* Images inside the hero media column keep the design's own sizing. */
.e-con.hero__media .elementor-widget-image,
.e-con.hero__media .elementor-widget-container,
.e-con.hero__media figure,
.e-con.hero__media .elementor-image {
  display: block;
  margin: 0;
}