/**
 * Imagine Marketing Connector - Frontend Featured Image Styles v1.1.1
 * Ensures featured images display properly with cover background-size
 * SURGICAL TARGETING: Only affects post featured images, not site-wide backgrounds
 * Automatically loaded when plugin is active
 *
 * v1.1.1 - Added Elementor page builder support
 */

/* ========================================
   ELEMENTOR PAGE BUILDER SUPPORT
   Target Elementor's wrapper divs and elements
   ======================================== */

/* Elementor elements with background images */
[class*="elementor-element"][style*="background-image"],
.elementor-element[style*="background-image"],
.elementor-widget[style*="background-image"],
.elementor-column[style*="background-image"],
.elementor-section[style*="background-image"] {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Elementor motion effects containers */
.elementor-motion-effects-container,
.elementor-motion-effects-layer,
.elementor-background-overlay {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Elementor featured image widgets */
.elementor-widget-theme-post-featured-image,
.elementor-widget-post-featured-image,
.elementor-post-thumbnail,
.elementor-featured-image {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* High specificity override for ANY Elementor element with background */
[class*="elementor-"][class*="elementor-element-"]:not(.elementor-motion-effects-element-type-background) {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Elementor motion effects override - matches Elementor's selector structure */
[class*="elementor-element"] > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Override Elementor backgrounds with repeat in inline styles */
[class*="elementor-"][style*="background-repeat"] {
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* ========================================
   WORDPRESS CORE & THEME SUPPORT
   Standard WordPress featured images
   ======================================== */

/* WordPress core featured image classes */
.post-thumbnail,
.post-thumbnail img,
.wp-post-image,
img.wp-post-image,
.attachment-post-thumbnail {
    object-fit: cover !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Block editor featured images */
.wp-block-post-featured-image,
.wp-block-post-featured-image img,
.wp-block-post-featured-image figure {
    object-fit: cover !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Featured image containers (common theme patterns) */
.featured-image,
.featured-image img,
.post-featured-image,
.post-featured-image img,
.entry-featured-image,
.entry-featured-image img {
    object-fit: cover !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Post/article specific featured images only */
.post .featured-image,
.post .post-thumbnail,
article .featured-image,
article .post-thumbnail,
.hentry .post-thumbnail,
.entry .featured-image {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Single post featured images (very specific) */
.single .post-thumbnail,
.single .featured-image,
.single .wp-block-post-featured-image,
.single-post .post-thumbnail,
.single-post .featured-image {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Only target background-image on featured image elements */
.post-thumbnail[style*="background-image"],
.featured-image[style*="background-image"],
.wp-block-post-featured-image[style*="background-image"],
.wp-post-image[style*="background-image"] {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Blog post listings */
.blog .post-thumbnail,
.archive .post-thumbnail,
.search .post-thumbnail {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ========================================
   TIPTAP COLUMNS SUPPORT
   Responsive column layout for blog posts
   ======================================== */

/* Column container - flex layout */
.wp-tiptap-columns {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

/* Individual columns */
.wp-tiptap-column {
    box-sizing: border-box;
    min-width: 0;
}

/* Mobile: Stack columns vertically */
@media (max-width: 768px) {
    .wp-tiptap-columns {
        flex-direction: column !important;
        gap: 1rem;
    }

    .wp-tiptap-column {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
}

/* Tablet: Adjust gap for medium screens */
@media (min-width: 769px) and (max-width: 1024px) {
    .wp-tiptap-columns {
        gap: 1.5rem;
    }
}

/* Print: Maintain column layout */
@media print {
    .wp-tiptap-columns {
        display: flex;
        page-break-inside: avoid;
    }
}

/* Images inside TipTap columns */
.wp-tiptap-column img,
.wp-tiptap-columns img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    border-radius: 8px;
    margin: 1rem 0;
}

/* Ensure images with width attributes respect column boundaries */
.wp-tiptap-column img[width],
.wp-tiptap-columns img[width] {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}

/* Mobile: Full width images in stacked columns */
@media (max-width: 768px) {
    .wp-tiptap-column img,
    .wp-tiptap-columns img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
}