/* =========================================================
   CACAR BLOG CARD STYLE
   FINAL STABLE VERSION
   2026-09-11

   VERIFIED MODULE:
   .visual_plugins_container[data-type="news"][data-mode="mode_31"]

   FINAL STRUCTURE
   Desktop : 3 columns
   Tablet  : 2 columns
   Mobile  : 1 column

   IMPORTANT
   - Article area follows Hero / Categories width
   - No 5-column layout
   - No secondary 980px "box inside box"
   - No 6-column trick
   - No left / translate positioning
   - READ MORE can be edited in UEESHOP
   - Button settings will not control article grid
   ========================================================= */


/* =========================================================
   01. MODULE OUTER
   Do not create a second independent content width.
   ========================================================= */

.visual_plugins_container[data-type="news"][data-mode="mode_31"]{
    display:block !important;

    width:100% !important;
    max-width:100% !important;

    margin-left:auto !important;
    margin-right:auto !important;

    padding-left:0 !important;
    padding-right:0 !important;

    box-sizing:border-box !important;
}


/* =========================================================
   02. MAIN NEWS GRID
   Desktop default = 3 columns
   ========================================================= */

.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box{

    display:grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    grid-auto-flow:row !important;

    width:100% !important;
    max-width:none !important;
    min-width:0 !important;

    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    column-gap:24px !important;
    row-gap:40px !important;

    float:none !important;

    white-space:normal !important;

    overflow:visible !important;

    align-items:stretch !important;
    justify-content:stretch !important;

    box-sizing:border-box !important;
}


/* =========================================================
   03. ARTICLE CARD
   Critical:
   destroy UEESHOP 20% / five-column behaviour
   ========================================================= */

.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box > .themes_news_item_box{

    display:flex !important;
    flex-direction:column !important;

    position:relative !important;

    float:none !important;
    clear:none !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:auto !important;
    min-height:0 !important;

    flex:none !important;
    flex-grow:0 !important;
    flex-shrink:1 !important;
    flex-basis:auto !important;

    grid-column:auto !important;

    margin:0 !important;
    padding:0 !important;

    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    transform:none !important;

    background:#ffffff !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    overflow:visible !important;

    box-sizing:border-box !important;
}


/* =========================================================
   04. IMAGE BOX
   ========================================================= */

.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box
.themes_news_item_box
.img_box{

    display:block !important;

    position:relative !important;

    width:100% !important;
    max-width:100% !important;

    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    background:#f7f7f7 !important;

    border:0 !important;
    border-radius:0 !important;

    box-sizing:border-box !important;
}


/* =========================================================
   05. BLOG COVER IMAGE
   4:3
   ========================================================= */

.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box
.themes_news_item_box
.img_box img{

    display:block !important;

    width:100% !important;
    max-width:100% !important;

    height:auto !important;

    aspect-ratio:4 / 3 !important;

    object-fit:cover !important;
    object-position:center center !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    transform:scale(1) !important;

    box-sizing:border-box !important;

    transition:transform .3s ease !important;
}


.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box
.themes_news_item_box:hover
.img_box img{

    transform:scale(1.015) !important;
}


/* =========================================================
   06. INFO BOX
   ========================================================= */

.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box
.themes_news_item_box
.info_box{

    display:flex !important;
    flex-direction:column !important;

    flex:1 1 auto !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:auto !important;

    margin:0 !important;

    padding:16px 2px 0 !important;

    background:#ffffff !important;

    border:0 !important;

    text-align:left !important;

    box-sizing:border-box !important;
}


/* =========================================================
   07. TITLE
   ========================================================= */

.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box
.themes_news_item_box
.i_title{

    display:block !important;

    width:100% !important;
    max-width:100% !important;

    min-height:46px !important;

    margin:0 0 10px !important;
    padding:0 !important;

    color:#111111 !important;

    font-size:16px !important;
    line-height:1.42 !important;
    font-weight:600 !important;

    letter-spacing:0 !important;

    text-align:left !important;

    white-space:normal !important;

    overflow:visible !important;

    box-sizing:border-box !important;
}


/* =========================================================
   08. TITLE LINK
   ========================================================= */

.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box
.themes_news_item_box
.i_title a{

    display:block !important;

    width:100% !important;
    max-width:100% !important;

    color:#111111 !important;

    font-size:inherit !important;
    line-height:inherit !important;
    font-weight:inherit !important;

    letter-spacing:inherit !important;

    text-align:left !important;

    text-decoration:none !important;

    white-space:normal !important;

    overflow:visible !important;
    text-overflow:clip !important;

    transition:opacity .2s ease !important;
}


.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box
.themes_news_item_box
.i_title a:hover{

    color:#111111 !important;

    opacity:.65 !important;

    text-decoration:none !important;
}


/* =========================================================
   09. DESCRIPTION
   ========================================================= */

.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box
.themes_news_item_box
.i_subtitle,

.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box
.themes_news_item_box
.themes_text_subtitle{

    display:block !important;

    width:100% !important;
    max-width:100% !important;

    min-height:64px !important;

    margin:0 0 18px !important;
    padding:0 !important;

    color:#777777 !important;

    font-size:13px !important;
    line-height:1.65 !important;
    font-weight:400 !important;

    letter-spacing:0 !important;

    text-align:left !important;

    white-space:normal !important;

    overflow:visible !important;

    box-sizing:border-box !important;
}


/* =========================================================
   10. READ MORE BUTTON

   Keep text as READ MORE.
   Layout is independent from button settings.
   ========================================================= */

