.elementor-502 .elementor-element.elementor-element-0368de3{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for shortcode, class: .elementor-element-e694e13 */<style>
    /* --- הגדרות בסיס --- */
    @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700;900&display=swap');

    .staffic-portfolio-wrapper {
        direction: rtl;
        font-family: 'Rubik', sans-serif;
        background-color: #020b1c;
        padding: 60px 10px; /* הקטנתי ריווח צדדי למובייל */
        box-sizing: border-box;
    }

    .portfolio-inner {
        max-width: 1200px;
        margin: 0 auto;
    }

    .portfolio-main-title {
        text-align: center;
        color: #fff;
        font-size: 32px;
        font-weight: 800;
        margin-bottom: 30px;
    }

    /* --- ניווט (Tabs) --- */
    .pf-filter-nav {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 40px;
        flex-wrap: wrap;
    }

    .pf-filter-btn {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #8daab9;
        padding: 8px 20px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: 'Rubik', sans-serif;
    }

    .pf-filter-btn.active {
        background: #0061ff;
        border-color: #0061ff;
        color: #fff;
        box-shadow: 0 5px 15px rgba(0, 97, 255, 0.3);
    }

    /* --- הגריד (מותאם למובייל - 2 בשורה) --- */
    .pf-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 🔥 2 בשורה במובייל */
        gap: 12px; /* רווח קטן ומהודק במובייל */
        transition: all 0.3s ease;
    }

    /* --- הכרטיס --- */
    .pf-card {
        background: #0a1020;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px; /* פינות מעוגלות עדינות יותר למובייל */
        overflow: hidden;
        display: flex;
        flex-direction: column;
        animation: fadeInCard 0.5s ease forwards;
        position: relative;
    }

    @keyframes fadeInCard {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* --- תמונה (לחיצה פותחת) --- */
    .pf-image-box {
        width: 100%;
        height: 160px; /* גובה התחלתי למובייל */
        overflow: hidden;
        position: relative;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        cursor: zoom-in; /* אייקון זכוכית מגדלת */
    }

    /* אייקון הגדלה על התמונה */
    .pf-image-box::after {
        content: '⤢'; /* אייקון הרחבה */
        position: absolute;
        top: 10px;
        left: 10px;
        color: white;
        background: rgba(0,0,0,0.5);
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
    }

    .pf-image-box:hover::after { opacity: 1; }

    /* יחס תמונה - תוצאות (רחב) */
    .category-results .pf-image-box {
        height: auto !important;
        aspect-ratio: 3684 / 1528;
    }

    /* יחס תמונה - מודעות (אנכי) */
    .category-ads .pf-image-box {
        height: auto !important;
        aspect-ratio: 3 / 4;
    }

    .pf-image-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        transition: transform 0.5s ease;
    }

    /* --- תוכן (ממורכז) --- */
    .pf-content {
        padding: 15px 10px; /* פדינג קטן למובייל */
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center;      
        text-align: center;       
        justify-content: flex-start;
    }

    .pf-title {
        font-size: 16px; /* פונט מותאם למובייל */
        font-weight: 700;
        color: #fff;
        margin: 0 0 5px 0;
        line-height: 1.2;
    }

    .pf-desc {
        font-size: 12px; /* תיאור קטן ונקי */
        color: #aab8c2;
        line-height: 1.4;
        margin: 0 0 12px 0;
        flex-grow: 1;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* מגביל ל-3 שורות כדי שלא ישבור גובה */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .pf-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 16px;
        background: rgba(255, 255, 255, 0.05);
        color: #00c6ff;
        border-radius: 6px;
        text-decoration: none;
        font-size: 12px;
        font-weight: 600;
        border: 1px solid rgba(0, 198, 255, 0.2);
        width: 100%; /* כפתור רחב במובייל */
        box-sizing: border-box;
    }

    .pf-hidden { display: none !important; }

    /* --- Lightbox (החלון הקופץ) --- */
    .pf-lightbox {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.95);
        z-index: 99999;
        justify-content: center;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .pf-lightbox.active {
        display: flex;
        opacity: 1;
    }

    .pf-lightbox img {
        max-width: 100%;
        max-height: 90vh;
        object-fit: contain;
        border-radius: 8px;
        box-shadow: 0 0 50px rgba(0,0,0,0.5);
        transform: scale(0.9);
        transition: transform 0.3s ease;
    }

    .pf-lightbox.active img { transform: scale(1); }

    .pf-lightbox-close {
        position: absolute;
        top: 20px;
        right: 20px;
        color: #fff;
        font-size: 40px;
        cursor: pointer;
        background: none;
        border: none;
        z-index: 100000;
    }

    /* --- התאמות לדסקטופ --- */
    @media (min-width: 768px) {
        .pf-grid {
            grid-template-columns: repeat(2, 1fr); /* 2 בטאבלט */
            gap: 25px;
        }
        .pf-content { padding: 25px; }
        .pf-title { font-size: 20px; }
        .pf-desc { font-size: 15px; -webkit-line-clamp: 10; }
        .pf-btn { width: auto; font-size: 14px; padding: 10px 24px; }
        .pf-image-box { height: 240px; } /* חזרה לגובה רגיל בדסקטופ לאתרים */
    }

    @media (min-width: 1024px) {
        .pf-grid {
            grid-template-columns: repeat(3, 1fr); /* 3 בדסקטופ */
        }
    }
