/* =====================================================================
   Criativa Padaria — novidades.css · seção "Novidades" (nucleo/novidades.php), no início e no topo do cardápio.
   Tokens e componentes (botão, etiqueta em arco, selo de favo) vêm de marca.css. Prefixo .nv-*.

   Trilho com rolagem lateral COM PISTA (exceção consciente à regra do BRIEF §10.2, pedido de 10/11/2026): o cartão
   seguinte aparece pela metade no celular, scroll-snap, bolinhas de favo + "1 de N" e setas (desktop) pelo novidades.js.
   A rolagem é só DENTRO do trilho: a página nunca rola de lado (o trilho tem overflow próprio; o sangrado até a borda
   da tela é margem negativa igual ao recuo da página). Nada começa invisível; sem animação de entrada.
   ===================================================================== */

.nv { --nv-gap: 14px; --nv-larg: clamp(220px, 60vw, 300px); --nv-lado: 16px; position: relative; }
.nv[hidden], .nv-cartao[hidden], .nv__nav[hidden] { display: none !important; }
@media (min-width: 768px) { .nv { --nv-gap: 20px; --nv-larg: 300px; } }

/* onde ela mora */
.nv--inicio { --nv-lado: var(--in-gutter, 16px); padding: 10px 0 52px; }
@media (min-width: 768px) { .nv--inicio { padding: 8px 0 72px; } }
@media (min-width: 1100px) { .nv--inicio { --nv-larg: 320px; --nv-gap: 28px; } }
.nv--cardapio { --nv-lado: var(--cat-lado, 16px); margin: 0 calc(-1 * var(--cat-lado, 16px)) 30px; }
@container pagina (min-width: 1000px) {
  .nv--cardapio { --nv-lado: 0px; margin: 0 0 44px; }
  /* coluna do cardápio: os cartões crescem até a largura dos Queridinhos (sem recuo, a sobra rola sem perder o fim) */
  .nv--cardapio .nv__lista { width: auto; grid-auto-columns: minmax(var(--nv-larg), 1fr); }
  .nv--cardapio .nv__trilho { padding-right: 14px; }   /* o selo do último cartão sai 12 px pela direita */
}

/* ---------------------------------------------------------------- cabeçalho: — ACABOU DE SAIR — / Novidades / apoio */
.nv__cab { padding: 0 var(--nv-lado); }
.nv__sobre {
  display: flex; align-items: center; gap: 12px; margin: 0 0 8px;
  font: 600 0.75rem/1.2 var(--cri-fonte-titulo); letter-spacing: 0.3em; text-transform: uppercase; color: var(--cri-caramelo);
}
.nv__sobre::before { content: ""; width: 26px; height: 1.5px; background: currentColor; opacity: 0.6; flex: none; }
.nv__t { margin: 0 0 6px; font-size: var(--cri-fs-4); letter-spacing: 0.05em; outline: none; }
.nv__apoio { margin: 0; color: var(--cri-texto-2); }
.nv--inicio .nv__cab { text-align: center; }
.nv--inicio .nv__sobre { justify-content: center; }
.nv--inicio .nv__sobre::after { content: ""; width: 26px; height: 1.5px; background: currentColor; opacity: 0.6; flex: none; }   /* como o "— CAMBORIÚ —" do logo */
.nv--inicio .nv__t { font-size: var(--cri-fs-5); }

/* ---------------------------------------------------------------- trilho (rola só ele) */
.nv__trilho {
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--nv-lado);
  padding: 24px var(--nv-lado) 16px;           /* em cima: o selo que sai do cartão */
  scrollbar-width: none;
  outline: none;
}
.nv__trilho::-webkit-scrollbar { display: none; }
.nv__trilho:focus-visible { box-shadow: inset 0 0 0 3px var(--cri-foco); border-radius: var(--cri-raio-2); }
.nv__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--nv-larg); gap: var(--nv-gap);
  width: max-content;                          /* grade de colunas fixas: a largura é a soma exata (o padding do fim do trilho conta) */
}
.nv--inicio .nv__lista { margin-inline: auto; }   /* cabe tudo (desktop): centralizada; não cabe: começa no recuo */
.nv-cartao { display: flex; min-width: 0; scroll-snap-align: start; }

