/* ix.ua v287 — compact illustrated "Почни ланцюг допомоги" banner.
   The artwork is integrated at the left and dissolves softly toward the copy.
   Banner height is not increased. */

.landing-cta-chain-v287{
  position:relative!important;
  height:148px!important;
  min-height:148px!important;
  grid-template-columns:315px minmax(0,1fr) auto!important;
  gap:14px!important;
  padding:0 28px 0 0!important;
  overflow:hidden!important;
  isolation:isolate;
  background:
    linear-gradient(90deg,rgba(255,253,249,.35) 0%,rgba(255,250,243,.96) 45%,#fffaf3 100%)!important;
}

.landing-cta-chain-v287 .cta-chain-art-v287{
  position:relative;
  z-index:0;
  height:148px;
  align-self:stretch;
  overflow:visible;
  pointer-events:none;
}

.landing-cta-chain-v287 .cta-chain-art-v287 img{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  display:block!important;
  width:440px!important;
  max-width:none!important;
  height:148px!important;
  object-fit:cover!important;
  object-position:left center!important;
  opacity:.96!important;
  mix-blend-mode:normal!important;
  -webkit-mask-image:linear-gradient(90deg,
    rgba(0,0,0,.96) 0%,
    #000 58%,
    rgba(0,0,0,.88) 72%,
    rgba(0,0,0,.38) 89%,
    transparent 100%);
  mask-image:linear-gradient(90deg,
    rgba(0,0,0,.96) 0%,
    #000 58%,
    rgba(0,0,0,.88) 72%,
    rgba(0,0,0,.38) 89%,
    transparent 100%);
}

.landing-cta-chain-v287 .landing-cta-copy{
  position:relative;
  z-index:2;
  align-self:center!important;
  min-width:0;
  padding-left:2px;
}

.landing-cta-chain-v287 .landing-cta-action{
  position:relative;
  z-index:2;
}

/* Tablet: keep the block low; illustration becomes slightly more compact. */
@media (max-width:900px){
  .landing-cta-chain-v287{
    height:148px!important;
    min-height:148px!important;
    grid-template-columns:225px minmax(0,1fr) auto!important;
    gap:10px!important;
    padding:0 18px 0 0!important;
  }

  .landing-cta-chain-v287 .cta-chain-art-v287{
    display:block!important;
    height:148px!important;
  }

  .landing-cta-chain-v287 .cta-chain-art-v287 img{
    width:330px!important;
    height:148px!important;
  }

  .landing-cta-chain-v287 .landing-cta-action{
    grid-column:auto!important;
    align-items:center!important;
    margin-bottom:0!important;
  }
}

/* Small screens: artwork remains a soft background instead of adding a new row. */
@media (max-width:650px){
  .landing-cta-chain-v287{
    position:relative!important;
    height:auto!important;
    min-height:168px!important;
    display:grid!important;
    grid-template-columns:1fr auto!important;
    padding:20px 16px!important;
    text-align:left!important;
    gap:12px!important;
  }

  .landing-cta-chain-v287 .cta-chain-art-v287{
    display:block!important;
    position:absolute;
    z-index:0;
    inset:0;
    width:100%;
    height:100%!important;
    overflow:hidden;
  }

  .landing-cta-chain-v287 .cta-chain-art-v287 img{
    left:-18px;
    top:50%;
    width:410px!important;
    height:100%!important;
    transform:translateY(-50%);
    object-fit:cover!important;
    opacity:.30!important;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.78) 45%,rgba(0,0,0,.22) 78%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.78) 45%,rgba(0,0,0,.22) 78%,transparent 100%);
  }

  .landing-cta-chain-v287:after{
    content:"";
    position:absolute;
    z-index:1;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(255,253,249,.38),rgba(255,250,243,.82) 58%,#fffaf3 100%);
  }

  .landing-cta-chain-v287 .landing-cta-copy,
  .landing-cta-chain-v287 .landing-cta-action{
    position:relative;
    z-index:2;
  }

  .landing-cta-chain-v287 .landing-cta-copy{
    grid-column:1 / -1;
    padding:0;
  }

  .landing-cta-chain-v287 .landing-cta-action{
    grid-column:1 / -1!important;
    align-items:flex-start!important;
  }
}