/* ==========================================================================
   IEL Sergipe: CSS da pagina de Solucao (partes/solucao.php, o template das tres rotas Para sua Empresa, Para voce Estudante
   e Para voce Profissional; o card de servico, service_card() em includes/components.php, e o layout por `formato` de
   lib/solucoes.php; carregado pela chave `'css' => 'solucao.css'` do page_head()).

   Onda 4 da migracao do Tailwind (docs/tailwind/migracao-tailwind.md). Copiado de partes/solucao.php, do `service_card()` e das
   chaves de dado `frame`, `align`, `pad`, `body` e `cta_class`, 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, o botao
   e a faixa final sao componentes globais (onda 0).

   O dado deixou de carregar classe: o PHP diz a composicao da pagina (`grade`, `faixa` ou `colunas`) e o `formato` do servico
   (`largo`, `alto`), e o CSS escolhe a moldura nos modificadores abaixo.
     grade   (so `padrao`): grade de 2 colunas no desktop (Empresa)
     faixa   (ha um `largo`): os `padrao` lado a lado e o `largo` de largura total embaixo (Estudante)
     colunas (ha um `alto`): os `padrao` empilhados a esquerda e o `alto` na altura toda a direita (Profissional)

   Figma: Empresa 11779:2086 (desktop), 12015:12399 (tablet), 11981:7324 (mobile); Estudante 11789:2079, 12015:12026, 11981:6953;
   Profissional 11798:2105, 12015:12190, 11981:7437.
   Breakpoints (min-width, mobile-first, em `em`): md = 48em, xl = 80em.
   ========================================================================== */

/* ==========================================================================
   SOLUCAO - secao dos servicos
   O espaco lateral e o `--margem-x` do site (1rem; 2.5rem em 48em; 11.875rem em 80em), o mesmo das outras secoes.
   ========================================================================== */

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

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

/* A lista dos cards em `faixa` e `colunas` (ha um agrupador: `__par`, `__pilha`); em `grade` os cards sao filhos diretos de `__grade` */
.solucao__lista {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--espaco-lg);
}

.solucao__grade {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--espaco-lg);
}

/* Os `padrao` lado a lado (faixa) */
.solucao__par {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--espaco-lg);
}

/* Os `padrao` empilhados (colunas) */
.solucao__pilha {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-lg);
}

/* ==========================================================================
   CARTAO DE SERVICO (service_card) - card com imagem de fundo, veu azul, selo numerado, icone, 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).
   A moldura vem do modificador da composicao (`--faixa`, `--colunas`) e do formato (`--largo` so na faixa, `--alto` so nas colunas).
   ========================================================================== */

.cartao-servico {
  position: relative;
  display: flex;
  min-height: 26.25rem;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-card);
  /* Abaixo do cabecalho fixo (topbar + barra, ate ~8rem): o submenu leva o card ate aqui, e ele nao pode parar escondido. */
  scroll-margin-top: 9rem;
  transition: box-shadow .3s var(--suavizacao-padrao);
}
/* O card para o qual o submenu do cabecalho apontou (`/<pagina>#servico-...`): a sombra o separa dos outros. */
.cartao-servico:target {
  box-shadow: var(--sombra-destaque);
  /* Transparente nas cores normais; no alto contraste do Windows (`forced-colors`) a sombra some e o contorno e a marca. */
  outline: .1875rem solid transparent;
  outline-offset: .1875rem;
}

.cartao-servico__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-servico:hover .cartao-servico__imagem { transform: scale(1.05); }

/* Escurecimento neutro (preto a 35%) sob o veu azul */
.cartao-servico__escurecimento {
  position: absolute;
  inset: 0;
  background-color: var(--veu-preto-35);
}

