/* ============================================================
   LENANDA SEMIJOIAS - SEÇÃO "EXPERIÊNCIA"
   Mobile first | cores em hexadecimal | sem :root / variáveis
   Fontes em px (não dependem do font-size do html)

   PALETA PADRÃO DO SITE (a mesma em todos os blocos):
   Fundo claro (branco quente) ... #FDFBF6
   Fundo bege ..................... #F6F0E4
   Título / verde-petróleo ........ #1E3A38
   Texto corrido .................. #5A6664
   Dourado (destaque) ............. #C9A45C
   Dourado (texto pequeno) ........ #A1772B
   Linha suave .................... #E7DFCF
   Turquesa Tiffany ............... #1FB4B0
   Turquesa Tiffany claro ......... #D5F3F0
   ============================================================ */


/* ============================================================
   SEÇÃO (mobile)
   ============================================================ */
.experiencia {
  padding: 72px 24px 88px;
  background-color: #FDFBF6;
}

.experiencia__container {
  max-width: 1280px;
  margin: 0 auto;
}


/* ---------- Cabeçalho (centralizado) ---------- */
.experiencia__cabecalho {
  margin: 0 0 44px;
  text-align: center;
}

.experiencia__rotulo {
  margin: 0 0 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #A1772B;
}

.experiencia__titulo {
  max-width: 640px;
  margin: 0 auto 28px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.18;
  color: #1E3A38;
  text-wrap: balance;
}

.experiencia__divisor {
  display: block;
  width: 64px;
  height: 1px;
  margin: 0 auto;
  background-color: #C9A45C;
}


/* ============================================================
   CARDS
   A grade recebe as bordas de cima e da esquerda; cada card
   recebe as de baixo e da direita. Assim as linhas nunca
   ficam duplicadas, em qualquer número de colunas.
   ============================================================ */
.experiencia__lista {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #E7DFCF;
  border-left: 1px solid #E7DFCF;
}

.experiencia__item {
  margin: 0;
  padding: 32px 28px 36px;
  background-color: #FDFBF6;
  border-right: 1px solid #E7DFCF;
  border-bottom: 1px solid #E7DFCF;
  transition: background-color 0.45s ease;
}

.experiencia__numero {
  display: block;
  margin: 0 0 28px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  color: #A1772B;
}

.experiencia__item-titulo {
  margin: 0 0 14px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  color: #1E3A38;
}

.experiencia__item-texto {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.85;
  color: #5A6664;
}


/* ============================================================
   TABLET (576px+): 2 colunas
   ============================================================ */
@media (min-width: 576px) {
  .experiencia {
    padding: 88px 32px 104px;
  }

  .experiencia__cabecalho {
    margin-bottom: 52px;
  }

  .experiencia__titulo {
    font-size: 40px;
  }

  .experiencia__lista {
    grid-template-columns: repeat(2, 1fr);
  }

  .experiencia__item {
    padding: 36px 32px 40px;
  }
}


/* ============================================================
   DESKTOP (992px+): 4 colunas
   ============================================================ */
@media (min-width: 992px) {
  .experiencia {
    padding: 128px 32px 144px;
  }

  .experiencia__cabecalho {
    margin-bottom: 64px;
  }

  .experiencia__titulo {
    max-width: none;
    font-size: 46px;
  }

  .experiencia__lista {
    grid-template-columns: repeat(4, 1fr);
  }

  .experiencia__item {
    padding: 44px 40px 48px;
  }

  .experiencia__numero {
    margin-bottom: 36px;
  }
}


/* ============================================================
   HOVER (só em telas com mouse): o card vira azul Tiffany claro
   ============================================================ */
@media (hover: hover) {
  .experiencia__item:hover {
    background-color: #D5F3F0;
  }
}

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