:root{--blue:#2563eb;--deep:#1e40af;--light:#3b82f6;--pale:#dbeafe;--dark:#0f172a;--txt:#1e293b;--sub:#64748b}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Manrope',sans-serif;background:#fff;color:var(--txt);overflow-x:hidden}

/* HEADER */
.page-header{
    padding:clamp(80px,15vw,150px) 20px clamp(50px,8vw,80px);
    background:linear-gradient(135deg,var(--blue),#1e3d6f);
    color:#fff; text-align:center; position:relative; overflow:hidden;
}
.page-header::before{
    content:'';position:absolute;width:200%;height:200%;
    background:radial-gradient(circle,rgba(255,210,63,.07) 0%,transparent 70%);
    top:-50%;left:-50%;animation:spin 20s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.ph-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(2rem,6vw,3.5rem);font-weight:700;color:#fff;margin-bottom:10px;position:relative;z-index:1;animation:fadeUp .7s ease-out}
.ph-sub{color:rgba(255,255,255,.85);font-size:clamp(.95rem,3vw,1.2rem);position:relative;z-index:1;animation:fadeUp .9s ease-out .15s backwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* EVENT INFO CARD */
.event-info-card{
    background:#fff;border-radius:20px;padding:clamp(20px,4vw,36px);
    margin:-44px auto 50px;max-width:1200px;position:relative;z-index:2;
    box-shadow:0 20px 60px rgba(37,99,235,.14);
}
.eic-badge{
    position:absolute;top:20px;right:20px;
    background:linear-gradient(135deg,var(--blue),var(--light));
    color:#fff;padding:clamp(9px,2vw,14px) clamp(14px,3vw,24px);
    border-radius:50px;font-weight:700;font-size:clamp(.8rem,2vw,1.05rem);
    box-shadow:0 8px 24px rgba(37,99,235,.28);
    display:flex;align-items:center;gap:7px;white-space:nowrap;
}
.eic-title{
    font-family:'Space Grotesk',sans-serif;font-size:clamp(1.4rem,4vw,2.4rem);font-weight:700;
    color:var(--deep);margin-top:clamp(50px,8vw,16px);margin-bottom:8px;
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.eic-title i{color:var(--blue);font-size:clamp(1.3rem,3.5vw,2rem)}
.eic-date{color:var(--sub);font-size:clamp(.9rem,2.5vw,1.05rem);display:flex;align-items:center;gap:8px;margin-bottom:22px}
.back-link{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--deep);color:#fff;
    padding:11px 26px;border-radius:50px;font-weight:600;
    font-size:clamp(.9rem,2.5vw,1rem);text-decoration:none;
    transition:all .3s;box-shadow:0 6px 18px rgba(30,64,175,.3);
}
.back-link:hover{background:var(--blue);transform:translateY(-2px);color:#fff;box-shadow:0 10px 28px rgba(37,99,235,.4)}
.dl-btn{
    display:inline-flex;align-items:center;gap:8px;
    background:linear-gradient(135deg,var(--blue),var(--light));color:#fff;
    border:none;padding:11px 28px;border-radius:50px;
    font-weight:600;font-size:clamp(.9rem,2.5vw,1rem);cursor:pointer;
    transition:all .3s;box-shadow:0 6px 18px rgba(37,99,235,.3);
}
.dl-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(37,99,235,.42)}
.dl-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* GALLERY */
.gallery-section{padding:0 0 90px}
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
    gap:clamp(12px,2.5vw,24px);
    padding:clamp(8px,2vw,16px);
}
.g-item{
    position:relative;border-radius:18px;overflow:hidden;
    background:#e8f0fe;cursor:pointer;
    box-shadow:0 8px 26px rgba(0,0,0,.09);
    transition:all .4s cubic-bezier(.4,0,.2,1);
}
.g-item:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 50px rgba(37,99,235,.24)}
.g-item img{
    width:100%;height:clamp(190px,30vw,280px);
    object-fit:cover;display:block;transition:transform .5s ease;
}
.g-item:hover img{transform:scale(1.1)}
.g-overlay{
    position:absolute;inset:0;
    background:linear-gradient(to top,rgba(37,99,235,.9) 0%,transparent 55%);
    opacity:0;transition:opacity .3s;
    display:flex;align-items:flex-end;
    padding:clamp(12px,2.5vw,20px);gap:8px;
}
@media(hover:none){.g-overlay{opacity:1;background:linear-gradient(to top,rgba(37,99,235,.85) 0%,transparent 58%)}}
.g-item:hover .g-overlay{opacity:1}
.g-counter{
    position:absolute;top:10px;right:10px;
    background:rgba(37,99,235,.9);color:#fff;
    padding:5px 13px;border-radius:20px;font-size:.76rem;font-weight:700;
    backdrop-filter:blur(8px);
}
.ov-btn{
    background:#fff;color:var(--blue);border:none;
    padding:clamp(7px,1.5vw,9px) clamp(10px,2vw,16px);
    border-radius:50px;font-weight:600;cursor:pointer;
    display:flex;align-items:center;gap:6px;
    font-size:clamp(.78rem,2vw,.88rem);flex:1;justify-content:center;
    transition:all .3s;white-space:nowrap;
}
.ov-btn.view{background:var(--blue);color:#fff}
.ov-btn:hover{transform:scale(1.06)}
.ov-btn.view:hover{background:var(--deep)}

/* EMPTY */
.empty-st{text-align:center;padding:70px 20px;border:2px dashed var(--pale);border-radius:20px}
.empty-st i{font-size:3.5rem;color:#93c5fd;margin-bottom:16px;display:block}
.empty-st h4{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;color:var(--deep);margin-bottom:8px}
.empty-st p{color:var(--sub)}

/* LIGHTBOX */
#lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.96);z-index:99999;justify-content:center;align-items:center}
#lightbox.active{display:flex;animation:fadeIn .15s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.lb-wrapper{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:60px 70px 70px}
#lbImg{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 0 70px rgba(37,99,235,.35);transition:opacity .2s}
.lb-cls{position:fixed;top:14px;right:14px;width:44px;height:44px;background:#fff;color:var(--deep);border:none;border-radius:50%;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:all .3s;z-index:99999;box-shadow:0 4px 18px rgba(0,0,0,.3)}
.lb-cls:hover{background:#ef4444;color:#fff;transform:rotate(90deg) scale(1.1)}
.lb-nav{position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.14);backdrop-filter:blur(10px);color:#fff;border:2px solid rgba(255,255,255,.25);width:clamp(40px,7vw,52px);height:clamp(40px,7vw,52px);border-radius:50%;cursor:pointer;font-size:clamp(1rem,3vw,1.3rem);display:flex;align-items:center;justify-content:center;transition:all .3s;z-index:99999}
.lb-nav:hover{background:var(--blue);border-color:var(--blue)}
.lb-prev{left:clamp(8px,2vw,18px)}.lb-next{right:clamp(8px,2vw,18px)}
.lb-cnt{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.14);backdrop-filter:blur(10px);color:#fff;padding:7px 20px;border-radius:24px;font-size:.88rem;font-weight:700;z-index:99999;border:1px solid rgba(255,255,255,.2);white-space:nowrap}
.lb-dl{position:fixed;bottom:15px;right:15px;background:var(--blue);color:#fff;border:none;padding:9px 20px;border-radius:24px;font-weight:600;cursor:pointer;font-size:.88rem;display:flex;align-items:center;gap:7px;transition:all .3s;z-index:99999;box-shadow:0 4px 18px rgba(37,99,235,.4)}
.lb-dl:hover{background:var(--deep);transform:translateY(-2px)}
.swipe-hint{display:none;position:fixed;top:14px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.55);font-size:.75rem;z-index:99999;white-space:nowrap}
@media(hover:none){.swipe-hint{display:block}}

/* RESPONSIVE */
@media(max-width:768px){
    .gallery-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:10px}
    .g-item img{height:clamp(140px,28vw,210px)}
    .event-info-card{margin:-30px 15px 40px;border-radius:15px}
    .lb-wrapper{padding:54px 50px 64px}
}
@media(max-width:480px){
    .gallery-grid{gap:8px;padding:8px}
    .event-info-card{margin:-20px 10px 30px;padding:14px;border-radius:12px}
    .g-item img{height:clamp(130px,40vw,175px)}
    .g-item{border-radius:12px}
    .lb-wrapper{padding:50px 44px 62px}
    .lb-cnt{bottom:64px;font-size:.74rem;padding:5px 14px}
    .ov-btn .btn-txt{display:none}
}
@media(max-width:360px){
    .gallery-grid{grid-template-columns:1fr}
    .g-item img{height:220px}
    .ov-btn .btn-txt{display:inline}
}
@media(max-height:500px) and (orientation:landscape){
    .lb-wrapper{padding:44px 58px 50px}
    .lb-cnt{bottom:8px}
    .lb-dl{bottom:6px}
}

/* allimage.css — Gallery Event Photos Page Styles */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Raleway', sans-serif; background: #f8f9fa; }

/* ══════════════════════════════════════════════════════════════════════════
   PAGE HEADER
   ══════════════════════════════════════════════════════════════════════════ */
.page-header {
    background: linear-gradient(135deg, #2563eb, #1e3d6f);
    padding: clamp(60px, 10vw, 100px) 20px clamp(40px, 6vw, 60px);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-header::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 210, 63, 0.08) 0%, transparent 70%);
    top: -50%;
    left: -50%;
    animation: spin 20s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.ph-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    color: #fff;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
    animation: fadeUp 0.7s ease-out;
}
.ph-sub {
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    position: relative;
    z-index: 1;
    animation: fadeUp 0.9s ease-out 0.15s backwards;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   EVENT INFO CARD
   ══════════════════════════════════════════════════════════════════════════ */
.event-info-card {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    margin: -40px auto 50px;
    max-width: 900px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10;
}
.eic-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 16px;
}
.eic-badge i { font-size: 1rem; }
.eic-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.eic-title i { color: #2563eb; font-size: 1.5rem; }
.eic-date {
    color: #7f8c8d;
    font-size: 1rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.eic-date i { color: #e74c3c; }

.btn-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.back-link {
    background: #f1f5f9;
    color: #475569;
    border: none;
    padding: 12px 24px;
    border-radius: 24px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}
.back-link:hover {
    background: #e2e8f0;
    color: #1e293b;
    transform: translateX(-4px);
}
.dl-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 24px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}
.dl-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35);
}
.dl-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ══════════════════════════════════════════════════════════════════════════
   GALLERY GRID
   ══════════════════════════════════════════════════════════════════════════ */
.gallery-section { padding: 40px 0 80px; }
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.g-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #f1f5f9;
}
.g-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
.g-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.g-item:hover img {
    transform: scale(1.1);
}
.g-counter {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 2;
}
.g-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}
.g-item:hover .g-overlay {
    opacity: 1;
}
.ov-btn {
    background: #fff;
    color: #2c3e50;
    border: none;
    padding: 10px 18px;
    border-radius: 24px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}
.ov-btn:hover {
    background: #2563eb;
    color: #fff;
    transform: scale(1.05);
}
.ov-btn.view {
    background: #2563eb;
    color: #fff;
}
.ov-btn.view:hover {
    background: #1d4ed8;
}

/* ══════════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════════════════════════════════ */
.empty-st {
    text-align: center;
    padding: 80px 20px;
}
.empty-st i {
    font-size: 4rem;
    color: #bfdbfe;
    margin-bottom: 20px;
    display: block;
}
.empty-st h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: #2c3e50;
    margin-bottom: 10px;
}
.empty-st p {
    color: #7f8c8d;
    font-size: 1.05rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHTBOX
   ══════════════════════════════════════════════════════════════════════════ */
#lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}
#lightbox.active {
    display: flex;
}
.swipe-hint {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    display: none;
}
.lb-wrapper {
    position: relative;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
#lbImg {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 8px;
    transition: opacity 0.3s ease;
}
.lb-cls {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100;
}
.lb-cls:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}
.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100;
}
.lb-nav:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.1);
}
.lb-prev { left: 20px; }
.lb-next { right: 20px; }
.lb-cnt {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
}
.lb-dl {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 24px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}
.lb-dl:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.4);
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .event-info-card {
        padding: 24px;
        margin: -30px 15px 40px;
    }
    .eic-title {
        font-size: 1.4rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .btn-row {
        flex-direction: column;
    }
    .back-link, .dl-btn {
        width: 100%;
        justify-content: center;
    }
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }
    .swipe-hint {
        display: block;
    }
    .lb-nav {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    .lb-prev { left: 10px; }
    .lb-next { right: 10px; }
    .lb-cls {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        top: 15px;
        right: 15px;
    }
    .lb-dl {
        bottom: 20px;
        right: 20px;
        padding: 10px 18px;
        font-size: 0.85rem;
    }
    .lb-cnt {
        bottom: 20px;
        font-size: 0.9rem;
        padding: 8px 18px;
    }
    .ov-btn .btn-txt {
        display: none;
    }
    .ov-btn {
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}