/* BRICOLLI M3AK - Magefan Blog Clean Cards */

/* Hide Magefan automatic big featured image only inside post detail page */
.blog-post-view .post-view .post-ftimg-hld,
.blog-post-view .post-view .post-image {
    display: none !important;
}

/* General containers */
.blog-category-view .column.main,
.blog-tag-view .column.main,
.blog-index-index .column.main {
    max-width: 1280px !important;
    margin: 0 auto !important;
    float: none !important;
    width: 100% !important;
}

.blog-category-view .page-title-wrapper,
.blog-tag-view .page-title-wrapper,
.blog-index-index .page-title-wrapper {
    max-width: 1280px !important;
    margin: 0 auto 32px !important;
    padding: 0 15px !important;
}

.blog-category-view .page-title-wrapper h1,
.blog-tag-view .page-title-wrapper h1,
.blog-index-index .page-title-wrapper h1 {
    font-size: 34px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    color: #111827 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

.blog-category-view .page-title-wrapper h1:after,
.blog-tag-view .page-title-wrapper h1:after,
.blog-index-index .page-title-wrapper h1:after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    background: #ffae00;
    border-radius: 99px;
    margin-top: 14px;
}

/* Reset Magefan list layout */
.blog-category-view .post-list-wrapper,
.blog-tag-view .post-list-wrapper,
.blog-index-index .post-list-wrapper {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    clear: both !important;
}

.blog-category-view .post-list,
.blog-tag-view .post-list,
.blog-index-index .post-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
}

/* Card */
.blog-category-view .post-holder,
.blog-tag-view .post-holder,
.blog-index-index .post-holder {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    float: none !important;
    clear: none !important;
    background: #ffffff !important;
    border: 1px solid #e8eaef !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.07) !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

.blog-category-view .post-holder:hover,
.blog-tag-view .post-holder:hover,
.blog-index-index .post-holder:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(0,0,0,.12) !important;
    border-color: rgba(255,174,0,.65) !important;
}

/* Thumbnail top full width */
.blog-category-view .post-ftimg-hld,
.blog-tag-view .post-ftimg-hld,
.blog-index-index .post-ftimg-hld,
.blog-category-view .post-image,
.blog-tag-view .post-image,
.blog-index-index .post-image {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 220px !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #f3f4f6 !important;
    order: 1 !important;
}

.blog-category-view .post-ftimg-hld a,
.blog-tag-view .post-ftimg-hld a,
.blog-index-index .post-ftimg-hld a,
.blog-category-view .post-image a,
.blog-tag-view .post-image a,
.blog-index-index .post-image a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.blog-category-view .post-ftimg-hld img,
.blog-tag-view .post-ftimg-hld img,
.blog-index-index .post-ftimg-hld img,
.blog-category-view .post-image img,
.blog-tag-view .post-image img,
.blog-index-index .post-image img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 220px !important;
    object-fit: cover !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Header and title */
.blog-category-view .post-header,
.blog-tag-view .post-header,
.blog-index-index .post-header {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    clear: both !important;
    padding: 20px 22px 0 !important;
    margin: 0 !important;
    order: 2 !important;
    box-sizing: border-box !important;
}

