/**
 * Copyright © Vaimo Group. All rights reserved.
 * See LICENSE_VAIMO.txt for license details.
 */

/* Remove shadows from categories widget - Blog pages only */
.blog-page .blog-sidebar-categories-modern,
.blog-page .blog-sidebar-categories-modern .frame-15006,
.blog-page .blog-sidebar-categories-modern .frame-14998,
.blog-page .blog-sidebar-categories-modern .frame-15003,
.blog-page .blog-sidebar-categories-modern .frame-15002,
.blog-page .widget.block.block-categories.blog-sidebar-categories-modern {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

/* Blog Promotional Banners Section - Blog pages only */

.blog-page .promo-banners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: start;
}

.blog-page .promo-banner {
    width: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-page .promo-banner a {
    display: block;
    width: 100%;
    text-decoration: none;
}

.blog-page .banner-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    transition: all 0.3s ease;
}


/* Full-width background colors - Blog pages only */
.blog-page .breadcrumbs {
    position: relative;
    z-index: 1;
}

.blog-page #maincontent.page-main {
    position: relative;
    z-index: 1;
}

.blog-page #maincontent.page-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    bottom: 0;
    width: 100vw;
    transform: translateX(-50%);
    background-color: inherit;
    z-index: -1;
}

/* Target the container that holds breadcrumbs to fill margin gaps - Blog pages only */
.blog-page .page-wrapper > .breadcrumbs::after {
    content: '';
    position: absolute;
    top: -16px;
    bottom: -8px;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #F5F3F9;
    z-index: -2;
}

/* Mobile Support - Responsive Design Overrides - Blog pages only */

/* Mobile First - Base styles for mobile devices */
@media (max-width: 767px) {
    /* Fix breadcrumb white background on mobile - Blog pages only */
    .blog-page .page-wrapper > .breadcrumbs::after {
        top: -12px;
        bottom: -6px;
    }
    
    /* Promotional Banners Mobile - 2 columns - Blog pages only */
    .blog-page .promo-banners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .blog-page .blog-promo-section {
        margin: 20px auto;
        padding: 0 10px;
    }
    
    /* Featured Section Mobile - Vertical layout - Blog pages only */
    .blog-page .blog-content-featured {
        flex-direction: column;
        height: auto;
        max-width: 100%;
        margin: 0 10px 20px 10px;
    }
    
    .blog-page .blog-content-featured-background {
        width: 100%;
        padding: 15px;
        order: 2;
    }
    
    .blog-page .blog-content-featured-image {
        width: 100%;
        height: 150px;
        order: 1;
        border-radius: 24px 24px 0 0;
    }
    
    .blog-page .blog-content-featured-image img {
        border-radius: 24px 24px 0 0;
    }
    
    /* Recent Articles Mobile - Same width as featured - Blog pages only */
    .blog-page .widget.block-list-posts {
        margin: 0 10px 20px 10px;
    }
    
    .blog-page .widget.block-list-posts .block-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .blog-page .widget.block-list-posts .item {
        width: 100%;
        margin: 0;
    }
    
    /* Main Post List Mobile - Same width as featured - Blog pages only */
    .blog-page .post-list-wrapper {
        margin: 0 10px;
    }
    
    .blog-page .post-list.modern {
        max-width: 100%;
        gap: 10px;
    }
    
    .blog-page .post-list.modern .post-item.post-holder {
        width: calc(50% - 5px);
    }
}

/* Small Mobile Devices - Blog pages only */
@media (max-width: 600px) {
    /* Promotional Banners - Single column on very small screens - Blog pages only */
    .blog-page .promo-banners-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .blog-page .blog-promo-section {
        padding: 0 8px;
        margin: 15px auto;
    }
    
    /* Breadcrumb adjustments for small screens - Blog pages only */
    .blog-page .page-wrapper > .breadcrumbs::after {
        top: -10px;
        bottom: -5px;
    }
    
    /* Featured Section Small Mobile - Blog pages only */
    .blog-page .blog-content-featured {
        margin: 0 auto 15px auto;
    }
    
    .blog-page .blog-content-featured-background {
        padding: 12px;
    }
    
    .blog-page .blog-content-featured-image {
        height: 120px;
    }
    
    /* Recent Articles Small Mobile - Single column - Blog pages only */
    .blog-page .widget.block-list-posts {
        margin: 0 auto 15px auto;
        width: calc(100% - 16px);
        max-width: 320px;
    }
    
    .blog-page .widget.block-list-posts .block-content {
        grid-template-columns: 1fr;
        gap: 15px;
        justify-items: center;
    }
    
    /* Main Post List Small Mobile - Single column - Blog pages only */
    .blog-page .post-list-wrapper {
        margin: 0 8px;
    }
    
    .blog-page .post-list.modern .post-item.post-holder {
        width: 100%;
    }
}

/* Tablet Portrait - Blog pages only */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Promotional Banners Tablet - 2 columns - Blog pages only */
    .blog-page .promo-banners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .blog-page .blog-promo-section {
        padding: 0 15px;
        margin: 30px auto;
    }
    
    /* Breadcrumb Tablet - Blog pages only */
    .blog-page .page-wrapper > .breadcrumbs::after {
        top: -14px;
        bottom: -7px;
    }
    
    /* Featured Section Tablet - Blog pages only */
    .blog-page .blog-content-featured {
        max-width: 90%;
        margin: 0 auto 25px auto;
    }
    
    /* Recent Articles Tablet - Blog pages only */
    .blog-page .widget.block-list-posts .block-content {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

/* Desktop and Large Screens - Blog pages only */
@media (min-width: 1025px) {
    /* Promotional Banners Desktop - 4 columns - Blog pages only */
    .blog-page .promo-banners-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    
    .blog-page .blog-promo-section {
        max-width: 1200px;
        padding: 0 20px;
        margin: 40px auto;
    }
    
    /* Enable hover effects on desktop - Blog pages only */
    .blog-page .promo-banner:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }
    
    .blog-page .promo-banner:hover .banner-image {
        transform: scale(1.02);
    }
}