/* =========================================================================
   CasaPri — product-card
   Componente único (issue #10, parent #1): loja/categoria, listagem própria e
   cross-sell "Complete o ambiente" da PDP usam este mesmo bloco.

   Direção: a foto manda. Fundo branco, sem moldura, sem sombra, cantos retos
   (o kit da marca tem border-radius 0 em tudo). A personalidade vem da
   fotografia em sangria, do champagne no selo e do contraste de tipos —
   não de decoração em volta do card.
   ========================================================================= */

/* O <li> da grade precisa ser flex para o card esticar: assim, numa mesma
   fileira, cards com título de 1 e de 2 linhas terminam na mesma altura. */
.casapri-product-card-item {
    display: flex;
}

.casapri-product-card {
    position: relative; /* âncora do link esticado do título */
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    background: var(--white);

    /* Movimento do card, num lugar só para os tempos não desandarem entre os
       elementos. A curva é ease-out-quint: sai rápido e assenta devagar, sem
       repique. Nada aqui anima propriedade de layout — só transform, opacity e
       cor, que o compositor resolve sem recalcular a grade. */
    --card-curva: cubic-bezier(.22, 1, .36, 1);
    --card-t-foto: 700ms;  /* a foto é o elemento grande: movimento longo */
    --card-t-marca: 420ms; /* filete champagne: intermediário */
    --card-t-ui: 220ms;    /* botão e texto: resposta quase imediata */
}

/* ---- foto ---- */
/* 1:1, igual ao arquivo. O tamanho woocommerce_thumbnail é recortado em
   quadrado pelo próprio Woo (300x300), então qualquer outra proporção aqui
   descartaria pedaço de foto sem ganhar informação nenhuma: num quadro 4:5 o
   cover comeria 20% das laterais de cada produto do catálogo.
   object-fit: cover sem padding — antes era contain com 1rem de respiro sobre
   cinza, o que transformava foto de ambiente em selo flutuando numa caixa. */
.casapri-product-card__media {
    position: relative;
    display: block;
    background: var(--surface);
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
/*
 * As duas fotos são absolutas, e width/height:100% vêm JUNTO do inset — não é
 * redundância. Numa caixa dimensionada por aspect-ratio, a img do WooCommerce
 * (que traz width/height no HTML) entra em dependência cíclica com height:100%
 * relativo: o navegador desiste, cai no aspecto nativo do arquivo e sobra
 * faixa de fundo. Hoje o quadro é 1:1 e o arquivo também, então o sintoma não
 * aparece — mas basta um produto com foto fora do padrão para reaparecer.
 * Verificado com sonda de fundo vermelho na grade real.
 */
.casapri-product-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--card-t-foto) var(--card-curva),
                opacity var(--card-t-marca) var(--card-curva);
}

/* :where() para o estado não somar especificidade — quem quiser sobrescrever
   o hover num contexto específico continua conseguindo com uma classe só. */
@media (hover: hover) {
    .casapri-product-card:hover :where(.casapri-product-card__image) { transform: scale(1.04); }
}
/* teclado: o foco no título produz exatamente o mesmo sinal visual do mouse */
.casapri-product-card:focus-within :where(.casapri-product-card__image) { transform: scale(1.04); }

/* ---- selo ---- */
/* Champagne com texto ink (7,85:1). Nunca texto branco sobre champagne —
   1,85:1, reprovado (relatório de conversão §4.4). */
.casapri-product-card__selo {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: var(--champagne);
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .5px;
    padding: .35rem .7rem;
}
.casapri-product-card__selo--esgotado {
    background: var(--ink);
    color: var(--white);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-size: .68rem;
}
.casapri-product-card--esgotado .casapri-product-card__image {
    opacity: .45;
    filter: grayscale(.4);
}

/* ---- corpo ---- */
.casapri-product-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: .9rem 0 0;
}

/* ---- eyebrow de categoria ---- */
/* O único uso de caixa alta com tracking no card, e é exatamente onde o
   relatório de conversão diz que ele funciona: rótulo curto (§4.4, Defeito 3
   proíbe isso em nome de produto). Cor --champagne-texto, nunca --champagne:
   o champagne de superfície em texto dá 1,86:1.
   min-height reserva a linha nos ~10% de produtos sem categoria utilizável,
   senão os títulos da fileira começam em alturas diferentes. */
.casapri-product-card__eyebrow {
    margin: 0 0 .3rem;
    min-height: 1em;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-size: .66rem;
    line-height: 1;
    color: var(--champagne-texto);
}

/* Título com duas linhas reservadas: o preço da fileira inteira cai sempre na
   mesma altura, mesmo quando um nome ocupa uma linha e o vizinho ocupa duas. */
.casapri-product-card__heading {
    margin: 0 0 .4rem;
    min-height: calc(2 * 1.35em);
    font-size: .95rem;
}
.casapri-product-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* nome do produto: nunca uppercase (Defeito 3 do relatório de conversão) */
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: inherit;
    line-height: 1.35;
    color: var(--ink);
}
/* link esticado: o card inteiro vira alvo de clique sem duplicar o link */
.casapri-product-card__title::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* Sublinhado champagne no hover. Nasce transparente e só troca de cor: assim a
   linha nunca aparece "do nada" nem empurra o texto, que é o que aconteceria
   ligando/desligando text-decoration. */
.casapri-product-card__title {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--card-t-ui) var(--card-curva);
}
.casapri-product-card:hover .casapri-product-card__title,
.casapri-product-card:focus-within .casapri-product-card__title {
    color: var(--ink);
    text-decoration-color: var(--champagne);
}
.casapri-product-card__title:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    text-decoration-color: transparent; /* o outline já marca o foco; dois sinais poluem */
}

