/* ============================================================
   Braj Yatra — shared stylesheet
   Palette: dusk teal, peacock, marigold, temple maroon, sandstone cream
   Type: Cormorant Garamond (display) + Mukta (body, Devanagari-ready)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Mukta:wght@400;500;600;700&display=swap');

:root{
  --ink:#0B3B4A;        /* deep dusk teal — night sky over the Yamuna */
  --peacock:#0F6E6E;    /* peacock feather green-teal */
  --marigold:#D9A02D;   /* marigold garlands, temple domes */
  --marigold-soft:#F0C25E;
  --maroon:#7A2331;     /* vermilion tilak, temple stone */
  --cream:#FBF1DE;      /* sandstone / parchment */
  --cream-2:#F4E6C8;
  --charcoal:#2B2420;
  --charcoal-soft:#5A4F45;
  --line:rgba(43,36,32,0.14);
  --radius-lg:28px;
  --radius-sm:10px;
  --shadow:0 18px 40px rgba(11,59,74,0.16);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--charcoal);
  font-family:'Mukta',system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  color:var(--ink);
  margin:0 0 .4em;
  letter-spacing:.2px;
}
h1{font-size:clamp(2.6rem,6vw,4.6rem); line-height:1.05; font-weight:700;}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.15;}
h3{font-size:1.4rem;}
p{max-width:62ch; color:var(--charcoal-soft);}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1160px; margin:0 auto; padding:0 28px;}
.italic{font-style:italic; color:var(--maroon);}

/* ---------- Nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(11,59,74,0.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(217,160,45,0.35);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.brand{
  font-family:'Cormorant Garamond',serif;
  font-weight:700; font-size:1.5rem; color:var(--cream);
  text-decoration:none; display:flex; align-items:center; gap:10px;
}
.brand .mark{
  width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--marigold-soft), var(--marigold) 60%, var(--maroon) 100%);
  flex:none;
}
.nav-links{
  display:flex; gap:28px; list-style:none; margin:0; padding:0;
  font-size:.98rem; font-weight:500;
}
.nav-links a{
  color:var(--cream); text-decoration:none; opacity:.86;
  padding:8px 2px; border-bottom:2px solid transparent;
  transition:opacity .2s, border-color .2s;
}
.nav-links a:hover, .nav-links a.active{opacity:1; border-color:var(--marigold);}
.nav-cta{
  background:var(--marigold); color:var(--ink); text-decoration:none;
  padding:10px 20px; border-radius:999px; font-weight:600; font-size:.95rem;
  white-space:nowrap;
}
.nav-toggle{display:none; background:none; border:none; color:var(--cream); font-size:1.6rem;}

@media(max-width:860px){
  .nav-links{
    position:absolute; top:76px; left:0; right:0;
    background:var(--ink); flex-direction:column; gap:0;
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .nav-links.open{max-height:400px; padding:10px 0;}
  .nav-links li{padding:12px 28px; border-top:1px solid rgba(255,255,255,.08);}
  .nav-toggle{display:block;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 30px; border-radius:999px; font-weight:600;
  text-decoration:none; font-size:1rem; border:2px solid transparent;
  cursor:pointer; font-family:'Mukta',sans-serif;
}
.btn-primary{background:var(--marigold); color:var(--ink);}
.btn-primary:hover{background:var(--marigold-soft);}
.btn-outline{border-color:var(--cream); color:var(--cream); background:transparent;}
.btn-outline:hover{background:rgba(251,241,222,.12);}
.btn-maroon{background:var(--maroon); color:var(--cream);}
.btn-maroon:hover{background:#8f2a3a;}

/* ---------- Hero (home) ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 900px 500px at 15% 0%, rgba(15,110,110,0.55), transparent 60%),
    linear-gradient(180deg,#0B3B4A 0%, #0A2C38 100%);
  color:var(--cream); padding:96px 0 70px;
}
.hero-stars{position:absolute; inset:0; opacity:.5; pointer-events:none;}
.hero .wrap{position:relative; z-index:2;}
.eyebrow-tag{
  display:inline-block; color:var(--marigold-soft); font-family:'Cormorant Garamond',serif;
  font-style:italic; font-size:1.25rem; margin-bottom:8px;
}
.hero h1{color:var(--cream);}
.hero p.lead{color:#D9E3E1; font-size:1.15rem; max-width:52ch; margin-top:18px;}
.hero-actions{display:flex; gap:16px; margin-top:34px; flex-wrap:wrap;}

.krishna-corner{
  position:absolute; right:2%; bottom:-10px; width:min(280px,32vw);
  z-index:3; filter:drop-shadow(0 12px 24px rgba(0,0,0,.35));
}
@media(max-width:700px){.krishna-corner{width:150px; right:-10px;}}

/* ---------- Prem Mandir glow banner ---------- */
.glow-banner{
  position:relative; padding:110px 0; overflow:hidden;
  background:linear-gradient(180deg,#050f16 0%, #0B2733 55%, #0B3B4A 100%);
  text-align:center; color:var(--cream);
}
.glow-banner .halo{
  position:absolute; left:50%; top:40%; width:640px; height:640px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(240,194,94,0.55), rgba(240,194,94,0.12) 45%, transparent 70%);
  filter:blur(6px);
}
.temple-illustration{position:relative; z-index:2; margin:0 auto 30px; width:min(560px,88vw);}
.glow-banner h2{color:var(--cream);}
.glow-banner p{color:#D9E3E1; margin:0 auto;}

/* ---------- Features ---------- */
.section{padding:84px 0;}
.section-head{max-width:640px; margin-bottom:48px;}
.section-head .kicker{
  font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--maroon); font-size:1.2rem;
}
.petal-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.petal{
  background:var(--cream-2); border-radius:var(--radius-lg);
  padding:30px 24px; border:1px solid var(--line);
}
.petal:nth-child(2n){margin-top:34px;}
.petal .num{
  font-family:'Cormorant Garamond',serif; font-size:2.6rem; font-weight:700;
  color:var(--marigold); line-height:1; margin-bottom:10px; display:block;
}
.petal h3{margin-bottom:8px;}
.petal p{font-size:.95rem; margin:0;}
@media(max-width:900px){.petal-grid{grid-template-columns:repeat(2,1fr);} .petal:nth-child(2n){margin-top:0;}}
@media(max-width:560px){.petal-grid{grid-template-columns:1fr;}}

