/* ══════════════════════════════════════════════════════
   portfolio.css  —  Boni Vitti · Portfólio Editorial
   Estilo: revista de arte, tipografia serifada, lightbox elegante
══════════════════════════════════════════════════════ */

/* ── Tokens ── */
:root {
    --preto:     #0e0d0b;
    --cinza-q:   #1a1916;
    --cinza-m:   #5a5650;
    --cinza-c:   #b0aba4;
    --creme:     #f5f2ed;
    --creme-q:   #ede9e2;
    --terracota: #b85c38;
    --vermelho:  #dd4026;
    --branco:    #ffffff;

    --serif:     Georgia, 'Times New Roman', serif;
    --sans:      'Helvetica Neue', Arial, sans-serif;

    --t-display: clamp(2rem, 5vw, 3.5rem);
    --t-titulo:  clamp(1.1rem, 2.5vw, 1.5rem);
    --t-corpo:   0.9375rem;
    --t-caption: 0.75rem;

    --gap:       clamp(16px, 3vw, 32px);
    --margem:    clamp(20px, 5vw, 80px);
}

/* ── Reset mínimo ── */
.portfolio-wrap *,
.portfolio-wrap *::before,
.portfolio-wrap *::after {
    box-sizing: border-box;
}

/* ── Wrapper ── */
.portfolio-wrap {
    min-height: 100vh;
    padding-bottom: 80px;
}

/* ── Wrapper ── */
.portfolio-content {
    padding-top:3em;
    background: var(--creme);
}


.portfolio-topo  {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.portfolio-topo h1 {
    margin: 0 0 22px;
}


/* =========================================
   FILTROS
========================================= */

.portfolio-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 42px;
}