.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box
.themes_news_item_box
a.i_item_button.trans.themes_box_button{

    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    align-self:flex-start !important;

    position:relative !important;

    float:none !important;

    width:auto !important;
    min-width:112px !important;
    max-width:none !important;

    height:38px !important;
    min-height:38px !important;

    margin:auto 0 0 !important;

    padding:0 18px !important;

    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;

    color:#111111 !important;

    border:1px solid #111111 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    font-size:11px !important;
    line-height:1 !important;
    font-weight:600 !important;

    letter-spacing:.04em !important;

    text-align:center !important;

    text-decoration:none !important;
    text-transform:uppercase !important;

    white-space:nowrap !important;

    cursor:pointer !important;

    box-sizing:border-box !important;

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease !important;
}


/* =========================================================
   11. DESTROY UEESHOP GREEN BUTTON STYLE
   ========================================================= */

.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box
.themes_news_item_box
a.i_item_button,

.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box
.themes_news_item_box
a.themes_box_button{

    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;

    color:#111111 !important;

    border-top-color:#111111 !important;
    border-right-color:#111111 !important;
    border-bottom-color:#111111 !important;
    border-left-color:#111111 !important;

    box-shadow:none !important;
}


/* =========================================================
   12. BUTTON HOVER
   ========================================================= */

.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box
.themes_news_item_box
a.i_item_button:hover,

.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box
.themes_news_item_box
a.themes_box_button:hover{

    background:#111111 !important;
    background-color:#111111 !important;
    background-image:none !important;

    color:#ffffff !important;

    border-top-color:#111111 !important;
    border-right-color:#111111 !important;
    border-bottom-color:#111111 !important;
    border-left-color:#111111 !important;

    text-decoration:none !important;
}


/* =========================================================
   13. REMOVE DATE / TIME / EXTRA META
   ========================================================= */

.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box
.date,

.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box
.time,

.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box
.news_date,

.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box
.i_date,

.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box
.i_time,

.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box
time{

    display:none !important;
}


/* =========================================================
   14. CLEAN OLD POSITIONING
   ========================================================= */

.visual_plugins_container[data-type="news"][data-mode="mode_31"]
.news_box > .themes_news_item_box:nth-child(n){

    left:auto !important;
    right:auto !important;

    margin-left:0 !important;
    margin-right:0 !important;

    transform:none !important;

    grid-column:auto !important;
}


/* =========================================================
   15. DESKTOP
   3 columns
   ========================================================= */

@media screen and (min-width:1025px){

    .visual_plugins_container[data-type="news"][data-mode="mode_31"]
    .news_box{

        display:grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        column-gap:24px !important;
        row-gap:40px !important;
    }

}


/* =========================================================
   16. TABLET
   2 columns
   ========================================================= */

@media screen and (min-width:641px) and (max-width:1024px){

    .visual_plugins_container[data-type="news"][data-mode="mode_31"]
    .news_box{

        display:grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        column-gap:20px !important;
        row-gap:34px !important;
    }


    .visual_plugins_container[data-type="news"][data-mode="mode_31"]
    .news_box
    .themes_news_item_box
    .i_title{

        min-height:46px !important;
    }

}


/* =========================================================
   17. MOBILE
   1 column
   ========================================================= */

@media screen and (max-width:640px){

    .visual_plugins_container[data-type="news"][data-mode="mode_31"]
    .news_box{

        display:grid !important;

        grid-template-columns:1fr !important;

        column-gap:0 !important;
        row-gap:30px !important;

        width:100% !important;
        max-width:none !important;

        margin:0 !important;
        padding:0 !important;
    }


    .visual_plugins_container[data-type="news"][data-mode="mode_31"]
    .news_box > .themes_news_item_box{

        width:100% !important;
        max-width:100% !important;

        min-width:0 !important;

        margin:0 !important;

        left:auto !important;
        right:auto !important;

        transform:none !important;
    }


    .visual_plugins_container[data-type="news"][data-mode="mode_31"]
    .news_box
    .themes_news_item_box
    .info_box{

        padding:14px 1px 0 !important;
    }


    .visual_plugins_container[data-type="news"][data-mode="mode_31"]
    .news_box
    .themes_news_item_box
    .i_title{

        min-height:0 !important;

        margin-bottom:9px !important;

        font-size:16px !important;
        line-height:1.45 !important;
    }


    .visual_plugins_container[data-type="news"][data-mode="mode_31"]
    .news_box
    .themes_news_item_box
    .i_subtitle,

    .visual_plugins_container[data-type="news"][data-mode="mode_31"]
    .news_box
    .themes_news_item_box
    .themes_text_subtitle{

        min-height:0 !important;

        margin-bottom:16px !important;

        font-size:13px !important;
        line-height:1.65 !important;
    }


    .visual_plugins_container[data-type="news"][data-mode="mode_31"]
    .news_box
    .themes_news_item_box
    a.i_item_button.trans.themes_box_button{

        min-width:108px !important;

        height:38px !important;
        min-height:38px !important;

        margin:0 !important;

        padding:0 17px !important;
    }

}


/* =========================================================
   18. SMALL MOBILE
   ========================================================= */

@media screen and (max-width:420px){

    .visual_plugins_container[data-type="news"][data-mode="mode_31"]
    .news_box
    .themes_news_item_box
    .i_title{

        font-size:15px !important;
        line-height:1.45 !important;
    }

}