/*
Theme Name: Betheme
Theme URI: https://themes.muffingroup.com/betheme/
Author: Muffin group
Author URI: https://muffingroup.com/
Description: The biggest WordPress Theme ever
License: Themeforest Split Licence
License URI: https://themeforest.net/licenses/standard
Text Domain: betheme
Version: 21.0.5

All css files are placed in /css/ folder
*/

/* Justify all post content */
.post-wrapper-content,
.the_content_wrapper,
.post-excerpt,
.post-desc,
.entry-content,
.content-post {
    text-align: justify !important;
}

/* Standardize margins for main blog grid */
/* Standardize margins for main blog grid */
@media only screen and (min-width: 768px) {

    .posts_group.grid,
    .posts_group.masonry {
        margin-left: -10px;
        margin-right: -10px;
    }

    .posts_group.grid .post-item,
    .posts_group.masonry .post-item {
        margin: 0 10px 20px !important;
    }
}

/* Mobile */
@media only screen and (max-width: 767px) {

    .posts_group.grid .post-item,
    .posts_group.masonry .post-item {
        width: 100% !important;
        margin: 0 0 20px !important;
    }
}

/* Desktop */
@media only screen and (min-width: 960px) {

    .posts_group.grid.col-2 .post-item,
    .posts_group.masonry.col-2 .post-item {
        width: calc(50% - 20px) !important;
    }

    .posts_group.grid.col-3 .post-item,
    .posts_group.masonry.col-3 .post-item {
        width: calc(33.333% - 20px) !important;
    }

    .posts_group.grid.col-4 .post-item,
    .posts_group.masonry.col-4 .post-item {
        width: calc(25% - 20px) !important;
    }
}

/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 959px) {

    .posts_group.grid.col-2 .post-item,
    .posts_group.masonry.col-2 .post-item {
        width: calc(50% - 20px) !important;
    }

    /* col-3 and col-4 become 3 columns on tablet */
    .posts_group.grid.col-3 .post-item,
    .posts_group.masonry.col-3 .post-item,
    .posts_group.grid.col-4 .post-item,
    .posts_group.masonry.col-4 .post-item {
        width: calc(33.333% - 20px) !important;
    }
}

/* Blog Teaser Layout - 1 Big Left, 2 Small Right - RESOLVED */
@media only screen and (min-width: 768px) {
    .blog-teaser .teaser-wrapper {
        display: grid !important;
        grid-template-columns: 2fr 1fr !important;
        grid-template-rows: 250px 250px !important;
        gap: 20px !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .blog-teaser .teaser-wrapper li {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 4px;
        /* Optional: adds a slight modern touch */
    }

    /* First item (Big Left) */
    .blog-teaser .teaser-wrapper li:first-child {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
    }

    /* Second item (Top Right) */
    .blog-teaser .teaser-wrapper li:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    /* Third item (Bottom Right) */
    .blog-teaser .teaser-wrapper li:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    /* Image Handling */
    .blog-teaser .teaser-wrapper li .photo-wrapper,
    .blog-teaser .teaser-wrapper li .photo-wrapper .image_wrapper,
    .blog-teaser .teaser-wrapper li .photo-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    /* Text Overlay */
    .blog-teaser .teaser-wrapper li .desc-wrapper {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%) !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        z-index: 10 !important;
        pointer-events: none;
        /* Let clicks pass through to the link if needed, but usually the link wraps the whole thing or title */
    }

    /* Make links clickable */
    .blog-teaser .teaser-wrapper li .desc-wrapper a {
        pointer-events: auto;
    }

    .blog-teaser .teaser-wrapper li .desc-wrapper .title {
        margin: 0 0 5px 0 !important;
    }

    .blog-teaser .teaser-wrapper li .desc-wrapper .title a {
        color: #fff !important;
        font-family: 'Roboto', sans-serif;
        /* Ensure a nice font */
        font-weight: 700;
        text-decoration: none !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    }

    /* Specific Font Sizes */
    .blog-teaser .teaser-wrapper li:first-child .desc-wrapper .title a {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }

    .blog-teaser .teaser-wrapper li:not(:first-child) .desc-wrapper .title a {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    /* Meta Data */
    .blog-teaser .teaser-wrapper li .desc-wrapper .post-meta {
        display: block !important;
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 12px !important;
        margin-bottom: 5px !important;
    }

    .blog-teaser .teaser-wrapper li .desc-wrapper .post-meta a {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    /* Hide unwanted elements if any */
    .blog-teaser .teaser-wrapper li .desc-wrapper .desc {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Hover Effects */
    .blog-teaser .teaser-wrapper li:hover .photo-wrapper img {
        transform: scale(1.05) !important;
        transition: transform 0.3s ease-in-out !important;
    }

    .blog-teaser .teaser-wrapper li .photo-wrapper {
        overflow: hidden !important;
        /* Contain the zoom */
    }
}

/* Mobile Layout */
@media only screen and (max-width: 767px) {
    .blog-teaser .teaser-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .blog-teaser .teaser-wrapper li {
        width: 100% !important;
        height: 250px !important;
        /* Fixed height for consistency on mobile */
        margin: 0 !important;
    }

    .blog-teaser .teaser-wrapper li .photo-wrapper img {
        height: 100% !important;
        object-fit: cover !important;
    }

    .blog-teaser .teaser-wrapper li .desc-wrapper {
        position: absolute !important;
        bottom: 0 !important;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent) !important;
        padding: 15px !important;
    }

    .blog-teaser .teaser-wrapper li .desc-wrapper .title a {
        font-size: 18px !important;
        color: #fff !important;
    }
}