body{opacity:0;transition:opacity .25s ease}
body.page-ready{opacity:1}
body.page-leave{opacity:0}

.page-hero{
  padding:44px 0 34px;
  position:relative;
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,153,51,.20), rgba(0,0,0,0) 55%),
    linear-gradient(90deg, rgba(128,0,0,.10), rgba(255,255,255,0));
}
.page-hero .inner{position:relative}
.page-hero .meta{margin-top:10px}

.split{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
  align-items:start;
}
.media-card{
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(128,0,0,.10);
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  background:#fff;
}
.media-card img{width:100%;height:100%;object-fit:cover;min-height:320px}

.puja-sections{display:grid;gap:26px}
.puja-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.puja-card{
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(128,0,0,.10);
  box-shadow:0 16px 30px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.puja-card:hover{transform:translateY(-4px);box-shadow:0 24px 46px rgba(0,0,0,.12)}
.puja-card .top{display:flex;align-items:center;gap:12px}
.puja-card .name{font-weight:800;color:var(--maroon)}
.puja-card .p{margin-top:10px}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-top:18px;
}
.gallery-item{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(128,0,0,.10);
  background:#fff;
  box-shadow:0 12px 24px rgba(0,0,0,.10);
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
.gallery-item:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(0,0,0,.14)}
.gallery-item img,.gallery-card__img{width:100%;height:220px;object-fit:cover;display:block}
.gallery-item .cap,.gallery-card__body{padding:12px 12px 14px}
.gallery-card__media{overflow:hidden;display:block}
.gallery-card__title.cap{font-weight:800;color:var(--maroon);display:block}

.lightbox{
  position:fixed;
  inset:0;
  display:none;
  background:rgba(0,0,0,.72);
  z-index:95;
  padding:20px;
}
.lightbox.open{display:grid;place-items:center}
.lightbox-card{
  width:min(980px, 100%);
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.30);
}
.lightbox-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.lightbox-top strong{color:var(--maroon)}
.lightbox-top button{
  width:44px;height:44px;
  border-radius:16px;
  border:1px solid rgba(128,0,0,.16);
  background:#fff;
  cursor:pointer;
  font-weight:900;
  color:var(--maroon);
}
.lightbox-body img{width:100%;height:auto;display:block}

.contact-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
}
.form{padding:18px}
.field{display:grid;gap:8px;margin-top:12px}
.field label{font-weight:800;color:rgba(28,28,28,.82)}
.field input,.field textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(128,0,0,.14);
  padding:12px 12px;
  font-size:14px;
  outline:none;
  background:#fff;
}
.field textarea{min-height:120px;resize:vertical}
.form-actions{margin-top:14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.form-output{font-weight:800}
.form-output.ok{color:#0b7a36}
.form-output.err{color:#b01212}

.side-cards{display:grid;gap:12px}
.side-card{padding:16px;border-radius:18px;border:1px solid rgba(128,0,0,.10);background:rgba(255,255,255,.86);box-shadow:0 12px 30px rgba(0,0,0,.06)}
.side-card strong{display:block;color:var(--maroon)}
.side-card span{display:block;margin-top:8px;color:rgba(28,28,28,.72);font-weight:600;line-height:1.6}

.map{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(128,0,0,.10);
  box-shadow:0 18px 40px rgba(0,0,0,.10);
}
.map iframe{width:100%;height:320px;border:0}

@media (max-width: 960px){
  .split{grid-template-columns:1fr}
  .puja-cards{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 520px){
  .gallery-grid{grid-template-columns:1fr}
  .gallery-item img{height:200px}
}