/* ix.ua v283 — homepage hero image becomes a background on narrower screens.
   idea.php is intentionally untouched. Desktop >900px keeps the current two-column hero. */

@media (max-width:900px){
  body.landing .hero{
    position:relative!important;
    display:block!important;
    grid-template-columns:none!important;
    min-height:0!important;
    overflow:hidden!important;
    isolation:isolate!important;
  }

  /* The same main illustration now sits behind the hero content instead of
     dropping below it as a separate block. */
  body.landing .hero::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:0!important;
    inset:0!important;
    pointer-events:none!important;
    background-image:url("illustrations/hero-community-ixua.webp")!important;
    background-repeat:no-repeat!important;
    background-position:78% center!important;
    background-size:auto 108%!important;
    opacity:.58!important;
    -webkit-mask-image:radial-gradient(ellipse 90% 96% at 57% 52%,#000 0%,#000 62%,rgba(0,0,0,.92) 72%,rgba(0,0,0,.58) 84%,transparent 100%)!important;
    mask-image:radial-gradient(ellipse 90% 96% at 57% 52%,#000 0%,#000 62%,rgba(0,0,0,.92) 72%,rgba(0,0,0,.58) 84%,transparent 100%)!important;
  }

  /* Soft white veil keeps the copy readable while leaving the illustration visible. */
  body.landing .hero::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:1!important;
    inset:0!important;
    pointer-events:none!important;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.95) 34%,
        rgba(255,255,255,.76) 54%,
        rgba(255,255,255,.28) 76%,
        rgba(255,255,255,.10) 100%),
      linear-gradient(180deg,
        rgba(255,255,255,.04) 0%,
        rgba(255,255,255,0) 78%,
        rgba(255,255,255,.72) 100%)!important;
  }

  body.landing .hero-copy{
    position:relative!important;
    z-index:2!important;
    width:min(540px,62%)!important;
    max-width:62%!important;
    padding:30px 0 34px!important;
  }

  /* Do not reserve a second row for the illustration. */
  body.landing .hero-art{
    display:none!important;
  }
}

/* Tablet / narrow desktop: use a little more of the illustration,
   but keep the left text column clear. */
@media (min-width:651px) and (max-width:900px){
  body.landing .hero{
    min-height:455px!important;
  }

  body.landing .hero::before{
    background-position:76% center!important;
    background-size:auto 110%!important;
    opacity:.61!important;
  }

  body.landing .hero-copy{
    width:57%!important;
    max-width:57%!important;
  }
}

/* Phones keep the picture too — it is never removed.
   It becomes softer and lower so buttons/text stay legible. */
@media (max-width:650px){
  body.landing .hero{
    min-height:0!important;
    padding-bottom:8px!important;
  }

  body.landing .hero::before{
    background-position:70% 68%!important;
    background-size:auto 108%!important;
    opacity:.70!important;
    -webkit-mask-image:radial-gradient(ellipse 94% 92% at 58% 54%,#000 0%,#000 58%,rgba(0,0,0,.90) 70%,rgba(0,0,0,.48) 85%,transparent 100%)!important;
    mask-image:radial-gradient(ellipse 94% 92% at 58% 54%,#000 0%,#000 58%,rgba(0,0,0,.90) 70%,rgba(0,0,0,.48) 85%,transparent 100%)!important;
  }

  body.landing .hero::after{
    background:
      linear-gradient(90deg,
        rgba(255,255,255,.74) 0%,
        rgba(255,255,255,.22) 13%,
        rgba(255,255,255,.10) 84%,
        rgba(255,255,255,.74) 100%),
      linear-gradient(180deg,
        rgba(255,255,255,.90) 0%,
        rgba(255,255,255,.72) 34%,
        rgba(255,255,255,.36) 72%,
        rgba(255,255,255,.88) 100%)!important;
  }

  body.landing .hero-copy{
    width:100%!important;
    max-width:100%!important;
    padding:22px 0 26px!important;
  }
}

/* Very narrow phones: keep the scene visible as a quiet background,
   without adding a separate image row. */
@media (max-width:420px){
  body.landing .hero::before{
    background-position:68% 70%!important;
    background-size:auto 106%!important;
    opacity:.68!important;
    -webkit-mask-image:radial-gradient(ellipse 98% 94% at 58% 56%,#000 0%,#000 54%,rgba(0,0,0,.88) 68%,rgba(0,0,0,.44) 84%,transparent 100%)!important;
    mask-image:radial-gradient(ellipse 98% 94% at 58% 56%,#000 0%,#000 54%,rgba(0,0,0,.88) 68%,rgba(0,0,0,.44) 84%,transparent 100%)!important;
  }

  body.landing .hero::after{
    background:
      linear-gradient(90deg,
        rgba(255,255,255,.72) 0%,
        rgba(255,255,255,.18) 14%,
        rgba(255,255,255,.08) 82%,
        rgba(255,255,255,.72) 100%),
      linear-gradient(180deg,
        rgba(255,255,255,.90) 0%,
        rgba(255,255,255,.70) 34%,
        rgba(255,255,255,.30) 70%,
        rgba(255,255,255,.90) 100%)!important;
  }

  body.landing .hero-copy{
    padding-bottom:22px!important;
  }
}