/* ==========================================================================
   ESPORTES — mobile-first
   ========================================================================== */

.esportes {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 8rem);
}

.esportes__container {
  position: relative;
  z-index: 2;
}

.esportes__decoracao {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;

  width: 100%;
  height: 100%;
  min-width: 1200px;

  pointer-events: none;
}

.esportes__intro {
  position: relative;
  z-index: 2;
}

.esportes__imagem-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}

.esportes__imagem {
  position: relative;
  z-index: 2;

  display: block;
  width: 100%;
  max-width: 430px;
  height: auto;
  margin-inline: auto;

  object-fit: contain;
}

.esportes__titulo {
  max-width: 32rem;
  margin-bottom: 1.25rem;

  color: var(--color-primary);
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
}

.esportes__titulo:first-line {
  font-weight: 400;
}

.esportes__titulo strong,
.esportes__titulo b {
  font-weight: 700;
}

.esportes__texto {
  max-width: 38rem;
  margin-bottom: 2rem;

  color: var(--color-text);
  font-size: 1.5rem;
  line-height: 1.3;
}

/* ==========================================================================
   MODALIDADES
   Mobile: uma coluna.
   Tablet/Desktop: Ballet + Judô na esquerda; Basquete na direita.
   ========================================================================== */

.esportes__modalidades {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  width: 100%;
  max-width: 34rem;
}

.esportes__modalidades-coluna {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.esportes__modalidade {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
}

.esportes__modalidade-link {
  position: relative;
  display: block;

  width: 100%;
  height: 300px;

  overflow: hidden;
  border-radius: 1rem;
}

.esportes__modalidade-img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  transition: transform 0.35s ease;
}

.esportes__modalidade-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.02) 25%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

.esportes__modalidade-nome {
  position: absolute;
  right: 1rem;
  bottom: 1.375rem;
  left: 2rem;
  z-index: 2;

  display: block;
  padding: 0.75rem;

  border-left: 5px solid transparent;

  color: #fff;
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.05;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.border__ballet {
  border-color: #ec681d;
}

.border__judo {
  border-color: #6d4695;
}

.border__basquete {
  border-color: #a5ce40;
}

.esportes__modalidade-link:hover .esportes__modalidade-img {
  transform: scale(1.06);
}

.esportes__modalidade-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Modalidades cadastradas além das três principais */
.esportes__extras {
  margin-top: 0.75rem;
}

/* ==========================================================================
   BENEFICIOS
   Ícone à esquerda; título e texto à direita.
   ========================================================================== */

.esportes__beneficios {
  position: relative;
  z-index: 2;

  margin-top: clamp(3rem, 7vw, 6rem);
}

.esportes__beneficio {
  display: flex;
  align-items: flex-start;
  gap: 1rem;

  height: 100%;
}

.esportes__beneficio-icone {
  display: flex;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;
}

.esportes__beneficio-icone img {
  width: 48px;
  height: 48px;

  margin: 0;
  object-fit: contain;
}

.esportes__beneficio-conteudo {
  flex: 1;
  min-width: 0;
}

.esportes__beneficio-titulo {
  margin: 0 0 0.5rem;

  color: var(--color-text);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.15;
}

.esportes__beneficio-texto {
  margin: 0;

  color: var(--color-text-light);
  font-size: 0.82rem;
  line-height: 1.35;
}

/* ==========================================================================
   TABLET
   ========================================================================== */

@media (min-width: 576px) {
  .esportes__modalidades {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    height: 372px;
    max-width: 34rem;
  }

  .esportes__modalidades-coluna--esquerda {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .esportes__modalidades-coluna--direita {
    height: 100%;
  }

  .esportes__modalidades-coluna--esquerda .esportes__modalidade,
  .esportes__modalidades-coluna--esquerda .esportes__modalidade-link,
  .esportes__modalidades-coluna--direita .esportes__modalidade,
  .esportes__modalidades-coluna--direita .esportes__modalidade-link {
    height: 100%;
  }
}

@media (min-width: 768px) {
  .esportes__beneficios {
    row-gap: 3.5rem !important;
  }

  .esportes__beneficio {
    gap: 1.15rem;
  }

  .esportes__beneficio-icone,
  .esportes__beneficio-icone img {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }
}

/* ==========================================================================
   DESKTOP
   ========================================================================== */

@media (min-width: 992px) {
  .esportes {
    padding-block: 75px 72px;
  }

  .esportes__titulo {
    max-width: 100%;
  }

  .esportes__decoracao {
    min-width: 100%;
  }

  .esportes__imagem {
    max-width: 470px;
  }

  .esportes__modalidades {
    height: 420px;
    max-width: 36rem;
  }

  /*   .esportes__modalidade-nome {
    font-size: 1.25rem;
  } */

  .border__basquete {
    left: auto;
  }

  .esportes__beneficios {
    margin-top: clamp(4rem, 7vw, 7rem);
    row-gap: 2rem !important;
  }

  .esportes__beneficio {
    padding-right: 1rem;
    flex-direction: column;
  }

  .esportes__beneficio-icone,
  .esportes__beneficio-icone img {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }

  .esportes__beneficio-titulo {
    max-width: 19rem;
    /* font-size: 1.15rem; */
  }

  .esportes__beneficio-texto {
    max-width: 18rem;
    font-size: 0.84rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .esportes__modalidade-img {
    transition: none;
  }
}