/* ===== CATALOGO DE PRODUTOS =====
   Cada peca fica num palco de altura fixa, com a embalagem apoiada no chao e
   guardando a proporcao real entre elas: o creme e mais alto que a ricota aqui
   como e na prateleira. E o mesmo criterio do slider da Home.

   O filtro e so classe: nada some do HTML, para a pagina continuar inteira sem
   JS e para quem chega pelo buscador achar todos os produtos. */

.cat { padding: 0 var(--margem) clamp(96px, 16svh, 200px); }

/* ----- filtros ----- */

.cat__filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  padding: clamp(16px, 2vw, 26px) 0 0;
  border-top: 1px solid rgba(16, 13, 11, .16);
}

.cat__filtro {
  padding: .75em 1.25em;
  border: 1.5px solid rgba(16, 13, 11, .2);
  border-radius: 999px;
  font-size: clamp(12px, .88vw, 15px);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.cat__filtro:hover { border-color: var(--tinta); }
.cat__filtro[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }


/* ----- grupos e grade ----- */

.cat__grupo + .cat__grupo { margin-top: clamp(56px, 9svh, 120px); }
.cat__grupo[hidden] { display: none; }

.cat__linha {
  margin: 0 0 clamp(22px, 3.4svh, 40px);
  padding-bottom: clamp(12px, 1.4vw, 18px);
  border-bottom: 1px solid rgba(16, 13, 11, .16);
  font-size: clamp(11px, .8vw, 14px);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--azul);
}

.cat__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 64px) clamp(16px, 2vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cat__item[hidden] { display: none; }

/* ----- a peca ----- */

.cat__palco {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: clamp(150px, 15vw, 240px);
}
.cat__palco img {
  width: auto;
  max-width: 100%;
  height: calc(var(--e) * 1%);
  object-fit: contain;
  object-position: 50% 100%;
  transition: transform .7s var(--ease-saida);
}

/* as duas embalagens que a Palma ainda nao fotografou: o lugar existe e diz
   o que falta, em vez de o produto sumir da linha */
.cat__palco--vazio {
  align-items: center;
  justify-content: center;
}
.cat__palco--vazio span {
  display: grid;
  place-items: center;
  width: 78%;
  height: 74%;
  border: 1.5px dashed rgba(16, 13, 11, .18);
  color: rgba(16, 13, 11, .38);
  font-size: clamp(10px, .74vw, 12px);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
}

.cat__nome {
  margin: clamp(16px, 1.8vw, 26px) 0 0;
  font-size: clamp(16px, 1.25vw, 23px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
}

.cat__formatos {
  margin: .5em 0 0;
  font-size: clamp(13px, .95vw, 16px);
  line-height: 1.35;
  color: rgba(16, 13, 11, .55);
}
/* ----- versoes: a mesma cor da embalagem -----
   Zero lactose e laranja em todas as embalagens zero (rotulo do Padrao Zero,
   corpo do Prato Zero, tampa do Frescal Zero); light e o azul-claro da tampa do
   Frescal Light; tradicional fica no azul da marca. Assim a barra do site bate
   com o que a pessoa ve na prateleira. */
.cat__variantes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: .8em 0 0;
  padding: 0;
  list-style: none;
}
.cat__variante {
  padding: .45em .85em;
  border-radius: 999px;
  font-size: clamp(10px, .72vw, 12px);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
}
.cat__variante--tradicional { background: var(--azul); color: #fff; }
.cat__variante--light       { background: #88cae5; color: var(--tinta); }
.cat__variante--zero        { background: #d85d17; color: #fff; }

.cat__nota {
  margin: .7em 0 0;
  font-size: clamp(13px, .95vw, 16px);
  line-height: 1.4;
}

@media (hover: hover) and (pointer: fine) {
  .cat__peca:hover .cat__palco img { transform: scale(1.06); }
}

/* ----- aviso de food service ----- */

.cat__servico {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  margin-top: clamp(72px, 12svh, 160px);
  padding-top: clamp(20px, 2.4vw, 34px);
  border-top: 1px solid rgba(16, 13, 11, .16);
}
.cat__servico h2 {
  grid-column: 1 / span 4;
  margin: 0;
  font-size: clamp(19px, 1.5vw, 28px);
  font-weight: 700;
  letter-spacing: -.02em;
}
.cat__servico p {
  grid-column: 6 / span 6;
  margin: 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.05vw, 19px);
  line-height: 1.5;
  color: rgba(16, 13, 11, .72);
}
.cat__servico a { font-weight: 700; }

/* ----- entrada ----- */

@media (prefers-reduced-motion: no-preference) {
  .js .cat__item { opacity: 0; transform: translateY(28px); }
  .js .cat__item.is-visivel {
    opacity: 1;
    transform: none;
    transition: opacity .7s ease, transform 1s var(--ease-saida);
    transition-delay: calc(var(--n, 0) * .05s);
  }
}

/* ----- composicoes ----- */

@media (max-width: 1023px) {
  .cat__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat__servico h2 { grid-column: 1 / -1; }
  .cat__servico p { grid-column: 1 / -1; margin-top: 14px; }
}

@media (max-width: 639px) {
  .cat__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 8vw, 48px) clamp(14px, 4vw, 24px); }
  .cat__palco { height: clamp(130px, 34vw, 180px); }
  .cat__filtro { padding: .7em 1em; font-size: 12px; }
}

/* A embalagem fica no meio do palco, entao o texto tambem: nome, barra,
   formato e nota centralizados embaixo dela, cada peca vira um bloco so. */
.cat__peca { text-align: center; }
.cat__variantes { justify-content: center; }
.cat__formatos,
.cat__nota { margin-left: auto; margin-right: auto; max-width: 32ch; text-wrap: balance; }

/* ----- filtro por versao -----
   Segunda linha, com as tres versoes nas cores das embalagens, iguais as
   barras das pecas. Em repouso ficam cheias, como na prateleira; quando uma
   e escolhida, as outras apagam e fica claro o que esta sendo mostrado. */
.cat__versoes {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.2vw, 18px);
  padding: clamp(14px, 1.6vw, 20px) 0 clamp(36px, 6svh, 72px);
}
.cat__versao {
  padding: .75em 1.25em;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: clamp(12px, .88vw, 15px);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  transition: opacity .3s ease, box-shadow .3s ease, transform .3s var(--ease-saida);
}
.cat__versao--tradicional { background: var(--azul); color: #fff; }
.cat__versao--light       { background: #88cae5; color: var(--tinta); }
.cat__versao--zero        { background: #d85d17; color: #fff; }
.cat__versao:hover { transform: translateY(-1px); }
.cat__versoes.tem-escolha .cat__versao { opacity: .32; }
.cat__versoes.tem-escolha .cat__versao[aria-pressed="true"] {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--papel), 0 0 0 4.5px var(--tinta);
}
@media (max-width: 639px) {
  .cat__versao { padding: .7em 1em; font-size: 12px; }
}

/* a peca que a busca escolheu acende por um instante, para a pessoa saber
   qual das treze era (ver o fim do js/catalogo.js) */
.cat__item--achado .cat__peca {
  animation: cat-achado 2.4s ease;
}
@keyframes cat-achado {
  0%, 70% { box-shadow: 0 0 0 2px var(--azul), 0 0 0 10px rgba(0, 57, 152, .12); }
  100% { box-shadow: 0 0 0 0 rgba(0, 57, 152, 0), 0 0 0 0 rgba(0, 57, 152, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cat__item--achado .cat__peca { animation: none; box-shadow: 0 0 0 2px var(--azul); }
}