/* BLOCK 04 / "Как всё проходит" — approved structure, background only */

.bp-how{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:760px;
  background:
    linear-gradient(90deg,
      rgba(2,11,19,.10) 0%,
      rgba(2,11,19,.16) 42%,
      rgba(2,11,19,.86) 58%,
      rgba(2,11,19,.97) 100%),
    linear-gradient(180deg,
      rgba(2,11,19,.08) 0%,
      rgba(2,11,19,.10) 55%,
      rgba(2,11,19,.34) 100%),
    url("assets/birthday-illustrations/block04-how-bg-v1.webp"),
    linear-gradient(180deg,#03111d,#03111d);
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
  background-size:cover,cover,min(1500px,100vw) auto,cover;
  background-position:center,center,right -140px center,center;
  border-top:1px solid rgba(81,234,255,.10);
  border-bottom:1px solid rgba(81,234,255,.12);
}

.bp-how::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 73% 30%,rgba(81,234,255,.18),transparent 17%),
    radial-gradient(circle at 91% 16%,rgba(255,150,84,.14),transparent 15%),
    linear-gradient(rgba(92,233,250,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(92,233,250,.028) 1px,transparent 1px);
  background-size:auto,auto,72px 72px,72px 72px;
  opacity:.88;
  mask-image:linear-gradient(180deg,transparent 0%,#000 9%,#000 92%,transparent 100%);
}

.bp-how-visual{
  position:relative;
  min-height:760px;
  overflow:hidden;
  border-right:1px solid rgba(81,234,255,.12);
  background:#020b13;
}
.bp-how-visual::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0%,rgba(2,11,19,.08) 54%,rgba(2,11,19,.44) 100%),
    linear-gradient(180deg,rgba(2,11,19,.04),transparent 62%,rgba(2,11,19,.24) 100%);
}
.bp-how-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(1.02) contrast(1.05) brightness(.90);
}

.bp-how-copy{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:80px max(5vw,60px);
  background:
    linear-gradient(90deg,rgba(3,16,27,.82) 0%,rgba(3,16,27,.66) 58%,rgba(3,16,27,.46) 100%);
  backdrop-filter:blur(1.5px);
}

.bp-how .bp-section-head h2{
  text-shadow:0 18px 42px rgba(0,0,0,.38);
}
.bp-steps li{
  background:linear-gradient(90deg,rgba(4,24,38,.30),rgba(4,24,38,.08));
  padding-left:12px;
  padding-right:12px;
}
.bp-steps h3{
  text-shadow:0 10px 24px rgba(0,0,0,.32);
}

@media(max-width:1100px){
  .bp-how{
    background-size:cover,cover,1180px auto,cover;
    background-position:center,center,right -280px center,center;
  }
  .bp-how-visual{min-height:520px;border-right:0;border-bottom:1px solid rgba(81,234,255,.12)}
  .bp-how-copy{
    padding:70px 30px;
    background:linear-gradient(180deg,rgba(3,16,27,.86),rgba(3,16,27,.72));
  }
}
@media(max-width:700px){
  .bp-how{
    background:
      linear-gradient(180deg,rgba(2,11,19,.92),rgba(2,11,19,.88)),
      url("assets/birthday-illustrations/block04-how-bg-v1.webp"),
      linear-gradient(180deg,#03111d,#03111d);
    background-repeat:no-repeat,no-repeat,no-repeat;
    background-size:cover,960px auto,cover;
    background-position:center,right -420px top 320px,center;
  }
  .bp-how-visual{min-height:420px}
  .bp-how-copy{
    padding:60px 18px;
    background:linear-gradient(180deg,rgba(3,16,27,.86),rgba(3,16,27,.76));
  }
}