/* ===== Gallery Page Styles - Balvirt ===== */
/* Company Requirement: White Background, Clean Design */

.gallery-page {
    background-color: #ffffff;
    min-height: 100vh;
    padding: 40px 20px 60px;
}

/* Gallery Header */
.gallery-header {
    text-align: center;
    margin-bottom: 50px;
}

.gallery-header h1 {
    font-size: 3.2rem;
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.gallery-header h1::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #6a11cb, #2575fc);
    border-radius: 2px;
}

.gallery-header p {
    font-size: 1.2rem;
    color: #6c757d;
    max-width: 700px;
    margin: 20px auto 0;
}

/* Albums Grid */
.albums-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 20px;
}

/* Album Card */
.album-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.4s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.album-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(106, 17, 203, 0.15);
    border-color: #6a11cb;
}

/* Thumbnail Carousel */
.thumbnail-carousel {
    width: 100%;
    height: 220px;
    position: relative;
    overflow: hidden;
    background: #f0f0f0;
}

.thumbnail-slider {
    display: flex;
    height: 100%;
    width: 100%;
}

.thumbnail-slide {
    min-width: 100%;
    height: 220px;
}

.thumbnail-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Simple Progress Indicator - ONLY number */
.thumbnail-progress {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    z-index: 10;
    backdrop-filter: blur(2px);
}

/* Progress Bar */
.thumbnail-carousel::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #6a11cb, #2575fc);
    z-index: 5;
}

/* ===== DOTS - Niche aur clean ===== */
.thumb-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 8px;
    border-radius: 20px;
    backdrop-filter: blur(2px);
}

.thumb-dot {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.thumb-dot.active {
    background: #6a11cb;
    transform: scale(1.3);
    box-shadow: 0 0 8px #6a11cb;
}

/* Album Info */
.album-info {
    padding: 15px;
    text-align: center;
}

.album-info h3 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 5px;
    font-weight: 600;
}

.album-info p {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 8px;
}

.photo-count {
    color: #6a11cb;
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-block;
    padding: 3px 12px;
    background: rgba(106, 17, 203, 0.1);
    border-radius: 50px;
}

/* ===== ALBUM-WISE ANIMATIONS ===== */

/* Album 1 - Dussehra (6 images) */
.album-card[data-album-id="1"] .thumbnail-slider {
    animation: slideShow1 18s infinite steps(1);
}
.album-card[data-album-id="1"] .thumbnail-carousel::after {
    animation: progress1 18s infinite linear;
    width: 16.66%;
}

@keyframes slideShow1 {
    0%, 16.66% { transform: translateX(0); }
    16.67%, 33.32% { transform: translateX(-100%); }
    33.33%, 49.98% { transform: translateX(-200%); }
    49.99%, 66.64% { transform: translateX(-300%); }
    66.65%, 83.3% { transform: translateX(-400%); }
    83.31%, 100% { transform: translateX(-500%); }
}

@keyframes progress1 {
    0% { left: 0; }
    16.66% { left: 16.66%; }
    33.32% { left: 33.32%; }
    49.98% { left: 49.98%; }
    66.64% { left: 66.64%; }
    83.3% { left: 83.3%; }
    100% { left: 100%; }
}

/* Album 2 - Independence Day (5 images) */
.album-card[data-album-id="2"] .thumbnail-slider {
    animation: slideShow2 15s infinite steps(1);
}
.album-card[data-album-id="2"] .thumbnail-carousel::after {
    animation: progress2 15s infinite linear;
    width: 20%;
}

@keyframes slideShow2 {
    0%, 20% { transform: translateX(0); }
    20.01%, 40% { transform: translateX(-100%); }
    40.01%, 60% { transform: translateX(-200%); }
    60.01%, 80% { transform: translateX(-300%); }
    80.01%, 100% { transform: translateX(-400%); }
}

@keyframes progress2 {
    0% { left: 0; }
    20% { left: 20%; }
    40% { left: 40%; }
    60% { left: 60%; }
    80% { left: 80%; }
    100% { left: 100%; }
}

