/* Sidebar Portfolio Section Block */
/* These styles are for the sidebar version of the portfolio section block */
/* The main portfolio section block styles are in portfolio-section.css */

/* Additional styles for the sidebar portfolio section */
/* .wp-block-bluepencilcoll-sidebar-portfolio-section {
    width: 100%;
    overflow: hidden;
} */

/* Make sure the portfolio grid works with both implementations */
/* .portfolio-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: var(--box-gap, 0px);
} */

/* Ensure overlay opacity classes work for both implementations */
/* .portfolio-box-overlay.has-background-dim-10 { opacity: 0.1; }
.portfolio-box-overlay.has-background-dim-20 { opacity: 0.2; }
.portfolio-box-overlay.has-background-dim-30 { opacity: 0.3; }
.portfolio-box-overlay.has-background-dim-40 { opacity: 0.4; }
.portfolio-box-overlay.has-background-dim-50 { opacity: 0.5; }
.portfolio-box-overlay.has-background-dim-60 { opacity: 0.6; }
.portfolio-box-overlay.has-background-dim-70 { opacity: 0.7; }
.portfolio-box-overlay.has-background-dim-80 { opacity: 0.8; }
.portfolio-box-overlay.has-background-dim-90 { opacity: 0.9; }
.portfolio-box-overlay.has-background-dim-100 { opacity: 1; } */

/* Ensure the portfolio box styles work with the sidebar implementation */
/* .portfolio-grid .portfolio-box {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: all 0.3s ease;
} */

/* Width classes for flex layout */
/* .portfolio-grid .portfolio-box.width-25 { width: calc(25% - var(--box-gap, 0px)); }
.portfolio-grid .portfolio-box.width-50 { width: calc(50% - var(--box-gap, 0px)); }
.portfolio-grid .portfolio-box.width-75 { width: calc(75% - var(--box-gap, 0px)); }
.portfolio-grid .portfolio-box.width-100 { width: calc(100% - var(--box-gap, 0px)); } */

/* Height classes for flex layout */
/* .portfolio-grid .portfolio-box.height-1 { height: calc(var(--base-box-height, 300px) * 1); }
.portfolio-grid .portfolio-box.height-2 { height: calc(var(--base-box-height, 300px) * 2); }
.portfolio-grid .portfolio-box.height-3 { height: calc(var(--base-box-height, 300px) * 3); }
.portfolio-grid .portfolio-box.height-4 { height: calc(var(--base-box-height, 300px) * 4); } */

/* Responsive styles for flex layout */
/* @media (max-width: 1024px) {
    .portfolio-grid .portfolio-box.width-25,
    .portfolio-grid .portfolio-box.width-50,
    .portfolio-grid .portfolio-box.width-75 {
        width: calc(33.333% - var(--box-gap, 0px));
    }
}

@media (max-width: 768px) {
    .portfolio-grid .portfolio-box.width-25,
    .portfolio-grid .portfolio-box.width-50,
    .portfolio-grid .portfolio-box.width-75 {
        width: calc(50% - var(--box-gap, 0px));
    }

    .portfolio-grid .portfolio-box.height-2 { height: calc(var(--base-box-height, 300px) * 1.5); }
    .portfolio-grid .portfolio-box.height-3 { height: calc(var(--base-box-height, 300px) * 2); }
    .portfolio-grid .portfolio-box.height-4 { height: calc(var(--base-box-height, 300px) * 2.5); }
}

@media (max-width: 480px) {
    .portfolio-grid .portfolio-box.width-25,
    .portfolio-grid .portfolio-box.width-50,
    .portfolio-grid .portfolio-box.width-75,
    .portfolio-grid .portfolio-box.width-100 {
        width: calc(100% - var(--box-gap, 0px));
    }

    .portfolio-grid .portfolio-box.height-1 { height: calc(var(--base-box-height, 300px) * 0.8); }
    .portfolio-grid .portfolio-box.height-2 { height: calc(var(--base-box-height, 300px) * 1.2); }
    .portfolio-grid .portfolio-box.height-3 { height: calc(var(--base-box-height, 300px) * 1.5); }
    .portfolio-grid .portfolio-box.height-4 { height: calc(var(--base-box-height, 300px) * 1.8); }
} */

