/*
 * O que dizem de quem faz (home de vendas, 12/10/2026). Prefixo hm-av-.
 * Celular: a média no topo e um trilho de cartões a 85% com pontos de posição.
 * Computador: a média grande à esquerda do título e um mural de 3 colunas
 * (CSS columns, alturas naturais). Ao mudar, suba o ?v= no home.blade.php.
 */
.hm-av { content-visibility: auto; contain-intrinsic-size: auto 640px; }

/* Cabeçalho: a média vem antes do título (order), o h2 continua primeiro no HTML */
.hm-av-cab { flex-direction: column; align-items: stretch; gap: 12px; }
.hm-av-legenda { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.hm-av-legenda i { flex: 0 0 auto; font-size: 12px; color: #a16207; }
.hm-av-media { order: -1; display: flex; align-items: center; gap: 12px; margin: 0; min-width: 0; }
.hm-av-nota { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 44px; line-height: 1; letter-spacing: -.02em; color: var(--hm-verde); }
.hm-av-media-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13.5px; line-height: 1.35; color: var(--hm-suave); }
.hm-av-media-txt strong { font-weight: 700; color: var(--hm-tinta); }
.hm-av-media-est { display: inline-flex; gap: 2px; font-size: 14px; color: var(--hm-ouro); }

/* Trilho do celular: rola dentro dele, mostra o pedaço do próximo e encaixa por cartão */
.hm-av-trilho { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 85%; gap: 12px;
                overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
                padding: 2px 2px 6px; scroll-padding-left: 2px; }
.hm-av-trilho::-webkit-scrollbar { display: none; }

/* Cartão: bege claro, a frase em Fraunces, a peça no rodapé */
.hm-av-card { position: relative; scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column; gap: 10px;
              background: var(--hm-bege); border: 1px solid rgba(232, 175, 24, .24); border-radius: 18px; padding: 18px 18px 14px;
              transition: box-shadow .2s ease, transform .2s ease; }
.hm-av-card:hover { box-shadow: 0 10px 28px rgba(16, 46, 0, .10); transform: translateY(-2px); }
.hm-av-est { margin: 0; display: flex; gap: 2px; font-size: 13px; color: var(--hm-ouro); }
.hm-av-frase { margin: 0; }
.hm-av-frase p { margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 16.5px; line-height: 1.45; color: var(--hm-tinta);
                 text-wrap: pretty; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.hm-av-quem { margin: 0; font-size: 13px; font-weight: 600; color: #57534e; }
.hm-av-quem time { font-weight: 500; }

/* Rodapé com a peça: o link se estica sobre o cartão inteiro */
.hm-av-peca { margin-top: auto; display: flex; align-items: center; gap: 12px; min-width: 0; padding-top: 12px; border-top: 1px solid rgba(28, 25, 23, .08); }
.hm-av-peca::after { content: ''; position: absolute; inset: 0; border-radius: 18px; }
.hm-av-peca img { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: #f5f5f4; }
.hm-av-peca-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hm-av-peca-nome { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--hm-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-av-peca-loja { font-size: 12px; color: #57534e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-av-peca-pe { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 2px; }
.hm-av-peca-pe b { font-size: 14px; font-weight: 800; color: var(--hm-verde); white-space: nowrap; }
.hm-av-ver { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--hm-verde); white-space: nowrap; }
.hm-av-ver i { font-size: 11px; transition: transform .15s ease; }
.hm-av-card:hover .hm-av-ver i { transform: translateX(2px); }

/* Foco visível no cartão inteiro (por dentro, para o trilho não cortar) */
.hm .hm-av-peca:focus-visible { outline: 3px solid var(--hm-ouro); outline-offset: 3px; border-radius: 8px; }
@supports selector(:has(*)) {
    .hm .hm-av-peca:focus-visible { outline: none; }
    .hm-av-card:has(.hm-av-peca:focus-visible) { outline: 3px solid var(--hm-ouro); outline-offset: -3px; }
}

/* Pontos de posição do trilho (montados pelo /js/home/avaliacoes.js) */
.hm-av-pontos { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; margin-top: 8px; }
.hm-av-pontos[hidden] { display: none; }
.hm-av-ponto { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }
.hm-av-ponto::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: rgba(28, 25, 23, .18); transition: width .2s ease, background-color .2s ease; }
.hm-av-ponto[data-ativo]::before { width: 18px; background: var(--hm-verde); }

@media (min-width: 640px) {
    .hm-av-trilho { grid-auto-columns: 58%; gap: 14px; }
    .hm-av-nota { font-size: 50px; }
    .hm-av-frase p { font-size: 17px; }
}
@media (min-width: 1024px) {
    .hm-av { contain-intrinsic-size: auto 900px; }
    .hm-av-cab { flex-direction: row; align-items: center; justify-content: flex-start; gap: 28px; margin-bottom: 22px; }
    .hm-av-media { flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 250px; padding-right: 28px; border-right: 1px solid var(--hm-linha); }
    .hm-av-nota { font-size: 64px; }

    /* Mural: 3 colunas com a altura natural de cada cartão; nada rola de lado */
    .hm-av-trilho { display: block; columns: 3; column-gap: 16px; overflow: visible; scroll-snap-type: none; padding: 0; }
    .hm-av-card { margin-bottom: 16px; break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; }
    .hm-av-pontos, .hm-av-pontos[hidden] { display: none; }
}
@media (min-width: 1280px) {
    .hm-av-trilho { column-gap: 20px; }
    .hm-av-card { margin-bottom: 20px; padding: 22px 22px 16px; }
    .hm-av-frase p { font-size: 18px; }
}
@media (min-width: 1800px) {
    .hm-av-nota { font-size: 72px; }
    .hm-av-card { padding: 26px 26px 18px; }
    .hm-av-frase p { font-size: 19.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .hm-av-card, .hm-av-card:hover, .hm-av-card:hover .hm-av-ver i { transform: none; transition: none; }
    .hm-av-ponto::before { transition: none; }
    .hm-av-trilho { scroll-behavior: auto; }
}