.blog-category-view .post-title,
.blog-tag-view .post-title,
.blog-index-index .post-title {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    clear: both !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

.blog-category-view .post-title a,
.blog-tag-view .post-title a,
.blog-index-index .post-title a {
    display: block !important;
    color: #111827 !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: normal !important;
}

/* Meta */
.blog-category-view .post-info,
.blog-tag-view .post-info,
.blog-index-index .post-info {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 14px !important;
    width: 100% !important;
    color: #4b5563 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin: 10px 0 14px !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
}

.blog-category-view .post-info a,
.blog-tag-view .post-info a,
.blog-index-index .post-info a {
    color: #111827 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Content */
.blog-category-view .post-content,
.blog-tag-view .post-content,
.blog-index-index .post-content {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    clear: both !important;
    padding: 0 22px 22px !important;
    margin: 0 !important;
    order: 3 !important;
    box-sizing: border-box !important;
}

.blog-category-view .post-description,
.blog-tag-view .post-description,
.blog-index-index .post-description {
    display: block !important;
    width: 100% !important;
    color: #4b5563 !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

.blog-category-view .post-description p,
.blog-tag-view .post-description p,
.blog-index-index .post-description p {
    margin: 0 0 12px !important;
}

/* Read more */
.blog-category-view .post-read-more,
.blog-tag-view .post-read-more,
.blog-index-index .post-read-more {
    margin-top: 16px !important;
}

.blog-category-view .post-read-more a,
.blog-tag-view .post-read-more a,
.blog-index-index .post-read-more a,
.blog-category-view a.action.primary,
.blog-tag-view a.action.primary,
.blog-index-index a.action.primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffae00 !important;
    color: #111827 !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 11px 18px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Post detail meta */
.blog-post-view .post-info {
    background: #f8f9fb !important;
    border: 1px solid #eceff3 !important;
    border-radius: 14px !important;
    padding: 12px 16px !important;
}

/* Arabic RTL */
html[lang^="ar"] .blog-category-view .post-list,
html[lang^="ar"] .blog-tag-view .post-list,
html[lang^="ar"] .blog-index-index .post-list,
body.rtl .blog-category-view .post-list,
body.rtl .blog-tag-view .post-list,
body.rtl .blog-index-index .post-list {
    direction: rtl !important;
}

html[lang^="ar"] .blog-category-view .post-holder,
html[lang^="ar"] .blog-tag-view .post-holder,
html[lang^="ar"] .blog-index-index .post-holder,
body.rtl .blog-category-view .post-holder,
body.rtl .blog-tag-view .post-holder,
body.rtl .blog-index-index .post-holder {
    text-align: right !important;
}

html[lang^="ar"] .blog-category-view .post-title,
html[lang^="ar"] .blog-tag-view .post-title,
html[lang^="ar"] .blog-index-index .post-title,
html[lang^="ar"] .blog-category-view .post-title a,
html[lang^="ar"] .blog-tag-view .post-title a,
html[lang^="ar"] .blog-index-index .post-title a,
body.rtl .blog-category-view .post-title,
body.rtl .blog-tag-view .post-title,
body.rtl .blog-index-index .post-title,
body.rtl .blog-category-view .post-title a,
body.rtl .blog-tag-view .post-title a,
body.rtl .blog-index-index .post-title a {
    text-align: right !important;
    direction: rtl !important;
    writing-mode: horizontal-tb !important;
}

html[lang^="ar"] .blog-category-view .post-info,
html[lang^="ar"] .blog-tag-view .post-info,
html[lang^="ar"] .blog-index-index .post-info,
body.rtl .blog-category-view .post-info,
body.rtl .blog-tag-view .post-info,
body.rtl .blog-index-index .post-info {
    direction: rtl !important;
    justify-content: flex-start !important;
}

html[lang^="ar"] .blog-category-view .page-title-wrapper h1,
html[lang^="ar"] .blog-tag-view .page-title-wrapper h1,
body.rtl .blog-category-view .page-title-wrapper h1,
body.rtl .blog-tag-view .page-title-wrapper h1 {
    text-align: right !important;
}

html[lang^="ar"] .blog-category-view .page-title-wrapper h1:after,
html[lang^="ar"] .blog-tag-view .page-title-wrapper h1:after,
body.rtl .blog-category-view .page-title-wrapper h1:after,
body.rtl .blog-tag-view .page-title-wrapper h1:after {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Responsive */
@media (max-width: 991px) {
    .blog-category-view .post-list,
    .blog-tag-view .post-list,
    .blog-index-index .post-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .blog-category-view .post-list,
    .blog-tag-view .post-list,
    .blog-index-index .post-list {
        grid-template-columns: 1fr !important;
    }

    .blog-category-view .page-title-wrapper h1,
    .blog-tag-view .page-title-wrapper h1,
    .blog-index-index .page-title-wrapper h1 {
        font-size: 26px !important;
    }
}
/* END BRICOLLI M3AK - Magefan Blog Clean Cards */

/* BRICOLLI M3AK - FINAL FIX Magefan card layout */

/* Neutraliser le margin-left négatif venant de blog_custom.css */
.blog-category-view .post-content.post-custom .post-description .post-info-blog,
.blog-tag-view .post-content.post-custom .post-description .post-info-blog,
.blog-index-index .post-content.post-custom .post-description .post-info-blog {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    clear: both !important;
    position: static !important;
    transform: none !important;
    padding: 18px 20px 22px !important;
    box-sizing: border-box !important;
}

/* Forcer la structure image en haut + contenu en bas */
.blog-category-view .post-content.post-custom .post-description,
.blog-tag-view .post-content.post-custom .post-description,
.blog-index-index .post-content.post-custom .post-description {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

/* Image thumbnail propre */
.blog-category-view .post-content.post-custom .post-description .post-ftimg-hld,
.blog-tag-view .post-content.post-custom .post-description .post-ftimg-hld,
.blog-index-index .post-content.post-custom .post-description .post-ftimg-hld {
    display: block !important;
    width: 100% !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    order: 1 !important;
}

/* Supprimer la partie grise sous l’image */
.blog-category-view .post-content.post-custom .post-description .post-ftimg-hld a,
.blog-tag-view .post-content.post-custom .post-description .post-ftimg-hld a,
.blog-index-index .post-content.post-custom .post-description .post-ftimg-hld a {
    display: block !important;
    width: 100% !important;
    height: 220px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
}

/* Image pleine largeur, bien cadrée */
.blog-category-view .post-content.post-custom .post-description .post-ftimg-hld img,
.blog-tag-view .post-content.post-custom .post-description .post-ftimg-hld img,
.blog-index-index .post-content.post-custom .post-description .post-ftimg-hld img {
    display: block !important;
    width: 100% !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Contenu sous image */
.blog-category-view .post-content.post-custom .post-description .post-info-blog,
.blog-tag-view .post-content.post-custom .post-description .post-info-blog,
.blog-index-index .post-content.post-custom .post-description .post-info-blog {
    order: 2 !important;
}

/* Titre lisible */
.blog-category-view .post-info-blog .post-title,
.blog-tag-view .post-info-blog .post-title,
.blog-index-index .post-info-blog .post-title,
.blog-category-view .post-info-blog .post-title a,
.blog-tag-view .post-info-blog .post-title a,
.blog-index-index .post-info-blog .post-title a {
    display: block !important;
    width: 100% !important;
    color: #111827 !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* Extrait */
.blog-category-view .post-info-blog .post-text-hld,
.blog-tag-view .post-info-blog .post-text-hld,
.blog-index-index .post-info-blog .post-text-hld,
.blog-category-view .post-info-blog .post-description,
.blog-tag-view .post-info-blog .post-description,
.blog-index-index .post-info-blog .post-description {
    color: #4b5563 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* RTL arabe propre */
html[lang^="ar"] .blog-category-view .post-info-blog,
html[lang^="ar"] .blog-tag-view .post-info-blog,
html[lang^="ar"] .blog-index-index .post-info-blog,
body.rtl .blog-category-view .post-info-blog,
body.rtl .blog-tag-view .post-info-blog,
body.rtl .blog-index-index .post-info-blog {
    direction: rtl !important;
    text-align: right !important;
}

html[lang^="ar"] .blog-category-view .post-info-blog .post-title,
html[lang^="ar"] .blog-tag-view .post-info-blog .post-title,
html[lang^="ar"] .blog-index-index .post-info-blog .post-title,
html[lang^="ar"] .blog-category-view .post-info-blog .post-title a,
html[lang^="ar"] .blog-tag-view .post-info-blog .post-title a,
html[lang^="ar"] .blog-index-index .post-info-blog .post-title a,
body.rtl .blog-category-view .post-info-blog .post-title,
body.rtl .blog-tag-view .post-info-blog .post-title,
body.rtl .blog-index-index .post-info-blog .post-title,
body.rtl .blog-category-view .post-info-blog .post-title a,
body.rtl .blog-tag-view .post-info-blog .post-title a,
body.rtl .blog-index-index .post-info-blog .post-title a {
    direction: rtl !important;
    text-align: right !important;
    writing-mode: horizontal-tb !important;
}

/* END BRICOLLI M3AK - FINAL FIX */


/* BRICOLLI M3AK - thumbnails only in lists, no automatic big image in post */
.blog-post-view .post-view .post-ftimg-hld,
.blog-post-view .post-view .post-image,
.blog-post-view .post-content.post-custom > .post-description > .post-ftimg-hld {
    display: none !important;
}
/* END BRICOLLI M3AK */