/* Container for posts with wrapping and gap */
.cc-custom-posts-wrapper {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    box-sizing: border-box; 
    padding: 0;
    margin: 0;
}

/* Each post item - 3 per row on desktop, full width on mobile */
.cc-post-item {
    display: flex;
    flex-direction: row;
    flex: 1 1 calc(33.333% - 13.33px);
    box-sizing: border-box;
    gap: 12px;
    align-items: flex-start;
    padding: 10px;
    min-width: 0;
}

/* Image container and styling */
.cc-post-image {
    max-width: 120px;
    aspect-ratio: 3 / 2;
    flex-shrink: 0;
    background: transparent;
    overflow: hidden;
    vertical-align: middle;
    position: relative; /* support overlay */
}

.cc-post-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.cc-post-title a {
    font-size: 15.5px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #0000CC;
    text-decoration: none;
    transition: color 0.3s ease;
}

.cc-post-title a:hover {
    color: red;
}

.cc-post-meta {
    font-size: 0.9em;
    color: #666;
}

.cc-post-content {
    flex: 1;
}

.cc-edit-link {
    display: inline-block;
    margin-top: 5px;
    font-size: 0.8em;
}


/* Layout: 4-column grid with image on top and title below */
/* Force 4-column layout to behave like a grid */
/* Grid wrapper for 4-column layout */
.cc-layout-grid4 {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* Each post item - 4 per row */
/* Each post item calculates width based on columns */
.cc-layout-grid4 .cc-post-item {
    flex: 0 0 calc((100% / var(--columns)) - 15px);
    max-width: calc((100% / var(--columns)) - 15px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    align-items: flex-start;
}

/* Image wrapper */
.cc-layout-grid4 .cc-post-image {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9; /* 3 / 2 for taller images, 4 /3 for others, 16/9 standared wide */
    overflow: hidden;
    background: #f0f0f0;
}

/* Image itself — NO absolute positioning */
.cc-layout-grid4 .cc-post-image img {
    position: relative; /* remove absolute for normal flow */
    width: 100%;
    height: 100%;
    object-fit: cover; /* contain; show whole image without cropping, cover;  to crop */
    background: #ffffff; /* fallback background */
    border: none !important;
}

.cc-layout-grid4 .cc-post-title a:hover {
    color: red;
}

.cc-layout-grid4 .cc-post-content {
    padding: 0;
}

.cc-layout-grid4 .cc-post-title a {
    font-size: 16px;
    font-weight: 600;
    color: #0000CC;
    text-decoration: none;
    display: block;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

.cc-layout-grid4 .cc-post-meta {
    font-size: 0.8em;
    color: #666;
}

/* to show edit link when hover on the top of a post image */
/* Wrapper to position relative */
.cc-post-image-wrapper {
    position: relative;
}

/* Hidden edit link overlay initially */
.cc-edit-overlay-link {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    border-radius: 4px;
}

/* Show on hover */
.cc-post-image:hover .cc-edit-overlay-link {
    opacity: 1;
}

.cc-edit-overlay-link:hover {
    color: #dfff80; /* let uer notice */
}
/* to show edit link when hover on the top of a post image */

/* This will make the big one image grow or shrink according to the widht of the elementor block column */
/* Make image stretch fully */
/* Single post occupies full width */
.cc-layout-grid4 .cc-post-item:only-child .cc-post-image {
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
}

/* Force the left "big image" to fill the column */
.cc-layout-grid4 .cc-post-item:only-child,
.cc-layout-grid4 .cc-post-item:only-child .cc-post-image-wrapper,
.cc-layout-grid4 .cc-post-item:only-child .cc-post-image {
    width: 100% !important;      /* fill the column */
    max-width: 100% !important;  /* prevent limiting */
}

.cc-layout-grid4 .cc-post-item:only-child .cc-post-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* show the whole picture */
    display: block;
    background: black; /* use the background color to fill the left and right blank */
}

/* Right side / other small images */
.cc-layout-grid4 .cc-post-item:not(:only-child) .cc-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* fill image, should have no background */
    display: block;
}        
/* This will make the big one image grow or shrink according to the widht of the elementor block column */

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .cc-custom-posts-wrapper {
        gap: 4px; /* reduce space between posts */
    }

    .cc-post-item {
        flex: 1 1 100%;
        flex-direction: row;
        align-items: flex-start;
        padding: 4px; /* reduce inner padding */
        gap: 6px; /* reduce gap between image and content */
    }

    .cc-post-image {
        aspect-ratio: 3 / 2;
        max-width: 80px;
        vertical-align: middle;
    }

    .cc-post-content {
        padding-left: 4px;
        padding-right: 0;
        flex: 1;
    }

    .cc-post-title a {
        font-size: 15px;  /* slightly smaller font for more text */
        line-height: 1.2; /* tighter line spacing */
        display: block;
        white-space: normal;
        word-break: break-word;
    }

    /* for grid 4 setting, hide entire grid4 block on mobile */
    .cc-layout-grid4 {
        display: none !important;
    } 

    .cc-layout-grid4 .cc-post-image {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: #f0f0f0;
    }

    .cc-layout-grid4 .cc-post-image img {
        width: 100%;  /* <<< CHANGED: force image to fill container */
        height: 100%; /* <<< CHANGED: force image to fill container */
        object-fit: cover;
    }

    .cc-layout-grid4 .cc-post-content {
        padding: 0 10px; /* horizontal padding for text */
        width: 100%;
        box-sizing: border-box;
    }

    .cc-layout-grid4 .cc-post-title a {
        font-size: 15px;
        line-height: 1.3;
        text-align: left;
        display: block;
        width: 100%;
    }
}