/*
 * MENUS, RODAPÉ E SELOS EDITÁVEIS (rodada "tudo editável").
 *
 * O dono escolhe no admin quantos jogos têm quadradinho grande no menu "Jogos", quantos grupos o painel "Produtos"
 * tem e quantas colunas o rodapé tem. O header.css e o components.css foram desenhados para os números de
 * fábrica (4 jogos, 3 grupos, 5 colunas); aqui ficam os ajustes para QUALQUER quantidade, sem buraco e sem grade
 * quebrada. Com os dados iniciais nenhuma regra daqui muda nada (todas dependem de quantidades diferentes).
 */

/* ---------- painel "Jogos": 1, 2, 3... quadradinhos grandes ---------- */

/* número ímpar: o último ocupa a linha toda (1 jogo = um quadradinho largo; 3 = 2 + 1 largo) */
.nv-tiles > li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* poucos jogos: o painel encolhe para não sobrar espaço vazio */
.nv-panel--tcgs:has(.nv-tiles > li:only-child):not(:has(.nv-chips)) {
  width: 22rem;
}

.nv-panel--tcgs:not(:has(.nv-tiles)) {
  width: 26rem;
}

/* ---------- painel "Produtos": 1, 2, 3, 4... grupos ---------- */

.nv-groups:has(> .nv-group:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.nv-panel--produtos:has(.nv-group:only-child) {
  width: 20rem;
}

.nv-groups:has(> .nv-group:nth-child(2):last-child),
.nv-groups:has(> .nv-group:nth-child(4):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nv-panel--produtos:has(.nv-group:nth-child(2):last-child) {
  width: 34rem;
}

.nv-panel--produtos:has(.nv-group:nth-child(4):last-child) {
  width: 36rem;
}

/* menu do celular: um grupo embaixo do outro, sempre */
.menu .nv-groups {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- rodapé: qualquer número de colunas ---------- */

/* o desenho de fábrica é para 5 colunas (sobre + 3 listas + atendimento); com outro número, as colunas se
   distribuem sozinhas (no celular cabem duas por linha) */
.footer__grid:not(:has(> :nth-child(5):last-child)) {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.footer__grid:not(:has(> :nth-child(5):last-child)) > .footer__brand {
  grid-column: span 2;
}

@media (max-width: 600px) {
  .footer__grid:not(:has(> :nth-child(5):last-child)) > .footer__brand {
    grid-column: 1 / -1;
  }
}

/* links extras do dono dentro das colunas "Sobre" e "Atendimento" */
.footer__brand ul,
.footer__contact ul {
  margin-top: var(--s3);
}

/* ---------- selo de raridade com cor escolhida no admin (/admin/raridades) ---------- */

.rarity--tom-sun { --rc: var(--sun-deep); }
.rarity--tom-sky { --rc: var(--sky-deep); }
.rarity--tom-mint { --rc: var(--mint-deep); }
.rarity--tom-peach { --rc: var(--peach-deep); }
.rarity--tom-royal { --rc: var(--royal); }
.rarity--tom-night { --rc: var(--navy); }