/* ============================================
   PORTFOLIO — ESTÉTICA EDITORIAL PREMIUM
   Inspiração: Wallpaper*, Kinfolk, agências tier-1
   Cole em: Aparência → Personalizar → CSS Adicional
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Mono:wght@300;400&display=swap');

/* ---- TOKENS ---- */
:root {
    --p-ink:         #0d0d0b;
    --p-ink-mid:     #3a3935;
    --p-ink-faint:   rgba(13,13,11,0.13);
    --p-paper:       #f5f3ee;
    --p-accent:      #c8a46e;
    --p-accent-cool: #2d4a3e;
    --p-rule:        rgba(13,13,11,0.11);
    --p-mono:        'DM Mono', ui-monospace, monospace;
    --p-serif:       'Playfair Display', Georgia, serif;
    --p-sans:        'Helvetica Neue', Arial, sans-serif;
    --p-ease-reveal: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- SECTION WRAPPER ---- */
.portfolio-section,
.portfolio-wrap,
[class*="portfolio-container"] {
    background: var(--p-paper) !important;
    font-family: var(--p-sans) !important;
    color: var(--p-ink) !important;
}

/* ============================================
   HEADER DA SEÇÃO
   ============================================ */

.portfolio-header {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: end !important;
    padding: 64px 48px 40px !important;
    border-bottom: 1px solid var(--p-rule) !important;
    background: transparent !important;
}

.portfolio-eyebrow,
.portfolio-section-label {
    font-family: var(--p-mono) !important;
    font-size: 10px !important;
    font-weight: 300 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--p-ink-mid) !important;
    margin-bottom: 16px !important;
    display: block !important;
}

.portfolio-heading,
.section-title {
    font-family: var(--p-serif) !important;
    font-size: clamp(28px, 3.5vw, 48px) !important;
    font-weight: 400 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
    color: var(--p-ink) !important;
}

.portfolio-heading em {
    font-style: italic !important;
    color: var(--p-accent-cool) !important;
}

/* ============================================
   FILTROS — ESTILO TEXTO UNDERLINE EDITORIAL
   ============================================ */

.portfolio-categories,
.portfolio-filters {
    display: flex !important;
    gap: 0 !important;
    padding: 0 48px !important;
    border-bottom: 1px solid var(--p-rule) !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    background: transparent !important;
    margin: 0 !important;
}

.portfolio-categories::-webkit-scrollbar,
.portfolio-filters::-webkit-scrollbar { display: none !important; }

.category-filter,
.portfolio-filter-btn {
    /* Reset de pill button */
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    /* Estilo underline editorial */
    border-bottom: 2px solid transparent !important;
    padding: 20px 0 !important;
    margin-right: 36px !important;
    flex-shrink: 0 !important;

    font-family: var(--p-mono) !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: rgba(13,13,11,0.42) !important;

    cursor: pointer !important;
    transition: color 0.2s ease, border-color 0.25s ease !important;
    transform: none !important;
    line-height: 1 !important;
}

