/*
 * Os CARTOES de tier da pagina de planos.
 *
 * ## Por que eles existem ao lado da tabela
 *
 * A tabela responde "a partir de qual plano vem isto?" — ela e boa nisso e ruim em vender. O
 * cartao responde a pergunta que vem antes, "qual e o meu?", e por isso fica em cima, com o preco
 * na frente em vez de escondido dentro de um botao.
 *
 * ## A cor por degrau NAO e decoracao
 *
 * Cada tier tem um acento proprio (`--tier`), e ele aparece em quatro lugares do cartao: a barra
 * do topo, a faixa, o preco e o botao. E o que deixa quatro cartoes iguais distinguiveis de
 * relance numa tela larga — sem ele, escolher exige ler os quatro titulos.
 *
 * A escala segue a do jogo, e nao um arco-iris: verde (nasce), roxo (a marca), ouro (o degrau que
 * entrega mais), azul (o topo). Nenhuma delas e vermelha — vermelho neste produto significa falha.
 *
 * ## O medidor de crescimento fica
 *
 * `.plano-cresce` vem da vitrine e e a unica coisa aqui que nenhum concorrente tem: ele diz, sem
 * texto, que cada plano inclui tudo o que esta abaixo. Tirar em nome de "limpar" apagaria a
 * explicacao da escada inteira.
 */

.tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 clamp(2rem, 5vw, 3rem);
}

/* Dois em cima e dois embaixo antes de virar coluna: quatro cartoes de 200px nao cabem texto. */
@media (max-width: 68rem) {
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  .tiers { grid-template-columns: minmax(0, 1fr); }
}

.tier {
  --tier: var(--roxo-claro);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.5rem 1.35rem 1.4rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: var(--vidro);
  overflow: hidden;
  transition:
    border-color var(--t-medio) var(--entrada),
    transform var(--t-medio) var(--saida);
}

/*
 * A barra do topo e o brilho, os dois na cor do degrau.
 *
 * O brilho e um `radial-gradient` bem fraco atras do conteudo: ele da profundidade sem entrar na
 * frente do texto, que e o que aconteceria com um fundo chapado.
 */
.tier::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--tier);
}

.tier::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 12rem;
  pointer-events: none;
  background: radial-gradient(
    120% 100% at 50% 0%,
    color-mix(in srgb, var(--tier) 16%, transparent),
    transparent 70%
  );
}

.tier > * { position: relative; z-index: 1; }

.tier:hover {
  border-color: color-mix(in srgb, var(--tier) 50%, var(--linha));
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .tier { transition: border-color var(--t-medio) var(--entrada); }
  .tier:hover { transform: none; }
}

.tier--hatchling { --tier: var(--ok); }
.tier--juvenile { --tier: var(--roxo-claro); }
.tier--adult { --tier: var(--ouro); }
/* O unico valor cru da folha: nao ha token azul, e o topo da escada precisava de uma cor que nao
   repetisse nenhuma das tres abaixo dele. */
.tier--elder { --tier: #60A5FA; }

/* ------------------------------------------------------------------- a faixa e o nome */

.tier-faixa {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue, var(--texto-fraco));
}

/* O NUMERO fica quieto e o nome do degrau ganha a cor: e o nome que diz para que serve. */
.tier-faixa b {
  font-weight: 600;
  color: var(--tier);
}

.tier-nome {
  margin: 0;
  font-family: var(--titulo);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.tier .plano-cresce { margin: 0.1rem 0 0.2rem; }

/*
 * Os degraus cheios tomam a cor do TIER, e nao o roxo da marca.
 *
 * Herdado, o medidor pintava os quatro cartoes de roxo — e ai ele deixava de somar ao acento e
 * passava a competir com ele. Na cor do proprio degrau, ele vira a quinta aparicao dela no cartao
 * e diz duas coisas de uma vez: em que altura da escada este plano esta, e qual e a cor dele.
 */
.tier .plano-cresce i.cheio {
  background: var(--tier);
}

/* ------------------------------------------------------------------------- o preco */

/*
 * `min-height` reservado: o preco chega depois, por `comprar.js`.
 *
 * Sem a reserva, os quatro cartoes saltam de altura no instante em que a rede responde — e o
 * visitante que ja estava lendo perde a linha. O ` ` do HTML segura a caixa ate la.
 */
.tier-preco {
  margin: 0.35rem 0 0;
  min-height: 2.4rem;
  font-family: var(--titulo);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--tier);
}

/* O periodo, miudo ao lado do numero grande. Ele e informacao, e nao destaque. */
.tier-ciclo {
  margin: 0;
  min-height: 1.1rem;
  font-size: 0.78rem;
  color: var(--texto-fraco);
}

.tier-resumo {
  text-wrap: pretty;
  margin: 0.65rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--linha);
  color: var(--texto-fraco);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* ------------------------------------------------------------------------- a lista */

/*
 * Tracinho, e nao visto verde.
 *
 * O visto diz "incluido" e nada mais; nesta escada TUDO abaixo esta incluido, entao quatro
 * colunas de vistos nao distinguem nada. O tracinho e neutro e deixa a primeira linha de cada
 * cartao — "Tudo do Juvenile" — carregar a informacao que importa.
 */
.tier-lista {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  line-height: 1.5;
}

.tier-lista li {
  display: grid;
  grid-template-columns: 0.8rem 1fr;
  gap: 0.5rem;
}

.tier-lista li::before {
  content: '–';
  color: var(--tier);
}

/* A ressalva do Elder: ela fica no CARTAO, e nao numa nota de rodape que ninguem le. */
.tier-nota {
  margin: 0.75rem 0 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--atencao);
}

/* ------------------------------------------------------------------------- o botao */

/*
 * Contornado, e nao cheio — nos quatro.
 *
 * Quatro botoes solidos lado a lado brigam entre si e nenhum vence; contornados, quem escolhe o
 * degrau e a COR, que ja e a do cartao. `.plano-comprar` e a classe que `comprar.js` cria, e por
 * isso ela aparece aqui junto de `.tier-acao`, que e a do Hatchling.
 */
.tier .plano-comprar,
.tier-acao {
  display: block;
  margin-top: auto;
  padding: 0.72rem 1rem;
  border: 1px solid var(--tier);
  border-radius: var(--raio-p);
  background: transparent;
  color: var(--tier);
  font-family: var(--maquina);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--t-rapido) var(--entrada),
    color var(--t-rapido) var(--entrada);
}

/* O `auto` acima so empurra para baixo se houver o que empurrar: sem esta margem, o cartao mais
   curto encosta o botao na lista e os quatro botoes saem desalinhados. */
.tier-lista { margin-bottom: 1.25rem; }

.tier .plano-comprar:hover,
.tier .plano-comprar:focus-visible,
.tier-acao:hover,
.tier-acao:focus-visible {
  background: var(--tier);
  /* Preto e nao branco: as quatro cores sao claras, e texto branco sobre elas nao tem contraste. */
  color: #0B0710;
}

.tier .plano-comprar:disabled {
  opacity: 0.6;
  cursor: progress;
}