/* Promocoes e campanhas — ate tres cartoes em faixa verde.
   Markup:     patterns/promocoes.php
   Par em PHP: inc/promocoes.php (cadastro e validade)

   Cartao claro sobre o verde, ao contrario dos Queridinhos (foto com veu):
   promocao tem texto e preco para ler, entao o fundo tem de ser calmo. */

.jhonys-promos :is(h2) { color: var(--wp--preset--color--branco); }
.jhonys-promos > .wp-block-group p { color: var(--wp--preset--color--creme); }

.jhonys-promos__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.jhonys-promos__card {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--wp--preset--color--areia);
  box-shadow: var(--wp--preset--shadow--cartao);
}

.jhonys-promos__foto {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.jhonys-promos__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.jhonys-promos__corpo {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  flex: 1;
}

.jhonys-promos__nome {
  margin: 0;
  font-family: var(--wp--preset--font-family--titulo);
  font-weight: 700;
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
  line-height: 1.2;
  color: var(--wp--preset--color--verde-escuro);
  word-break: normal;
}

.jhonys-promos__texto {
  margin: 0;
  color: var(--wp--preset--color--cinza);
  font-size: var(--wp--preset--font-size--pequeno);
  line-height: 1.5;
}

.jhonys-promos__preco {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
}
.jhonys-promos__de {
  color: var(--wp--preset--color--cinza);
  text-decoration: line-through;
  font-size: var(--wp--preset--font-size--pequeno);
}
/* Etiqueta em vez de texto solto: o laranja da marca sobre o cartao claro
   dava 2.88:1, abaixo ate do limite de texto grande. Invertido — laranja de
   fundo e branco por cima — sao 3.19:1, que passa porque o preco nunca desce
   de 22px em peso 800 (a WCAG trata como texto grande a partir de 18.66px). */
.jhonys-promos__por {
  font-family: var(--wp--preset--font-family--titulo);
  font-weight: 800;
  font-size: clamp(1.375rem, 1.8vw, 1.75rem);
  line-height: 1;
  color: var(--wp--preset--color--branco);
  background: var(--wp--preset--color--laranja-escuro);
  padding: .18em .5em .24em;
  border-radius: 8px;
}

.jhonys-promos__ate {
  margin: 0;
  font-size: var(--wp--preset--font-size--pequeno);
  font-weight: 700;
  color: var(--wp--preset--color--verde);
}


/* --- campanha de beneficio: icone, selo e botao ---
   O cartao de campanha nao tem preco, entao o que ancora o olho e o par
   icone + selo no topo: da para varrer os tres cartoes sem ler o texto. */

.jhonys-promos__marca {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}

.jhonys-promos__icone {
  font-size: 1.75rem;
  line-height: 1;
}

/* Chip grande o bastante para ser lido de relance — e o selo que carrega o
   valor concreto ("10% OFF", "Dinheiro de volta"), nao o titulo. */
.jhonys-promos__selo {
  padding: .3em .7em .34em;
  border-radius: 999px;
  font-family: var(--wp--preset--font-family--titulo);
  font-weight: 800;
  font-size: clamp(.95rem, 1.2vw, 1.15rem);
  line-height: 1;
  white-space: nowrap;
}

/* Contraste medido sobre o cartao areia, com a cor de texto de cada variante:
   amarelo 6.46:1 · laranja 4.64:1 · verde 8.45:1. Todas passam em AA para
   texto normal, que e o caso aqui. */
.jhonys-promos__selo--amarelo {
  background: var(--wp--preset--color--amarelo);
  color: var(--wp--preset--color--verde-escuro);
}
.jhonys-promos__selo--laranja {
  background: var(--wp--preset--color--laranja);
  color: var(--wp--preset--color--verde-escuro);
}
.jhonys-promos__selo--verde {
  background: var(--wp--preset--color--verde);
  color: var(--wp--preset--color--branco);
}

/* Rodape: preco, botao e validade. `margin-top: auto` aqui alinha o pe dos
   tres cartoes mesmo com textos de alturas diferentes. */
.jhonys-promos__rodape {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  align-items: flex-start;
}

/* Verde-escuro em vez do laranja da marca: branco sobre laranja-escuro da
   3.19:1 e o texto do botao nao chega ao tamanho que dispensaria os 4.5:1.
   Sobre o verde-escuro sao 12.3:1. */
.jhonys-promos__cta {
  display: inline-block;
  padding: .7em 1.15em;
  border-radius: 999px;
  background: var(--wp--preset--color--verde-escuro);
  color: var(--wp--preset--color--branco);
  font-family: var(--wp--preset--font-family--titulo);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--pequeno);
  line-height: 1.2;
  text-decoration: none;
  text-wrap: balance;
  transition: background .2s ease, transform .2s ease;
}
.jhonys-promos__cta:hover,
.jhonys-promos__cta:focus-visible {
  background: var(--wp--preset--color--verde);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .jhonys-promos__cta { transition: none; }
  .jhonys-promos__cta:hover { transform: none; }
}