/* ===========================================
   SINGLE ALBUM HERO
=========================================== */

.schoolcms-single-album{

    width:100%;

    max-width:100%;

}

.site-content{

    overflow:hidden;

}


.schoolcms-album-cover{

    position:relative;

    width:100vw;

    height:70vh;

    min-height:550px;

    max-height:800px;

    margin-left:calc(50% - 50vw);

    overflow:hidden;

}

.schoolcms-album-cover img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

}

.schoolcms-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,.25),
        rgba(0,0,0,.05)
    );

}

.schoolcms-album-info{

    position:absolute;

    left:50%;

    bottom:80px;

    transform:translateX(-50%);

    width:min(1300px,92%);

    color:#fff;

    z-index:5;

}

.schoolcms-album-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:50px;

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(12px);

    font-size:14px;

    font-weight:600;

    letter-spacing:.4px;

    margin-bottom:18px;

}

.schoolcms-album-info h1{

    margin:0;

    font-size:56px;

    line-height:1.1;

    font-weight:800;

    color:#fff;

    text-shadow:0 8px 25px rgba(0,0,0,.45);

}

.schoolcms-meta{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-top:20px;

}

.schoolcms-meta span{

    display:flex;

    align-items:center;

    gap:8px;

    padding:12px 18px;

    border-radius:14px;

    background:rgba(255,255,255,.14);

    backdrop-filter:blur(15px);

    font-size:16px;

    font-weight:600;

}

/* ===========================================
   GALLERY
=========================================== */

.schoolcms-gallery-wrapper{

    width:min(1300px,92%);

    margin:80px auto;

}

.schoolcms-gallery-wrapper h2{

    font-size:42px;

    font-weight:800;

    margin-bottom:40px;

    color:#111827;

}

.schoolcms-gallery{

    display:grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap:22px;

}

.schoolcms-gallery-item{

    display:block;

    overflow:hidden;

    border-radius:22px;

    background:#fff;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s ease;

}

.schoolcms-gallery-item:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 55px rgba(0,0,0,.18);

}

.schoolcms-gallery-item img{

    width:100%;

    height:320px;

    object-fit:cover;

    display:block;

    transition:transform .45s ease;

}

.schoolcms-gallery-item:hover img{

    transform:scale(1.08);

}