/**
 * Frontend styles for Pixel Perfect Coding's Elementor Picture Widget
 * 
 * These styles ensure the picture element displays correctly
 * and provides a good foundation for responsive images.
 */

/* Main widget container */
.ppc-picture-widget {
    display: inline-block;
    max-width: 100%;
    line-height: 0; /* Removes any unwanted spacing */
}

/* Picture element */
.ppc-picture-widget picture {
    display: block;
    width: 100%;
    line-height: 0; /* Removes any unwanted spacing */
}

/* Image element */
.ppc-picture-widget img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    line-height: 0; /* Removes any unwanted spacing */
    border: none; /* Remove any default borders */
    outline: none; /* Remove any default outlines */
}

/* Ensure proper aspect ratio maintenance */
.ppc-picture-widget picture,
.ppc-picture-widget img {
    vertical-align: top;
}

/* Loading states - Add specific styles as needed */

/* Accessibility improvements */
.ppc-picture-widget img:focus {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .ppc-picture-widget {
        break-inside: avoid;
    }
    
    .ppc-picture-widget img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .ppc-picture-widget img {
        filter: contrast(1.2);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .ppc-picture-widget img {
        animation: none !important;
        transition: none !important;
    }
}

/* Dark mode support - Add specific styles as needed */

/* Common responsive utilities */
.ppc-picture-widget.ppc-full-width {
    width: 100%;
    display: block;
}

.ppc-picture-widget.ppc-centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Object-fit fallback for older browsers */
.ppc-picture-widget img {
    object-fit: cover;
    font-family: "object-fit: cover;"; /* Fallback for IE */
}

/* Aspect ratio utilities (if needed) */
.ppc-picture-widget.ppc-aspect-16-9 {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.ppc-picture-widget.ppc-aspect-16-9 picture,
.ppc-picture-widget.ppc-aspect-16-9 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ppc-picture-widget.ppc-aspect-4-3 {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%; /* 4:3 aspect ratio */
}

.ppc-picture-widget.ppc-aspect-4-3 picture,
.ppc-picture-widget.ppc-aspect-4-3 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ppc-picture-widget.ppc-aspect-1-1 {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* 1:1 aspect ratio */
}

.ppc-picture-widget.ppc-aspect-1-1 picture,
.ppc-picture-widget.ppc-aspect-1-1 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobile-first responsive adjustments - Add specific styles as needed */