/* Photography Carousel */
.photo-carousel-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 100%;
    margin: 50px auto;
    padding: 20px;
}


.photo-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex: 1;
    position: relative;
    max-width: 1200px;
}

.photo-main,
.photo-side {
    /* transition removed to prevent conflict with keyframe animations */
}

.photo-main {
    flex: 0 0 450px;
    max-width: 450px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.photo-main img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
    display: block;
}

.photo-side {
    flex: 0 0 250px;
    max-width: 250px;
    height: 333px; /* Adjusted to match Main ratio (450:600), 250 * (600/450) = 333.33 */
    opacity: 0.5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-side:hover {
    opacity: 1;
    transform: scale(1.05);
}

.photo-side img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 7px; /* 7px * 1.8 scale approx equals 12px main radius */
    display: block;
}

.photo-nav-btn {
    background: transparent; /* Removed background */
    border: none;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    flex-shrink: 0;
}

.photo-nav-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.photo-nav-btn svg {
    width: 26px;
    height: 26px;
}

/* Responsive */
@media (max-width: 1200px) {
    .photo-main {
        flex: 0 0 400px;
        max-width: 400px;
        max-height: 550px;
    }
    
    .photo-side {
        flex: 0 0 220px;
        max-width: 220px;
        height: 303px; /* 220 * (550/400) = 302.5 */
    }
}

@media (max-width: 900px) {
    .photo-carousel-wrapper {
        gap: 12px;
        padding: 15px;
    }
    
    .photo-display {
        gap: 10px;
    }
    
    .photo-main {
        flex: 0 0 350px;
        max-width: 350px;
        max-height: 500px;
    }
    
    .photo-side {
        flex: 0 0 180px;
        max-width: 180px;
        height: 257px; /* 180 * (500/350) = 257.14 */
    }
    
    .photo-nav-btn {
        width: 45px;
        height: 45px;
    }
    
    .photo-nav-btn svg {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 768px) {
    .photo-side {
        display: none;
    }
    
    .photo-main {
        flex: 0 0 90%;
        max-width: 450px;
        max-height: 600px;
    }
    
    .photo-carousel-wrapper {
        gap: 15px;
    }
}

/* --- Animation Styles --- */

/* Helper to prevent clicks during animation */
.animating {
    pointer-events: none;
}

/* 
   Distance Calculation for Desktop:
   Main Width (450px) / 2 = 225px
   Side Width (250px) / 2 = 125px
   Gap = 15px
   Total Distance = 225 + 125 + 15 = 365px
*/

/* --- Moving Left (Next Photo) --- */
/* Main moves to Left position */
.slide-main-to-left {
    animation: mainToLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes mainToLeft {
    to {
        transform: translateX(-365px) scale(0.555); /* 250/450 ≈ 0.555 */
        opacity: 0.5;
        z-index: 5;
    }
}

/* Right moves to Main position */
.slide-right-to-main {
    animation: rightToMain 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes rightToMain {
    to {
        transform: translateX(-365px) scale(1.8); /* 450/250 = 1.8 */
        opacity: 1;
        z-index: 20;
    }
}

/* Left moves out */
.slide-left-out {
    animation: leftOut 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes leftOut {
    to {
        transform: translateX(-200px) scale(0.8);
        opacity: 0;
    }
}

/* --- Moving Right (Previous Photo) --- */
/* Main moves to Right position */
.slide-main-to-right {
    animation: mainToRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes mainToRight {
    to {
        transform: translateX(365px) scale(0.555);
        opacity: 0.5;
        z-index: 5;
    }
}

/* Left moves to Main position */
.slide-left-to-main {
    animation: leftToMain 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes leftToMain {
    to {
        transform: translateX(365px) scale(1.8);
        opacity: 1;
        z-index: 20;
    }
}

/* Right moves out */
.slide-right-out {
    animation: rightOut 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes rightOut {
    to {
        transform: translateX(200px) scale(0.8);
        opacity: 0;
    }
}

/* --- Responsive Animations --- */
@media (max-width: 1200px) {
    /* Main: 400, Side: 220, Gap: 15 -> Dist: 200 + 110 + 15 = 325px */
    @keyframes mainToLeft { to { transform: translateX(-325px) scale(0.55); opacity: 0.5; z-index: 5; } }
    @keyframes rightToMain { to { transform: translateX(-325px) scale(1.81); opacity: 1; z-index: 20; } }
    @keyframes mainToRight { to { transform: translateX(325px) scale(0.55); opacity: 0.5; z-index: 5; } }
    @keyframes leftToMain { to { transform: translateX(325px) scale(1.81); opacity: 1; z-index: 20; } }
}

@media (max-width: 900px) {
    /* Main: 350, Side: 180, Gap: 10 -> Dist: 175 + 90 + 10 = 275px */
    @keyframes mainToLeft { to { transform: translateX(-275px) scale(0.51); opacity: 0.5; z-index: 5; } }
    @keyframes rightToMain { to { transform: translateX(-275px) scale(1.94); opacity: 1; z-index: 20; } }
    @keyframes mainToRight { to { transform: translateX(275px) scale(0.51); opacity: 0.5; z-index: 5; } }
    @keyframes leftToMain { to { transform: translateX(275px) scale(1.94); opacity: 1; z-index: 20; } }
}