/**
 * solutions.css — Estilo Editorial e Minimalista da Seção Soluções
 * SETTA Comunicação Visual
 * 
 * Diretrizes: Fundo predominantemente branco, tipografia editorial de precisão,
 * ampla limpeza visual (sem badges técnicos ou ruídos visuais).
 * Textos azuis de destaque compartilham a mesma animação de revelação progressiva
 * letra por letra (cinza claro #BAC2CE -> azul Setta #00214D) via ScrollTrigger scrub.
 */

/* 1. CONTAINER DA SEÇÃO SOLUÇÕES */
#section-solucoes {
  background-color: #FFFFFF !important;
  color: var(--setta-navy, #00214D);
  position: relative;
  width: 100%;
  min-height: auto;
  padding-top: clamp(28px, 3.2vw, 40px);
  padding-bottom: clamp(28px, 3.2vw, 40px);
  overflow: visible;
  display: block !important;
}

.solutions-wrapper {
  max-width: 1380px;
  width: 90%;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* 2. CABEÇALHO EDITORIAL: IDENTIFICADOR E HEADLINE */
.solutions-header-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  position: relative;
}

/* Identificador Minimalista Superior */
.solutions-identifier {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-primary, 'Space Grotesk', sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #00214D;
}

.solutions-identifier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 7px;
  height: 7px;
  background-color: var(--setta-yellow, #F7D417);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(247, 212, 23, 0.7);
}

/* HEADLINE MONUMENTAL */
.solutions-headline-wrapper {
  width: 100%;
  max-width: 1240px;
  margin-top: 4px;
}

.solutions-headline {
  font-family: var(--font-headline, 'Syne', sans-serif);
  font-size: clamp(2.3rem, 5.4vw, 4.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
  position: relative;
  user-select: text;
  word-break: normal;
  overflow-wrap: break-word;
}

/* REGRA GERAL PARA TODOS OS TEXTOS AZUIS RELEVANTES (ALVOS DE REVELAÇÃO) */
.char-reveal-target {
  color: #BAC2CE; /* Estado latente inicial em cinza claro */
  user-select: text;
}

.char-reveal-target .sol-char {
  display: inline-block;
  position: relative;
  will-change: color;
  color: #BAC2CE; /* Cinza claro apagado / latente */
  transition: none; /* Controlado estritamente por GSAP ScrollTrigger */
}

/* Preserva o fluxo natural de palavras sem quebras no meio */
.char-reveal-target span[style*="white-space: nowrap"] {
  display: inline-block;
}

/* Texto Editorial de Apoio */
.solutions-lead-text {
  max-width: 760px;
  font-family: var(--font-primary, 'Space Grotesk', sans-serif);
  font-size: clamp(1.02rem, 1.35vw, 1.25rem);
  line-height: 1.62;
  font-weight: 400;
  color: #2B2A29;
  letter-spacing: -0.01em;
  margin-top: 2px;
  opacity: 0.88;
}

/* 3. COMPOSIÇÃO EDITORIAL: IMAGEM (40-50%) + LISTA DE SOLUÇÕES (01-05) */
.solutions-composition-grid {
  display: grid;
  grid-template-columns: 46% 48%;
  gap: 6%;
  align-items: start;
  width: 100%;
  margin-top: 10px;
  position: relative;
}

/* COLUNA VISUAL: IMAGEM DE PRODUÇÃO LIMPA (SEM LABELS TÉCNICOS) */
.solutions-visual-column {
  position: sticky;
  top: calc(var(--header-height-desktop, 80px) + 32px);
  width: 100%;
  display: flex;
  flex-direction: column;
}

.solutions-image-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: #F4F6F9;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(0, 33, 77, 0.08);
  box-shadow: 
    0 20px 48px -10px rgba(0, 33, 77, 0.1),
    0 4px 12px -2px rgba(0, 33, 77, 0.03);
}

.solutions-production-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s var(--ease-cinematic, cubic-bezier(0.25, 1, 0.5, 1));
}

.solutions-image-frame:hover .solutions-production-img {
  transform: scale(1.018);
}

/* BLOCO DE SOLUÇÕES (01 A 05): MICROINTERAÇÕES DISCRETAS */
.solutions-list-column {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.solutions-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(0, 33, 77, 0.1);
}

