/* Portfolio přehled + detail projektu */

/* Úvodní heslo */
.portfolio-lead {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 500;
    color: var(--text-2);
    margin-bottom: var(--s-6);
}

/* Filtr kategorií — textové taby */
.filter-tabs {
    display: flex;
    gap: var(--s-2);
    margin-bottom: var(--s-6);
    flex-wrap: wrap;
}
.filter-tab {
    padding: 8px 18px;
    border-radius: 50px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-2);
    border: 1px solid transparent;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.filter-tab:hover { color: var(--text); }
.filter-tab.is-active { color: var(--text); border-color: var(--border-strong); }

/* ── Pinterest masonry grid ── */
.masonry { column-count: 3; column-gap: var(--s-3); }
@media (max-width: 900px) { .masonry { column-count: 2; } }
@media (max-width: 520px) { .masonry { column-count: 1; } }

.masonry-item {
    display: block;
    break-inside: avoid;
    margin-bottom: var(--s-3);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--card);
    position: relative;
    -webkit-column-break-inside: avoid;
}
.work-media { position: relative; line-height: 0; }
.work-media img,
.work-media video { width: 100%; height: auto; display: block; transition: transform var(--t); }
.masonry-item.is-case { cursor: pointer; }
.masonry-item.is-case:hover .work-media img,
.masonry-item.is-case:hover .work-media video { transform: scale(1.04); }
.work-card-empty {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4 / 3; color: var(--text-3);
}

/* Overlay s názvem (na hover) */
.work-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: flex-end;
    padding: var(--s-3);
    background: linear-gradient(to top, rgba(0, 0, 0, .62), transparent 55%);
    opacity: 0;
    transition: opacity var(--t);
    pointer-events: none;
}
.masonry-item:hover .work-overlay { opacity: 1; }
@media (hover: none) { .work-overlay { opacity: 1; } }
.work-overlay-title { display: block; font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; }
.work-overlay-cat { display: block; font-size: var(--fs-xs); color: var(--text-2); margin-top: 2px; }

/* „Case study" odznak — jen u case-study dlaždic */
.work-cta {
    position: absolute; top: var(--s-3); right: var(--s-3);
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 50px;
    background: var(--accent); color: #fff;
    font-size: var(--fs-xs); font-weight: 700; line-height: 1;
    opacity: 0; transform: translateY(-4px);
    transition: opacity var(--t), transform var(--t);
}
.masonry-item.is-case:hover .work-cta { opacity: 1; transform: none; }
@media (hover: none) { .work-cta { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .work-media img, .work-media video { transition: none; }
    .masonry-item.is-case:hover .work-media img,
    .masonry-item.is-case:hover .work-media video { transform: none; }
}

/* Detail projektu */
.proj-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--s-5); }
.proj-back:hover { color: var(--text); }
.proj-title { font-size: var(--fs-3xl); margin-bottom: var(--s-2); }
.proj-meta { color: var(--text-2); font-size: var(--fs-sm); margin-bottom: var(--s-5); }
.proj-media { margin-bottom: var(--s-5); }
.proj-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-5);
    margin-bottom: var(--s-7);
    flex-wrap: wrap;
}
.proj-description { max-width: 640px; color: var(--text-2); }
.proj-actions { display: flex; gap: var(--s-3); align-items: center; }
.proj-like-heart { transition: color var(--t-fast); }
.proj-like.is-liked { border-color: rgba(200, 16, 46, .5); }
.proj-like.is-liked .proj-like-heart { color: var(--accent-hover); }
.proj-gallery { margin-bottom: var(--s-7); }
.proj-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    border-top: 1px solid var(--border);
    padding-top: var(--s-5);
}
.proj-nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    color: var(--text-2);
    transition: color var(--t-fast);
    max-width: 45%;
}
.proj-nav-link:hover { color: var(--text); }
.proj-nav-link--next { text-align: right; margin-left: auto; }