/*
 * About Global Shine — Figma desktop 33:734, mobile 44:2955.
 * Desktop: pt 200, pb 100, px 48; блоки gap 64.
 *   Heading 686, lead 20 muted (акцент Medium чорним).
 *   Цифри: 3 × 300, gap 16; число 64/1.2 SemiBold, підпис 18 muted, gap 12.
 *   Фото 1344×500 radius 12 (crop: h 179.2%, top −73.05% → y ≈ 92%).
 *   «We use products from:» 20 Medium + стрічка лого 100 px, gap 64 → marquee.
 * Mobile: py 70, px 12; число 48, підпис 12; фото 351×351;
 *   лого 70 px, gap 20, заголовок 16.
 */
.about {
  padding: 200px var(--gutter) 100px;
  background: var(--color-white);
  overflow: hidden;
}

.about__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  max-width: 1344px;
  margin: 0 auto;
}

.about__heading {
  gap: 32px;
  max-width: 686px;
}

.about__stats {
  display: flex;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

/* dt (підпис) іде першим у розмітці, візуально — під числом */
.about__stat {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 12px;
  width: 300px;
  text-align: center;
}

.about__stat-value {
  margin: 0;
  font-size: 64px;
  font-weight: 600;
  line-height: 1.2;
}

.about__stat-label {
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-text-muted);
}

/* Обгортка для зуму фото (img-zoom.css) */
.about__photo-wrap {
  width: 100%;
  border-radius: 12px;
}

.about__photo {
  display: block;
  width: 100%;
  height: 500px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center 92%;
}

.about__brands {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100vw;
}

.about__brands-title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

.brands-marquee {
  width: 100%;
  overflow: hidden;
}

/* Набір логотипів дублює js/brands-marquee.js; зсув — рівно на ширину
   одного набору (--marquee-shift), тому цикл безшовний на будь-якій ширині. */
.brands-marquee__track {
  display: flex;
  width: max-content;
  animation: brands-marquee 20s linear infinite;
}

.brands-marquee:hover .brands-marquee__track {
  animation-play-state: paused;
}

.brands-marquee__item {
  flex-shrink: 0;
  height: 100px;
  margin-right: 64px;
  object-fit: contain;
}

.brands-marquee__item--sq { width: 100px; }
.brands-marquee__item--md { width: 125px; }
.brands-marquee__item--lg { width: 180px; }

@keyframes brands-marquee {
  to {
    transform: translateX(calc(-1 * var(--marquee-shift, 50%)));
  }
}

/* Цифри «набігають» — js/about-stats-count.js; моноширинні цифри,
   щоб ширина числа не стрибала під час підрахунку */
.about__stat-value {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .about {
    padding: 70px var(--gutter);
  }

  .about__stats {
    gap: 0;
  }

  .about__stat {
    flex: 1 0 0;
    width: auto;
    gap: 4px;
  }

  .about__stat-value {
    font-size: 48px;
  }

  .about__stat-label {
    font-size: 12px;
  }

  /* Як у мобільному макеті (44:3124): 10+ · 7 · 100+ — сімка по центру,
     усі підписи у 2 рядки (br.br-mobile), колонки рівні — нічого не скаче */
  .about__stat:nth-child(2) {
    order: -1;
  }

  .about__photo {
    height: auto;
    aspect-ratio: 1;
    object-position: center;
  }

  .about__brands {
    gap: 20px;
  }

  .about__brands-title {
    font-size: 16px;
  }

  .brands-marquee__item {
    height: 70px;
    margin-right: 20px;
  }

  .brands-marquee__item--sq { width: 70px; }
  .brands-marquee__item--md { width: 87px; }
  .brands-marquee__item--lg { width: 126px; }
}