/* Estilo automático para a página: cases-de-sucesso */
#cases {
  .cases-title {
    text-align: center;
    margin-top: 60px;
    color: var(--color-primary);
  }

  .case-item {
    padding: clamp(45px, 8vw, 60px) 0;
    transition:
      background 0.3s ease,
      color 0.3s ease;

    .case-image {
      border-radius: var(--radius-card);
      width: 100%;
      height: auto;
      object-fit: cover;
    }

    .case-name {
      font-weight: 600;
      margin-bottom: 10px;

      .case-role {
        font-weight: 400;
      }
    }

    .case-description {
      margin-bottom: 16px;
      line-height: 150%;
    }

    .case-subtitle {
      margin-top: 20px;
      font-weight: 600;
    }

    .case-numbers {
      margin-top: 24px;
      font-weight: bold;
      color: var(--color-primary);

      .case-badge {
        padding: 8px 18px;
        border-radius: 999px;
        font-size: 14px;
        border: 2px solid transparent;
        background:
          linear-gradient(var(--color-white), var(--color-white)) padding-box,
          var(--gradient-brand) border-box;
        white-space: nowrap;
      }
    }
  }

  .case-item:nth-of-type(even) {
    background: var(--color-primary);
    color: var(--color-white);
    .case-image-col {
      order: 2;
    }
    .case-content-col {
      order: 1;
    }
    .case-numbers {
      color: var(--color-white);
      .case-badge {
        border: 2px solid currentColor;
        background: none;
      }
    }
  }
}

.case-item:nth-of-type(odd) {
  background: var(--color-white);
  color: var(--color-text);
  .case-name {
    color: var(--color-primary);
    .case-role {
      color: var(--color-black);
    }
  }
}

.case-item:nth-of-type(odd) .case-badge {
  border-color: var(--color-white);
}

@media (width <= 992px) {
  #cases {
    .case-item {
      text-align: center;
      &:nth-of-type(even) {
        .case-image-col {
          order: 1;
        }
        .case-content-col {
          order: 2;
        }
      }

      .case-numbers {
        flex-direction: column;
      }
    }
  }
}

@media (width <= 768px) {
  #cases {
    .case-item {
      text-align: center;
      overflow: hidden;

      .case-numbers {
        flex-direction: column;
      }
    }
  }
}