/* Stats section — fornecedor (light, Barlow + Instrument Serif) */

.page-fornecedor-stats {
  --stats-bg: hsl(0 0% 100%);
  --stats-fg: hsl(222 47% 11%);
  --stats-muted: hsl(215 16% 47%);
  --stats-border: hsl(214 32% 91%);
  --font-barlow: "Barlow", ui-sans-serif, system-ui, sans-serif;
  --font-serif-accent: "Instrument Serif", Georgia, serif;
}

.supplier-stats {
  background: var(--stats-bg);
  color: var(--stats-fg);
  padding: 2rem 1.25rem 3rem;
  border-top: 1px solid var(--stats-border);
  overflow: visible;
  font-family: var(--font-barlow);
}

@media (min-width: 768px) {
  .supplier-stats {
    padding: 4rem 2rem 5rem;
  }
}

@media (min-width: 1024px) {
  .supplier-stats {
    padding: 5rem 7.5rem 6rem;
  }
}

.supplier-stats__inner {
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .supplier-stats__inner {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2.5rem;
    align-items: center;
  }

  .supplier-stats__copy {
    flex: 0.75;
    min-width: 0;
  }
}

.supplier-stats__copy {
  flex: 1;
  min-width: 0;
}

.supplier-stats__title {
  font-size: clamp(1.5rem, 4vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 1.25rem;
  max-width: 36rem;
}

.supplier-stats__title em {
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--primary-dark);
}

.supplier-stats__subtitle {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--stats-muted);
  font-weight: 300;
  max-width: 32rem;
  margin: 0 0 2.5rem;
}

@media (min-width: 768px) {
  .supplier-stats__subtitle {
    font-size: 1.125rem;
  }
}

.supplier-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 1.5rem;
}

@media (min-width: 768px) {
  .supplier-stats__grid {
    grid-template-columns: max-content max-content;
    gap: 2rem 3.5rem;
  }
}

@media (min-width: 1024px) {
  .supplier-stats__grid {
    gap: 2rem 5rem;
  }
}

.supplier-stats__item {
  display: flex;
  flex-direction: column;
}

.supplier-stats__number {
  font-family: var(--font-serif-accent);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.65rem;
  color: var(--stats-fg);
}

.supplier-stats__label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--stats-muted);
  line-height: 1.4;
  max-width: 12rem;
}

@media (min-width: 768px) {
  .supplier-stats__label {
    font-size: 0.75rem;
  }
}

/* Typewriter chars */
.tw-char {
  opacity: 0;
  transition: opacity 0.05s linear;
}

.tw-char.is-visible {
  opacity: 1;
}

/* Masked media */
.supplier-stats__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  min-width: 0;
}

@media (min-width: 1024px) {
  .supplier-stats__visual {
    flex: 0.85;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
    padding-right: 0.5rem;
  }
}

.supplier-stats__mask {
  --mask-ratio: 301 / 244;
  width: min(82vw, 18rem);
  aspect-ratio: var(--mask-ratio);
  transform-origin: center center;
  opacity: 0;
  transform: scale(0.92);
  -webkit-mask-image: url("../assets/mask-carrinho.png");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url("../assets/mask-carrinho.png");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
}

@media (min-width: 768px) {
  .supplier-stats__mask {
    width: min(55vw, 26rem);
  }
}

@media (min-width: 1024px) {
  .supplier-stats__mask {
    width: min(100%, 30rem);
    max-width: 30rem;
    margin-left: auto;
  }
}

.supplier-stats__mask.is-visible {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.supplier-stats__mask video,
.supplier-stats__mask img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.supplier-stats__item {
  opacity: 0;
  transform: translateY(16px);
}

.supplier-stats__item.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}