.solution-item {
  position: relative;
  padding: 26px 0;
  border-bottom: 1px solid rgba(0, 33, 77, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: default;
  transition: padding-left 0.25s ease-out;
}

/* Linha Indicadora Fina e Discreta */
.solution-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 2px;
  background-color: var(--setta-yellow, #F7D417);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

.solution-item:hover,
.solution-item:focus-within {
  padding-left: 10px;
}

.solution-item:hover::before,
.solution-item:focus-within::before {
  opacity: 0.9;
  transform: scaleY(1);
}

.solution-item-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
}

.solution-index {
  font-family: var(--font-headline, 'Syne', sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(0, 33, 77, 0.35);
  letter-spacing: 0.04em;
  transition: color 0.25s ease;
}

.solution-item:hover .solution-index,
.solution-item:focus-within .solution-index {
  color: var(--setta-navy, #00214D);
}

.solution-title {
  font-family: var(--font-headline, 'Syne', sans-serif);
  font-size: clamp(1.15rem, 1.6vw, 1.42rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.22;
}

.solution-description {
  font-family: var(--font-primary, 'Space Grotesk', sans-serif);
  font-size: 0.95rem;
  line-height: 1.58;
  color: #4A4A4A;
  margin: 0;
  padding-left: 42px;
  max-width: 560px;
  transition: color 0.25s ease;
}

.solution-item:hover .solution-description,
.solution-item:focus-within .solution-description {
  color: #222222;
}

/* 4. BLOCO DE CHAMADA FINAL (UMA IDEIA. DIFERENTES POSSIBILIDADES.) */
.solutions-closing-block {
  width: 100%;
  margin-top: 16px;
  padding: 28px 0 12px 0;
  border-top: 1px solid rgba(0, 33, 77, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.solutions-closing-title {
  font-family: var(--font-headline, 'Syne', sans-serif);
  font-size: clamp(1.7rem, 2.9vw, 2.45rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.16;
}

.solutions-closing-text {
  font-family: var(--font-primary, 'Space Grotesk', sans-serif);
  font-size: 1.02rem;
  line-height: 1.6;
  color: #3B3B3B;
  max-width: 600px;
  margin: 0;
}

/* 5. RESPONSIVIDADE EDITORIAL */
@media (max-width: 1100px) {
  .solutions-composition-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .solutions-visual-column {
    position: relative;
    top: 0;
    max-width: 100%;
  }

  .solutions-image-frame {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 768px) {
  #section-solucoes {
    padding-top: 28px;
    padding-bottom: 48px;
  }

  .solutions-wrapper {
    gap: 24px;
    width: 92%;
  }

  .solutions-headline {
    font-size: clamp(1.75rem, 7vw, 2.6rem);
    line-height: 1.12;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .solutions-lead-text {
    font-size: clamp(0.96rem, 3.8vw, 1.12rem);
    line-height: 1.58;
  }

  .solution-item {
    padding: 18px 0;
    min-height: 48px;
  }

  .solution-item:hover,
  .solution-item:focus-within,
  .solution-item:active {
    padding-left: 8px;
  }

  .solution-title {
    font-size: clamp(1.05rem, 4.4vw, 1.3rem);
    line-height: 1.25;
  }

  .solution-description {
    padding-left: 0;
    margin-top: 4px;
    font-size: 0.92rem;
    line-height: 1.55;
  }

  .solutions-closing-block {
    margin-top: 10px;
    padding: 24px 0 8px 0;
  }

  .solutions-closing-title {
    font-size: clamp(1.35rem, 5.6vw, 1.8rem);
    line-height: 1.2;
  }

  .solutions-closing-text {
    font-size: 0.95rem;
  }
}

@media (max-width: 430px) {
  .solutions-headline {
    font-size: clamp(1.55rem, 6.6vw, 2.2rem);
  }
  .solution-title {
    font-size: clamp(1.0rem, 4.2vw, 1.2rem);
  }
  .solutions-closing-title {
    font-size: clamp(1.25rem, 5.2vw, 1.6rem);
  }
}

/* 6. ACESSIBILIDADE & PREFERS-REDUCED-MOTION */
@media (prefers-reduced-motion: reduce) {
  .char-reveal-target,
  .char-reveal-target .sol-char {
    color: var(--setta-navy, #00214D) !important;
    transition: none !important;
  }

  .solution-item,
  .solution-item::before,
  .solutions-image-frame,
  .solutions-production-img {
    transition: none !important;
  }
}