/* Album 3 - Diwali (9 images) */
.album-card[data-album-id="3"] .thumbnail-slider {
    animation: slideShow3 27s infinite steps(1);
}
.album-card[data-album-id="3"] .thumbnail-carousel::after {
    animation: progress3 27s infinite linear;
    width: 11.11%;
}

@keyframes slideShow3 {
    0%, 11.11% { transform: translateX(0); }
    11.12%, 22.22% { transform: translateX(-100%); }
    22.23%, 33.33% { transform: translateX(-200%); }
    33.34%, 44.44% { transform: translateX(-300%); }
    44.45%, 55.55% { transform: translateX(-400%); }
    55.56%, 66.66% { transform: translateX(-500%); }
    66.67%, 77.77% { transform: translateX(-600%); }
    77.78%, 88.88% { transform: translateX(-700%); }
    88.89%, 100% { transform: translateX(-800%); }
}

@keyframes progress3 {
    0% { left: 0; }
    11.11% { left: 11.11%; }
    22.22% { left: 22.22%; }
    33.33% { left: 33.33%; }
    44.44% { left: 44.44%; }
    55.55% { left: 55.55%; }
    66.66% { left: 66.66%; }
    77.77% { left: 77.77%; }
    88.88% { left: 88.88%; }
    100% { left: 100%; }
}

/* Album 4 - Foundation Day (21 images) */
.album-card[data-album-id="4"] .thumbnail-slider {
    animation: slideShow4 63s infinite steps(1);
}
.album-card[data-album-id="4"] .thumbnail-carousel::after {
    animation: progress4 63s infinite linear;
    width: 4.76%;
}

@keyframes slideShow4 {
    0%, 4.76% { transform: translateX(0); }
    4.77%, 9.52% { transform: translateX(-100%); }
    9.53%, 14.28% { transform: translateX(-200%); }
    14.29%, 19.04% { transform: translateX(-300%); }
    19.05%, 23.8% { transform: translateX(-400%); }
    23.81%, 28.56% { transform: translateX(-500%); }
    28.57%, 33.32% { transform: translateX(-600%); }
    33.33%, 38.08% { transform: translateX(-700%); }
    38.09%, 42.84% { transform: translateX(-800%); }
    42.85%, 47.6% { transform: translateX(-900%); }
    47.61%, 52.36% { transform: translateX(-1000%); }
    52.37%, 57.12% { transform: translateX(-1100%); }
    57.13%, 61.88% { transform: translateX(-1200%); }
    61.89%, 66.64% { transform: translateX(-1300%); }
    66.65%, 71.4% { transform: translateX(-1400%); }
    71.41%, 76.16% { transform: translateX(-1500%); }
    76.17%, 80.92% { transform: translateX(-1600%); }
    80.93%, 85.68% { transform: translateX(-1700%); }
    85.69%, 90.44% { transform: translateX(-1800%); }
    90.45%, 95.2% { transform: translateX(-1900%); }
    95.21%, 100% { transform: translateX(-2000%); }
}

@keyframes progress4 {
    0% { left: 0; }
    4.76% { left: 4.76%; }
    9.52% { left: 9.52%; }
    14.28% { left: 14.28%; }
    19.04% { left: 19.04%; }
    23.8% { left: 23.8%; }
    28.56% { left: 28.56%; }
    33.32% { left: 33.32%; }
    38.08% { left: 38.08%; }
    42.84% { left: 42.84%; }
    47.6% { left: 47.6%; }
    52.36% { left: 52.36%; }
    57.12% { left: 57.12%; }
    61.88% { left: 61.88%; }
    66.64% { left: 66.64%; }
    71.4% { left: 71.4%; }
    76.16% { left: 76.16%; }
    80.92% { left: 80.92%; }
    85.68% { left: 85.68%; }
    90.44% { left: 90.44%; }
    95.2% { left: 95.2%; }
    100% { left: 100%; }
}

/* Album 5 - Cricket League (19 images) */
.album-card[data-album-id="5"] .thumbnail-slider {
    animation: slideShow5 57s infinite steps(1);
}
.album-card[data-album-id="5"] .thumbnail-carousel::after {
    animation: progress5 57s infinite linear;
    width: 5.26%;
}

