/* Bloco: "O que já está no ar" — 3 cartões em degradê suave, 2 + 1 centralizado */

.ja-no-ar {
  padding: var(--section-gap) 0;
}

.ja-no-ar-title {
  font-size: var(--size-heading-lg);
  text-align: center;
  margin-bottom: 48px;
}

.ja-no-ar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.ja-no-ar-card {
  grid-column: span 1;
  border-radius: var(--radius-card);
  padding: var(--card-padding);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}

.ja-no-ar-card:nth-child(3) {
  grid-column: 1 / -1;
  max-width: calc(50% - 12px);
  margin: 0 auto;
}

.ja-no-ar-card--a {
  background: linear-gradient(160deg, rgba(34, 116, 156, 0.14), var(--color-pure-white) 65%);
}

.ja-no-ar-card--b {
  background: linear-gradient(160deg, rgba(255, 109, 57, 0.16), var(--color-pure-white) 65%);
}

.ja-no-ar-card--c {
  background: linear-gradient(160deg, rgba(34, 116, 156, 0.16), var(--color-pure-white) 65%);
}

.ja-no-ar-card-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.ja-no-ar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

.ja-no-ar-card--a .ja-no-ar-icon {
  color: var(--color-primary-indigo);
}

.ja-no-ar-card--b .ja-no-ar-icon {
  color: #c1592f;
}

.ja-no-ar-card--c .ja-no-ar-icon {
  color: var(--color-regesta-destaque);
}

.ja-no-ar-card-top h3 {
  font-size: var(--size-heading-sm);
  flex: 1;
}

.ja-no-ar-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-pure-white);
  color: var(--color-deep-ink);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, color 0.2s ease;
}

.ja-no-ar-arrow:hover {
  color: var(--color-primary-indigo);
  transform: translateX(2px);
}

.ja-no-ar-text {
  color: var(--color-stone);
  margin-bottom: 24px;
}

/* margin-top + margin-bottom: auto centraliza o bloco de mídia no espaço
   que sobra entre o fim do texto e o fim do card — o card já tem altura
   igual à dos outros dois (ver assets/js/blocos/ja-no-ar-altura-igual.js),
   então geralmente sobra espaço embaixo do texto pra centralizar. */
.ja-no-ar-media {
  margin-top: auto;
  margin-bottom: auto;
  transition-delay: 0.18s;
}

/* Enquanto o box ainda não tem imagem real (placeholder tracejado), mantém
   a altura antiga — some sozinho quando a imagem entra, porque .img-placeholder
   some do elemento. */
.ja-no-ar-media.img-placeholder {
  height: 190px;
}

/* Box com uma imagem só (sem par frente/trás — esses casos são .media-stack
   e .media-fade, estilizados em base.css). A imagem original é preservada
   por inteiro (largura 100% do card, altura proporcional). Só entra corte se
   a altura resultante passar da altura da tela — aí o excesso é cortado por
   baixo (object-position: top mantém o máximo possível da imagem original). */
.ja-no-ar-media:not(.media-stack):not(.media-fade) img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100vh;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-elevated);
}

/* Ajuste fino só do card do TFD: a de trás (Emitir passagem) some quase
   toda atrás da de frente, sobrando 30% do topo e 30% do lado esquerdo dela
   visíveis; a de frente também fica um pouco menor que o padrão. */
.ja-no-ar-card--b .media-stack img.media-stack-front {
  width: 73%;
}

.ja-no-ar-card--b .media-stack-front {
  margin-top: 15%;
  margin-left: 25%;
}

/* Ajuste fino só do card da Gestão: as duas imagens são a mesma captura
   (gráfico duplicado) e devem ficar quase sobrepostas, as duas centralizadas
   no box — a de frente fica parada bem no centro; a de trás só desloca um
   pouquinho (translate, não margin — não mexe no tamanho do box) pra baixo
   e pra esquerda, pra sobrar uma quina fina dela. */
.ja-no-ar-card--c .media-stack-front,
.ja-no-ar-card--c .media-stack-back {
  align-self: center;
  justify-self: center;
  margin: 0;
}

.ja-no-ar-card--c .media-stack-back {
  transform: translate(-5%, 7%);
}

@media (max-width: 720px) {
  .ja-no-ar-grid {
    grid-template-columns: 1fr;
  }

  .ja-no-ar-card:nth-child(3) {
    max-width: none;
  }
}