/* ---------------------------------------------------------------- cartão de papel */
.nv-cartao__in {
  position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0;
  padding: 8px; background: var(--cri-campo-fundo);
  border: 1px solid var(--cri-borda); border-radius: var(--cri-raio-3);
  box-shadow: var(--cri-sombra-2);
}
.nv-cartao__midia { position: relative; }
.nv-cartao__foto {
  display: block; width: 100%; aspect-ratio: 4 / 5; margin: 0; padding: 0; border: 0;
  border-radius: calc(var(--cri-raio-3) - 6px); overflow: hidden;
  background: var(--cri-papel-2); line-height: 0; font: inherit; color: inherit;
}
button.nv-cartao__foto { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nv-cartao__foto > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* sem foto: papel pêssego com a estampa, o croissant-abelha e "Foto em breve" (como no catálogo) */
.nv-semfoto { position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; height: 100%; background: var(--cri-pessego-claro); }
.nv-semfoto::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--cri-gravura); opacity: 0.18;
  -webkit-mask: url("../graficos/papel-estampa.svg") 0 0 / 220px repeat;
          mask: url("../graficos/papel-estampa.svg") 0 0 / 220px repeat;
}
.nv-semfoto__abelha { width: 46%; height: auto; transform: rotate(-8deg); }
.nv-semfoto__etq { position: absolute; bottom: 9%; left: 50%; transform: translateX(-50%); font-size: 0.6875rem; line-height: 1.15; }

/* selo de favo "NOVO", girado no canto (o lugar da estrela da referência). Fora: sombra; dentro: hexágono recortado */
.nv-selo {
  position: absolute; top: -20px; right: -12px; z-index: 2;
  width: 64px; aspect-ratio: 0.866;
  transform: rotate(-11deg);
  filter: drop-shadow(0 3px 4px rgb(76 53 36 / 0.28));
  pointer-events: none;
}
.nv-selo > span {
  position: absolute; inset: 0; isolation: isolate;
  display: grid; place-items: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--cri-oliva);
  font: 700 0.875rem/1 var(--cri-fonte-titulo); letter-spacing: 0.04em; color: var(--cri-cacau);   /* caixa normal, como o .selo-favo (MARCA.md) */
}
.nv-selo > span::before, .nv-selo > span::after { content: ""; position: absolute; inset: 2.5px; z-index: -1; clip-path: inherit; }
.nv-selo > span::before { background: var(--cri-caqui); }
.nv-selo > span::after {   /* favo impresso, como na etiqueta em arco */
  background-color: var(--cri-oliva); opacity: 0.22;
  -webkit-mask: url("../graficos/favo.svg") center / 11px auto repeat;
          mask: url("../graficos/favo.svg") center / 11px auto repeat;
}

.nv-cartao__texto { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 14px 8px 6px; }
.nv-cartao__chamada {
  margin: 0 0 6px; font: 700 0.75rem/1.35 var(--cri-fonte-ui); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cri-caramelo); overflow-wrap: break-word;
}
.nv-cartao__nome { margin: 0 0 6px; font: 700 1.25rem/1.25 var(--cri-fonte-ui); letter-spacing: 0; color: var(--cri-texto); overflow-wrap: break-word; }
.nv-cartao__desc { margin: 0 0 16px; font-size: 0.9375rem; line-height: 1.45; color: var(--cri-texto-2); overflow-wrap: break-word; }
.nv-cartao__pe { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; }
.nv-cartao__preco { margin: 0; font-size: 1.125rem; }
.nv-cartao__acao, .nv-cartao .cat-acoes { flex: 1 1 140px; }
.nv-cartao__acao { padding-inline: 1em; }
.nv-cartao__acao .nv-i { transition: transform var(--cri-dur-2) var(--cri-curva-saida); }
.nv-cartao__acao:hover .nv-i { transform: translateX(3px); }
.nv-cartao .cat-acoes { margin-left: 0; }
.nv-cartao .nv-provar { width: 100%; min-height: 48px; background: var(--_fundo); }
.nv-cartao .cat-passo { display: flex; width: 100%; box-sizing: border-box; justify-content: space-between; }
.nv-cartao .cat-passo__n { min-width: 0; flex: 1 1 auto; padding: 0 4px; }
.nv-cartao .cat-na-sacola { flex: 1 1 100%; text-align: center; }

