/**
 * Simple Child Rotator - CSS Styles
 * Smooth slider animations for the child rotator plugin
 */

.child-rotator,
.instragram-feed-area {
    overflow: hidden;
    position: relative;
    width: 100%;
    display: flex;
}

.child-rotator .single-instagram-item,
.instragram-feed-area .single-instagram-item {
    transition: transform 0.6s ease-in-out;
    transform: translateX(0);
}

/* Container sliding animation - moves all elements together */
.child-rotator.sliding,
.instragram-feed-area.sliding {
    transition: transform 0.6s ease-in-out;
}

.child-rotator.slide-left,
.instragram-feed-area.slide-left {
    transform: translateX(-16.666%); /* Move by one item width (100% / 6 items) */
}

/* Reset position after animation */
.child-rotator.slide-reset,
.instragram-feed-area.slide-reset {
    transform: translateX(0);
    transition: none; /* No transition for instant reset */
}

/* Ensure images fit properly within their containers */
.child-rotator .single-instagram-item img,
.instragram-feed-area .single-instagram-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Hover effects */
.child-rotator .single-instagram-item:hover,
.instragram-feed-area .single-instagram-item:hover {
    transform: scale(1.05);
    z-index: 10;
}

/* Instagram hover content */
.child-rotator .single-instagram-item .instagram-hover-content,
.instragram-feed-area .single-instagram-item .instagram-hover-content {
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.child-rotator .single-instagram-item:hover .instagram-hover-content,
.instragram-feed-area .single-instagram-item:hover .instagram-hover-content {
    opacity: 1;
    visibility: visible;
}

/* Responsive behavior - Custom breakpoints */
/* 0px and up: 2 items per row (50% each) */
.child-rotator .single-instagram-item,
.instragram-feed-area .single-instagram-item {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
}

/* 576px and up: 3 items per row (33.333% each) */
@media (min-width: 576px) {
    .child-rotator .single-instagram-item,
    .instragram-feed-area .single-instagram-item {
        flex: 0 0 33.333%;
        width: 33.333%;
        max-width: 33.333%;
    }
}

/* 768px and up: 4 items per row (25% each) */
@media (min-width: 768px) {
    .child-rotator .single-instagram-item,
    .instragram-feed-area .single-instagram-item {
        flex: 0 0 25%;
        width: 25%;
        max-width: 25%;
    }
}

/* 992px and up: 5 items per row (20% each) */
@media (min-width: 992px) {
    .child-rotator .single-instagram-item,
    .instragram-feed-area .single-instagram-item {
        flex: 0 0 20%;
        width: 20%;
        max-width: 20%;
    }
}

/* 1200px and up: 6 items per row (16.666% each) */
@media (min-width: 1200px) {
    .child-rotator .single-instagram-item,
    .instragram-feed-area .single-instagram-item {
        flex: 0 0 16.666%;
        width: 16.666%;
        max-width: 16.666%;
    }
}

/* Pause indicator */
.child-rotator.paused,
.instragram-feed-area.paused {
    cursor: pointer;
}

.child-rotator.paused::after,
.instragram-feed-area.paused::after {
    content: "⏸";
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 8px;
    border-radius: 3px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.child-rotator.paused:hover::after,
.instragram-feed-area.paused:hover::after {
    opacity: 1;
}