/* Sidebar Grid Section Block */
/* These styles are for the sidebar version of the grid section block */
/* The main grid section block styles are in grid-section.css */

/* Additional styles for the sidebar grid section */
/* .wp-block-bluepencilcoll-sidebar-grid-section {
    width: 100%;
    overflow: hidden;
} */

/* Make sure the grid works with both implementations */
/* .grid-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: var(--box-gap, 0px);
} */

/* Ensure overlay opacity classes work for both implementations */
/* .grid-item-overlay.has-background-dim-10 { opacity: 0.1; }
.grid-item-overlay.has-background-dim-20 { opacity: 0.2; }
.grid-item-overlay.has-background-dim-30 { opacity: 0.3; }
.grid-item-overlay.has-background-dim-40 { opacity: 0.4; }
.grid-item-overlay.has-background-dim-50 { opacity: 0.5; }
.grid-item-overlay.has-background-dim-60 { opacity: 0.6; }
.grid-item-overlay.has-background-dim-70 { opacity: 0.7; }
.grid-item-overlay.has-background-dim-80 { opacity: 0.8; }
.grid-item-overlay.has-background-dim-90 { opacity: 0.9; }
.grid-item-overlay.has-background-dim-100 { opacity: 1; } */

/* Ensure the grid item styles work with the sidebar implementation */
/* .grid-grid .grid-item {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: all 0.3s ease;
} */

/* Width classes for flex layout */
/* .grid-grid .grid-item.width-25 { width: calc(25% - var(--box-gap, 0px)); }
.grid-grid .grid-item.width-50 { width: calc(50% - var(--box-gap, 0px)); }
.grid-grid .grid-item.width-75 { width: calc(75% - var(--box-gap, 0px)); }
.grid-grid .grid-item.width-100 { width: calc(100% - var(--box-gap, 0px)); } */

/* Height classes for flex layout */
/* .grid-grid .grid-item.height-1 { height: calc(var(--base-box-height, 300px) * 1); }
.grid-grid .grid-item.height-2 { height: calc(var(--base-box-height, 300px) * 2); }
.grid-grid .grid-item.height-3 { height: calc(var(--base-box-height, 300px) * 3); }
.grid-grid .grid-item.height-4 { height: calc(var(--base-box-height, 300px) * 4); } */

/* Responsive styles for flex layout */
/* @media (max-width: 1024px) {
    .grid-grid .grid-item.width-25,
    .grid-grid .grid-item.width-50,
    .grid-grid .grid-item.width-75 {
        width: calc(33.333% - var(--box-gap, 0px));
    }
}

@media (max-width: 768px) {
    .grid-grid .grid-item.width-25,
    .grid-grid .grid-item.width-50,
    .grid-grid .grid-item.width-75 {
        width: calc(50% - var(--box-gap, 0px));
    }

    .grid-grid .grid-item.height-2 { height: calc(var(--base-box-height, 300px) * 1.5); }
    .grid-grid .grid-item.height-3 { height: calc(var(--base-box-height, 300px) * 2); }
    .grid-grid .grid-item.height-4 { height: calc(var(--base-box-height, 300px) * 2.5); }
}

@media (max-width: 480px) {
    .grid-grid .grid-item.width-25,
    .grid-grid .grid-item.width-50,
    .grid-grid .grid-item.width-75,
    .grid-grid .grid-item.width-100 {
        width: calc(100% - var(--box-gap, 0px));
    }

    .grid-grid .grid-item.height-1 { height: calc(var(--base-box-height, 300px) * 0.8); }
    .grid-grid .grid-item.height-2 { height: calc(var(--base-box-height, 300px) * 1.2); }
    .grid-grid .grid-item.height-3 { height: calc(var(--base-box-height, 300px) * 1.5); }
    .grid-grid .grid-item.height-4 { height: calc(var(--base-box-height, 300px) * 1.8); }
} */