/* ---- prova social ---- */
/* Estrelas quando o produto tem avaliação (raro neste catálogo) e "N vendidos"
   quando tem venda registrada. Linha discreta de propósito: é reforço, não
   pode competir com o preço logo abaixo. */
.casapri-product-card__prova {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem .5rem;
    margin-bottom: .4rem;
    font-family: var(--font-body);
    font-size: .78rem;
    color: var(--body);
}
.casapri-product-card__prova .star-rating { font-size: .8rem; margin: 0; }
.casapri-product-card__prova-contagem,
.casapri-product-card__vendidos { font-variant-numeric: tabular-nums; }

/* ---- filete champagne ---- */
/* Marca de marca separando a prova social do preço, e o único elemento do card
   que se move no hover: estica da esquerda para a direita, como um traço sendo
   puxado. scaleX e não width — width recalcularia layout a 60fps. */
.casapri-product-card__filete {
    display: block;
    width: 34px;
    height: 3px;
    margin: .1rem 0 .65rem;
    background: var(--champagne);
    transform-origin: left center;
    transition: transform var(--card-t-marca) var(--card-curva);
}
@media (hover: hover) {
    .casapri-product-card:hover .casapri-product-card__filete { transform: scaleX(1.7); }
}
.casapri-product-card:focus-within .casapri-product-card__filete { transform: scaleX(1.7); }

/* ---- preço ---- */
/* O valor a pagar é o elemento alto do card; o riscado recua de verdade
   (tamanho, peso e cor), em vez de competir de igual pra igual. */
.casapri-product-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .45rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    color: var(--ink);
}
.casapri-product-card__price del {
    order: -1;
    flex-basis: 100%;
    color: var(--body);
    font-weight: 400;
    font-size: .8rem;
    text-decoration-thickness: 1px;
}
.casapri-product-card__price ins { text-decoration: none; }
/* "R$ 389,90 – R$ 459,90" e o "A partir de" do variável em corpo menor */
.casapri-product-card__price .woocommerce-Price-currencySymbol { font-size: .78em; font-weight: 500; }
.casapri-product-card__price small { font-size: .72rem; font-weight: 400; color: var(--body); }

/* ---- parcelamento ---- */
/* Vem do plugin (casapri_frontend_parcelamento), que decide quantas parcelas
   cabem e qual a parcela mínima. Não afirma "sem juros": essa condição depende
   de meio de pagamento e de teto de valor, que nem o núcleo nem o card sabem. */
.casapri-product-card__parcelamento {
    margin: .3rem 0 0;
    font-family: var(--font-body);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    color: var(--body);
}

/* ---- CTA ---- */
/* Mesma forma do botão global do kit, que o relatório de conversão (§4.4)
   mandou preservar: ink sobre branco (14,6:1), Jost 600 em caixa alta, canto
   reto, hover invertendo para fundo branco com texto ink.

   O invólucro existe só para o espaçamento: margin-top:auto nele empurra o
   botão para o rodapé do card (numa fileira em que um produto tem parcelamento
   e o vizinho não, os dois botões continuam alinhados) enquanto o padding-top
   garante o respiro mínimo até o preço. As duas coisas no próprio <a> não
   funcionariam: padding-top entraria dentro do fundo do botão. */
.casapri-product-card__acoes {
    position: relative;
    z-index: 2; /* acima do link esticado do título */
    margin-top: auto;
    padding-top: .9rem;
}
.casapri-product-card__cta {
    display: block;
    padding: .75rem 1rem;
    background: var(--ink);
    border: 1px solid var(--ink);
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    text-align: center;
    transition: background var(--card-t-ui) var(--card-curva),
                color var(--card-t-ui) var(--card-curva),
                transform 90ms ease-out;
}
/* resposta tátil ao clique: afunda 1px e volta. 90ms porque passar disso deixa
   o botão "mole" — é a única transição do card que não usa a curva longa. */
.casapri-product-card__cta:active { transform: translateY(1px); }
/* focus-within junto com hover: quem navega por teclado foca o link do título
   (o botão é aria-hidden) e precisa ver o mesmo estado que o mouse produz. */
.casapri-product-card:hover .casapri-product-card__cta,
.casapri-product-card:focus-within .casapri-product-card__cta,
.casapri-product-card__cta:hover {
    background: var(--white);
    color: var(--ink);
}
/* indisponível: continua levando à PDP, mas sem gritar como oferta ativa */
.casapri-product-card__cta--indisponivel {
    background: var(--white);
    border-color: var(--border);
    color: var(--body);
}
.casapri-product-card:hover .casapri-product-card__cta--indisponivel {
    border-color: var(--ink);
    color: var(--ink);
}

@media (max-width: 767px) {
    .casapri-product-card__heading { font-size: .9rem; }
    .casapri-product-card__price { font-size: 1.05rem; }
}

/*
 * Movimento reduzido: some o que se MOVE (escala da foto, filete esticando,
 * afundar do botão) e mantém o que apenas TROCA DE COR ou de opacidade — a
 * inversão do botão, o sublinhado do título e a segunda foto da galeria
 * continuam, porque são sinal de estado, não animação decorativa. Zerar tudo
 * deixaria quem usa a preferência sem saber onde está o cursor.
 */
@media (prefers-reduced-motion: reduce) {
    .casapri-product-card__image,
    .casapri-product-card__filete,
    .casapri-product-card__cta { transition-duration: .01ms; }

    .casapri-product-card:hover .casapri-product-card__image,
    .casapri-product-card:focus-within .casapri-product-card__image,
    .casapri-product-card:hover .casapri-product-card__filete,
    .casapri-product-card:focus-within .casapri-product-card__filete,
    .casapri-product-card__cta:active { transform: none; }
}