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

   Paleta usada:
   Fundo (branco quente) ... #FDFBF6
   Título / destaque ....... #2B3A38
   Texto corrido ........... #5A6664
   Dourado (linhas) ........ #C9A45C
   Dourado (texto) ......... #A1772B
   Linha suave ............. #E7DFCF
   Placeholder de imagem ... #EDE6D8
   ============================================================ */


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

.sobre__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  max-width: 560px;
  margin: 0 auto;
}


/* ============================================================
   IMAGENS
   ============================================================ */
.sobre__imagens {
  position: relative;
  margin-bottom: 28px; /* espaço para a imagem menor que "sai" por baixo */
}

.sobre__foto-principal {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: #EDE6D8;
}

.sobre__foto-principal img,
.sobre__foto-detalhe img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s ease;
}

.sobre__foto-detalhe {
  position: absolute;
  right: -6px;
  bottom: -28px;
  width: 40%;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: #EDE6D8;
  border: 6px solid #FDFBF6;
  box-shadow: 0 14px 34px #2B3A3826;
}


/* ============================================================
   CONTEÚDO
   ============================================================ */
.sobre__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;
}

.sobre__titulo {
  margin: 0 0 28px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.15;
  color: #2B3A38;
  text-wrap: balance;
}

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

.sobre__texto {
  margin: 0 0 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.9;
  color: #5A6664;
}

.sobre__texto:last-of-type {
  margin-bottom: 0;
}


/* ============================================================
   PILARES
   ============================================================ */
.sobre__pilares {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  margin: 40px 0 0;
  padding: 32px 0 0;
  list-style: none;
  border-top: 1px solid #E7DFCF;
}

.sobre__pilar {
  margin: 0;
  padding: 2px 0 2px 18px;
  border-left: 1px solid #C9A45C;
}

.sobre__pilar-titulo {
  margin: 0 0 6px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: #2B3A38;
}

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


/* ============================================================
   TABLET (576px+)
   ============================================================ */
@media (min-width: 576px) {
  .sobre {
    padding: 88px 32px 112px;
  }

  .sobre__titulo {
    font-size: 42px;
  }

  .sobre__texto {
    font-size: 16px;
  }

  /* Pilares em três colunas, sem a linha lateral */
  .sobre__pilares {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .sobre__pilar {
    padding: 0;
    border-left: 0;
  }

  .sobre__pilar-titulo {
    font-size: 22px;
  }
}


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

  .sobre__container {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 96px;
    max-width: 1200px;
  }

  .sobre__imagens {
    margin-bottom: 0;
  }

  .sobre__foto-detalhe {
    right: -8px;
    bottom: -32px;
    width: 38%;
    border-width: 8px;
  }

  .sobre__titulo {
    font-size: 48px;
  }
}


/* ============================================================
   HOVER (só em telas com mouse) e MOVIMENTO REDUZIDO
   ============================================================ */
@media (hover: hover) {
  .sobre__foto-principal:hover img,
  .sobre__foto-detalhe:hover img {
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sobre__foto-principal img,
  .sobre__foto-detalhe img {
    transition: none;
  }

  .sobre__foto-principal:hover img,
  .sobre__foto-detalhe:hover img {
    transform: none;
  }
}