/**
 * Custom styling for Getwid blocks
 * Makes featured images fully responsive
 */

/* Make featured images responsive in all Getwid blocks */
.wp-block-getwid-template-post-featured-image img,
.wp-block-getwid-custom-post-type .wp-block-getwid-template-post-featured-image img,
.wp-block-getwid-post-slider .wp-block-getwid-template-post-featured-image img,
.wp-block-getwid-post-carousel .wp-block-getwid-template-post-featured-image img,
.wp-block-getwid-recent-posts .wp-block-getwid-template-post-featured-image img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Ensure the container is also responsive */
.wp-block-getwid-template-post-featured-image,
.wp-block-getwid-custom-post-type .wp-block-getwid-template-post-featured-image,
.wp-block-getwid-post-slider .wp-block-getwid-template-post-featured-image,
.wp-block-getwid-post-carousel .wp-block-getwid-template-post-featured-image,
.wp-block-getwid-recent-posts .wp-block-getwid-template-post-featured-image {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Fix for featured background images */
.wp-block-getwid-template-post-featured-background-image__image {
    background-size: cover !important;
    background-position: center center !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important; /* 16:9 aspect ratio */
}

/* Fix for image links */
.wp-block-getwid-template-post-featured-image a {
    display: block !important;
    width: 100% !important;
}

/* Responsive adjustments for different screen sizes */
@media (max-width: 992px) {
    .wp-block-getwid-template-post-featured-image img,
    .wp-block-getwid-custom-post-type .wp-block-getwid-template-post-featured-image img,
    .wp-block-getwid-post-slider .wp-block-getwid-template-post-featured-image img,
    .wp-block-getwid-post-carousel .wp-block-getwid-template-post-featured-image img,
    .wp-block-getwid-recent-posts .wp-block-getwid-template-post-featured-image img {
        height: auto !important;
    }
}

@media (max-width: 768px) {
    .wp-block-getwid-template-post-featured-background-image__image {
        padding-bottom: 75% !important; /* 4:3 aspect ratio for mobile */
    }
}

/* Fix for custom post type block layout */
.wp-block-getwid-custom-post-type.has-layout-grid .wp-block-getwid-template-post-featured-image,
.wp-block-getwid-custom-post-type.has-layout-grid .wp-block-getwid-template-post-featured-image img {
    height: auto !important;
    width: 100% !important;
}

/* Fix for post slider and carousel */
.wp-block-getwid-post-slider .slick-slide,
.wp-block-getwid-post-carousel .slick-slide {
    height: auto !important;
}

.wp-block-getwid-post-slider .slick-slide .wp-block-getwid-template-post-featured-image,
.wp-block-getwid-post-carousel .slick-slide .wp-block-getwid-template-post-featured-image {
    height: auto !important;
}

/* Fix for image alignment */
.wp-block-getwid-template-post-featured-image.aligncenter,
.wp-block-getwid-template-post-featured-image.alignleft,
.wp-block-getwid-template-post-featured-image.alignright {
    width: 100% !important;
    max-width: 100% !important;
}

/* Fix for image aspect ratio */
.wp-block-getwid-template-post-featured-image {
    position: relative !important;
}

/* Fix for image in columns */
.wp-block-column .wp-block-getwid-template-post-featured-image {
    height: auto !important;
}

.wp-block-column .wp-block-getwid-template-post-featured-image img {
    height: auto !important;
    object-fit: contain !important;
}