/* ============================================================================
 * Image Stack — content card (heading + body + CTA) beside a vertical stack of
 * images. Two columns on desktop; stacks on mobile. Column ratio, image height/
 * gap/radius and alignment are editor-controlled.
 * ========================================================================== */

.elementor-column
  > .elementor-element-populated:has(.elementor-widget-agency-image-stack),
.e-con:has(> .e-con-inner > .elementor-widget-agency-image-stack),
.e-con:has(.elementor-widget-agency-image-stack) {
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  padding: 0 !important;
}

.aew-istack {
  width: 100%;
  box-sizing: border-box;
  background-color: #f8f5f1;
  /* Clip at the viewport edge so the mobile full-bleed image scroller can bleed
     out (margin-inline: 50% − 50vw) without creating page-level horizontal
     scroll. The scroller keeps its own overflow-x:auto and scrolls inside. */
  overflow-x: clip;
}

.aew-istack__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 64px 40px;
  box-sizing: border-box;
}

/* ── Two-column grid ─────────────────────────────────────────────────────── */
.aew-istack__grid {
  display: grid;
  grid-template-columns: var(--aew-istack-content-w, 58%) 1fr;
  column-gap: 32px;
  /* Row gap only shows when the columns stack (≤1024px); editable via the
     "Row gap (stacked)" control. */
  row-gap: var(--aew-istack-row-gap, 24px);
  align-items: stretch; /* image column matches the content card height */
}

/* Images on the left: mirror the columns and move the stack into the left track. */
.aew-istack__grid--left {
  grid-template-columns: 1fr var(--aew-istack-content-w, 58%);
}
.aew-istack__grid--left .aew-istack__stack {
  order: -1;
}

/* ── Content card ────────────────────────────────────────────────────────── */
.aew-istack__content {
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 28px;
  padding: 48px;
  text-align: left;
}

.aew-istack__eyebrow {
  margin: 0 0 16px;
  font-family: var(--aew-font-body, Poppins, sans-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #305b83;
}

.aew-istack__heading {
  margin: 0 0 24px;
  font-family: var(--aew-font-heading, "DM Serif Display", serif);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.1;
  color: #305b83;
}

.aew-istack__body {
  font-family: var(--aew-font-body, Poppins, sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #5b6166;
}

.aew-istack__body p {
  margin: 0 0 1em;
}

.aew-istack__body p:last-child {
  margin-bottom: 0;
}

.aew-istack__btn,
.aew-istack__btn-mid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  padding: 16px 28px;
  border: 0 solid transparent;
  border-radius: 8px;
  background-color: #f3c400;
  color: #252f37;
  font-family: var(--aew-font-body, Poppins, sans-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.aew-istack__btn:hover,
.aew-istack__btn:focus-visible,
.aew-istack__btn-mid:hover,
.aew-istack__btn-mid:focus-visible {
  opacity: 0.92;
}

/* ── Testimonial card (inside the content card) ──────────────────────────── */
.aew-istack__quote {
  margin-top: 32px;
  padding: 40px;
  border-radius: 16px;
  background-color: #e7e2db;
}

.aew-istack__quote-stars {
  display: flex;
  align-items: center;
  /* gap owned by the "Star gap" control. */
  gap: var(--aew-istack-star-gap, 2px);
  margin-bottom: 16px;
}

/* Match the testimonial-grid stars: 18×18, brand yellow. Size owned by the
   "Star size" control. */
.aew-istack__quote-stars svg {
  width: var(--aew-istack-star-size, 18px);
  height: var(--aew-istack-star-size, 18px);
  flex-shrink: 0;
  fill: var(--aew-color-yellow, #f3c400);
}

.aew-istack__quote-text {
  margin: 0 0 16px;
  font-family: var(--aew-font-body, Poppins, sans-serif);
  font-size: 16px;
  line-height: 1.6;
  color: #252f37;
}

.aew-istack__quote-author {
  margin: 0;
  font-family: var(--aew-font-body, Poppins, sans-serif);
  font-size: 16px;
  color: #252f37;
}

.aew-istack__quote-name {
  font-weight: 700;
}

.aew-istack__body--after {
  margin-top: 24px;
}

.aew-istack__footnote {
  margin: 16px 0 0;
  font-family: var(--aew-font-body, Poppins, sans-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #252f37;
}

/* ── Image stack ─────────────────────────────────────────────────────────── */
.aew-istack__stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%; /* fill the stretched column so the images can divide the card height */
}

.aew-istack__img {
  flex: 1 1 0; /* images split the content card height evenly */
  min-height: 0;
  border-radius: 24px;
  overflow: hidden;
  background-color: #e1deda;
}

.aew-istack__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Tablet / mobile: stack the two columns ──────────────────────────────── */
@media (max-width: 1024px) {
  /* !important beats the "Content column width" control (0,2,0). */
  .aew-istack__grid {
    grid-template-columns: 1fr !important;
    row-gap: var(--aew-istack-row-gap, 24px);
  }
  /* Stacked: images move above the text box, each gets a fixed height (editor-controlled). */
  .aew-istack__stack {
    height: auto;
    order: -1;
  }
  .aew-istack__img {
    flex: 0 0 auto;
    height: var(--aew-istack-img-h, 220px);
  }
  .aew-istack__heading {
    font-size: 36px;
  }
}

@media (max-width: 768px) {
  .aew-istack__inner {
    padding: 40px 16px;
  }
  /* Mobile: the image stack scrolls horizontally (swipe) instead of stacking.
     Full-bleed peek scroller (same technique as products-slider-v2): the track
     breaks out of __inner's 16px side padding to the viewport edges via
     `margin-inline: 50% − 50vw`, then re-adds the 16px inset as leading/trailing
     padding + scroll-padding. So the first image aligns with the content, the
     next peeks in, and nothing is clipped by the padding. */
  .aew-istack__stack {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 16px;
    height: auto;
    margin-inline: calc(50% - 50vw);
    padding-left: 16px;
    padding-right: 16px;
    scroll-padding-left: 16px;
    scroll-padding-right: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .aew-istack__stack::-webkit-scrollbar {
    display: none;
  }
  .aew-istack__img {
    flex: 0 0 80%; /* one image at a time, next peeks */
    scroll-snap-align: start;
    height: var(--aew-istack-img-h, 220px);
  }
  .aew-istack__img:only-child {
    flex-basis: 100%; /* a single image fills the width */
  }
  .aew-istack__heading {
    font-size: 30px;
  }
  .aew-istack__btn {
    width: 100%;
  }
}