/* =============================================================================
   By AteliAnas. 17. PÁGINAS INTERNAS (Etapa 2)
   -----------------------------------------------------------------------------
   Listagem por seção (/pecas/<slug>) e página da peça (/peca/<slug>).

   Continuação direta de styles.css: usa os mesmos tokens, os mesmos reveals e
   o mesmo fio. Está em arquivo separado só para styles.css não passar de
   1.500 linhas, as duas folhas carregam em todas as páginas públicas, porque
   o bloco 17.1 (selos e preço riscado) também vale para os cards da home.

   Regra de moderação: aqui o degradê NÃO aparece em cheio. Ele é a assinatura
   da home; nas internas ele só encosta em detalhes (selo de promoção, fita da
   seção atual).

   Sumário
     17.1  Selos (esgotada, promoção, queridinha) e preço riscado
     17.2  Topo das páginas internas + migalhas + fitas de seção
     17.3  Página da peça: galeria e ficha
     17.4  Vitrine vazia
     17.5  Movimento reduzido
   ========================================================================== */

/* -----------------------------------------------------------------------------
   17.1  SELOS E PREÇO RISCADO
   O selo mora dentro da foto, no canto de cima. "Esgotada" é charmoso, não
   triste: fundo claro, coração de lã, nada de cinza de "indisponível".
-------------------------------------------------------------------------- */
.peca__selo {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 12px 6px;
  border-radius: var(--r-pilula);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.2;
  box-shadow: 0 2px 10px rgba(124, 45, 62, 0.18);
  transform: rotate(-2deg);
}

.peca__selo--esgotada {
  background: var(--papel);
  color: var(--vinho);
  border: 1px dashed rgba(124, 45, 62, 0.4);
}

/* O único lugar das internas onde o degradê aparece, e bem pequeno. */
.peca__selo--promo {
  background: var(--degrade);
  color: var(--vinho);
  border: 1px solid transparent;
}

/* A queridinha: peça que as donas escolheram para aparecer primeiro na seção.
   Vai no canto DIREITO, oposto aos outros selos, assim uma queridinha em
   promoção mostra os dois sem um cobrir o outro. Papel e tracejado, como a
   etiqueta de preço: é um bilhetinho preso na peça, não um adesivo de loja. */
.peca__selo--queridinha {
  left: auto;
  right: 12px;
  padding: 4px 10px 5px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px dashed rgba(244, 92, 127, 0.55);
  color: var(--vinho);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  transform: rotate(2deg);
  box-shadow: 0 1px 6px rgba(124, 45, 62, 0.12);
}

/* A peça esgotada continua bonita: só perde um tiquinho de saturação, para a
   disponível ganhar o olho primeiro. */
.peca--esgotada .peca__foto img { filter: saturate(0.82); }

.peca__nome a {
  color: inherit;
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--anim-rapida) ease;
}
.peca__nome a:hover { border-bottom-color: var(--rosa-forte); }

.peca__antigo {
  margin-right: 0.4em;
  color: rgba(124, 45, 62, 0.55);
  text-decoration-thickness: 1.5px;
}

/* Botão da peça esgotada: contorno vinho, sem o peso do botão cheio,
   é convite para conversar, não para comprar agora. */
.botao--contorno-vinho {
  width: 100%;
  padding-inline: 0.9em;
  font-size: 0.9rem;
  white-space: nowrap;
  background: transparent;
  color: var(--vinho);
  border-color: rgba(124, 45, 62, 0.5);
}
.botao--contorno-vinho:hover {
  background: var(--papel);
  border-color: var(--vinho);
}

/* -----------------------------------------------------------------------------
   17.2  TOPO DAS PÁGINAS INTERNAS
-------------------------------------------------------------------------- */
.topo-pagina {
  padding: 96px 0 8px;          /* 96px = altura do cabeçalho fixo + respiro */
  background-color: var(--fundo-morno);
  background-image: var(--textura);
}

.topo-pagina__titulo {
  font-size: clamp(2rem, 7.5vw, 3rem);
  color: var(--vinho);
  margin-bottom: 0.2em;
}
.topo-pagina__titulo .assinatura { margin-left: 0.12em; }

.topo-pagina__texto {
  max-width: 48ch;
  color: var(--vinho-suave);
  font-size: 1.05rem;
}

.migalhas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 14px;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--vinho-suave);
}
.migalhas a {
  border-bottom: 1px solid transparent;
  transition: border-color var(--anim-rapida) ease;
}
.migalhas a:hover { border-bottom-color: var(--rosa-forte); }
.migalhas [aria-current] { color: var(--vinho); }

