/* wireframe-specific layout styling to match uploaded mockup */
:root{ --maroon:#6e2230; --gold:#c89b5a; --cream:#fbf6f0; --muted:#8b7f76; --max-width:1100px; }

/* hero */
.hero-wireframe {
  position: relative;
  width: 100%;
  height: 340px;

  /* <<< this creates 3 side-by-side images >>> */
  background:
     url('../assets/images/hero_1.jpg') left top / 33.4% 100% no-repeat,
     url('../assets/images/hero_1.jpg') center top / 33.3% 100% no-repeat,
     url('../assets/images/hero_1.jpg') right top / 33.3% 100% no-repeat;

  display: flex;
  align-items: flex-end;
  border-bottom: 6px solid var(--maroon);
}

/* overlay fade just like wireframe */
.hero-wireframe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(0,0,0,0) 45%,
      rgba(0,0,0,0.55) 100%
  );
}

.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 28px 20px;
  color: #fff;
}

.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: 56px;
  margin: 0;
  letter-spacing: 4px;
}

.hero-sub {
  margin: 10px auto 18px;
  max-width: 880px;
  color: rgba(255,255,255,0.92);
}

.hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
}

/* about + events row */
.about-events{display:flex;gap:20px;padding:28px 0;align-items:flex-start}
.about-preview{flex:1;min-width:240px}
.events-cards{flex:2;display:flex;gap:16px;justify-content:flex-end}
.event-card{width:220px;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 10px 20px rgba(0,0,0,0.06)}
.event-card img{width:100%;height:110px;object-fit:cover}
.event-caption{padding:10px;font-weight:700;color:var(--maroon);background:#fff}

/* media strip */
.media-strip{background:var(--maroon);color:#fff;padding:22px 0}
.media-inner{display:flex;gap:20px;align-items:center}
.media-left{flex:2}
.media-left .thumbs{display:flex;gap:10px;margin-top:12px}
.media-left .thumbs img{width:78px;height:58px;object-fit:cover;border-radius:6px;border:3px solid rgba(255,255,255,0.08)}
.media-right{flex:1}
.timeline{background:rgba(255,255,255,0.06);padding:14px;border-radius:8px}
.timeline .t-item{display:flex;align-items:center;gap:10px;padding:8px 0}
.timeline .dot{width:10px;height:10px;border-radius:50%;background:var(--gold);display:inline-block}

/* timings */
.timings{display:flex;gap:20px;padding:26px 0;align-items:flex-start}
.timing-table{flex:1;background:#fff;padding:16px;border-radius:8px;box-shadow:0 8px 18px rgba(0,0,0,0.04)}
.timing-table table{width:100%;border-collapse:collapse}
.timing-table th{background:var(--gold);color:#441b21;padding:8px;text-align:left}
.timing-table td{padding:10px;border-top:1px dashed rgba(0,0,0,0.06);color:var(--muted)}
.special-puja{flex:1;padding:16px;background:#fff;border-radius:8px;box-shadow:0 8px 18px rgba(0,0,0,0.04)}
.puja-list{list-style:none;padding:0;margin:0}
.puja-list li{padding:8px 0;color:var(--muted)}
.puja-list .live-box{margin-top:12px}

/* services & seva */
.seva{display:flex;gap:20px;padding:26px 0;align-items:flex-start}
.seva-left{flex:1}
.seva-right{flex:1.2}
.mini-calendar{background:#fff;padding:12px;border-radius:8px;box-shadow:0 8px 18px rgba(0,0,0,0.04)}
.cal-head{text-align:center;font-weight:700;padding:6px 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:8px}
.day{padding:8px;text-align:center;border-radius:6px;background:linear-gradient(180deg,#fff,#f7f3ef);font-size:13px;color:var(--muted)}
.day.active{background:linear-gradient(180deg,var(--gold), #f1d9a9);color:#3b251f;font-weight:700}

/* seva form */
.seva-form label{display:block;margin-bottom:8px}
.seva-form input, .seva-form textarea, .seva-form select{width:100%;padding:10px;border-radius:6px;border:1px solid rgba(0,0,0,0.08)}
.seva-form textarea{min-height:90px;resize:vertical}
.form-row{display:flex;gap:10px;align-items:center;}

/* small helpers */
.small{font-size:14px}
.center{text-align:center}
@media (max-width:900px){
  .hero-wireframe {
    height: 260px;
    background: url('/mnt/data/home.jpeg') center/cover no-repeat;
  }
  .hero-title { font-size: 40px; }
  .about-events{flex-direction:column}
  .media-inner{flex-direction:column;gap:12px}
  .timings{flex-direction:column}
  .seva{flex-direction:column}
  .events-cards{justify-content:flex-start;flex-wrap:wrap}
}