/*
 * Banner CTA — [iw_banner_cta]
 * Design source: Figma 407:41771 (desktop) + 407:42373 (mobile).
 */

.iw-banner-cta {
  position: relative;
  /* Establish a stacking context so __right's `z-index: -1` is contained here
     instead of slipping behind the section background-image. Without this the
     image silently disappears under the bg in some render paths. */
  isolation: isolate;
  overflow: hidden;
  /* Fullwidth breakout (match Hero) */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-color: #ff6b17;
  background-image:
    radial-gradient(circle at 88% 78%, rgba(255, 198, 140, 0.35), transparent 42%),
    radial-gradient(circle at 12% 18%, rgba(255, 210, 150, 0.30), transparent 45%),
    linear-gradient(120deg, #ff5a00 0%, #ff6b17 45%, #ff8c3d 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}

/* When editor picks an image bg, swap out the gradient stack so the upload is
   the only visible layer. Inline `background-image:url(...)` replaces the CSS
   gradient automatically; `background-color: transparent` prevents the orange
   showing through transparent PNGs. The decorative ::before glow is also
   suppressed so it doesn't tint the uploaded artwork. */
.iw-banner-cta--bg-image {
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.iw-banner-cta--bg-image::before { display: none; }

/* Flat-color mode: drop the gradient + glow entirely, inline style sets color. */
.iw-banner-cta--bg-color {
  background-image: none;
}
.iw-banner-cta--bg-color::before { display: none; }

/* Soft circular decorative glow — mirrors the faint swirls in the Figma bg. */
.iw-banner-cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -380px;
  width: 900px;
  height: 900px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 62%);
  pointer-events: none;
}

.iw-banner-cta .iw-banner-cta__inner {
  position: relative;
  z-index: 1;
  max-width: var(--iw-container-max);
  margin: 0 auto;
  padding: 40px var(--iw-container-pad-x);
  display: grid;
  grid-template-columns: minmax(0, 612px) 1fr;
  gap: 41px;
  align-items: center;
  box-sizing: border-box;
  /* Figma 407:41771 — total banner 632px = 40 (pt) + 552 (content) + 40 (pb).
     Lock content row to 552px so banner stays 632px even when the right-side
     image hasn't loaded or is shorter than the design asset. */
  min-height: 632px;
}

/* Figma "Col" 407:41780 — 3 flex children (title, list, button) at gap 32,
   items-start + pt-4. */
.iw-banner-cta__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding-top: 4px;
  min-width: 0;
}

.iw-banner-cta__title {
  margin: 0;
  width: 100%;
  max-width: 527px;
  font-family: inherit;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.3;
  color: #ffffff;
  letter-spacing: 0;
}

.iw-banner-cta__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.iw-banner-cta__item {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Override Flatsome's `li { margin-bottom: .6em }` which would stack on top of
     the parent flex `gap: 12px` and inflate the spacing between items. */
  margin: 0;
  color: #ffffff;
  font-family: inherit;
  font-weight: 510;
  font-size: 20px;
  line-height: 28px;
}

.iw-banner-cta__item strong {
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
}

.iw-banner-cta__check {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: #ffffff;
}

.iw-banner-cta__item-text {
  /* Grow to remaining width + allow shrinking below min-content so long
     strings wrap inside a narrow container. Without min-width:0 the flex
     item refuses to shrink below its longest word and overflows. */
  flex: 1 1 0;
  min-width: 0;
}

.iw-banner-cta .iw-banner-cta__button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  background: #ffffff;
  color: #ff730a;
  font-family: inherit;
  font-weight: 510;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  border-radius: 8px;
  transition: transform 0.12s, box-shadow 0.12s;
}

.iw-banner-cta .iw-banner-cta__button:hover {
  color: #ff730a;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.25);
}

.iw-banner-cta__right {
  /* Take the artwork out of the grid track and pin it to the banner's right
     edge with a -10% bleed so it visually breaks past the inner max-width
     1440 (matches Figma where the composite hugs the right side). z-index:-1
     keeps it behind the text/button column without affecting click targets. */
  position: absolute;
  top: 0;
  right: -10%;
  bottom: 0;
  z-index: -1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.iw-banner-cta__picture {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  line-height: 0;
}

.iw-banner-cta__image {
  display: block;
  /* Figma 407:41808 — right artwork is 743×587, positioned y=22.5 inside the
     632px banner. Lock height so source assets smaller than 587px still scale
     up to design size instead of rendering at intrinsic pixel size. Width auto
     preserves aspect; max-width caps the column width on narrow viewports. */
  height: 587px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 991px) {
  .iw-banner-cta {
    background-image:
      radial-gradient(circle at 50% 110%, rgba(255, 200, 140, 0.45), transparent 55%),
      linear-gradient(160deg, #ff5a00 0%, #ff6b17 50%, #ff8c3d 100%);
  }
  .iw-banner-cta::before { display: none; }

  .iw-banner-cta .iw-banner-cta__inner {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 40px var(--iw-container-pad-x);
    max-width: none;
    justify-items: center;
    /* Reset desktop 632px lock — mobile Figma 407:42373 totals 691px from
       natural content stack (40 + 405 Col + 16 + 190 image + 40). */
    min-height: 0;
  }

  .iw-banner-cta__left {
    /* Figma mobile Col 407:42381 — gap-24, items-center, w-full */
    gap: 24px;
    width: 100%;
    align-items: center;
  }

  .iw-banner-cta__title {
    font-size: 24px;
    max-width: none;
  }

  .iw-banner-cta__list { gap: 8px; }

  .iw-banner-cta__item {
    align-items: flex-start;
    font-size: 16px;
    line-height: 1.5;
  }

  .iw-banner-cta__item strong {
    font-size: 18px;
    line-height: 1.5;
  }

  .iw-banner-cta .iw-banner-cta__button {
    align-self: center;
    padding: 10px 20px;
    font-size: 14px;
    line-height: 20px;
  }

  .iw-banner-cta__right {
    /* Reset desktop's absolute/-10% bleed — mobile stacks the artwork below
       the text column inside the grid flow. */
    position: static;
    right: auto;
    z-index: auto;
    width: 100%;
    justify-content: center;
  }

  .iw-banner-cta__picture {
    justify-content: center;
  }

  .iw-banner-cta__image {
    height: 260px;
    width: auto;
    max-width: 100%;
    object-fit: cover;
  }

  /* Ẩn ảnh trên mobile (<992px) — cột nội dung đứng 1 mình. */
  .iw-banner-cta--no-img-mobile .iw-banner-cta__right {
    display: none;
  }
}

/* Ẩn ảnh trên desktop (≥992px) — chỉ ẩn cột ảnh, giữ nguyên grid:
   cột nội dung đứng yên cột trái (cố định), phải để trống. */
@media (min-width: 992px) {
  .iw-banner-cta--no-img-desktop .iw-banner-cta__right {
    display: none;
  }
}