/* assets/css/pages/services/hero.css */

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

.kiwi-page__main{
  flex: 1;
}

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

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

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

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

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

  border-top-right-radius: var(--services-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-servicesHero::before{
  content: "";
  position: absolute;
  inset: 0;

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

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

  border-top-right-radius: var(--services-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(--services-hero-stroke-show)) 0);

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

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

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

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

  z-index: 1;
}

.kiwi-servicesHero__map{
  position: absolute;
  top: var(--services-map-top);

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

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

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

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

  z-index: 0;
}

.kiwi-servicesHero__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-servicesHero__title{
  margin: 0;
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.2;
}

.kiwi-servicesHero__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-servicesHero{
  border-top-right-radius: 0;
  border-top-left-radius: var(--services-hero-radius);
}

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

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

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

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

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

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

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

    margin-top: 12px;
  }

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

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

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

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

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

.kiwi-servicesHero--noMap .kiwi-servicesHero__map{
  display: none !important;
}

.kiwi-servicesHero--details .kiwi-servicesHero__title{
  font-size: clamp(22px, 2.8vw, 40px);
}

.kiwi-servicesHero__titleSep{
  opacity: .85;
  margin: 0 10px;
}

.kiwi-servicesHero__titleRest{
  margin-inline-start: 10px;
}

.kiwi-servicesHero__hl{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 14px;
  font-weight: 900;
  line-height: 1;

  color: var(--kiwi-background);

  isolation: isolate;
  z-index: 0;

  --stroke-top: -0.05em;
  --stroke-bottom: -0.38em;
  --stroke-inline: -0.12em;
}

.kiwi-servicesHero__hl::before{
  content: "";
  position: absolute;
  inset: var(--stroke-top) var(--stroke-inline) var(--stroke-bottom) var(--stroke-inline);
  background: url("/assets/images/pattern/Paint%20stroke%20underline2.svg") center/100% 100% no-repeat;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}