/* assets/css/pages/about/hero.css */

/* Page layout: keep footer at the bottom on short pages */
.kiwi-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.kiwi-page__main{
  flex: 1;
}

/* About hero */
.kiwi-aboutHero{
  /* Make key geometry responsive */
  --about-hero-radius: clamp(120px, 18vw, 200px);

  /* Stroke tuned */
  --about-hero-stroke-show: clamp(120px, 24vw, 160px);
  --about-hero-stroke-thickness: 1px;
  --about-hero-stroke-y: -12px;
  --about-hero-stroke-x: 0px;

  --about-map-top: clamp(6px, 1.6vw, 8px);

  /* Map offset (negative pushes outside) */
  --about-map-end: clamp(-360px, calc(-420px + 20vw), -180px);

  --about-map-w: clamp(300px, 90vw, 720px);
  --about-map-h: clamp(220px, 60vw, 460px);

  --about-map-opacity: .16;
  --about-map-rotate: 0deg;

  /* ✅ Map positioning (default RTL: map on the LEFT) */
  --about-map-left: var(--about-map-end);
  --about-map-right: auto;

  /* Right safe padding */
  --about-hero-right-pad: clamp(18px, 4vw, 90px);

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

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

  margin-top: 24px;

  overflow: visible;
  isolation: isolate;
}

/* Top stroke: TOP + RIGHT only */
.kiwi-aboutHero::before{
  content: "";
  position: absolute;
  inset: 0;

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

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

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

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

/* Clipped area so the map never escapes the brown hero */
.kiwi-aboutHero__clip{
  position: relative;
  overflow: hidden;

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

  padding: clamp(40px, 5.5vw, 52px) 0 clamp(28px, 4.8vw, 38px);
  padding-right: var(--about-hero-right-pad);

  z-index: 1;
}

/* Map pattern */
.kiwi-aboutHero__map{
  position: absolute;
  top: var(--about-map-top);

  left: var(--about-map-left);
  right: var(--about-map-right);

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

  opacity: var(--about-map-opacity);
  transform: rotate(var(--about-map-rotate));
  transform-origin: center;

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

  z-index: 0;
}

/* Content */
.kiwi-aboutHero__inner{
  position: relative;
  z-index: 1;

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

  text-align: start;

  max-width: min(62ch, 100%);
  box-sizing: border-box;
}

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

.kiwi-aboutHero__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 (English) ===== */
html[dir="ltr"] .kiwi-aboutHero{
  border-top-right-radius: 0;
  border-top-left-radius: var(--about-hero-radius);

  /* ✅ Move map to RIGHT in LTR (without flipping the image) */
  --about-map-left: auto;
  --about-map-right: var(--about-map-end);
}

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

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

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

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

/* Responsive */
@media (max-width: 768px){
  .kiwi-aboutHero{
    --about-map-opacity: .12;

    --about-map-end: clamp(-420px, calc(-520px + 25vw), -260px);

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

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

    margin-top: 12px;
  }

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

  /* keep LTR padding on mobile too */
  html[dir="ltr"] .kiwi-aboutHero__clip{
    padding-right: 0;
    padding-left: var(--about-hero-right-pad);
  }
}