/* 
 * Smart Image Orientation Support CSS
 * Mendukung tampilan gambar landscape dan portrait dengan optimal
 * Untuk DPMPTSP Website
 */

/* Base Image Classes */
.img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Smart Image Orientation Detection */
.img-landscape,
.img-portrait,
.img-square,
.img-wide,
.img-tall {
    object-fit: contain;
    object-position: center center;
    background: #f8f9fa;
    transition: all 0.3s ease;
}

/* Landscape Images (width > height) */
.img-landscape {
    object-fit: contain;
    object-position: center center;
}

/* Portrait Images (height > width) */
.img-portrait {
    object-fit: contain;
    object-position: center center;
}

/* Square Images (width = height) */
.img-square {
    object-fit: contain;
    object-position: center center;
}

/* Wide Images (very wide aspect ratio) */
.img-wide {
    object-fit: contain;
    object-position: center center;
}

/* Tall Images (very tall aspect ratio) */
.img-tall {
    object-fit: contain;
    object-position: center center;
}

/* Responsive Image Container */
.image-container {
    position: relative;
    overflow: hidden;
    background: #f8f9fa;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
}

/* Responsive Design for Different Screen Sizes */

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
    .img-landscape,
    .img-portrait,
    .img-square,
    .img-wide,
    .img-tall {
        object-fit: contain;
        object-position: center center;
    }
}

/* Desktop (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
    .img-landscape,
    .img-portrait,
    .img-square,
    .img-wide,
    .img-tall {
        object-fit: contain;
        object-position: center center;
    }
}

/* Tablet (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
    .img-landscape,
    .img-portrait,
    .img-square,
    .img-wide,
    .img-tall {
        object-fit: contain;
        object-position: center center;
    }
}

/* Mobile Large (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
    .img-landscape,
    .img-portrait,
    .img-square,
    .img-wide,
    .img-tall {
        object-fit: contain;
        object-position: center center;
    }
}

/* Mobile Small (up to 575px) */
@media (max-width: 575px) {
    .img-landscape,
    .img-portrait,
    .img-square,
    .img-wide,
    .img-tall {
        object-fit: contain;
        object-position: center center;
    }
}

/* Loading Animation */
.img-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Image Hover Effects */
.img-hover-effect:hover {
    transform: scale(1.02);
    filter: brightness(1.05) contrast(1.02);
}

/* Image Overlay */
.img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(46,125,50,0.1) 0%, rgba(76,175,80,0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-container:hover .img-overlay {
    opacity: 1;
}

/* Aspect Ratio Containers */
.aspect-ratio-16-9 {
    aspect-ratio: 16/9;
}

.aspect-ratio-4-3 {
    aspect-ratio: 4/3;
}

.aspect-ratio-1-1 {
    aspect-ratio: 1/1;
}

.aspect-ratio-3-4 {
    aspect-ratio: 3/4;
}

.aspect-ratio-9-16 {
    aspect-ratio: 9/16;
}

/* Utility Classes */
.img-center {
    object-position: center center;
}

.img-top {
    object-position: center top;
}

.img-bottom {
    object-position: center bottom;
}

.img-left {
    object-position: left center;
}

.img-right {
    object-position: right center;
}

/* Print Styles */
@media print {
    .img-landscape,
    .img-portrait,
    .img-square,
    .img-wide,
    .img-tall {
        object-fit: contain;
        object-position: center center;
        break-inside: avoid;
    }
}