/* Frontend styles for focus point images */

/* Base class for images with focus points */
.has-focus-point {
    /* This class is automatically added to images with focus points */
}

/* Common object-fit cover classes that should use focus points */
.has-focus-point[style*="object-fit: cover"],
.has-focus-point.object-fit-cover {
    /* object-position will be set dynamically by PHP */
}

/* Additional utility classes that themes can use */
.cover-image {
    object-fit: cover;
}

.cover-image.has-focus-point {
    /* Focus point positioning will be applied automatically */
}

/* Hero image styling example */
.hero-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.hero-image.has-focus-point {
    /* Focus positioning applied via inline styles */
}

/* Card image styling example */
.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-image.has-focus-point {
    /* Focus positioning applied via inline styles */
}

/* Responsive image containers */
.image-container {
    position: relative;
    overflow: hidden;
}

.image-container img.has-focus-point {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

/* Thumbnail images */
.thumbnail.has-focus-point,
.wp-post-image.has-focus-point {
    object-fit: cover;
}

/* Featured images */
.featured-image.has-focus-point {
    object-fit: cover;
}

/* Background image alternative (for themes that want to use background-image instead) */
.bg-focus-point {
    background-size: cover;
    background-repeat: no-repeat;
    /* background-position will be set via data attributes and JavaScript if needed */
}

/* Print styles - remove object-fit for better print compatibility */
@media print {
    .has-focus-point {
        object-fit: initial !important;
        object-position: initial !important;
    }
}