@keyframes slideShow5 {
    0%, 5.26% { transform: translateX(0); }
    5.27%, 10.52% { transform: translateX(-100%); }
    10.53%, 15.78% { transform: translateX(-200%); }
    15.79%, 21.04% { transform: translateX(-300%); }
    21.05%, 26.3% { transform: translateX(-400%); }
    26.31%, 31.56% { transform: translateX(-500%); }
    31.57%, 36.82% { transform: translateX(-600%); }
    36.83%, 42.08% { transform: translateX(-700%); }
    42.09%, 47.34% { transform: translateX(-800%); }
    47.35%, 52.6% { transform: translateX(-900%); }
    52.61%, 57.86% { transform: translateX(-1000%); }
    57.87%, 63.12% { transform: translateX(-1100%); }
    63.13%, 68.38% { transform: translateX(-1200%); }
    68.39%, 73.64% { transform: translateX(-1300%); }
    73.65%, 78.9% { transform: translateX(-1400%); }
    78.91%, 84.16% { transform: translateX(-1500%); }
    84.17%, 89.42% { transform: translateX(-1600%); }
    89.43%, 94.68% { transform: translateX(-1700%); }
    94.69%, 100% { transform: translateX(-1800%); }
}

@keyframes progress5 {
    0% { left: 0; }
    5.26% { left: 5.26%; }
    10.52% { left: 10.52%; }
    15.78% { left: 15.78%; }
    21.04% { left: 21.04%; }
    26.3% { left: 26.3%; }
    31.56% { left: 31.56%; }
    36.82% { left: 36.82%; }
    42.08% { left: 42.08%; }
    47.34% { left: 47.34%; }
    52.6% { left: 52.6%; }
    57.86% { left: 57.86%; }
    63.12% { left: 63.12%; }
    68.38% { left: 68.38%; }
    73.64% { left: 73.64%; }
    78.9% { left: 78.9%; }
    84.16% { left: 84.16%; }
    89.42% { left: 89.42%; }
    94.68% { left: 94.68%; }
    100% { left: 100%; }
}

/* Expanded Section (Keep as is) */
.album-expanded {
    grid-column: 1 / -1;
    background: white;
    border-radius: 24px;
    padding: 30px;
    margin: 10px 0 30px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    display: none;
    animation: slideExpand 0.5s ease;
}

@keyframes slideExpand {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.album-expanded.active {
    display: block;
}

.expanded-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.expanded-header h2 {
    font-size: 2rem;
    color: #2c3e50;
}

.close-expanded {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #666;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.close-expanded:hover {
    background: #f0f0f0;
    color: #6a11cb;
}

.expanded-slider-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 20px;
}

.expanded-slider {
    display: flex;
    transition: transform 0.5s ease;
}

.expanded-slide {
    min-width: 100%;
}

.expanded-slide img {
    width: 100%;
    height: 450px;
    object-fit: contain;
    background: #f5f5f5;
}

.expanded-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.8);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    color: #333;
}

.expanded-btn:hover {
    background: #6a11cb;
    color: white;
}

.expanded-prev { left: 10px; }
.expanded-next { right: 10px; }

.expanded-dots {
    text-align: center;
    margin-top: 15px;
}

.expanded-dot {
    width: 8px;
    height: 8px;
    margin: 0 4px;
    background-color: #ddd;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

.expanded-dot.active {
    background-color: #6a11cb;
    transform: scale(1.2);
}

.expanded-counter {
    text-align: center;
    margin: 10px 0;
    font-size: 0.9rem;
    color: #666;
}

.expanded-desc {
    text-align: center;
    color: #666;
    font-size: 1rem;
    margin-top: 15px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 30px;
}

/* Responsive */
@media (max-width: 992px) {
    .albums-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .albums-grid { grid-template-columns: 1fr; }
    .expanded-slide img { height: 300px; }
}

@media (max-width: 480px) {
    .expanded-slide img { height: 250px; }
    .thumbnail-carousel { height: 200px; }
    .thumbnail-slide { height: 200px; }
}