/*
 * Facilidades: componente FACILITIES do Figma (quadros 1886:5518 e 1418:8337).
 * Partial: Partials/jv/benefits.template, o mesmo na home, na página de produto,
 * no detalhe do leilão e na Black Friday.
 * Celular: os cartões rolam para o lado. Computador: os 4 lado a lado.
 */

.jv-benefits {
  padding-block-end: var(--jv-space-8);
}

/* O respiro em cima e embaixo deixa o contorno do foco aparecer dentro da área que rola. */
.jv-benefits__list {
  display: flex;
  gap: var(--jv-space-4);
  padding: var(--jv-space-1) var(--jv-space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--jv-space-4);
}

/* O item é flex para o cartão ocupar a altura toda: na mesma fileira, todos ficam da mesma altura. */
.jv-benefits__item {
  display: flex;
  flex: 0 0 var(--jv-size-benefit-card);
  scroll-snap-align: start;
}

.jv-benefits__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-block-size: var(--jv-size-benefit-card);
  padding: var(--jv-space-12) var(--jv-space-6) var(--jv-space-6);
  border: var(--jv-border-thin) solid var(--jv-color-accent);
  border-radius: var(--jv-radius-md);
  background: var(--jv-color-brand);
  color: var(--jv-color-on-brand);
  text-align: center;
  text-decoration: none;
}

/* O CSS antigo pinta todo link no hover; aqui o texto continua branco no roxo. */
.jv-benefits__card:hover {
  color: var(--jv-color-on-brand);
  text-decoration: none;
}

/* Ícones de alturas diferentes, apoiados embaixo: os títulos ficam na mesma linha. */
.jv-benefits__media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  block-size: var(--jv-size-benefit-icon);
}

.jv-benefits__title {
  margin-block-start: var(--jv-space-4);
  font-family: var(--jv-font-sans);
  font-size: var(--jv-text-xl);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-none);
  color: var(--jv-color-accent);
}

.jv-benefits__text {
  margin-block-start: var(--jv-space-2);
  line-height: var(--jv-leading-heading);
}

/* Margem automática: o "Saiba mais" fica no pé de todos os cartões, mesmo com textos de tamanhos diferentes. */
.jv-benefits__more {
  margin-block-start: auto;
  padding-block-start: var(--jv-space-5);
  line-height: var(--jv-leading-none);
  text-decoration: underline;
}

@media (hover: hover) {
  .jv-benefits__card:hover .jv-benefits__more {
    text-decoration-thickness: var(--jv-border-thick);
  }
}

@media (min-width: 1024px) {
  .jv-benefits__list {
    justify-content: center;
    overflow-x: visible;
  }

  .jv-benefits__item {
    flex: 0 1 var(--jv-size-benefit-card);
  }
}