/**
 * EPK Photo Styling
 * Makes [epk_photo] shortcode images round
 */

/* High specificity to override theme styles */
.epk-photo img,
img.epk-photo,
.epk-page .epk-photo img,
body .epk-photo img,
img[class*="epk-photo"] {
    border-radius: 50% !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: cover !important;
    aspect-ratio: 1 !important;
    border: none !important;
    padding: 0 !important;
}

/* Ensure the container doesn't interfere */
.epk-photo {
    text-align: center !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* Force round shape even if image is rectangular */
.epk-photo img {
    clip-path: circle(50%) !important;
    -webkit-clip-path: circle(50%) !important;
}

/* Responsive sizing */
@media (max-width: 768px) {
    .epk-photo img {
        max-width: 150px !important;
        width: 150px !important;
        height: 150px !important;
    }
}

@media (max-width: 480px) {
    .epk-photo img {
        max-width: 120px !important;
        width: 120px !important;
        height: 120px !important;
    }
}

/* Additional styling for better appearance */
.epk-photo img {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s ease !important;
}

.epk-photo img:hover {
    transform: scale(1.05) !important;
}