/* Veu: azul solido a esquerda que abre para a imagem. 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 (era o `.service-card__scrim`). */
.cartao-servico__veu {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    90deg,
    rgb(28, 49, 86) 21.02%,
    rgba(22, 65, 148, 0.5) 58.17%,
    rgba(26, 60, 111, 0.3) 76.26%,
    rgba(88, 118, 172, 0.2) 92.39%,
    rgba(22, 65, 148, 0) 101.68%
  );
}

.cartao-servico__corpo {
  position: relative;
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--espaco-lg);
  padding: var(--espaco-20);
}

/* Selo numerado e icone, um em cada ponta */
.cartao-servico__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
}

.cartao-servico__marcas {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cartao-servico__selo {
  display: flex;
  width: var(--espaco-2xl);
  height: var(--espaco-2xl);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-pill);
  background-color: var(--iel-pure);
  color: var(--iel-darkest);
  font-size: var(--fonte-14);
  font-weight: 700;
  line-height: var(--entrelinha-14-20);
}

.cartao-servico__icone {
  display: flex;
  width: var(--espaco-2xl);
  height: var(--espaco-2xl);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tinta-white);
  border-radius: var(--raio-pill);
  background-color: var(--veu-branco-20);
}

.cartao-servico__icone-imagem {
  width: var(--espaco-28);
  height: var(--espaco-28);
}

.cartao-servico__texto {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
  color: var(--tinta-white);
}

.cartao-servico__titulo {
  font-size: var(--fonte-20);
  font-weight: 700;
  line-height: var(--entrelinha-20-28);
}

.cartao-servico__descricao {
  font-size: var(--fonte-14);
  font-weight: 500;
  line-height: var(--entrelinha-14-20);
}

/* O botao estica a area clicavel por todo o card (o corpo, posicionado, ocupa o card inteiro) */
.cartao-servico__botao::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Composicao `faixa`: moldura mais alta (o espaco interno maior vem em 48em) */
.cartao-servico--faixa { min-height: 28.125rem; }

/* O `largo` ocupa a largura toda: no desktop o texto fica a esquerda e o botao centrado na vertical, a direita (so muda a altura em 48em e o corpo em 80em) */

/* Composicao `colunas`: moldura baixa, a mesma em toda largura de tela; o `alto` toma a altura da coluna no desktop */
.cartao-servico--colunas { min-height: 20rem; }

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

@media (min-width: 48em) {
  .solucao { padding-block: var(--espaco-64); }
  .solucao__interno { gap: var(--espaco-48); }
  .solucao__lista { gap: var(--espaco-xl); }
  .solucao__grade { gap: var(--espaco-28); }
  .solucao__par { gap: var(--espaco-xl); }
  .solucao__pilha { gap: var(--espaco-xl); }

  .cartao-servico { min-height: 25rem; }
  .cartao-servico__corpo {
    gap: var(--espaco-xl);
    padding: var(--espaco-lg);
  }
  .cartao-servico__conteudo { gap: var(--espaco-lg); }
  .cartao-servico__texto { gap: var(--espaco-md); }
  .cartao-servico__descricao { text-align: justify; }

  .cartao-servico--colunas { min-height: 20rem; }
  .cartao-servico--faixa { min-height: 22.5rem; }
  .cartao-servico--faixa .cartao-servico__corpo { padding: var(--espaco-xl); }
  .cartao-servico--largo { min-height: 23.75rem; }
  .cartao-servico--colunas .cartao-servico__corpo { padding: var(--espaco-xl); }
}

@media (min-width: 80em) {
  .solucao__lista--colunas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--espaco-lg);
  }
  .solucao__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--espaco-lg);
    row-gap: var(--espaco-28);
  }
  .solucao__par {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espaco-lg);
  }

  .cartao-servico--largo .cartao-servico__corpo {
    flex-direction: row;
    align-items: center;
    gap: var(--espaco-xl);
  }
  .cartao-servico--largo .cartao-servico__conteudo { max-width: 30.1875rem; }
  .cartao-servico--largo .cartao-servico__botao { align-self: center; }
  .cartao-servico--alto { height: 100%; }
}