</style>

<div class="staffic-portfolio-wrapper">
    <div class="portfolio-inner">
        
        <h2 class="portfolio-main-title">העבודות שלנו</h2>

        <div class="pf-filter-nav">
            <button class="pf-filter-btn active" onclick="filterItems('all', this)">הכל</button>
            <button class="pf-filter-btn" onclick="filterItems('sites', this)">אתרים</button>
            <button class="pf-filter-btn" onclick="filterItems('results', this)">תוצאות</button>
            <button class="pf-filter-btn" onclick="filterItems('ads', this)">מודעות</button>
        </div>

        <div class="pf-grid" id="portfolioGrid">
            <div class="pf-card category-results">
                <div class="pf-image-box" onclick="openLightbox(this)">
                    <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop" alt="דוגמה">
                </div>
                <div class="pf-content">
                    <h3 class="pf-title">דוגמה לתוצאה</h3>
                    <p class="pf-desc">תיאור קצר...</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="pf-lightbox" id="portfolioLightbox" onclick="closeLightbox()">
    <button class="pf-lightbox-close">&times;</button>
    <img id="lightboxImg" src="" alt="Full Screen">
</div>

<script>
    // 1. פונקציית סינון (כמו קודם, עם התאמה למובייל 2 עמודות)
    function filterItems(category, btn) {
        const buttons = document.querySelectorAll('.pf-filter-btn');
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        const grid = document.getElementById('portfolioGrid');
        const screenWidth = window.innerWidth;
        const items = document.querySelectorAll('.pf-card');

        // הגדרת עמודות לפי מסך וקטגוריה
        let columns = "repeat(2, 1fr)"; // מובייל דיפולט: 2 עמודות!

        if (screenWidth >= 1024) { 
            // דסקטופ
            if (category === 'results') columns = "repeat(2, 1fr)";
            else if (category === 'ads') columns = "repeat(4, 1fr)";
            else columns = "repeat(3, 1fr)";
        } 
        
        grid.style.gridTemplateColumns = columns;

        items.forEach(item => {
            if (category === 'all') {
                item.classList.remove('pf-hidden');
            } else {
                if (item.classList.contains('category-' + category)) {
                    item.classList.remove('pf-hidden');
                } else {
                    item.classList.add('pf-hidden');
                }
            }
        });
    }

    // 2. Lightbox Functions
    function openLightbox(element) {
        const img = element.querySelector('img');
        const lightbox = document.getElementById('portfolioLightbox');
        const lightboxImg = document.getElementById('lightboxImg');

        if(img && lightbox && lightboxImg) {
            lightboxImg.src = img.src;
            lightbox.classList.add('active');
            // מניעת גלילה של הדף מאחורה
            document.body.style.overflow = 'hidden';
        }
    }

    function closeLightbox() {
        const lightbox = document.getElementById('portfolioLightbox');
        lightbox.classList.remove('active');
        document.body.style.overflow = 'auto'; // החזרת גלילה
    }
</script>/* End custom CSS */