.category-filter:hover,
.portfolio-filter-btn:hover {
    color: var(--p-ink) !important;
    border-bottom-color: var(--p-ink-faint) !important;
    background: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.category-filter.active,
.portfolio-filter-btn.active {
    color: var(--p-ink) !important;
    border-bottom-color: var(--p-ink) !important;
    background: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ============================================
   GRID
   ============================================ */

.portfolio-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1px !important;
    border-left: 1px solid var(--p-rule) !important;
    border-right: 1px solid var(--p-rule) !important;
    margin: 0 !important;
}

/* ============================================
   CARD
   ============================================ */

.portfolio-card {
    position: relative !important;
    aspect-ratio: 3 / 5 !important;
    overflow: hidden !important;
    cursor: pointer !important;
    border-radius: 0 !important;                          /* sem bordas arredondadas */
    background: #111 !important;
    box-shadow: none !important;
    border-right: 1px solid var(--p-rule) !important;
    border-bottom: 1px solid var(--p-rule) !important;
    animation: p-card-in 0.55s ease forwards !important;
    /*opacity: 0 !important; */
    transform: translateY(14px) !important;
}

/* Remove borda da última coluna */
.portfolio-card:nth-child(4n) { border-right: none !important; }

/* Stagger */
.portfolio-card:nth-child(1) { animation-delay: 0.05s !important; }
.portfolio-card:nth-child(2) { animation-delay: 0.12s !important; }
.portfolio-card:nth-child(3) { animation-delay: 0.19s !important; }
.portfolio-card:nth-child(4) { animation-delay: 0.26s !important; }
.portfolio-card:nth-child(5) { animation-delay: 0.33s !important; }
.portfolio-card:nth-child(6) { animation-delay: 0.40s !important; }
.portfolio-card:nth-child(7) { animation-delay: 0.47s !important; }
.portfolio-card:nth-child(8) { animation-delay: 0.54s !important; }

@keyframes p-card-in {
    to { opacity: 1; transform: translateY(0); }
}

/* Hover sutil no card */
.portfolio-card:hover {
    transform: none !important;
    box-shadow: none !important;
    z-index: 1 !important;
}

/* ---- IMAGEM ---- */
.portfolio-card-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

.portfolio-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    filter: saturate(0.85) brightness(0.96) !important;
    transition: transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94),
                filter 0.5s ease !important;
}

.portfolio-card:hover .portfolio-card-image img {
    transform: scale(1.06) !important;
    filter: saturate(1) brightness(1.02) !important;
}

/* ---- OVERLAY ORIGINAL — REMOVIDO ---- */
.portfolio-card-overlay { display: none !important; }

/* ---- CONTEÚDO: CORTE DIAGONAL + SLIDE ---- */
.portfolio-card-content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 3 !important;
    padding: 32px 24px 26px !important;

    /* Gradiente escuro — sem cor saturada */
    background: linear-gradient(
        to top,
        rgba(13,13,11,0.95) 0%,
        rgba(13,13,11,0.72) 55%,
        transparent 100%
    ) !important;

    /* Corte diagonal no topo do painel */
    clip-path: polygon(0 18%, 100% 0%, 100% 100%, 0% 100%) !important;

    /* Escondido até hover */
    transform: translateY(100%) !important;
    opacity: 1 !important;
    transition: transform 0.42s var(--p-ease-reveal),
                clip-path 0.42s var(--p-ease-reveal) !important;
}

.portfolio-card:hover .portfolio-card-content {
    transform: translateY(0) !important;
    clip-path: polygon(0 8%, 100% 0%, 100% 100%, 0% 100%) !important;
}

/* Remove o ::before genérico */
.portfolio-card-content::before { display: none !important; }

/* Linha decorativa — underline dourado fino */
.portfolio-card-content::after {
    content: '' !important;
    display: block !important;
    width: 24px !important;
    height: 1px !important;
    background: var(--p-accent) !important;
    margin-bottom: 14px !important;
    transform-origin: left !important;
    transform: scaleX(0) !important;
    transition: transform 0.35s 0.15s var(--p-ease-reveal) !important;
}

.portfolio-card:hover .portfolio-card-content::after {
    transform: scaleX(1) !important;
}

/* ---- CATEGORIA ---- */
.portfolio-card-category {
    font-family: var(--p-mono) !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: rgba(245,243,238,0.5) !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: block !important;
    margin-bottom: 8px !important;
}

/* ---- TÍTULO ---- */
.portfolio-card-title {
    font-family: var(--p-serif) !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    color: #f5f3ee !important;
    margin-bottom: 14px !important;
}

/* ---- MÉTRICAS ---- */
.portfolio-card-metrics {
    display: flex !important;
    gap: 16px !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 14px !important;
    flex-wrap: wrap !important;
}

.metric-value {
    font-family: var(--p-mono) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--p-accent) !important;
    display: block !important;
    line-height: 1 !important;
}

