/* ==========================================================================
   IEL Sergipe: CSS da pagina Nossas Solucoes (solucoes.php e o card de solucao, solution_card() em includes/components.php;
   carregado pela propria pagina, pela chave `'css' => 'solucoes.css'` do page_head()).

   Onda 3 da migracao do Tailwind (docs/tailwind/migracao-tailwind.md). Copiado de solucoes.php e do `solution_card()`,
   sem apagar nada do `style.css` antigo. Os tokens (cor, fonte, espaco, raio, sombra) e o miolo `.secao__interno` vem do
   `styles.css`, que carrega antes. O hero, o titulo da secao e a faixa final sao componentes globais (onda 0).

   Figma: Screen/Desktop/Nossas-Solucoes (11797:2030, arte de 1600px), Tablet (12015:12625, 768px), Mobile (11981:7507, 390px).
   Breakpoints (min-width, mobile-first, em `em`): md = 48em (esta pagina so muda em md; o xl so mexe na margem lateral, que e token).
   ========================================================================== */

/* ==========================================================================
   SOLUCOES - secao com os tres cards, um sob o outro
   O espaco lateral e o `--margem-x` do site (1rem; 2.5rem em 48em; 11.875rem em 80em), o mesmo das outras secoes.
   ========================================================================== */

.solucoes {
  width: 100%;
  padding: var(--espaco-xl) var(--margem-x);
}

.solucoes__interno {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-xl);
}

.solucoes__lista {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--espaco-lg);
}

/* ==========================================================================
   CARTAO DE SOLUCAO (solution_card) - banner largo com imagem de fundo, veu azul, titulo, texto e botao vazado
   Com o ponteiro sobre o cartao a imagem cresce um pouco (era `group-hover:scale-105`; o Tailwind so gerava :hover, sem foco).
   ========================================================================== */

.cartao-solucao {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 18.75rem;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-card);
}

.cartao-solucao__imagem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition-property: transform;
  transition-duration: .5s;
  transition-timing-function: var(--suavizacao-padrao);
}
.cartao-solucao:hover .cartao-solucao__imagem { transform: scale(1.05); }

/* Veu: azul corporativo (--corporativo-dark a 62%) sobre um escurecimento neutro (preto a 36%). Sintaxe `rgba()` de proposito:
   o Chromium guarda o alfa da forma legada em 8 bits e o da forma `rgb(r g b / a)` em ponto flutuante, e o raster difere em 1 nivel por canal. */
.cartao-solucao__veu {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.36);
  background-image: linear-gradient(
    to right,
    rgba(26, 60, 111, 0.62) 0%,
    rgba(26, 60, 111, 0.62) 100%
  );
}

/* O corpo cresce ate ocupar o card inteiro, para o `::after` do botao (posicionado nele) cobrir o card todo */
.cartao-solucao__corpo {
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
  gap: var(--espaco-md);
  padding: var(--espaco-lg) var(--espaco-20);
  color: var(--tinta-white);
}

.cartao-solucao__texto {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
}

.cartao-solucao__titulo {
  font-size: var(--fonte-24);
  font-weight: 700;
  line-height: var(--entrelinha-24-32);
}

.cartao-solucao__descricao {
  max-width: 46.25rem;
  font-size: var(--fonte-14);
  font-weight: 500;
  line-height: var(--entrelinha-14-20);
}

/* O botao estica a area clicavel por todo o card */
.cartao-solucao__botao::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ==========================================================================
   RESPONSIVO
   Sempre no fim do arquivo, em ordem crescente (48em); dentro de cada @media, na ordem dos blocos acima.
   ========================================================================== */

@media (min-width: 48em) {
  .solucoes { padding-block: var(--espaco-64); }
  .solucoes__interno { gap: var(--espaco-48); }
  .solucoes__lista { gap: var(--espaco-xl); }

  .cartao-solucao {
    min-height: 25rem;
    justify-content: flex-end;
  }
  .cartao-solucao__corpo {
    justify-content: flex-end;
    gap: var(--espaco-lg);
    padding: var(--espaco-48) var(--espaco-xl);
  }
  .cartao-solucao__texto { gap: var(--espaco-md); }
  .cartao-solucao__titulo {
    font-size: var(--fonte-40);
    line-height: var(--entrelinha-40-52);
  }
  .cartao-solucao__descricao {
    font-size: var(--fonte-16);
    line-height: var(--entrelinha-16-24);
  }
}