/**
 * FB Focal Point Frontend Styles
 *
 * Styles for applying focal points to images on the frontend.
 * These styles ensure images with object-fit maintain their focal point.
 *
 * @package FB Focal Point
 */

/* 
 * Images with focal point support
 * The object-position will be set inline via the style attribute
 */
img[style*="object-position"],
.has-focal-point img {
    object-fit: cover;
}

/* 
 * Common component containers that typically crop images
 * These ensure the focal point is respected when images are cropped
 */

/* Hero sections */
.hero-image img,
.hero figure img {
    object-fit: cover;
}

/* Media blocks */
.media-block-element img,
.media-block figure img {
    object-fit: cover;
}

/* CTA sections */
.cta-image img,
.cta figure img {
    object-fit: cover;
}

/* Card images */
.card-image img,
.cards .card img {
    object-fit: cover;
}

/* Featured promos */
.featured-promo img,
.promo-image img {
    object-fit: cover;
}

/* Gallery images */
.gallery-item img {
    object-fit: cover;
}

/* Background images with focal point (use data attribute) */
[data-focal-point] {
    background-size: cover;
}

/* 
 * Utility class for elements that should use focal point
 * Add this class to any container to enable focal point on child images
 */
.fb-focal-point-container img {
    object-fit: cover;
}

/*
 * Additional responsive handling
 * Ensures focal points work well at all viewport sizes
 */
@media screen and (max-width: 768px) {
    .hero-image img,
    .media-block-element img,
    .cta-image img,
    .card-image img {
        object-fit: cover;
    }
}

/*
 * Print styles - reset object-fit for printing
 */
@media print {
    img[style*="object-position"] {
        object-fit: contain !important;
        object-position: center center !important;
    }
}