/** 
 * Author: MuhTec Themes
 * Author URI: https://muhtecthemes.com
 */

/* //////////////////////////////////////

    Table of Contents

    1. Blog Grid Style
    2. Blog List Style
    3. Blog Single Page
    4. Blog comment Form

////////////////////////////////////// */

    .blog-entry:not(.has-post-thumbnail) { padding: 30px; background-color: var(--mt-tertiary-clr); border-radius: var(--mt-radius); }

/* Post Meta */

    .post-meta-group { display: flex; flex-wrap: wrap; align-items: center; margin: -5px -10px; font-size: 0.9rem; }
    .post-meta-group > div { padding: 5px 10px; line-height: normal; }
    .post-meta-group > div .mt-meta-icon { color: var(--mt-primary-clr); margin-right: 6px; }
    .post-meta-group > div .mt-meta-icon svg { font-size: 1.18rem; }

    .post-meta-group > div.post-date { display: inline-flex; align-items: center; }


/* Image hover */

    .blog-entry .mt__image_glass_effect { position: relative; overflow: hidden; height: 100%; }

    .blog-entry .mt__image_glass_effect img { transform: scale(1); transform-origin: center; transform-style: preserve-3d; 
        transition: var(--mt-transition-function); height: 100%; width: 100%; object-fit: cover; object-position: center center; }
    .blog-entry:hover .mt__image_glass_effect img { transform: scale(1.1); }

    .blog-entry .mt__image_glass_effect:after { content: ''; position: absolute; width: 200%; height: 0%; left: 50%; top: 50%; 
        background-color: rgba(var(--mt-color-white-rgb), .3); transform: translate(-50%,-50%) rotate(-45deg); z-index: 1; }
    .blog-entry:hover .mt__image_glass_effect:after { height: 250%; background-color: transparent; 
        transition: var(--mt-transition-function); transition-duration: 600ms; }

/* Post Title */

    .blog-entry .mt_blog_title { margin: 0; }

    .blog-entry .mt_blog_title, 
    .blog-entry .mt_blog_title > a { overflow-wrap: anywhere; }


/* Button Style */

    .blog-entry .mt_button_link > span { width: 30px; height: 30px; border-radius: 50%; background-color: var(--mt-secondary-clr); 
        display: inline-flex; padding: 2px; font-size: 12px; align-items: center; justify-content: center; color: var(--mt-heading-clr); }

/** 
    1. Blog Grid Style
*/

    .blog-layout-grid .blog-entry > .post-media-wrapper { margin-bottom: clamp(1.125rem, 0.9519rem + 0.7692vw, 1.875rem); /* 18px - 30px */
        border-radius: var(--mt-radius); overflow: hidden; will-change: transform; }

    .blog-layout-grid .blog-entry .post-content-wrapper > *:not(:last-child) { margin-bottom: 12px; }


/** 
    2. Blog List Style
*/

    .blog-layout-list .blog-entry { display: grid; grid-template-columns: repeat(2,1fr); 
        gap: clamp(1.125rem, 0.9519rem + 0.7692vw, 1.875rem); /* 18px - 30px */ min-height: 300px; }

    .blog-layout-list .blog-entry > .post-media-wrapper { border-radius: var(--mt-radius); overflow: hidden; will-change: transform; }

    .blog-layout-list .blog-entry .post-content-wrapper { padding: 30px 0px; display: flex; flex-wrap: wrap; flex-direction: column; }
    .blog-layout-list .blog-entry .post-content-wrapper > .post-button-wrapper { margin-top: auto; }
    .blog-layout-list .blog-entry .post-content-wrapper > *:not(:last-child) { margin-bottom: 18px; }