Read More Button

<!-- דוגמה למצב קלאסי (עובד תמיד) -->
<div class="calc-text-height" data-rows="6" data-rows-desktop="3">
    <div class="calc-text-height-inner">
        <p>הזן כאן את הטקסט הארוך שלך...</p>
    </div>
</div>
<button type="button" class="show-calc-text btn-read-more">קרא עוד</button>

<!-- דוגמה למצב בו החיתוך פועל רק במסכים קטנים (הוספת work-on-mobile) -->
<div class="calc-text-height work-on-mobile" data-rows="4">
    <div class="calc-text-height-inner">
        <p>הזן כאן את הטקסט הארוך שלך...</p>
    </div>
</div>
<button type="button" class="show-calc-text btn-read-more">קרא עוד</button>

.calc-text-height {
    overflow: hidden;
}
.calc-text-height p {
    margin: 0;
}
.calc-text-height:not(.work-on-mobile) {
    max-height: 22px;
}
.show-calc-text:not(.active),
.show-calc-text.hide {
    display: none;
}
.calc-text-height.active {
    max-height: none !important;
}

/* אפקט הפייד כשחתוך (מותאם לרקע כהה/בהיר) */
.calc-text-height.is-truncated:not(.active) {
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* עיצוב כפתור הקרא עוד */
.btn-read-more {
    background: transparent;
    border: none;
    color: #71F494;
    font-weight: 600;
    font-size: 15px;
    padding: 10px 0 0 0;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.3s ease;
}
.btn-read-more:hover {
    color: #5ceb82;
}

@media screen and (min-width: 768px) {
    .calc-text-height.work-on-mobile {
        max-height: none !important;
    }
    .calc-text-height.work-on-mobile + .show-calc-text {
        display: none !important;
    }
}
@media screen and (max-width: 767px) {
    .calc-text-height.work-on-mobile {
        max-height: 22px;
    }
}

document.addEventListener("DOMContentLoaded", function() {
    // Click read more (Event Delegation)
    document.body.addEventListener('click', function(e) {
        if (e.target && e.target.classList.contains('show-calc-text')) {
            var btn = e.target;
            var txtDiv = btn.previousElementSibling;
            
            if (txtDiv && txtDiv.classList.contains('calc-text-height')) {
                var isMobileOnly = txtDiv.classList.contains('work-on-mobile');
                var isMobileView = document.documentElement.clientWidth <= 767;

                if (!isMobileOnly || (isMobileOnly && isMobileView)) {
                    txtDiv.classList.toggle('active');
                    
                    // Accessibility update
                    var isActive = txtDiv.classList.contains('active');
                    btn.setAttribute('aria-expanded', isActive ? 'true' : 'false');
                    
                    if (isActive) {
                        btn.textContent = btn.getAttribute('data-close-text') || 'סגור';
                    } else {
                        btn.textContent = btn.getAttribute('data-open-text') || 'קרא עוד';
                    }
                }
            }
        }
    });

    // Calc text height dynamically
    function calc_text_height() {
        var containers = document.querySelectorAll('.calc-text-height');

        containers.forEach(function(parent, i) {
            var btn = parent.nextElementSibling;
            
            // Accessibility setup
            if (btn && btn.classList.contains('show-calc-text')) {
                if (!parent.id) parent.id = 'read-more-content-' + i + '-' + Math.floor(Math.random() * 10000);
                if (!btn.hasAttribute('aria-controls')) {
                    btn.setAttribute('aria-controls', parent.id);
                    btn.setAttribute('aria-expanded', parent.classList.contains('active') ? 'true' : 'false');
                    
                    // שמירת הטקסט המקורי לטובת החלפה מאוחרת
                    if (!btn.hasAttribute('data-open-text')) {
                        btn.setAttribute('data-open-text', btn.textContent);
                    }
                }
            }

            var isMobileOnly = parent.classList.contains('work-on-mobile');
            var isMobileView = document.documentElement.clientWidth <= 767;

            if (!isMobileOnly || (isMobileOnly && isMobileView)) {
                
                // Calculate accurate line height
                var computedStyle = window.getComputedStyle(parent);
                var lineHeight = parseFloat(computedStyle.lineHeight);
                
                if (isNaN(lineHeight)) {
                    lineHeight = parseFloat(computedStyle.fontSize) * 1.2;
                }
                
                // Set dynamic max-height based on rows
                var rowsMobile = parseInt(parent.getAttribute('data-rows'), 10) || 4;
                var rowsDesktop = parseInt(parent.getAttribute('data-rows-desktop'), 10) || rowsMobile;
                var currentRows = isMobileView ? rowsMobile : rowsDesktop;
                
                var fixedHeight = currentRows * lineHeight;
                parent.style.maxHeight = fixedHeight + 'px';
                
                var inner = parent.querySelector('.calc-text-height-inner');
                if (inner) {
                    var dynamicHeight = inner.getBoundingClientRect().height;
                    
                    if (!parent.classList.contains('active') && btn) {
                        if (dynamicHeight > fixedHeight + 1) {
                            btn.classList.add('active');
                            btn.setAttribute('aria-expanded', 'false');
                            parent.classList.add('is-truncated');
                        } else {
                            btn.classList.remove('active');
                            btn.setAttribute('aria-expanded', 'true');
                            parent.classList.remove('is-truncated');
                            parent.style.maxHeight = 'none'; 
                        }
                    }
                }
            } else {
                parent.style.maxHeight = 'none';
                if (btn) btn.classList.remove('active');
            }
        });
    }

    // Initial init
    calc_text_height();
    // חשוב מאוד בסביבת וורדפרס: חישוב חוזר אחרי שכל הפונטים והתמונות סיימו להיטען
    window.addEventListener('load', calc_text_height);

    // Resize debounce
    var resizeTimer;
    window.addEventListener('resize', function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
            calc_text_height();
        }, 150); 
    });
});