/* Menu de compartilhamento do card da vitrine.
   Ancorado no proprio .vitrine-share-btn (position:relative) para acompanhar o
   card durante o scroll infinito sem recalculo de coordenadas. */

.vitrine-share-btn {
    position: relative;
}

.vitrine-share-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    z-index: 1050;
    min-width: 232px;
    padding: 6px;
    background: #fff;
    border: 1px solid #e4e6eb;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
    text-align: left;
    cursor: default;
}

/* Setinha apontando pro botao. */
.vitrine-share-menu::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 22px;
    border: 7px solid transparent;
    border-top-color: #fff;
}

.vitrine-share-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #1c1e21;
    font-size: 0.9rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.vitrine-share-item:hover,
.vitrine-share-item:focus {
    background: #f0f2f5;
    color: #1c1e21;
    text-decoration: none;
    outline: none;
}

.vitrine-share-item i {
    width: 18px;
    font-size: 1.05rem;
    text-align: center;
    flex-shrink: 0;
}

/* Instagram nao aceita URL de compartilhamento web: o item copia o link e o
   hint explica por que o comportamento difere dos outros. */
.vitrine-share-hint {
    margin-left: auto;
    color: #8a8d91;
    font-size: 0.72rem;
    white-space: nowrap;
}

/* Em tela estreita nao ha ancoragem no botao que caiba: o botao fica na ponta
   direita da barra e qualquer popover de ~200px estoura a viewport (centrar no
   botao so muda o lado do estouro). Vira bottom sheet, preso a viewport com
   position:fixed — some a classe inteira do bug de overflow.
   O menu continua sendo filho do botao no DOM, entao o openFor.contains() que
   fecha o menu no vitrine-share.js segue valendo. */
@media (max-width: 575px) {
    .vitrine-share-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        /* Acima do #back-to-top (z-index 99999), que senao flutua por cima da
           sheet. Nao passa dos modais de radar (100000), que nunca coexistem
           com ela. */
        z-index: 100000;
        min-width: 0;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
        border: 0;
        border-top: 1px solid #e4e6eb;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.18);
        animation: vitrine-share-sheet-in 0.18s ease-out;
    }

    /* A setinha so faz sentido no popover ancorado. */
    .vitrine-share-menu::after {
        display: none;
    }

    .vitrine-share-item {
        padding: 13px 14px;
        font-size: 0.95rem;
    }
}

@keyframes vitrine-share-sheet-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* O 4o botao (Compartilhar) nao cabe na linha de acoes com as medidas que
   serviam pra 3. O card da vitrine tem 510px e a linha reserva 24px de padding
   de cada lado, sobrando 462px de conteudo; a soma dos min-contents dos quatro
   rotulos em pt-BR (o idioma mais largo dos dois) dava 470px, e o flex:1
   jogava "Compartilhar" sozinho pra uma segunda linha. Apertar padding, margem,
   folga do icone e um ponto de fonte devolve a folga necessaria. O wrap fica
   como rede de seguranca — se algum dia nao couber, cai pra 2x2 em vez de 3+1. */
.interaction-buttons {
    flex-wrap: wrap;
}

.interaction-buttons .vitrine-btn {
    padding-left: 5px;
    padding-right: 5px;
    margin: 0;
    font-size: 0.9rem;
    white-space: nowrap;
}

.interaction-buttons .vitrine-btn i {
    margin-right: 5px;
}

/* No celular os 4 rotulos so cabem numa linha se colarem uns nos outros, e
   "Compartilhar" acaba cortado (o bloco de 768px em vitrine.html deixa os
   botoes com min-width:0 + nowrap, o que clipa em vez de quebrar). Vira 2x2.
   Precisa vencer `.interaction-buttons { flex-wrap: nowrap }` daquele bloco,
   que tem a mesma especificidade e vem depois no documento — dai o
   `.vitrine-post` na frente em vez de !important.
   flex:0 0 50% sem shrink: com flex-shrink os itens encolhiam ate o
   min-content e voltavam pra uma linha so, que e o que se quer evitar. */
@media (max-width: 575px) {
    .vitrine-post .interaction-buttons {
        flex-wrap: wrap;
    }

    .vitrine-post .interaction-buttons .vitrine-btn {
        /* 48%, nao 50%: com 50% dois botoes dao 366.67px de largura fracionaria
           num container de 367px e o column-gap de 1px estoura por meio pixel —
           ai o flex quebra em 4 linhas de 1 em vez de 2x2. */
        flex: 0 0 48%;
        margin: 0;
        padding: 8px 4px;
    }
}