.metric-label {
    font-family: var(--p-mono) !important;
    font-size: 8px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(245,243,238,0.38) !important;
    margin-top: 3px !important;
    display: block !important;
}

/* ---- TECH BADGES ---- */
.portfolio-card-tech { margin-bottom: 14px !important; }

.tech-item {
    font-family: var(--p-mono) !important;
    font-size: 8.5px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    background: rgba(245,243,238,0.06) !important;
    color: rgba(245,243,238,0.5) !important;
    border: 1px solid rgba(245,243,238,0.1) !important;
    border-radius: 0 !important;
    padding: 3px 8px !important;
}

.tech-item i { color: var(--p-accent) !important; }

/* ---- FOOTER / CTA ---- */
.portfolio-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.portfolio-card-link {
    font-family: var(--p-mono) !important;
    font-size: 9.5px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: rgba(245,243,238,0.6) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: color 0.2s !important;
}

.portfolio-card-link:hover,
.portfolio-card:hover .portfolio-card-link { color: #f5f3ee !important; }

.portfolio-card-link i,
.portfolio-card-link .fa-arrow-right {
    transition: transform 0.2s ease !important;
}

.portfolio-card:hover .portfolio-card-link i,
.portfolio-card:hover .portfolio-card-link .fa-arrow-right {
    transform: translateX(4px) !important;
}

.portfolio-card-stats {
    font-family: var(--p-mono) !important;
    font-size: 9px !important;
    color: rgba(245,243,238,0.35) !important;
    display: flex !important;
    gap: 10px !important;
}

.portfolio-card-stats i { color: rgba(200,164,110,0.55) !important; }

/* ---- BADGES (DESTAQUE) ---- */
.portfolio-card-badges { z-index: 4 !important; }

.badge-featured {
    background: rgba(200,164,110,0.92) !important;
    color: var(--p-ink) !important;
    font-family: var(--p-mono) !important;
    font-size: 8.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: 4px 9px !important;
    border-radius: 0 !important;
}

.badge-category {
    background: rgba(13,13,11,0.55) !important;
    color: rgba(245,243,238,0.75) !important;
    font-family: var(--p-mono) !important;
    font-size: 8px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 4px 9px !important;
    border-radius: 0 !important;
    border: 1px solid rgba(245,243,238,0.12) !important;
}

/* ---- EXCERTO ---- */
.portfolio-card-excerpt {
    font-family: var(--p-sans) !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: rgba(245,243,238,0.6) !important;
    margin-bottom: 12px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ============================================
   RESPONSIVIDADE
   ============================================ */

@media (max-width: 1280px) {
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .portfolio-card:nth-child(4n) {
        border-right: 1px solid var(--p-rule) !important;
    }
    .portfolio-card:nth-child(3n) {
        border-right: none !important;
    }
}

@media (max-width: 900px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        margin: 0 24px !important;
    }
    .portfolio-categories,
    .portfolio-filters {
        padding: 0 24px !important;
    }
    .portfolio-header {
        grid-template-columns: 1fr !important;
        padding: 40px 24px 28px !important;
    }
    .portfolio-card:nth-child(3n) {
        border-right: 1px solid var(--p-rule) !important;
    }
    .portfolio-card:nth-child(2n) {
        border-right: none !important;
    }
}

@media (max-width: 500px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        margin: 0 12px !important;
        gap: 0 !important;
    }

    /* Mobile: painel sempre visível */
    .portfolio-card-content {
        transform: translateY(0) !important;
        clip-path: polygon(0 12%, 100% 0%, 100% 100%, 0% 100%) !important;
        padding: 16px 14px 14px !important;
    }

    .portfolio-card-excerpt,
    .portfolio-card-metrics,
    .portfolio-card-tech,
    .portfolio-card-stats {
        display: none !important;
    }

    .portfolio-card-title {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }

    .portfolio-card-content::after {
        display: none !important;
    }

    .category-filter,
    .portfolio-filter-btn {
        font-size: 9px !important;
        padding: 14px 0 !important;
        margin-right: 22px !important;
    }
}