.mathura-gokul-page { background: #fbf7ef; color: #3b281c; }
.mathura-gokul-hero { min-height: 520px; position: relative; display: grid; align-items: end; overflow: hidden; isolation: isolate; color: #fff; }
.mathura-gokul-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(92deg, rgba(49,27,14,.9), rgba(68,37,16,.66) 56%, rgba(49,27,14,.25)); }
.mathura-gokul-hero img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.mathura-gokul-hero .wrap { padding: 78px 0 68px; }
.guide-breadcrumb { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; color: #f6d69b; font-size: .79rem; font-weight: 800; }
.guide-breadcrumb a { color: inherit; }
.mathura-gokul-hero .eyebrow { color: #f7cd81; }
.mathura-gokul-hero h1 { max-width: 860px; font-size: clamp(2.65rem, 6vw, 5.05rem); }
.mathura-gokul-hero p { max-width: 680px; margin: 16px 0 0; color: #fff1dc; font-size: 1.05rem; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.guide-actions .btn-outline { border-color: rgba(255,255,255,.68); background: rgba(255,255,255,.08); color: #fff; }
.guide-section { padding: 84px 0; }
.guide-section--paper { background: #fffdf9; }
.guide-section--cream { background: #f5ecdf; }
.guide-intro { max-width: 820px; }
.guide-intro h2, .guide-section-head h2 { margin-top: 9px; color: #352217; font-size: clamp(2rem, 3.6vw, 3.05rem); }
.guide-intro p, .guide-section-head p { color: #655649; line-height: 1.75; }
.story-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); gap: 52px; align-items: start; }
.story-note { padding: 28px; border: 1px solid #e4cfb0; border-radius: 18px; background: #fff8e9; box-shadow: 0 9px 24px rgba(67,39,18,.06); }
.story-note h3 { color: #522f18; font-size: 1.4rem; }
.story-note p { margin: 10px 0 0; color: #645143; }
.guide-section-head { max-width: 700px; margin-bottom: 30px; }
.sacred-place-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.sacred-place-card { display: flex; min-height: 398px; flex-direction: column; overflow: hidden; border: 1px solid #e5d7c5; border-radius: 18px; background: #fffdf9; box-shadow: 0 8px 22px rgba(67,39,18,.08); transition: transform .24s ease, box-shadow .24s ease; }
.sacred-place-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(67,39,18,.13); }
.sacred-place-card img { width: 100%; height: 194px; object-fit: cover; }
.sacred-place-card:nth-child(2) img { object-position: center 58%; }
.sacred-place-card-body { display: flex; flex: 1; flex-direction: column; padding: 20px 21px; }
.sacred-place-card .place-label { color: #9c5a24; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sacred-place-card h3 { min-height: 2.28em; margin: 8px 0 0; color: #362217; font-size: 1.42rem; line-height: 1.14; }
.sacred-place-card p { margin: 11px 0 0; color: #625346; font-size: .88rem; line-height: 1.52; }
.place-treatment { margin-top: auto; padding-top: 15px; color: #a75b23; font-size: .76rem; font-weight: 800; }
.darshan-timeline { display: grid; gap: 0; max-width: 790px; }
.darshan-step { display: grid; grid-template-columns: 145px 1fr; gap: 22px; padding: 17px 0; border-bottom: 1px solid #e6d9c8; }
.darshan-step:last-child { border-bottom: 0; }
.darshan-step .route-place { color: #a45b21; font-size: .73rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.darshan-step strong { color: #3a2519; font: 700 1.14rem/1.25 Georgia,serif; }
.experience-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; }
.experience-card { min-height: 185px; padding: 23px; border: 1px solid #e5d8c5; border-radius: 16px; background: #fffdf9; box-shadow: 0 7px 18px rgba(67,39,18,.045); }
.experience-card .experience-mark { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; background: #fff0d7; color: #a45a20; font: 700 1rem Georgia,serif; }
.experience-card h3 { margin: 14px 0 0; color: #3b271a; font-size: 1.18rem; }
.experience-card p { margin: 8px 0 0; color: #665649; font-size: .86rem; line-height: 1.5; }
.guide-final-cta { padding: 82px 20px; background: linear-gradient(105deg,rgba(54,29,13,.94),rgba(117,67,25,.76)), url('../images/hero-yamuna-aarti.jpeg') center/cover; color: #fff; text-align: center; }
.guide-final-cta h2 { color: #fff; font-size: clamp(2.1rem,4vw,3.45rem); }
.guide-final-cta p { max-width: 650px; margin: 15px auto 24px; color: #fff0da; }
.guide-final-cta .btn { margin: 4px; }
.guide-final-cta .btn-outline { border-color: rgba(255,255,255,.68); background: transparent; color: #fff; }
@media (max-width: 900px) { .guide-section { padding: 70px 0; } .story-grid { grid-template-columns: 1fr; gap: 25px; } .sacred-place-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .experience-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 540px) { .mathura-gokul-hero { min-height: 460px; } .mathura-gokul-hero .wrap { padding: 62px 0 54px; } .guide-section { padding: 60px 0; } .sacred-place-grid, .experience-grid { grid-template-columns: 1fr; } .sacred-place-card { min-height: 0; } .sacred-place-card img { height: 205px; } .darshan-step { grid-template-columns: 1fr; gap: 7px; } }