/* Fitas de seção: as etiquetas costuradas que trocam de família de peça. */
.fitas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 4px;
}
.fita {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.4em 1.1em;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-pilula);
  font-size: 0.9rem;
  color: var(--vinho-suave);
  transition: transform var(--anim-rapida) var(--macio),
    border-color var(--anim-rapida) ease, color var(--anim-rapida) ease;
}
.fita:hover {
  transform: translateY(-2px);
  border-color: rgba(244, 92, 127, 0.5);
  color: var(--vinho);
}
.fita--atual {
  background: var(--vinho);
  border-color: var(--vinho);
  color: var(--branco);
}
.fita--atual:hover { color: var(--branco); }

/* O fio divisor nas internas é mais baixo que o da home. */
.costura--curta { margin: 6px 0 -8px; }

@media (min-width: 700px) {
  .topo-pagina { padding-top: 118px; }
}

/* -----------------------------------------------------------------------------
   17.3  PÁGINA DA PEÇA
-------------------------------------------------------------------------- */
.peca-pagina { padding: 92px 0 24px; }

.peca-pagina__interno {
  display: grid;
  gap: 28px;
}

/* Galeria */
.galeria__principal {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--borda);
  border-radius: var(--r-etiqueta);
  background: var(--fundo-morno);
  box-shadow: var(--sombra-suave);
}
.galeria__principal img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.galeria__miniaturas {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.galeria__mini {
  display: block;
  flex: 0 0 74px;
  border: 2px solid transparent;
  border-radius: 14px;
  overflow: hidden;
  opacity: 0.72;
  transition: opacity var(--anim-rapida) ease, border-color var(--anim-rapida) ease,
    transform var(--anim-rapida) var(--macio);
}
.galeria__mini img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.galeria__mini:hover { opacity: 1; transform: translateY(-2px); }
.galeria__mini--atual {
  opacity: 1;
  border-color: var(--rosa-forte);
}

/* Ficha */
.ficha__nome {
  font-size: clamp(1.9rem, 7vw, 2.7rem);
  color: var(--vinho);
  margin-bottom: 0.35em;
}

.ficha__legenda {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--vinho-suave);
  max-width: 52ch;
  white-space: pre-line;    /* a dona escreve com quebras de linha, como no Insta */
}

.ficha__cores {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 18px 0 6px;
}
.ficha__rotulo {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vinho-suave);
}
.ficha__valor { font-size: 1.02rem; color: var(--vinho); }

.ficha__precos {
  margin: 22px 0 20px;
  padding: 18px 20px;
  background: var(--papel);
  border: 1px dashed rgba(124, 45, 62, 0.3);
  border-radius: var(--r-etiqueta);
}
.ficha__antigo {
  margin: 0 0 2px;
  font-size: 0.92rem;
  color: rgba(124, 45, 62, 0.6);
}
.ficha__pix {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  margin: 0;
}
.ficha__valor-grande {
  font-family: var(--serif);
  font-size: clamp(2rem, 8vw, 2.6rem);
  font-weight: 600;
  color: var(--vinho);
  line-height: 1.05;
}
.ficha__pix-rotulo {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vinho-suave);
}
.ficha__cartao {
  margin: 4px 0 0;
  font-size: 0.95rem;
  color: var(--vinho-suave);
}

.ficha__aviso {
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-medio);
  font-size: 0.95rem;
  color: var(--vinho-suave);
}

.ficha__cta { width: 100%; }

.ficha__selos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
  font-size: 0.9rem;
  color: var(--vinho-suave);
}
.ficha__selos li {
  position: relative;
  padding-left: 22px;
}
/* Marcador em ponto de crochê, desenhado no ::before (sem imagem). */
.ficha__selos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 11px;
  height: 7px;
  border: 1.5px solid var(--rosa-forte);
  border-radius: 50%;
}

@media (min-width: 860px) {
  .peca-pagina { padding-top: 128px; }
  .peca-pagina__interno {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 46px;
    align-items: start;
  }
  .ficha__cta { width: auto; min-width: 260px; }
  .galeria__mini { flex-basis: 88px; }
}

/* -----------------------------------------------------------------------------
   17.4  VITRINE VAZIA
-------------------------------------------------------------------------- */
.vitrine__vazio {
  max-width: 44ch;
  margin: 22px auto 8px;
  padding: 26px 22px;
  text-align: center;
  background: var(--branco);
  border: 1px dashed rgba(124, 45, 62, 0.28);
  border-radius: var(--r-etiqueta);
  color: var(--vinho-suave);
}

/* -----------------------------------------------------------------------------
   17.5  MOVIMENTO REDUZIDO
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fita:hover,
  .galeria__mini:hover { transform: none; }
}