/* ---------- Site cards (home teaser to 4 spots) ---------- */
.spot-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.spot-card{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  min-height:280px; display:flex; align-items:flex-end; padding:26px;
  text-decoration:none; color:var(--cream);
  background:linear-gradient(180deg, rgba(11,59,74,0.15), rgba(11,59,74,0.92)), var(--grad, var(--ink));
  box-shadow:var(--shadow);
}
.spot-card h3{color:var(--cream); margin-bottom:4px;}
.spot-card span{font-size:.85rem; color:var(--marigold-soft); font-family:'Cormorant Garamond',serif; font-style:italic;}
@media(max-width:900px){.spot-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.spot-grid{grid-template-columns:1fr;}}

/* ---------- Packages (ticket style) ---------- */
.packages{background:var(--ink); padding:90px 0; color:var(--cream);}
.packages .section-head .kicker{color:var(--marigold-soft);}
.packages h2{color:var(--cream);}
.ticket-row{
  display:grid; grid-template-columns:repeat(5,1fr); gap:18px;
}
.ticket{
  background:var(--cream); color:var(--charcoal); border-radius:16px;
  position:relative; padding:26px 20px 24px; display:flex; flex-direction:column;
  border:1px solid rgba(0,0,0,.06);
}
.ticket::after{
  content:""; position:absolute; left:0; right:0; bottom:78px;
  border-top:2px dashed rgba(43,36,32,0.25);
}
.ticket .tier{font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--maroon); font-size:1.05rem;}
.ticket .price{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:2.3rem; color:var(--ink); margin:2px 0 14px;}
.ticket .price sup{font-size:.9rem; font-weight:500;}
.ticket ul{list-style:none; margin:0 0 20px; padding:0; font-size:.92rem; flex:1;}
.ticket ul li{padding:5px 0 5px 20px; position:relative; color:var(--charcoal-soft);}
.ticket ul li::before{content:"✦"; position:absolute; left:0; color:var(--marigold); font-size:.8rem; top:7px;}
.ticket .btn{width:100%; justify-content:center; padding:12px; font-size:.92rem;}
.ticket.featured{transform:translateY(-14px); box-shadow:0 20px 50px rgba(0,0,0,.35); border:2px solid var(--marigold);}
@media(max-width:1000px){.ticket-row{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.ticket-row{grid-template-columns:1fr;} .ticket.featured{transform:none;}}

/* ---------- Enquiry ---------- */
.enquiry{background:var(--cream-2); padding:90px 0;}
.enquiry-box{
  display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;
  background:var(--cream); border-radius:var(--radius-lg); padding:48px;
  box-shadow:var(--shadow);
}
.enquiry-box form{display:flex; flex-direction:column; gap:14px;}
.enquiry-box input, .enquiry-box select, .enquiry-box textarea{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:13px 16px; font-family:'Mukta',sans-serif; font-size:.98rem; background:#fff; color:var(--charcoal);
}
.enquiry-box textarea{min-height:100px; resize:vertical;}
.enquiry-box label{font-size:.85rem; color:var(--charcoal-soft); font-weight:600; margin-bottom:-8px;}
@media(max-width:860px){.enquiry-box{grid-template-columns:1fr;}}

/* ---------- Subpage hero ---------- */
.page-hero{
  padding:80px 0 60px; color:var(--cream);
  background:linear-gradient(180deg, rgba(11,59,74,0.35), rgba(11,59,74,0.94)), var(--pg-grad, var(--ink));
}
.page-hero .kicker{font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--marigold-soft); font-size:1.2rem;}
.page-hero h1{color:var(--cream); max-width:16ch;}
.page-hero p{color:#DCE7E5; font-size:1.08rem; max-width:56ch; margin-top:14px;}

/* ---------- Story / parikrama timeline blocks ---------- */
.parikrama{padding:90px 0; position:relative;}
.story-block{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  padding:46px 0; border-top:1px solid var(--line); position:relative;
}
.story-block:first-of-type{border-top:none;}
.story-block .art{
  border-radius:var(--radius-lg); overflow:hidden; min-height:280px;
  display:flex; align-items:center; justify-content:center;
  background:var(--art-grad, linear-gradient(135deg,var(--peacock),var(--ink)));
}
.story-block.reverse{grid-template-columns:1fr 1fr;}
.story-block.reverse .art{order:2;}
.story-block .step-tag{
  display:inline-flex; align-items:center; gap:8px; font-size:.85rem; color:var(--maroon);
  font-weight:700; margin-bottom:10px; letter-spacing:.3px;
}
.story-block .step-tag .dot{width:8px; height:8px; border-radius:50%; background:var(--marigold);}
.story-block h3{font-size:1.7rem;}
.story-block .krishna-link{
  margin-top:14px; padding:14px 18px; background:var(--cream-2); border-left:3px solid var(--marigold);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-size:.94rem; color:var(--charcoal-soft);
}
@media(max-width:820px){
  .story-block, .story-block.reverse{grid-template-columns:1fr;}
  .story-block.reverse .art{order:0;}
  .story-block .art{min-height:200px;}
}

/* ---------- Info strip ---------- */
.info-strip{background:var(--maroon); color:var(--cream); padding:44px 0;}
.info-strip .wrap{display:flex; flex-wrap:wrap; gap:34px; justify-content:space-between;}
.info-strip .item{flex:1; min-width:180px;}
.info-strip .item h4{color:var(--marigold-soft); font-size:.95rem; margin-bottom:6px; font-family:'Mukta',sans-serif; font-weight:700;}
.info-strip .item p{color:#F1DFC9; font-size:.92rem; margin:0;}

/* ---------- Other-spots cross-links ---------- */
.crosslinks{padding:80px 0; text-align:center;}
.crosslinks .spot-grid{margin-top:34px; text-align:left;}

/* ---------- Footer ---------- */
footer{background:#082832; color:#C9D6D4; padding:56px 0 30px;}
footer .wrap{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;}
footer h4{color:var(--cream); font-family:'Cormorant Garamond',serif; font-size:1.2rem; margin-bottom:14px;}
footer ul{list-style:none; margin:0; padding:0;}
footer ul li{margin-bottom:8px;}
footer a{text-decoration:none; color:#C9D6D4; font-size:.94rem;}
footer a:hover{color:var(--marigold-soft);}
.footer-bottom{
  max-width:1160px; margin:40px auto 0; padding:20px 28px 0; border-top:1px solid rgba(255,255,255,.08);
  font-size:.85rem; color:#8FA6A3; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
@media(max-width:760px){footer .wrap{grid-template-columns:1fr;}}