/* ──────────────────────────────────────────────────────────────────────────
   Benefits V2 — "Benefits of a Traditional Pergola"
   Full-bleed dark-green band: section title over a row of feature columns,
   each with a circular image, heading and paragraph. 4 → 2 → 1 columns.
   Desktop-first: base rules = desktop, step DOWN at 1024 (tablet) / 768 (mobile).
   ────────────────────────────────────────────────────────────────────────── */

/* ── Brand tokens ────────────────────────────────────────────────────────── */
/* Scoped to .aew-bnv2 so they don't leak. Source of truth: design-system.md. */
.aew-bnv2 {
  --aew-cards:             var(--e-global-color-aew-cards, #FFFFFF);
  --aew-background:        var(--e-global-color-aew-background, #F4F4F4);
  --aew-lines:             var(--e-global-color-aew-lines, #DDDDDD);
  --aew-misc-accent:       var(--e-global-color-aew-misc-accent, #666666);
  --aew-secondary-cards:   var(--e-global-color-aew-secondary-cards, #EEEEEE);
  --aew-secondary-bg:      var(--e-global-color-aew-secondary-bg, #333333);
  --aew-secondary-accent:  var(--e-global-color-aew-secondary-accent, #555555);
  --aew-text:              var(--e-global-color-aew-text, #1A1A1A);
  --aew-cta:               var(--e-global-color-aew-cta, #444444);
  --aew-cta-hover:         var(--e-global-color-aew-cta-hover, #2B2B2B);
}

/* ── Strip Elementor's column padding (full-bleed) ───────────────────────── */
.elementor-column
  > .elementor-element-populated:has(.elementor-widget-agency-benefits-v2),
.e-con:has(> .e-con-inner > .elementor-widget-agency-benefits-v2),
.e-con:has(.elementor-widget-agency-benefits-v2) {
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  padding: 0 !important;
}

/* ── Force the host section/container to full width so the inner wrapper can
   reach its (≥1440) max-width on wide screens instead of being capped by
   Elementor's boxed content width. ──────────────────────────────────────── */
.elementor-section:has(.elementor-widget-agency-benefits-v2),
.elementor-section:has(.elementor-widget-agency-benefits-v2) > .elementor-container,
.e-con:has(.elementor-widget-agency-benefits-v2) {
  max-width: 100% !important;
  width: 100% !important;
}


/* ── Outer block: full-bleed background ──────────────────────────────────── */
/* The site runs BOXED Elementor containers capped at 1440px (see theme
   style.css). A plain width:100% would clamp the green band to that 1440px
   box. Break out to the full viewport width so the background reaches both
   edges regardless of the parent container's max-width. */
.aew-bnv2 {
  background: var(--aew-bnv2-body-bg, var(--aew-secondary-bg));
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Design-system width model: X gutter on the outer block; inner caps at a
     true 1440 (gutter becomes empty centring margin above ~1520). */
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}

/* ── Inner wrapper: true 1440 content cap; owns Y padding only ───────────── */
.aew-bnv2__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 64px 0;        /* banded widget: section Y */
  box-sizing: border-box;
}

/* ── Section title ───────────────────────────────────────────────────────── */
/* Wrapper class prefix raises specificity to (0,2,0) so the colour beats the
   Elementor kit's `.elementor-kit-N h1..h6 { color }` rule (0,1,1), which would
   otherwise override the widget heading colour and break the colour control. */
.aew-bnv2 .aew-bnv2__title {
  margin: 0 0 48px;
  text-align: center;
  color: var(--aew-bnv2-title, var(--aew-cta));
  font-family: var(--aew-teko);
  font-weight: 600;
  font-size: 64px;
  line-height: 85%;
  text-transform: uppercase;
}

/* ── Grid of columns: N (item count, set by render) → 2 → 1 ──────────────── */
.aew-bnv2__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--aew-bnv2-cols, 4), 1fr);
  gap: 40px;
}

.aew-bnv2__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── Circular image ──────────────────────────────────────────────────────── */
.aew-bnv2__media {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.04);
  aspect-ratio: 1 / 1;          /* hold the circle even if width control changes */
}

/* Fill the circle. !important + max-width override Elementor's global
   `img { max-width: 100%; height: auto }` which would otherwise force the
   image back to its intrinsic aspect ratio and leave gaps in the circle. */
.aew-bnv2 .aew-bnv2__img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── Column heading ──────────────────────────────────────────────────────── */
.aew-bnv2 .aew-bnv2__heading {
  margin: 0 0 16px;
  color: var(--aew-bnv2-heading, var(--aew-cta));
  font-family: var(--aew-teko);
  font-weight: 600;
  font-size: 40px;        /* design-system H3 desktop */
  line-height: 85%;
  text-transform: uppercase;
  width: 100%;
}

/* ── Column paragraph ────────────────────────────────────────────────────── */
.aew-bnv2__text {
  margin: 0;
  color: var(--aew-bnv2-text, var(--aew-background));
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 140%;
  max-width: 32ch;
}

/* ── Tablet: 4 → 2 columns ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* X gutter from outer (40); Y 64 from desktop inner */
  .aew-bnv2__grid  { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; }
  .aew-bnv2__title { font-size: 56px; margin-bottom: 40px; }
}

/* ── Mobile: 2 → 1 column, Y padding → 32px, X → 16px ────────────────────── */
@media (max-width: 768px) {
  .aew-bnv2 { padding-left: 16px; padding-right: 16px; }
  .aew-bnv2__inner { padding: 32px 0; }
  .aew-bnv2__grid  { grid-template-columns: 1fr; gap: 40px; }
  .aew-bnv2__title   { font-size: 40px; margin-bottom: 32px; }
  .aew-bnv2__heading { font-size: 24px; }   /* design-system H3 mobile */
  .aew-bnv2__text    { font-size: 14px; }
}