/* ==========================================================================
   Why Us — Figma single-row stat cards (6 equal cols, Swiper on mobile)
   ========================================================================== */

/* Header */
.zg3-whyus-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--zg3-sp-24);
  margin-bottom: var(--zg3-sp-40);
}
.zg3-whyus-header__left {
  flex: 1;
  max-width: 780px;
}
.zg3-whyus-h2 {
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--zg3-black);
  text-transform: none;
  margin-bottom: var(--zg3-sp-12);
}
.zg3-whyus-header__sub {
  font-size: var(--zg3-fs-small);
  color: var(--zg3-gray);
  line-height: 1.5;
}

/* ── Swiper wrapper ─────────────────────────────────────────────────────── */
.zg3-whyus-swiper {
  overflow: visible;
}

/* Desktop: row of 6 equal flex cards (swiper-wrapper acts as flex container) */
.zg3-whyus-row {
  display: flex;
  align-items: stretch;
  gap: var(--zg3-sp-12);
}

/* ── Base card ──────────────────────────────────────────────────────────── */
.zg3-whyus-card {
  flex: 1;
  min-width: 0;
  border: 1px solid #eaeaea;
  border-radius: var(--zg3-r-md);
  padding: var(--zg3-sp-24);
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  background: #FCFAF8;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.zg3-whyus-card:hover { transform: translateY(-3px); }

/* ── Shared typography ──────────────────────────────────────────────────── */
.zg3-whyus-card__big {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.9;
  display: block;
}
.zg3-whyus-card__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--zg3-gray);
  line-height: 1.25;
  display: block;
}
.zg3-whyus-card__label-top {
  font-size: 14px;
  font-weight: 500;
  color: var(--zg3-gray);
  line-height: 1.3;
  display: block;
}
.zg3-whyus-card__tag-top {
  font-size: 20px;
  font-weight: 700;
  color: var(--zg3-primary);
  letter-spacing: -0.02em;
  align-self: flex-end;
  display: block;
}

.zg3-whyus-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}
.zg3-whyus-card__foot--right {
  flex-direction: column;
  align-items: flex-end;
}
.zg3-whyus-card__foot--center {
  flex-direction: column;
  align-items: center;
}

