/* assets/css/pages/about/why-kiwi.css */

.kiwi-aboutWhy{
  padding: 80px 0;

  --why-card-h: 200px;

  --why-divider: 1px;
}

.kiwi-aboutWhy__title{
  margin: 0 0 24px;
  font-weight: 900;
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.25;
  color: var(--kiwi-ink);
  text-align: start;
}

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

  padding: 8px 14px;
  font-weight: 900;
  line-height: 1;
  color: var(--kiwi-background);

  isolation: isolate;
  z-index: 0;

  --stroke-top: -0em;
  --stroke-bottom: -0.35em;
  --stroke-inline: -0.10em;
}

.kiwi-aboutWhy__kiwi::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;
}

/* Full-bleed row: extends edge-to-edge */
.kiwi-aboutWhy__row{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));

  gap: var(--why-divider);

  width: 100vw;
  margin-inline: calc(50% - 50vw);

  background: var(--kiwi-background);
  padding: var(--why-divider);

  border-radius: 0;
  overflow: hidden;
}

/* Shared card (GUARANTEED height) */
.kiwi-aboutWhy__card{
  height: var(--why-card-h);
  min-height: 0;
  border-radius: 0;

  background-clip: padding-box;
}

/* Image card */
.kiwi-aboutWhy__card--image{
  background: transparent;
}

.kiwi-aboutWhy__card--image img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Text cards */
.kiwi-aboutWhy__card--text{
  background: var(--kiwi-gold);
  color: rgba(255,255,255,.95);

  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  text-align: center;
  padding: 6px 10px;
  overflow: hidden;
}

.kiwi-aboutWhy__icon{
  font-size: 18px;
  line-height: 1;
  color: var(--kiwi-background);
  margin: 0 0 6px;
}

/* ✅ NEW: SVG icon mask (white) */
.kiwi-aboutWhy__iconMask{
  width: 18px;
  height: 18px;
  display: inline-block;
  background: var(--kiwi-background);
  margin: 0 0 6px;

  -webkit-mask: var(--kiwi-icon) center / contain no-repeat;
  mask: var(--kiwi-icon) center / contain no-repeat;
}

/* ✅ NEW: PNG/WEBP icon image -> white */
.kiwi-aboutWhy__iconImg{
  width: 18px;
  height: 18px;
  display: inline-block;
  object-fit: contain;
  margin: 0 0 6px;

  filter: brightness(0) invert(1);
}

.kiwi-aboutWhy__text{
  margin: 0;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.45;
  color: var(--kiwi-white);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  max-width: 30ch;
}

/* ===== LTR Fixes (English) ===== */
html[dir="ltr"] .kiwi-aboutWhy__kiwi::before{
  transform: scaleX(-1);
  transform-origin: center;
}

@media (max-width: 1100px){
  .kiwi-aboutWhy{
    --why-card-h: 108px;
  }

  .kiwi-aboutWhy__row{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px){
  .kiwi-aboutWhy{
    --why-card-h: 104px;
  }

  .kiwi-aboutWhy__row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px){
  .kiwi-aboutWhy{
    --why-card-h: 96px;
  }

  .kiwi-aboutWhy__row{
    grid-template-columns: 1fr;
  }
}