.portfolio-filtro {
    border: 1px solid #a90000;
    background: #a90000;
    color: #fff;
    padding: 8px 16px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.portfolio-filtro:hover {
    opacity: 0.8;
}

.portfolio-filtro.ativo {
    color: #222 !important;
    border-color: #222 !important;
    background: none !important;
}

/* ── Grade editorial (CSS Grid real, preenche linha por linha) ── */
.portfolio-lista {
    padding: 0 var(--margem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

/* ── Card na grade ── */
.portfolio-card-grade {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: transparent;
}

.portfolio-card-grade.oculto {
    display: none;
}

.portfolio-card-grade img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.portfolio-card-grade:hover img {
    transform: scale(1.03);
}

.portfolio-card-grade-info {
    padding: 14px 16px 18px;
    border-top: 1px solid var(--creme-q);
}

.portfolio-card-grade-titulo {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 400;
    color: var(--preto);
    margin: 0 0 4px;
    line-height: 1.3;
}

.portfolio-card-grade-meta {
    font-family: var(--sans);
    font-size: var(--t-caption);
    color: var(--cinza-m);
    letter-spacing: 0.04em;
}

/* Hover overlay com "Ver obra" */
.portfolio-card-grade-overlay {
    position: absolute;
    inset: 0;
    background: rgba(14,13,11,0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    pointer-events: none;
}

.portfolio-card-grade:hover .portfolio-card-grade-overlay {
    background: rgba(14,13,11,0.35);
}

.portfolio-card-grade-overlay span {
    font-family: var(--sans);
    font-size: var(--t-caption);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--branco);
    border: 1px solid rgba(255,255,255,0.7);
    padding: 8px 20px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s, transform 0.3s;
}

.portfolio-card-grade:hover .portfolio-card-grade-overlay span {
    opacity: 1;
    transform: translateY(0);
}

/* Sem imagem */
.portfolio-card-sem-imagem {
    width: 100%;
    aspect-ratio: 4/3;
    background: var(--creme-q);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-size: var(--t-caption);
    color: var(--cinza-c);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ── Vazio ── */
.portfolio-vazio {
    padding: 80px var(--margem);
    font-family: var(--serif);
    font-size: 1.2rem;
    color: var(--cinza-m);
    text-align: center;
}

/* Separador genérico (spans a linha inteira do grid) */
.pf-separador-categoria {
    grid-column: 1 / -1;
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--preto);
    padding: 32px 0 16px;
    margin-top: 16px;
    width: 100%;
}

/* Separador de tipo (ex: "Homoeróticas") — maior que o de série, com linha acima */
.pf-separador-tipo {
    font-size: 1.9rem;
    font-weight: 600;
    margin-top: 24px;
    border-top: 1px solid var(--cinza-c);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.pf-separador-toggle-btn {
    font-family: var(--sans);
    font-size: var(--t-caption);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--branco);
    background: var(--vermelho);
    border: none;
    padding: 6px 16px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.pf-separador-toggle-btn:hover {
    opacity: 0.85;
    color: var(--branco) !important;
    background: #2a2a2a !important;
}

/* Separador de série (ex: "Série - Retratos Relicários") — sem linha, espaço reduzido */
.pf-separador-serie {
    font-size: 1.4rem;
    margin-top: 0;
    padding-top: 8px;
}

/* ══════════════════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════════════════ */

.pf-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: stretch;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s;
}

.pf-lightbox.aberto {
    opacity: 1;
    pointer-events: all;
}

/* Fundo escuro */
.pf-lightbox-fundo {
    position: absolute;
    inset: 0;
    background: rgba(14,13,11,0.92);
    backdrop-filter: blur(4px);
}

/* Painel interno */
.pf-lightbox-painel {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    max-width: 1100px;
    margin: auto;
    background: var(--branco);
    max-height: 92vh;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}

/* Coluna esquerda: imagem */
.pf-lightbox-imagens {
    flex: 1 1 55%;
    background: var(--preto);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pf-lightbox-img-principal {
    flex: 1;
    object-fit: contain;
    width: 100%;
    display: block;
    max-height: calc(92vh - 80px);
}

.pf-lightbox-miniaturas {
    display: flex;
    gap: 4px;
    padding: 8px;
    background: var(--cinza-q);
    flex-wrap: wrap;
}

.pf-lightbox-miniatura {
    width: 56px;
    height: 56px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
    border: 2px solid transparent;
}

.pf-lightbox-miniatura.ativa,
.pf-lightbox-miniatura:hover {
    opacity: 1;
    border-color: var(--vermelho);
}

/* Coluna direita: info */
.pf-lightbox-info {
    flex: 0 0 340px;
    padding: 40px 36px;
    overflow-y: auto;
    border-left: 1px solid var(--creme-q);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pf-lightbox-titulo {
    font-family: var(--serif);
    font-size: var(--t-titulo);
    font-weight: 400;
    color: var(--preto);
    line-height: 1.25;
    margin: 0;
}

.pf-lightbox-campos {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    align-items: baseline;
}

.pf-lightbox-rotulo {
    font-family: var(--sans);
    font-size: var(--t-caption);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cinza-c);
    white-space: nowrap;
}

.pf-lightbox-valor {
    font-family: var(--serif);
    font-size: var(--t-corpo);
    color: var(--preto);
    line-height: 1.4;
}

.pf-lightbox-descricao {
    font-family: var(--serif);
    font-size: var(--t-corpo);
    color: var(--cinza-m);
    line-height: 1.7;
    border-top: 1px solid var(--creme-q);
    padding-top: 20px;
}

.pf-lightbox-link {
    font-family: var(--sans);
    font-size: var(--t-caption);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vermelho);
    text-decoration: none;
    border-top: 1px solid var(--creme-q);
    padding-top: 20px;
    display: inline-block;
}

.pf-lightbox-link:hover {
    text-decoration: underline;
}

.pf-lightbox-exposicoes {
    border-top: 1px solid var(--creme-q);
    padding-top: 20px;
}

.pf-lightbox-exposicoes h3 {
    font-family: var(--sans);
    font-size: var(--t-caption);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cinza-c);
    margin: 0 0 12px;
    font-weight: 400;
}

.pf-lightbox-exposicao {
    font-family: var(--serif);
    font-size: 0.85rem;
    color: var(--cinza-m);
    line-height: 1.6;
    margin-bottom: 8px;
    padding-left: 12px;
    border-left: 2px solid var(--vermelho);
}

/* Botão fechar */
.pf-lightbox-fechar {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    background: var(--vermelho) !important;
    border: none;
    color: var(--branco) !important;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    line-height: 1;
    padding: 0 0 0 3px;
}

.pf-lightbox-fechar:hover {
    background: #2a2a2a !important;
    color: var(--branco) !important;
}

/* Setas de navegação */
.pf-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(14,13,11,0.7);
    border: none;
    border-radius: 0;
    color: var(--branco);
    width: 44px;
    height: 44px;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    padding: 0;
}

.pf-lightbox-nav:hover { 
    background: rgba(14,13,11,0.85);
    color: var(--branco) !important;  
    
}
.pf-lightbox-prev { left: 0; }
.pf-lightbox-next { right: 0; }

/* ── Responsivo ── */
@media (max-width: 760px) {
    .portfolio-lista {
        grid-template-columns: repeat(2, 1fr);
    }

    .pf-lightbox-painel {
        flex-direction: column;
        max-height: 96vh;
        overflow-y: auto;
    }

    .pf-lightbox-imagens {
        flex: 0 0 auto;
        max-height: 50vh;
    }

    .pf-lightbox-img-principal {
        max-height: 40vh;
    }
    

    .pf-lightbox-info {
        flex: 1;
        border-left: none;
        border-top: 1px solid var(--creme-q);
        padding: 24px 20px;
    }

    .pf-lightbox-nav { display: none; }
}

@media (max-width: 480px) {
    .portfolio-lista {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .portfolio-topo { padding: 32px 20px 0; }
}

/* ── Animação de entrada dos cards ── */
.portfolio-card-grade {
    animation: pf-fade-in 0.4s ease both;
}

@keyframes pf-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-card-grade { animation: none; }
    .pf-lightbox { transition: none; }
}

/* ── Correções WordPress ── */

/* A admin bar empurra o body para baixo (32px desktop, 46px mobile).
   Pintamos html e body de creme para o gap não aparecer. */
html,
body.admin-bar,
body {
    background: var(--creme);
}

/* Lightbox acima da admin bar (z-index 99999) */
.pf-lightbox {
    z-index: 100000 !important;
}