@import url("./inner.css");

/* ----- Premium Puja Cards (Temple Theme) ----- */

/* Grid container: 3 columns desktop, 2 tablet, 1 mobile */
.puja-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin-top:20px;
  align-items:stretch;
}

/* Section container max-width for clean layout */
.puja-sections{
  max-width:1200px;
  margin:0 auto;
}

/* Premium card container */
.puja-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:26px;
  border-radius:20px;
  background:#ffffff;
  border:1px solid rgba(196,129,63,0.22);
  box-shadow:0 8px 24px rgba(90,28,18,.05), 0 0 0 0 rgba(196,129,63,0);
  transition:transform .3s ease, box-shadow .35s ease, border-color .25s ease;
  overflow:hidden;
}

/* Top accent strip: gold + maroon highlight */
.puja-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, #c4813f 0%, #d4420a 50%, rgba(196,129,63,.6) 100%);
  opacity:.85;
  transition:opacity .3s ease, box-shadow .3s ease;
}

/* Icon badge: rounded square, cream bg, gold border */
.puja-card__badge{
  width:52px;
  height:52px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#fff3df;
  border:1px solid rgba(196,129,63,0.35);
  color:#5a1c12;
  font-size:24px;
  line-height:1;
  margin-bottom:16px;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.8), 0 1px 3px rgba(196,129,63,.1);
  transition:background .25s ease, box-shadow .25s ease;
}

/* Title: serif, deep maroon, 20-22px desktop */
.puja-card__title{
  font-family:"Playfair Display", Georgia, serif;
  font-size:clamp(18px, 1.5vw, 22px);
  font-weight:700;
  line-height:1.3;
  color:#5a1c12;
  margin:0 0 12px;
}

/* Description: muted, 15-16px desktop, line-height 1.65 */
.puja-card__desc{
  font-size:clamp(14px, 1vw, 16px);
  line-height:1.65;
  color:rgba(0,0,0,0.62);
  margin:0;
  margin-top:auto;
}

/* Desktop hover: lift, stronger shadow, accent & badge brighten */
@media (hover: hover){
  .puja-card:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 36px rgba(90,28,18,.1), 0 0 0 1px rgba(196,129,63,.25), 0 6px 20px rgba(196,129,63,.08);
    border-color:rgba(196,129,63,.3);
  }
  .puja-card:hover::before{
    opacity:1;
    box-shadow:0 2px 8px rgba(212,66,10,.2);
  }
  .puja-card:hover .puja-card__badge{
    background:#fff7e6;
    box-shadow:inset 0 1px 2px rgba(255,255,255,.9), 0 2px 6px rgba(196,129,63,.15);
  }
}

/* Mobile: no hover lift, only active press */
@media (hover: none){
  .puja-card:hover{
    transform:none;
    box-shadow:0 8px 24px rgba(90,28,18,.05), 0 0 0 0 rgba(196,129,63,0);
    border-color:rgba(196,129,63,0.22);
  }
  .puja-card:hover::before{opacity:.85}
  .puja-card:hover .puja-card__badge{background:#fff3df}
  .puja-card:active{
    transform:scale(0.99);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  .puja-card,
  .puja-card__badge,
  .puja-card::before{
    transition:none;
  }
  .puja-card:hover{
    transform:none;
  }
}

/* Tablet: 2 columns, smaller gap */
@media (max-width: 991px){
  .puja-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:18px;
  }
  .puja-card{
    padding:22px;
  }
}

/* Mobile: 1 column, compact padding */
@media (max-width: 767px){
  .puja-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  .puja-card{
    padding:20px;
  }
  .puja-card__badge{
    width:44px;
    height:44px;
    font-size:20px;
    margin-bottom:14px;
  }
  .puja-card__title{
    font-size:18px;
  }
  .puja-card__desc{
    font-size:14px;
  }
}