/* path: core/static/ui/css/blocks/hero.css */

/* =============================================================================
   HERO
   ============================================================================= */

.Hero{
  position:relative;
  overflow:hidden;
  padding:92px 0 40px;
}

.Hero > .Container{
  position:relative;
  z-index:1;
}

.Hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-5);
  align-items:start;
}

.Hero__main{
  min-width:0;
  display:grid;
  gap:var(--space-3);
}

.Hero__media{
  min-width:0;
  display:flex;
  justify-content:center;
  align-items:center;
}

.Hero__mediaInner{
  width:100%;
  max-width:620px;
  min-height:140px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.Hero__image{
  display:block;
  width:100%;
  height:auto;
  max-height:230px;
  object-fit:contain;
  object-position:center center;
  pointer-events:none;
  user-select:none;
}

/* =============================================================================
   TEXT
   ============================================================================= */

.Hero__title{
  max-width:100%;
  margin:0 0 var(--space-2);
  font-family:var(--font-head);
  font-size:var(--h1);
  line-height:1.04;
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--text);
  text-wrap:balance;
}

.Hero__accent{
  color:var(--accent);
}

.Hero__desc{
  max-width:100%;
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:1.02rem;
  line-height:1.38;
  letter-spacing:-.01em;
  color:var(--text-2);
  text-wrap:pretty;
}

/* =============================================================================
   TOGGLE
   ============================================================================= */

.Hero__toggle .AudienceToggle{
  width:100%;
}

/* =============================================================================
   CALC
   ============================================================================= */

.HeroCalc{
  display:grid;
  gap:var(--space-2);
  width:100%;
  padding:var(--space-3);
  border-radius:var(--r-m);
  background:var(--surface);
  border:1px solid var(--divider-2);
}

.HeroCalc .Input{
  background:transparent;
  font-family:var(--font-body);
  font-weight:300;
  font-size:1.12rem;
  border-radius:var(--r-s);
}

.HeroCalc__route{
  position:relative;
  overflow:hidden;
  padding-right:calc(44px + var(--space-2));
  border-radius:10px;
  background:var(--surface-2);
  border:.9px solid var(--divider-2);
}

.HeroCalc__route .Input.HeroCalc__input{
  width:100%;
  height:54px;
  padding:0 var(--space-3);
  background:transparent;
  border-radius:0;
  font-size:1.05rem;
  color:var(--text);
}

.HeroCalc__route .Input.HeroCalc__input::placeholder{
  color:var(--text-2);
}

.HeroCalc__divider{
  position:relative;
  height:1px;
  margin:0 21px;
  opacity:.9;
  background-image:repeating-linear-gradient(
    to right,
    var(--divider-3) 0 6px,
    transparent 6px 14px
  );
}

.HeroCalc__divider::before{
  content:"";
  position:absolute;
  left:-7px;
  top:50%;
  transform:translateY(-50%);
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--divider-3);
}

.HeroCalc__divider::after{
  content:"";
  position:absolute;
  right:-7px;
  top:50%;
  transform:translateY(-50%);
  width:6px;
  height:6px;
  border-radius:50%;
  border:1px solid var(--divider-3);
}

.HeroCalc__route:focus-within{
  border-color:var(--accent-soft);
}

.HeroCalc__route:focus-within .HeroCalc__divider{
  opacity:1;
  background-image:repeating-linear-gradient(
    to right,
    var(--accent) 0 6px,
    transparent 6px 14px
  );
}

.HeroCalc__route:focus-within .HeroCalc__divider::before{
  background:var(--accent);
}

.HeroCalc__route:focus-within .HeroCalc__divider::after{
  border-color:var(--accent);
}

.HeroCalc__swap{
  position:absolute;
  right:var(--space-2);
  top:50%;
  z-index:5;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  cursor:pointer;
  border-radius:10px;
  border:1px solid var(--divider);
  background:var(--surface);
  transition:
    border-color .12s ease,
    background .12s ease,
    transform .12s ease;
}

.HeroCalc__swap:hover{
  border-color:var(--divider-2);
  background:var(--surface-2);
}

.HeroCalc__swap:active{
  transform:translateY(-50%) scale(.98);
}

