/* ===== Sushma Educational Trust — base styles (from design) ===== */
*{box-sizing:border-box}
body{margin:0}
html{scroll-behavior:smooth}
::selection{background:#7A1E2B;color:#fff}
img{display:block}
.deva{font-family:'Tiro Devanagari Hindi',serif}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.page-anim{animation:fadeUp .5s ease both}

.masonry{columns:3;column-gap:16px}
@media(max-width:880px){.masonry{columns:2}}
@media(max-width:560px){.masonry{columns:1}}

/* ===== SPA router: show only the active page ===== */
.page{display:none}
.page.active{display:block}

/* ===== Active nav underline (was sc-if span in source) ===== */
.nav-link{position:relative}
.nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;background:#C2922C;border-radius:2px}

/* ===== Mobile menu panel (hidden until toggled) ===== */
#mobMenu{display:none}
#mobMenu.open{display:flex}

/* ===== Gallery thumbnails + caption + hover zoom (was style-hover) ===== */
.gal-thumb{position:relative;border-radius:14px;overflow:hidden;cursor:pointer}
.gal-thumb img{width:100%;display:block;transition:transform .4s ease}
.gal-thumb:hover img{transform:scale(1.06)}
.gal-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(transparent,rgba(40,20,15,.74));color:#fff;font:600 13px 'Manrope'}

/* Home preview tiles are fixed-height; gallery masonry tiles flow naturally */
.gal-thumb.preview{height:220px}
.gal-thumb.preview img{height:100%;object-fit:cover}
.gal-thumb.masonry-item{break-inside:avoid;margin-bottom:16px;cursor:zoom-in}

/* ===== Gallery filter chips (was style-hover) ===== */
.chip{border:1px solid #E2D3C4;background:#fff;color:#5A524B;padding:9px 18px;border-radius:999px;font:600 14px 'Manrope';cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.chip:hover{border-color:#C2922C}
.chip.active{background:#7A1E2B;color:#fff;border-color:#7A1E2B}

/* ===== Form focus (was style-focus) ===== */
.field:focus{outline:none;border-color:#C2922C}

/* ===== Lightbox overlay ===== */
#lightbox{display:none}
#lightbox.open{display:flex}

/* ===== Responsive overrides (from design helmet) ===== */
@media(max-width:880px){
 .desk-nav{display:none!important}
 .mob-btn{display:inline-flex!important}
 .col2{grid-template-columns:1fr!important}
 .grid3{grid-template-columns:1fr 1fr!important}
 .hero-g{grid-template-columns:1fr!important}
 .sec{padding:62px 20px!important}
 .pad-l{padding:40px 24px!important}
}
@media(max-width:560px){
 .row-wrap{flex-direction:column!important;align-items:stretch!important}
 .grid3{grid-template-columns:1fr!important}
 .row-wrap>a{justify-content:center!important}
}