/* Uploaded SVG images */
.zg3-whyus-svg-img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ── Card 1: 20% savings ────────────────────────────────────────────────── */
.zg3-whyus-card--savings {
  min-height: 135px;
  background: radial-gradient(148.88% 89.66% at 79.57% 0%, #FFF 55%, #F9F9F8 55%), #F9F9F8;
}
.zg3-whyus-card__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

/* ── Card 2: 24/7 support ───────────────────────────────────────────────── */
.zg3-whyus-card--support {
  min-height: 232px;
  text-align: center;
  background: radial-gradient(133.32% 102.59% at 50.25% -2.59%, #FFF 54%, #F9F9F8 54%), #F9F9F8;
  align-items: center; /* horizontally center all children */
}
/* 24/7 pinned to top-right corner */
.zg3-whyus-card--support .zg3-whyus-card__tag-top {
  position: absolute;
  top: var(--zg3-sp-20);
  right: var(--zg3-sp-20);
  align-self: unset;
}
/* Icon grows to fill vertical space, stays 72px wide */
.zg3-whyus-card--support .zg3-whyus-card__icon-wrap {
  flex: 1;
  align-items: center; /* center SVG vertically inside the grown area */
  /* width is intrinsic = 72px — do NOT set width: 100% */
}
/* Label stays at bottom, centered */
.zg3-whyus-card--support .zg3-whyus-card__label {
  text-align: center;
  color: var(--zg3-gray);
}
.zg3-whyus-card__icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

/* Pulsing rings — fixed 72×72 so they stay circular even when parent grows */
.zg3-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(249, 60, 27, 0.15);
  animation: zg3Pulse 2.4s ease-out infinite;
  transform: translate(-50%, -50%) scale(1);
  z-index: 0;
}
.zg3-pulse-ring.delay {
  animation-delay: 1.2s;
}
@keyframes zg3Pulse {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

/* ── Card 3: 500 people ─────────────────────────────────────────────────── */
.zg3-whyus-card--crowd {
  min-height: 294px;
  background: radial-gradient(201.72% 86.42% at 49.9% 13.58%, #FFF 41%, #F9F9F8 41%), #F9F9F8;
}

/* Centres the red pill vertically between label-top and foot */
.zg3-whyus-card__pill-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: var(--zg3-sp-16) 0;
}

/* Red pill with the people-strip SVG */
.zg3-whyus-card__pill {
  background: var(--zg3-primary);
  border-radius: 100px;
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
.zg3-whyus-card__pill .zg3-whyus-svg-img {
  height: 32px;
  width: auto;
  max-width: 100%;
}

/* ── Card 4: 12000 events ───────────────────────────────────────────────── */
.zg3-whyus-card--events {
  min-height: 276px;
  background: radial-gradient(220.2% 102.59% at 50.25% -2.59%, #FFF 34%, #F9F9F8 34%), #F9F9F8;
}
.zg3-whyus-card__icon-top {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

/* ── Card 5: Tech bubbles ───────────────────────────────────────────────── */
.zg3-whyus-card--tech {
  min-height: 219px;
  background: radial-gradient(267.27% 177.56% at 50.1% 191.71%, #F9F9F8 68.53%, #FFF 68.71%), #F9F9F8;
  /* align-items defaults to stretch — bubbles fill full card width */
}
/* Bubbles fill space and center their items */
.zg3-whyus-bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  align-content: center;
  justify-content: center;
  margin-bottom: var(--zg3-sp-12);
}
/* "Своя техника" pinned bottom, centered */
.zg3-whyus-card--tech .zg3-whyus-card__label {
  align-self: center;
  text-align: center;
}
.zg3-whyus-bubble {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: var(--zg3-r-full);
  background: var(--zg3-secondary);
  color: var(--zg3-white);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Card 6: 1400 costumes ──────────────────────────────────────────────── */
.zg3-whyus-card--costumes {
  min-height: 135px;
 background: radial-gradient(50% 150% at 3% 5%, #FFF 71.62%, #F9F9F8 71.63%), #F9F9F8
}
/* 1400 pinned top-right */
.zg3-whyus-card--costumes .zg3-whyus-card__big {
  position: absolute;
  top: var(--zg3-sp-20);
  right: var(--zg3-sp-20);
  color: var(--zg3-secondary);
}
/* SVG hat fills middle, left-aligned */
.zg3-whyus-card__hat {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
}
/* "костюмов в прокате" bottom-right */
.zg3-whyus-card--costumes .zg3-whyus-card__label {
  align-self: flex-end;
  text-align: right;
}

/* ── Swiper pagination dots (mobile only) ───────────────────────────────── */
.zg3-whyus-pagination {
  display: none;
  margin-top: var(--zg3-sp-20);
  text-align: center;
}
.zg3-whyus-pagination .swiper-pagination-bullet {
  background: var(--zg3-gray-light);
  opacity: 1;
}
.zg3-whyus-pagination .swiper-pagination-bullet-active {
  background: var(--zg3-primary);
}

/* ── Tablet 768-1199 px: 3 cards visible ───────────────────────────────── */
@media (max-width: 1199px) {
  .zg3-whyus-swiper {
    overflow: hidden;
  }
  .zg3-whyus-row {
    gap: 16px;
  }
  .zg3-whyus-card {
    flex: 0 0 calc(33.333% - 11px);
  }
}

/* ── Mobile <768px: Swiper slider, 1 card + peek ───────────────────────── */
@media (max-width: 767px) {
  .zg3-whyus-header {
    flex-direction: column;
    gap: var(--zg3-sp-12);
  }
  .zg3-whyus-h2 { font-size: clamp(26px, 6vw, 36px); }

  /* Make the swiper slightly wider than the container but avoid 100vw
     which can cause horizontal scroll on mobile (scrollbars/safe-area).
     Use calc(100% + 32px) and negative left margin to preserve the
     intended visual indent while keeping overflow hidden. */
  #why-us { overflow-x: hidden; }

  .zg3-whyus-swiper {
    /* Extend to full viewport width so Swiper clips at its own edges, not the container's */
        margin-left: calc(var(--zg3-sp-16) * -1) !important;
        overflow: visible !important;
        margin-right: 20px !important;
  }

  /* Gap reduced on mobile */
  .zg3-whyus-row {
    gap: 8px;
  }

  /* Cards: most of viewport width, peek of next card */
  .zg3-whyus-card {
    flex: 0 0 82vw;
    min-height: 180px;
  }

  .zg3-whyus-card__big { font-size: 40px; }

  /* Hide pagination dots */
  .zg3-whyus-pagination {
    display: none;
  }

  /* ── Native scroll mode ─────────────────────── */
  .zg3-whyus-swiper.zg3-scroll-mode {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
  }
  .zg3-whyus-swiper.zg3-scroll-mode::-webkit-scrollbar { display: none; }
  .zg3-whyus-swiper.zg3-scroll-mode .zg3-whyus-row {
    flex-wrap: nowrap;
    padding-left: 16px;
    padding-right: 16px;
  }
  .zg3-whyus-swiper.zg3-scroll-mode .zg3-whyus-card {
    scroll-snap-align: start;
    flex: 0 0 82vw;
  }
}