/* assets/css/pages/contact/hero.css */

.kiwi-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.kiwi-page__main{
  flex: 1;
}

.kiwi-contactHero{
  --contact-hero-radius: clamp(110px, 22vw, 200px);

  --contact-hero-stroke-show: clamp(120px, 24vw, 160px);
  --contact-hero-stroke-thickness: 1px;
  --contact-hero-stroke-y: -12px;
  --contact-hero-stroke-x: 0px;

  --contact-map-top: 8px;
  --contact-map-end: -180px;
  --contact-map-w: 720px;
  --contact-map-h: 460px;
  --contact-map-opacity: .16;
  --contact-map-rotate: 0deg;

  --contact-hero-right-pad: clamp(18px, 4vw, 90px);

  position: relative;
  background: var(--kiwi-ink);
  color: var(--kiwi-background);

  border-top-right-radius: var(--contact-hero-radius);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

  margin-top: 24px;

  overflow: visible;
  isolation: isolate;
}

.kiwi-contactHero::before{
  content: "";
  position: absolute;
  inset: 0;

  transform: translate3d(var(--contact-hero-stroke-x), var(--contact-hero-stroke-y), 0);

  border-top: var(--contact-hero-stroke-thickness) solid var(--kiwi-gold);
  border-right: var(--contact-hero-stroke-thickness) solid var(--kiwi-gold);
  border-left: 0;
  border-bottom: 0;

  border-top-right-radius: var(--contact-hero-radius);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

  clip-path: inset(0 0 calc(100% - var(--contact-hero-stroke-show)) 0);

  pointer-events: none;
  z-index: 2;
  box-sizing: border-box;
}

.kiwi-contactHero__clip{
  position: relative;
  overflow: hidden;

  border-top-right-radius: var(--contact-hero-radius);
  border-top-left-radius: 0;

  padding: 52px 0 38px;
  padding-right: var(--contact-hero-right-pad);

  z-index: 1;
}

.kiwi-contactHero__map{
  position: absolute;
  top: var(--contact-map-top);

  inset-inline-end: var(--contact-map-end);
  inset-inline-start: auto;

  width: var(--contact-map-w);
  height: var(--contact-map-h);

  opacity: var(--contact-map-opacity);
  transform: rotate(var(--contact-map-rotate));

  pointer-events: none;
  user-select: none;
  object-fit: contain;

  z-index: 0;
}

.kiwi-contactHero__inner{
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  text-align: start;
  max-width: 62ch;

  box-sizing: border-box;
}

.kiwi-contactHero__title{
  margin: 0;
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.2;
}

.kiwi-contactHero__sub{
  margin: 10px 0 0;
  font-weight: 600;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.8;
  color: rgba(254,255,251,.88);
}

/* LTR mirror */

html[dir="ltr"] .kiwi-contactHero{
  border-top-right-radius: 0;
  border-top-left-radius: var(--contact-hero-radius);
}

html[dir="ltr"] .kiwi-contactHero::before{
  border-right: 0;
  border-left: var(--contact-hero-stroke-thickness) solid var(--kiwi-gold);

  border-top-right-radius: 0;
  border-top-left-radius: var(--contact-hero-radius);
}

html[dir="ltr"] .kiwi-contactHero__clip{
  border-top-right-radius: 0;
  border-top-left-radius: var(--contact-hero-radius);

  padding-right: 0;
  padding-left: var(--contact-hero-right-pad);
}

@media (max-width: 768px){
  .kiwi-contactHero{
    --contact-map-end: -300px;
    --contact-map-w: 560px;
    --contact-map-h: 360px;
    --contact-map-opacity: .12;

    --contact-hero-stroke-show: 140px;
    --contact-hero-stroke-y: -10px;

    --contact-hero-right-pad: 18px;

    margin-top: 12px;
  }

  .kiwi-contactHero__clip{
    padding: 40px 0 30px;
    padding-right: var(--contact-hero-right-pad);
  }

  html[dir="ltr"] .kiwi-contactHero__clip{
    padding-right: 0;
    padding-left: var(--contact-hero-right-pad);
  }

  .kiwi-contactHero__inner{
    max-width: 100%;
  }

  .kiwi-contactHero__title{
    font-size: clamp(20px, 5.2vw, 32px);
  }

  .kiwi-contactHero__sub{
    font-size: clamp(13px, 3.4vw, 16px);
  }
}