.HeroCalc__swapIcon{
  color:var(--text-2);
  font-family:var(--font-body);
  font-size:1.14rem;
  line-height:1;
}

.HeroCalc__note{
  margin:0;
  color:var(--text-2);
  font-size:var(--small);
  line-height:1.35;
  text-align:center;
}

.HeroCalc__note .Accent{
  color:var(--accent);
  font-weight:600;
}

/* =============================================================================
   TABLET
   ============================================================================= */

@media (min-width:768px){
  .Hero{
    padding:112px 0 56px;
  }

  .Hero__grid{
    gap:var(--space-5);
  }

  .Hero__main{
    gap:var(--space-5);
  }

  .Hero__title{
    margin-bottom:var(--space-4);
  }

  .Hero__desc{
    max-width:40ch;
    font-size:1.08rem;
    line-height:1.42;
  }

  .Hero__mediaInner{
    max-width:760px;
    min-height:240px;
  }

  .Hero__image{
    max-height:320px;
  }

  .HeroCalc{
    gap:var(--space-3);
    padding:var(--space-4);
  }

  .HeroCalc__route{
    padding-right:calc(var(--h-input) + var(--space-2));
    border-radius:var(--r-m);
  }

  .HeroCalc__route .Input.HeroCalc__input{
    height:56px;
    padding:0 var(--space-4);
    font-size:1.14rem;
  }

  .HeroCalc__divider{
    margin:0 var(--space-4);
  }

  .HeroCalc__swap{
    width:var(--h-input);
    height:var(--h-input);
  }
}

/* =============================================================================
   DESKTOP
   ============================================================================= */

@media (min-width:1100px){
  .Hero{
    padding:88px 0 76px;
  }

  .Hero__grid{
    grid-template-columns:minmax(0, 580px) minmax(440px, 1fr);
    grid-template-areas:
      "main media"
      "form media";
    column-gap:16px;
    row-gap:var(--space-3);
    align-items:center;
  }

  .Hero__main{
    grid-area:main;
    gap:0;
  }

  .Hero__toggle{
    display:none;
  }

  .Hero__form{
    grid-area:form;
  }

  .Hero__media{
    grid-area:media;
    justify-content:flex-end;
    align-self:stretch;
  }

  .Hero__mediaInner{
    max-width:780px;
    min-height:440px;
    justify-content:flex-end;
    align-items:center;
    padding-top:14px;
  }

  .Hero__image{
    max-width:100%;
    max-height:560px;
    object-position:right center;
  }

  /*
  .Hero__title{
    max-width:16.5ch;
  }
  */

  .Hero__desc{
    max-width:36ch;
  }



  .Hero__accent{
  display:block;
  }

  .Hero__desc{
    max-width:58ch;
  }

  .HeroCalc{
    max-width:520px;
  }

  .HeroCalc__divider{
    margin:0 24px;
  }
}

/* =============================================================================
   WIDE DESKTOP
   ============================================================================= */

@media (min-width:1280px){
  .Hero__grid{
    grid-template-columns:minmax(0, 600px) minmax(490px, 1fr);
    column-gap:12px;
    row-gap:16px;
  }

  .Hero__mediaInner{
    justify-content:flex-end;
    align-items:center;
    padding-top:18px;
    max-width:800px;
    min-height:400px;
  }
}

.HeroCalc__route.is-invalid{
  border-color:#ff5a66;
  box-shadow:
    0 0 0 1px rgba(255,90,102,.22),
    0 0 0 4px rgba(255,90,102,.10),
    0 0 20px rgba(255,90,102,.20);
}

.HeroCalc__route.is-invalid:focus-within{
  border-color:#ff5a66;
  box-shadow:
    0 0 0 1px rgba(255,90,102,.24),
    0 0 0 4px rgba(255,90,102,.12),
    0 0 22px rgba(255,90,102,.22);
}

.HeroCalc__route.is-invalid .HeroCalc__divider{
  opacity:1;
  background-image:repeating-linear-gradient(
    to right,
    #ff5a66 0 6px,
    transparent 6px 14px
  );
}

.HeroCalc__route.is-invalid .HeroCalc__divider::before{
  background:#ff5a66;
}

.HeroCalc__route.is-invalid .HeroCalc__divider::after{
  border-color:#ff5a66;
}