/* ==========================================================================
   FAIXA DE PROVA SOCIAL E SELOS
   --------------------------------------------------------------------------
   Duas linhas logo abaixo da dobra: as provas (Travellers' Choice, ranking
   no TripAdvisor, nota do Google, nota dos hóspedes) e as garantias
   (Melhor Preço Garantido, cancelamento, 12x, atendimento, excursões).

   No desktop cada linha é uma grade que distribui os itens pela largura.
   No celular vira uma fila que rola de lado, com 2 itens à vista — a
   rolagem é da FILA, nunca da página: por isso o overflow fica no <ul>,
   dentro do .container, e nenhum elemento sai da largura da tela a 390px.

   Identidade: Montserrat, azul #005190, azul-noite #0F416E, amarelo
   #FBB343, superfícies --surface / --surface-blue, texto #444.

   Markup: parts/prova-social.php
   Script: assets/js/prova-social.js
   Breakpoints do tema: 1220 / 970 / 680.
   ========================================================================== */

.qs-ps {
    --ps-azul: #005190;
    --ps-noite: #0F416E;
    --ps-amarelo: #FBB343;
    --ps-texto: #444444;

    padding: 30px 0px;
    background: var(--surface, #F6F8FA);
    border-top: 1px solid var(--border, #E2E6EA);
    border-bottom: 1px solid var(--border, #E2E6EA);
    font-family: 'Montserrat', Arial, sans-serif;
}

/* o tema dá margem a p/ul/li dentro de .block; aqui quem espaça é a grade */
.qs-ps ul,
.qs-ps li,
.qs-ps p {
    margin: 0px;
    padding: 0px;
    list-style: none;
    line-height: 1.35;
}

.qs-ps-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}


/* ==========================================================================
   AS DUAS LINHAS
   ========================================================================== */

/* O "width:100%" nao e redundante. Dentro de algumas .container do tema
   — a da pagina de hotel e a do #breadcrumb, entre outras — o CSS legado
   faz QUALQUER filho flex ou grid encolher para largura 0: um <div> com
   display:block mede 1220px ali, e o mesmo <div> com display:grid mede 0.
   Com a largura indefinida, o "1fr" das colunas resolve para zero e a
   fila some, com os selos espremidos em 26px. Declarada a largura, as
   colunas voltam a 605px. Medido no staging em 2026-09-19. */
.qs-ps-linha {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-gap: 12px;
    align-items: stretch;
    width: 100%;
}

/* O vao entre as duas linhas e maior que o vao entre cards de propósito:
   com os dois iguais, as provas e as garantias liam como uma grade so —
   "tudo junto". O que separa as duas faixas e o espaço, e nao um traço.

   O "ul" no seletor nao e enfeite: o reset ".qs-ps ul" logo acima zera a
   margem e vale (0,1,1) contra os (0,1,0) de uma classe sozinha — sem o
   tipo no seletor, esta regra perdia e a margem nunca saia do lugar. */
.qs-ps ul.qs-ps-linha--selos { margin-top: 20px; }

.qs-ps-cel { position: relative; min-width: 0px; }


/* ==========================================================================
   O ITEM
   Mesma caixa para o <a> e para o <button>: o que muda é o destino do
   toque, não o desenho. O reset do <button> é explícito porque o
   style.min.css legado dá borda e fundo a todo botão do tema.
   ========================================================================== */

.qs-ps-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 100%;
    min-height: 66px;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid var(--border, #E2E6EA);
    border-radius: var(--radius-card, 8px);
    background: #FFFFFF;
    color: var(--ps-texto);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.qs-ps-item:hover,
.qs-ps-item:focus-visible {
    border-color: var(--ps-azul);
    box-shadow: 0px 2px 10px rgba(0, 81, 144, .12);
    color: var(--ps-texto);
    text-decoration: none;
    transform: translateY(-1px);
}

.qs-ps-item:focus-visible { outline: 2px solid var(--ps-azul); outline-offset: 2px; }

.qs-ps-icone {
    flex: 0 0 auto;
    width: 22px;
    font-size: 18px;
    color: var(--ps-azul);
    text-align: center;
}

/* a arte oficial do TripAdvisor: altura fixa, largura pelo arquivo */
.qs-ps-arte {
    flex: 0 0 auto;
    width: auto;
    height: 40px;
    max-width: 72px;
    object-fit: contain;
}

.qs-ps-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0px;
}

.qs-ps-rotulo {
    font-size: 15px;
    font-weight: 700;
    color: var(--ps-noite);
}

/* a fonte da nota. Não é decoração: é o que torna o número verificável,
   e por isso nunca some, nem no celular. */
.qs-ps-fonte {
    font-size: 11px;
    font-weight: 400;
    color: #6B7680;
}

.qs-ps-estrelas {
    font-size: 11px;
    color: var(--ps-amarelo);
    letter-spacing: 1px;
}

.qs-ps-faixa {
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    color: var(--ps-azul);
}

/* As garantias pesam menos que as provas: cartão sem borda, fundo azul
   claro e rótulo menor. Uma nota com fonte é um fato verificável; uma
   garantia é uma promessa da casa — desenhá-las iguais achatava as duas
   e era isso que fazia a faixa parecer um bloco único. */
.qs-ps-linha--selos .qs-ps-item {
    min-height: 52px;
    padding: 11px 14px;
    gap: 10px;
    border-color: transparent;
    background: var(--surface-blue, #EEF4F9);
}

.qs-ps-linha--selos .qs-ps-rotulo { font-size: 13.5px; }

.qs-ps-linha--selos .qs-ps-item:hover,
.qs-ps-linha--selos .qs-ps-item:focus-visible {
    border-color: var(--ps-azul);
    background: #FFFFFF;
}

/* Melhor Preço Garantido é o único selo que leva a uma página: ganha o
   amarelo da marca para o olho achar o link no meio dos cinco. */
.qs-ps-linha--selos .qs-ps-item--garantia {
    border-color: var(--ps-amarelo);
    background: #FFF6E6;
}

.qs-ps-item--garantia .qs-ps-icone { color: #B37714; }

.qs-ps-item--excursoes .qs-ps-icone { color: var(--ps-noite); }


/* ==========================================================================
   TOOLTIP
   Abre no hover e no foco onde existe ponteiro, e no toque pelo script
   (assets/js/prova-social.js), que põe .is-aberto. O hover fica dentro de
   @media (hover: hover) de propósito: no celular o toque deixa o :hover
   grudado e o balão nunca mais fechava.

   Fica preso à célula, e não à fila: dentro de um container que rola, um
   balão absoluto na fila andaria junto com a rolagem.
   ========================================================================== */

.qs-ps-tip {
    display: none;
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    left: 0px;
    width: max-content;
    max-width: min(280px, 78vw);
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--ps-noite);
    color: #FFFFFF;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0px 6px 18px rgba(15, 65, 110, .25);
}

.qs-ps-tip::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 18px;
    border: 6px solid transparent;
    border-bottom-color: var(--ps-noite);
}

.qs-ps-tip.is-aberto { display: block; }

@media (hover: hover) {
    .qs-ps-cel:hover .qs-ps-tip,
    .qs-ps-cel:focus-within .qs-ps-tip { display: block; }
}

/* a última célula abre o balão para a esquerda para não vazar a tela */
.qs-ps-cel:last-child .qs-ps-tip { left: auto; right: 0px; }
.qs-ps-cel:last-child .qs-ps-tip::before { left: auto; right: 18px; }


/* ==========================================================================
   VARIANTE COMPACTA
   Só a linha de provas, sem fundo nem bordas da faixa: é a que entra
   perto do H1 e nos CTAs do blog.
   ========================================================================== */

.qs-ps--compacta {
    padding: 0px;
    background: none;
    border: 0px;
}

.qs-ps--compacta .container { padding-left: 0px; padding-right: 0px; }

.qs-ps--compacta .qs-ps-item {
    min-height: 0px;
    padding: 7px 10px;
    background: var(--surface-blue, #EEF4F9);
    border-color: transparent;
}

.qs-ps--compacta .qs-ps-rotulo { font-size: 13px; }
.qs-ps--compacta .qs-ps-arte   { height: 30px; }


/* ==========================================================================
   970px — as provas em duas colunas, os selos em três
   ========================================================================== */

@media (max-width: 970px) {
    .qs-ps { padding: 24px 0px; }

    .qs-ps-linha {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qs-ps-linha--selos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ==========================================================================
   680px — fila que rola de lado, 2 itens à vista

   A rolagem é do <ul>, que vive dentro do .container: a página continua
   com a largura da tela a 390px. O -webkit-overflow-scrolling e o
   scroll-snap deixam a parada em cima do item, como num carrossel.
   ========================================================================== */

@media (max-width: 680px) {
    .qs-ps { padding: 20px 0px; }

    .qs-ps ul.qs-ps-linha--selos { margin-top: 14px; }

    .qs-ps-linha {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        /* espaço para a sombra do item e para o tooltip respirarem */
        padding: 2px 2px 10px 2px;
        scrollbar-width: thin;
    }

    .qs-ps-linha::-webkit-scrollbar { height: 4px; }
    .qs-ps-linha::-webkit-scrollbar-thumb {
        background: #C9D4DD;
        border-radius: 4px;
    }

    /* 2 à vista: metade da fila menos metade do vão */
    .qs-ps-cel {
        flex: 0 0 auto;
        width: calc(50% - 5px);
        scroll-snap-align: start;
    }

    .qs-ps-item {
        min-height: 64px;
        padding: 11px 12px;
        gap: 9px;
    }

    .qs-ps-linha--selos .qs-ps-item {
        min-height: 52px;
        padding: 10px 12px;
    }

    .qs-ps-rotulo { font-size: 12.5px; }
    .qs-ps-fonte  { font-size: 10.5px; }
    .qs-ps-arte   { height: 34px; max-width: 54px; }
    .qs-ps-icone  { width: 18px; font-size: 16px; }

    /* Um balão absoluto seria cortado aqui: a fila rola de lado, e
       overflow-x:auto obriga o overflow-y a recortar junto. Então no
       celular o tooltip deixa de flutuar e empurra a célula para baixo,
       dentro do próprio scroller. */
    .qs-ps-tip {
        position: static;
        width: auto;
        max-width: none;
        margin-top: 6px;
        white-space: normal;
    }

    /* sem balão flutuante não há bico: o ::before é absoluto e se
       penduraria na célula, não no tooltip */
    .qs-ps-tip::before { display: none; }

    .qs-ps-item { height: auto; }
}


@media (prefers-reduced-motion: reduce) {
    .qs-ps-item { transition: none; }
    .qs-ps-item:hover,
    .qs-ps-item:focus-visible { transform: none; }
}