/* 2025 Portfolio – Twenty Twenty-Five */

#pf-main {
    --accent: #0ea5e9;
    --radius: 12px;
    --gap: 20px;
    --cols: 3;
}

.pf-header { padding: clamp(2rem,5vw,4rem) 0 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.pf-header-inner { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1rem,4vw,2.5rem); }
.pf-title { font-size: clamp(2rem,5vw,3.5rem); font-weight: 700; margin: 0 0 1.5rem; line-height: 1.1; }

.pf-filter { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 1.5rem; }
.pf-filter-btn {
    padding: 8px 20px; border: 1.5px solid rgba(0,0,0,.12); border-radius: 999px;
    background: transparent; font-size: .875rem; font-family: inherit; font-weight: 500;
    color: inherit; cursor: pointer; transition: all .2s ease; line-height: 1;
}
.pf-filter-btn:hover, .pf-filter-btn.pf-active {
    background: var(--wp--preset--color--contrast, #000);
    border-color: var(--wp--preset--color--contrast, #000);
    color: var(--wp--preset--color--base, #fff);
}

.pf-container { max-width: 1200px; margin: 0 auto; padding: clamp(1.5rem,4vw,2.5rem) clamp(1rem,4vw,2.5rem) 4rem; }
.pf-empty { text-align: center; padding: 4rem 1rem; color: #6b7280; font-size: 1.1rem; }
.pf-empty a { color: var(--accent); }

.pf-masonry { columns: var(--cols); column-gap: var(--gap); }

.pf-card {
    break-inside: avoid; margin-bottom: var(--gap); border-radius: var(--radius);
    overflow: hidden; background: #fff; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
    transition: transform .25s ease, box-shadow .25s ease;
    animation: pf-in .4s ease both;
}
.pf-card.pf-hidden { display: none; }
.pf-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,.14); }
@keyframes pf-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.pf-card:nth-child(1){animation-delay:0ms} .pf-card:nth-child(2){animation-delay:60ms}
.pf-card:nth-child(3){animation-delay:120ms} .pf-card:nth-child(4){animation-delay:180ms}
.pf-card:nth-child(5){animation-delay:240ms} .pf-card:nth-child(6){animation-delay:300ms}

.pf-card-image { position: relative; overflow: hidden; line-height: 0; background: #f3f4f6; }
.pf-card-image img { width:100%; height:auto; display:block; aspect-ratio:4/3; object-fit:cover; transition: transform .5s ease; }
.pf-card:hover .pf-card-image img { transform: scale(1.04); }

.pf-card-placeholder { aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#f3f4f6,#e5e7eb); color:#9ca3af; }
.pf-card-placeholder svg { width:48px; height:48px; }

.pf-card-overlay { position:absolute; inset:0; background:color-mix(in srgb, var(--card-accent) 85%, black); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .25s ease; }
.pf-card:hover .pf-card-overlay { opacity:1; }
.pf-card-view { color:#fff; font-weight:600; font-size:.875rem; padding:8px 20px; border:2px solid rgba(255,255,255,.6); border-radius:999px; }

.pf-card-body { padding:14px 16px 16px; border-top:3px solid var(--card-accent); }
.pf-card-title { margin:0 0 4px; font-size:1rem; font-weight:700; color:#111; line-height:1.3; }
.pf-card-cats { margin:0; font-size:.8rem; color:var(--card-accent); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }

/* Lightbox */
.pf-lightbox { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:20px; }
.pf-lightbox[hidden] { display:none; }
.pf-lb-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.8); backdrop-filter:blur(6px); }
.pf-lb-panel {
    position:relative; background:#fff; border-radius:16px; max-width:900px; width:100%;
    max-height:92vh; overflow:hidden; box-shadow:0 32px 80px rgba(0,0,0,.4);
    display:grid; grid-template-columns:1fr 1fr;
    animation:pf-lb-in .3s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes pf-lb-in { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
.pf-lb-close { position:absolute; top:12px; right:12px; z-index:10; width:36px; height:36px; border-radius:50%; border:none; background:rgba(0,0,0,.4); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.pf-lb-close:hover { background:#ef4444; }
.pf-lb-close svg { width:18px; height:18px; }
.pf-lb-media { background:#111; display:flex; align-items:center; justify-content:center; min-height:300px; overflow:hidden; }
.pf-lb-media img { width:100%; height:100%; object-fit:cover; display:block; }
.pf-lb-no-img { display:flex; align-items:center; justify-content:center; width:100%; min-height:300px; background:#1f2937; color:#4b5563; }
.pf-lb-no-img svg { width:64px; height:64px; }
.pf-lb-content { padding:32px 28px; overflow-y:auto; max-height:92vh; display:flex; flex-direction:column; gap:16px; }
.pf-lb-accent { width:40px; height:4px; border-radius:2px; }
.pf-lb-title { font-size:1.5rem; font-weight:800; margin:0; color:#111; line-height:1.2; }
.pf-lb-cats { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin:0; }
.pf-lb-desc { font-size:.9rem; color:#4b5563; line-height:1.7; margin:0; }
.pf-lb-meta { display:grid; grid-template-columns:1fr 1fr; gap:12px; background:#f9fafb; border-radius:10px; padding:14px; }
.pf-lb-meta-item strong { display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:#9ca3af; margin-bottom:3px; }
.pf-lb-meta-item span { font-size:.875rem; font-weight:600; color:#111; }
.pf-lb-actions { display:flex; gap:10px; margin-top:auto; padding-top:4px; }
.pf-lb-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; border-radius:8px; font-size:.875rem; font-weight:700; text-decoration:none; border:2px solid transparent; transition:all .2s; color:#fff; }
.pf-lb-btn:hover { filter:brightness(1.1); }

@media (max-width:960px) { #pf-main { --cols:2; } }
@media (max-width:640px) {
    #pf-main { --cols:1; }
    .pf-lb-panel { grid-template-columns:1fr; max-height:95vh; overflow-y:auto; }
    .pf-lb-media { min-height:220px; }
    .pf-lb-content { max-height:none; }
}
@media (prefers-color-scheme:dark) {
    .pf-card { background:#1f2937; }
    .pf-card-title { color:#f9fafb; }
    .pf-lb-panel { background:#1f2937; }
    .pf-lb-title { color:#f9fafb; }
    .pf-lb-meta { background:#111827; }
    .pf-lb-meta-item span { color:#f9fafb; }
    .pf-lb-desc { color:#9ca3af; }
}