/* esgotado hoje (novidades.js): etiqueta no lugar do botão */
.nv-cartao[data-esgotado-hoje] .nv-cartao__acao, .nv-cartao[data-esgotado-hoje] .cat-acoes { display: none; }
.nv-cartao[data-esgotado-hoje] .nv-cartao__foto > img { filter: grayscale(0.6) opacity(0.78); }
.nv-cartao[data-esgotado-hoje] .nv-cartao__preco { color: var(--cri-texto-2); }
.nv-cartao__esgotado { font-size: 0.75rem; }

.nv-i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- pista: setas (desktop), bolinhas de favo, "1 de N" */
.nv__nav { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 var(--nv-lado); }
.nv__pista { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; font-size: var(--cri-fs-0); font-weight: 600; color: var(--cri-texto-2); font-variant-numeric: tabular-nums; }
.nv__pontos { display: flex; align-items: center; gap: 7px; }
.nv__pontos i {
  display: block; width: 9px; height: 10px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--cri-borda-forte); opacity: 0.6;
  transition: transform var(--cri-dur-2) var(--cri-curva-pouso), background-color var(--cri-dur-2) var(--cri-curva-padrao);
}
.nv__pontos i.is-atual { background: var(--cri-chocolate); opacity: 1; transform: scale(1.3); }
.nv__seta {
  display: none; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: 1.5px solid var(--cri-borda-forte); border-radius: 50%;
  background: var(--cri-campo-fundo); color: var(--cri-chocolate); cursor: pointer;
  transition: border-color var(--cri-dur-1) var(--cri-curva-padrao), background-color var(--cri-dur-1) var(--cri-curva-padrao);
}
.nv__seta:hover:not(:disabled) { border-color: var(--cri-chocolate); background: var(--cri-papel-2); }
.nv__seta:disabled { opacity: 0.4; cursor: default; }
@media (min-width: 768px) { .nv__seta { display: grid; } }

/* ---------------------------------------------------------------- uma novidade só: cartão inteiro, sem trilho nem bolinhas */
.nv--um .nv__lista { display: block; width: auto; }
/* no cardápio do celular, deitado (foto 4:5 à esquerda): o 1º preço continua na 1ª tela, como antes das Novidades */
@media (max-width: 639.98px) {
  .nv--cardapio.nv--um .nv-cartao__in { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); column-gap: 12px; align-items: start; }
  .nv--cardapio.nv--um .nv-cartao__texto { padding: 2px 2px 2px 0; height: 100%; }
  .nv--cardapio.nv--um .nv-cartao__nome { font-size: 1.125rem; }
  .nv--cardapio.nv--um .nv-cartao__desc { font-size: 0.875rem; margin-bottom: 12px; }
  .nv--cardapio.nv--um .nv-selo { width: 54px; top: -18px; right: auto; left: -12px; }   /* à esquerda: do lado direito encostaria na chamada */
  .nv--cardapio.nv--um .nv-cartao .cat-acoes { flex-basis: 100%; }
}
.nv--um .nv-cartao { max-width: 860px; }
.nv--inicio.nv--um .nv-cartao { margin-inline: auto; }
@media (min-width: 640px) {
  .nv--um .nv-cartao__in { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); column-gap: 28px; padding: 10px; }
  .nv--um .nv-cartao__texto { justify-content: center; padding: 22px 22px 22px 0; }
  .nv--um .nv-cartao__nome { font-size: 1.625rem; }
  .nv--um .nv-cartao__desc { font-size: var(--cri-fs-1); max-width: 46ch; }
  .nv--um .nv-cartao__pe { margin-top: 6px; justify-content: flex-start; column-gap: 20px; }
  .nv--um .nv-cartao__acao, .nv--um .nv-cartao .cat-acoes { flex: 0 1 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .nv__pontos i, .nv-cartao__acao .nv-i, .nv__seta { transition: none; }
}
@media print { .nv { display: none !important; } }