/* ==========================================================================
   Component · Planos
   Catálogo real de tiers (apps/supabase/migrations/20260620_subscription_tiers.sql).

   ⚠️  PREÇO NUNCA É HARDCODADO AQUI. Igual ao site em produção
       (website/src/components/Plans.tsx), o valor vem de GET /api/tiers.
       Enquanto não chega, o card mostra um traço discreto. Ver js/plans.js.
   ========================================================================== */

.plans {
  padding-block: calc(var(--section-pad) / 2);
}

.plans__grid {
  margin-top: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 1.4rem + 1.1vw, 2.375rem);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  transition:
    border-color var(--duration-fast) var(--ease-gentle),
    background-color var(--duration-fast) var(--ease-gentle),
    transform var(--duration-fast) var(--ease-spring);
}

.plan:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
  transform: translateY(-4px);
}

/* Destaque: "yearly" é o featuredKey do site em produção.
   Sem borda azul — o realce é por contraste de superfície e uma borda
   off-white mais firme, exatamente o tratamento de .plan-card--featured
   em globals.css ("estilo Apple — NÃO azul neon"). */
.plan--featured {
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--color-surface-2);
}

.plan--featured:hover {
  border-color: rgba(255, 255, 255, 0.30);
  background: var(--color-surface-3);
}

/* Selo neutro: hairline off-white em vez de pílula azul. */
.plan__badge {
  align-self: flex-start;
  margin-bottom: 1rem;
  padding: 0.3125rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-primary);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Selo fantasma: mesma caixa do selo real, só invisível — garante que o nome
   e o preço de todos os cards fiquem na mesma linha, sem cálculo de altura. */
.plan__badge--ghost {
  visibility: hidden;
}

.plan__name {
  color: var(--color-text-primary);
  font-size: var(--text-label);
  font-weight: 600;
  line-height: 1.2;
}

.plan__price {
  margin-top: 0.875rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.375rem;
  min-height: 2.75rem;
}

.plan__amount {
  color: var(--color-text-primary);
  font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.375rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--tracking-heading);
}

/* Estado "preço ainda não carregado da API" — nunca inventar valor */
.plan__amount[data-empty="true"] {
  color: var(--color-text-tertiary);
  font-weight: 500;
}

.plan__period {
  font-size: 0.9375rem;
  color: var(--color-text-tertiary);
}

.plan__features {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.plan__features li {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  gap: 0.6875rem;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--color-text-secondary);
}

/* Checks em off-white, não em azul: 24 marcas azuis na grade puxavam a
   atenção para o enfeite em vez do conteúdo. */
.plan__check {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1875rem;
  color: var(--color-text-primary);
  opacity: 0.55;
}

.plan--featured .plan__check {
  opacity: 0.8;
}

/* Sem checkout ainda (B24): "Assinar" levava a uma seção sem nada. O botão
   fica no HTML, pronto para ganhar o destino real, mas não aparece. */
.plan__cta--hidden {
  display: none;
}

.plan__cta {
  margin-top: 2rem;
  width: 100%;
}

/* Só o plano em destaque leva o azul; os outros seguem em contorno, para a
   hierarquia ficar óbvia sem encher a grade de cor. */
.plan--featured .plan__cta {
  background: var(--color-fill-inverse);
  color: var(--color-text-inverse);
}

.plan--featured .plan__cta:hover {
  background: var(--color-fill-inverse-hover);
}

.plan:not(.plan--featured) .plan__cta {
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text-primary);
}

.plan:not(.plan--featured) .plan__cta:hover {
  background: var(--color-tile-hover);
  border-color: var(--color-text-tertiary);
}

.plans__note {
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
  font-size: var(--text-caption);
  line-height: 1.6;
  color: var(--color-text-tertiary);
}

/* ---- Breakpoints --------------------------------------------------------- */

@media (max-width: 66.75em) {
  .plans__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 44rem;
    margin-inline: auto;
  }
}

@media (max-width: 37.5em) {
  .plans__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 26rem;
  }

  .plan__badge--ghost {
    display: none;
  }
}

/* ---- Cartão da revenda -----------------------------------------------------
   O terceiro cartão não é um plano de cliente final: é a porta do parceiro.
   Ele não tem preço (a revenda opera por crédito, não por assinatura), então
   a linha de preço vira um rótulo e o cartão fica visualmente mais quieto que
   os dois de venda — quem chega ao site para assinar não pode confundir. */
.plan--partner {
  border-color: var(--color-border-strong);
  background: transparent;
}

.plan--partner .plan__partner-line {
  font-size: var(--text-sub);
  font-weight: 600;
  color: var(--color-accent);
}