/*
French Version Responsive Fixes - FORCE ALL
*/

/* Fix Images - FORCE ON ALL SCREENS */
html[lang="fr-tn"] .post-thumb,
html[lang="fr-tn"] .thumb-overlay,
html[lang="fr-tn"] .img-hover-scale {
    position: relative !important;
    width: 100% !important;
    height: 250px !important;
    overflow: hidden !important;
    border-radius: 12px 12px 0 0 !important;
}

html[lang="fr-tn"] .post-thumb img,
html[lang="fr-tn"] .thumb-overlay img,
html[lang="fr-tn"] .img-hover-scale img {
    width: 100% !important;
    height: 250px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    min-height: 250px !important;
    max-height: 250px !important;
}

html[lang="fr-tn"] .img-hover-slide {
    width: 100% !important;
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Fix Pagination Direction - FORCE LTR */
html[lang="fr-tn"] .pagination,
html[lang="fr-tn"] .pagination-area,
html[lang="fr-tn"] ul.pagination {
    direction: ltr !important;
    text-align: center !important;
}

html[lang="fr-tn"] .pagination li,
html[lang="fr-tn"] .pagination .page-item {
    direction: ltr !important;
}

html[lang="fr-tn"] .pagination .page-link,
html[lang="fr-tn"] .pagination a {
    direction: ltr !important;
}

/* Article Cards - Better layout */
html[lang="fr-tn"] .loop-list article,
html[lang="fr-tn"] .loop-list .post-card {
    margin-bottom: 25px !important;
    box-shadow: 0 3px 15px rgba(0,0,0,0.1) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: white !important;
}

@media (max-width: 991px) {
    /* Mobile Images */
    html[lang="fr-tn"] .post-thumb,
    html[lang="fr-tn"] .thumb-overlay,
    html[lang="fr-tn"] .img-hover-scale {
        height: 220px !important;
    }
    
    html[lang="fr-tn"] .post-thumb img,
    html[lang="fr-tn"] .thumb-overlay img,
    html[lang="fr-tn"] .img-hover-scale img,
    html[lang="fr-tn"] .img-hover-slide {
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
    }
    
    /* Titles */
    html[lang="fr-tn"] .post-title {
        font-size: 1.3rem !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
    }
    
    html[lang="fr-tn"] .post-title a {
        color: #2d3748 !important;
    }
    
    /* Content padding */
    html[lang="fr-tn"] .post-content {
        padding: 20px !important;
    }
    
    /* Meta info */
    html[lang="fr-tn"] .entry-meta {
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    
    html[lang="fr-tn"] .entry-meta span {
        font-size: 13px !important;
        padding: 6px 12px !important;
    }
    
    /* Read more button */
    html[lang="fr-tn"] .read-more-btn,
    html[lang="fr-tn"] .btn-read-more {
        padding: 10px 25px !important;
        font-size: 14px !important;
        border-radius: 20px !important;
    }
    
    /* Badges */
    html[lang="fr-tn"] .post-in span {
        font-size: 13px !important;
        padding: 8px 16px !important;
        border-radius: 20px !important;
    }
    
    /* Sidebar */
    html[lang="fr-tn"] .sidebar-widget {
        margin-bottom: 25px !important;
        padding: 20px !important;
        border-radius: 12px !important;
        box-shadow: 0 3px 15px rgba(0,0,0,0.08) !important;
    }
    
    /* Social media */
    html[lang="fr-tn"] .social-icon a {
        width: 100% !important;
        margin-bottom: 10px !important;
        padding: 15px !important;
        border-radius: 10px !important;
        font-size: 15px !important;
    }
    
    /* Pagination */
    html[lang="fr-tn"] .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 5px !important;
    }
    
    html[lang="fr-tn"] .pagination .page-link {
        padding: 8px 12px !important;
        min-width: 40px !important;
    }
    
    /* Container */
    html[lang="fr-tn"] .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Section padding */
    html[lang="fr-tn"] .recent-area {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
    
    /* Text */
    html[lang="fr-tn"] p,
    html[lang="fr-tn"] .post-exerpt {
        font-size: 15px !important;
        line-height: 1.7 !important;
        color: #4a5568 !important;
    }
    
    /* Most read */
    html[lang="fr-tn"] .most-read-articles {
        background: white !important;
        padding: 20px !important;
        border-radius: 12px !important;
        margin-bottom: 20px !important;
    }
    
    html[lang="fr-tn"] .most-read-articles h3 {
        font-size: 1.3rem !important;
        margin-bottom: 15px !important;
        color: #2d3748 !important;
    }
}

@media (max-width: 768px) {
    /* Small mobile */
    html[lang="fr-tn"] .post-thumb,
    html[lang="fr-tn"] .thumb-overlay,
    html[lang="fr-tn"] .img-hover-scale {
        height: 200px !important;
    }
    
    html[lang="fr-tn"] .post-thumb img,
    html[lang="fr-tn"] .thumb-overlay img,
    html[lang="fr-tn"] .img-hover-scale img,
    html[lang="fr-tn"] .img-hover-slide {
        height: 200px !important;
        min-height: 200px !important;
        max-height: 200px !important;
    }
    
    html[lang="fr-tn"] .post-title {
        font-size: 1.2rem !important;
    }
    
    html[lang="fr-tn"] .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Desktop improvements */
@media (min-width: 992px) {
    html[lang="fr-tn"] .loop-list article {
        box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        transition: all 0.3s ease !important;
    }
    
    html[lang="fr-tn"] .loop-list article:hover {
        box-shadow: 0 5px 20px rgba(0,0,0,0.15) !important;
        transform: translateY(-5px) !important;
    }
    
    html[lang="fr-tn"] .post-thumb,
    html[lang="fr-tn"] .thumb-overlay,
    html[lang="fr-tn"] .img-hover-scale {
        height: 250px !important;
    }
    
    html[lang="fr-tn"] .post-thumb img,
    html[lang="fr-tn"] .thumb-overlay img,
    html[lang="fr-tn"] .img-hover-scale img,
    html[lang="fr-tn"] .img-hover-slide {
        height: 250px !important;
        min-height: 250px !important;
        max-height: 250px !important;
    }
}