<div class="article-travel-equipment position-relative overflow-hidden">
    <a href="<?php the_permalink(); ?>" class="stretched-link" aria-label="<?php echo esc_attr(get_the_title()); ?>"></a>
    
    <div class="bg position-absolute top-0 end-0 w-100 h-100"
        style="background-image: url(<?php echo has_post_thumbnail() ? get_the_post_thumbnail_url(get_the_ID(), 'full') : KAVEH_TEMPLATE_URI . '/assets/images/new-elements/article-03.png'; ?>);">
    </div>
    
    <div class="content d-flex align-items-center justify-content-between gap-2 position-absolute bottom-0 end-0 w-100">
        <div class="text-truncate">
            <h2 class="title text-white fw-bold mb-1 text-truncate"><?php
$title = get_the_title();
if ( wp_is_mobile() ) {
    echo wp_trim_words( $title, 5, '...' );
} else {
    echo wp_trim_words( $title, 8, '...' );
}
?></h2>
            
            <?php
            // Calculate reading time (assuming ~200 words per minute)
            $word_count = str_word_count(strip_tags(get_the_content()));
            $reading_time = ceil($word_count / 200);
            ?>
            
            <div class="date d-flex align-items-center f-yekan-bakh text-white gap-1">
                <i class="icon-clock-3 lh-1"></i>
               <?php esc_html_e('Update Date:', 'kavehTheme'); ?>
                <span><?php echo get_the_date(); ?></span>
            </div>
        </div>
        
        <i class="isax isax-arrow-left4 d-flex align-items-center justify-content-center text-white lh-1 rounded-circle flex-fill flex-grow-0 flex-shrink-0"></i>
    </div>
</div>