/* Queridinhos do mes — mosaico de ate 5 cartoes.
   Markup:    patterns/queridinhos.php
   Par em PHP: inc/queridinhos.php (termo de curadoria e ordem)

   O tratamento do card repete o do carrossel de proposito: os dois sao a
   mesma linguagem visual, mas vivem em fundos diferentes e com tamanhos
   diferentes. Compartilhar o CSS acoplaria dois componentes que hoje mudam
   por motivos distintos. */

/* --- cabecalho da secao, sobre o verde --- */

/* Sobre o laranja o texto tem de ser verde-escuro: da 4.64:1, passa em
   qualquer tamanho. Branco sobre laranja daria 3.19:1 e reprovaria.

   O seletor mira so o cabecalho da secao. `:is(h2, h3)` pegaria tambem o nome
   do prato — que fica sobre a foto, com veu escuro, e precisa continuar branco. */
.jhonys-queridinhos > .wp-block-group h2 { color: var(--wp--preset--color--verde-escuro); }
.jhonys-queridinhos > .wp-block-group p  { color: var(--wp--preset--color--verde-escuro); }

/* A vitrine do delivery usa o mesmo mosaico em faixa verde-escura — ali o
   cabecalho volta a ser claro. Os cartoes nao mudam: a foto e o veu deles nao
   dependem da cor da faixa. */
.jhonys-queridinhos--delivery > .wp-block-group h2 { color: var(--wp--preset--color--branco); }
.jhonys-queridinhos--delivery > .wp-block-group p  { color: var(--wp--preset--color--creme); }

/* --- a grade ---
   Desktop, com 5: o 1o ocupa a coluna larga inteira (2 linhas), os outros 4
   em 2x2. Com 4, ver a regra `:has()` logo abaixo. */

.jhonys-queridinhos__grade {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(.7rem, 1.4vw, 1.1rem);
  height: clamp(430px, 50vw, 560px);

  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: queridinho;
}

.jhonys-queridinhos__grade > li:first-child { grid-row: span 2; }

/* Quando a vitrine tem 4 pratos em vez de 5, a grade de 3 colunas deixaria um
   buraco no canto: `grid-template-columns` e fixa, ela nao encolhe sozinha.

   O `:has()` conta os cartoes no proprio CSS — nao precisa de classe vinda do
   PHP nem de contagem no padrao. Com 4, a coluna do meio some e os tres
   menores empilham ao lado do n1; se a admin marcar um quinto prato, a regra
   para de casar e o mosaico volta a ser o de 5 sem ninguem tocar em codigo. */
@media (min-width: 901px) {
  .jhonys-queridinhos__grade:has(> li:nth-child(4):last-child) {
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));

    /* A altura sobe junto com a mudanca de forma. Mantida em 560px, as tres
       linhas da coluna estreita davam cartoes de 520x175 — 3:1, uma tira que
       corta o prato no meio e deixa so uma faixa de comida. Em 63vw cada
       cartao empilhado fica perto de 1,7:1, a mesma proporcao confortavel
       que os pequenos tem no mosaico de cinco. */
    height: clamp(640px, 63vw, 880px);
  }
  .jhonys-queridinhos__grade:has(> li:nth-child(4):last-child) > li:first-child {
    grid-row: span 3;
  }
}

/* --- card --- */

.jhonys-queridinhos__grade > li {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--wp--preset--color--carvao);
  counter-increment: queridinho;
  isolation: isolate;
}

/* veu: escurece embaixo para o nome, e no topo para o numeral */
.jhonys-queridinhos__grade > li::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16, 24, 12, .62) 0%, rgba(16, 24, 12, 0) 34%),
    linear-gradient(0deg, rgba(16, 24, 12, .9) 4%, rgba(16, 24, 12, 0) 52%);
}

/* O numeral, contado pelo CSS — nao precisa de dado nem de PHP.

   Vai dentro de uma placa propria em vez de solto sobre a foto: medindo o
   fundo real atras dele, os cards com prato branco derrubavam o contraste
   para 1.06:1. Sobre o verde-escuro da placa, o amarelo da 6.47:1 — sempre,
   independente da foto que o admin escolher. */
.jhonys-queridinhos__grade > li::before {
  content: counter(queridinho, decimal-leading-zero);
  position: absolute;
  top: clamp(.6rem, 1.4vw, .9rem);
  left: clamp(.6rem, 1.4vw, .9rem);
  z-index: 3;

  padding: .28em .5em .32em;
  border-radius: 10px;
  background: var(--wp--preset--color--verde-escuro);

  font-family: var(--wp--preset--font-family--titulo);
  font-weight: 800;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1;
  color: var(--wp--preset--color--amarelo);
  letter-spacing: -.01em;
}

/* o numero 1 continua mandando mais que os outros */
.jhonys-queridinhos__grade > li:first-child::before {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  border-radius: 12px;
}

/* --- foto --- */

.jhonys-queridinhos__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
}
.jhonys-queridinhos__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  display: block;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.jhonys-queridinhos__grade > li:hover .jhonys-queridinhos__foto img,
.jhonys-queridinhos__grade > li:focus-within .jhonys-queridinhos__foto img {
  transform: scale(1.06);
}

/* --- nome do prato --- */

.jhonys-queridinhos__nome {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  margin: 0;
  padding: clamp(.85rem, 1.8vw, 1.4rem);
  color: var(--wp--preset--color--branco);
  text-wrap: balance;
  font-size: clamp(1rem, 1.3vw, 1.25rem);

  /* o core poe word-break: break-word em .wp-block-post-title, e isso parte
     "Tradicionais" no meio quando o card e estreito */
  word-break: normal;
  hyphens: auto;
}
.jhonys-queridinhos__grade > li:first-child .jhonys-queridinhos__nome {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
}

/* --- tablet e celular ---
   O 1o passa a ocupar a linha inteira e os demais ficam em 2x2. */

@media (max-width: 900px) {
  .jhonys-queridinhos__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1.15fr 1fr 1fr;
    height: clamp(600px, 118vw, 800px);
  }
  .jhonys-queridinhos__grade > li:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }

  /* Com 4 pratos sobraria um cartao sozinho na 3a linha. Ele ocupa a linha
     toda e a vitrine fecha simetrica: 1 largo, 2 lado a lado, 1 largo. */
  .jhonys-queridinhos__grade:has(> li:nth-child(4):last-child) > li:last-child {
    grid-column: span 2;
  }
}

/* em 375px o card pequeno tem ~122px uteis de texto: nome menor cabe inteiro */
@media (max-width: 600px) {
  .jhonys-queridinhos__nome {
    font-size: .95rem;
    padding: .7rem .65rem;
  }
  .jhonys-queridinhos__grade > li:first-child .jhonys-queridinhos__nome {
    font-size: 1.2rem;
    padding: .9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jhonys-queridinhos__foto img { transition: none; }
  .jhonys-queridinhos__grade > li:hover .jhonys-queridinhos__foto img { transform: none; }
}