/* ============================================================
   portfolio.css  —  პორტფოლიოს გვერდის სტილები
   გამოიყენება: PortfolioView-ში
   ============================================================ */

/* ── Portfolio Grid ─────────────────────────────────────── */
#portfolio-grid {
    min-height: 200px;
    position: relative;
    transition: opacity .2s ease;
}
#portfolio-grid.is-loading {
    opacity: .4;
    pointer-events: none;
}

/* ── Loader ─────────────────────────────────────────────── */
#portfolio-loader {
    display: none;
    position: absolute;
    top: 60px; left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}
#portfolio-loader svg {
    width: 36px; height: 36px;
    color: #fff;
    animation: tp-spin .9s linear infinite;
}
[data-theme="light"] #portfolio-loader svg { color: #222; }
@keyframes tp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
#portfolio-loader.visible { display: block; }

/* ── Empty State ────────────────────────────────────────── */
#portfolio-empty {
    display: none;
    text-align: center;
    padding: 60px 20px;
    color: rgba(255,255,255,.4);
    font-size: 15px;
}
[data-theme="light"] #portfolio-empty { color: rgba(0,0,0,.35); }
#portfolio-empty.visible { display: block; }

/* ── Item Fade-in Animation ─────────────────────────────── */
@keyframes pf-fade-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.portfolio-item-animated { animation: pf-fade-in .35s ease forwards; }

/* ── Tabs Mobile Responsive ─────────────────────────────── */
@media (max-width: 991px) {
    #nav-tab {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 5px 8px !important;
        padding: 0 16px;
        margin-bottom: 30px !important;
    }
    #nav-tab .nav-link {
        font-size: 14px !important;
        /*padding: 4px 5px !important;*/
        white-space: nowrap;
    }
}
@media (max-width: 480px) {
    #nav-tab {
        gap: 8px 20px !important;
        padding: 0 10px;
    }
    #nav-tab .nav-link {
        font-size: 14px !important;
        /*padding: 7px 12px !important;*/
    }
}