/* -------------------------------------------------
   پایه
---------------------------------------------------*/
*{box-sizing:border-box;}
body{
    font-family:'Vazirmatn',Tahoma,Arial,sans-serif;
    background:#f5f7fa;
    color:#2c3e50;
}
a{color:inherit;text-decoration:none;}
.container{max-width:1100px;margin:auto;padding:0 20px;}

/* -------------------------------------------------
   بخش ویدیو (قاب دقیق 16:9)
---------------------------------------------------*/
.video-section{
    margin-top:2rem;
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}
.video-wrapper{
    width:100%;
    aspect-ratio:16/9.2;              /* نسبت 16:9 بدون padding */
    border:4px solid #ffcc00;
    border-radius:12px;
    overflow:hidden;    
    box-shadow:0 6px 20px rgba(0,0,0,0.12);
    background:#000;
}
.video-wrapper iframe{width:100%;height:100%;border:none;}
.video-title{font-size:1.8rem;font-weight:600;color:#0a2540;margin:0;}
.description{
    background:#fff;
    padding:1.6rem;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
    line-height:1.7;
    font-size:1rem;
}

/* -------------------------------------------------
   گالری
---------------------------------------------------*/
.gallery{margin:3rem 0;}
.gallery-title{
    font-size:1.8rem;
    margin-bottom:1rem;
    color:#0a2540;
    border-right:4px solid #ffcc00;
    padding-right:.5rem;
}
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
    gap:1rem;
}
.grid-item{
    position:relative;
    overflow:hidden;
    border-radius:8px;
    background:#000;
}
.grid-item img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .35s ease;
}
.grid-item:hover img{transform:scale(1.07);}
.grid-item figcaption{
    position:absolute;bottom:0;left:0;right:0;
    background:rgba(0,0,0,0.55);
    color:#fff;padding:.4rem .6rem;
    font-size:.9rem;text-align:center;
}

/* -------------------------------------------------
   تصویر کلیک‑پذیر (zoomable)
---------------------------------------------------*/
.zoomable-image{
    cursor:zoom-in;
    border-radius:8px;
    transition:transform .35s ease, box-shadow .35s;
}
.zoomable-image:hover{
    transform:scale(1.04);
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

/* -------------------------------------------------
   Lightbox + اسلایدر
---------------------------------------------------*/
.lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.9);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease, visibility .3s;
}
.lightbox.visible{
    opacity:1;
    visibility:visible;
}
.lightbox .close{
    position:absolute;
    top:20px;right:30px;
    font-size:2.8rem;
    color:#fff;
    cursor:pointer;
}
.lightbox-img{
    max-width:90%;
    max-height:80vh;
    border-radius:8px;
    box-shadow:0 4px 15px rgba(0,0,0,0.6);
}
.caption{
    margin-top:.8rem;
    color:#ddd;
    font-size:.95rem;
    text-align:center;
}
.nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,0.4);
    border:none;
    color:#fff;
    font-size:2.5rem;
    width:44px;height:44px;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}
.nav.left{left:20px;}
.nav.right{right:20px;}
.nav:hover{background:rgba(0,0,0,0.7);}

/* -------------------------------------------------
   ریسپانسیو
---------------------------------------------------*/
@media (max-width:480px){
    .video-title{font-size:1.5rem;}
    .description{font-size:.95rem;padding:1.2rem;}
}