/* ==========================================================================
   PANDHARINATH LODGE - LORD VITTHAL SPIRITUAL THEME & HERO VISUAL
   Divine + Elegant + Peaceful (Respectful Aesthetic)
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO SECTION WRAPPER & ATMOSPHERE
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  background: radial-gradient(circle at 75% 35%, #420A16 0%, #2A060E 40%, #150206 100%);
  color: #FFFFFF;
  overflow: hidden;
  padding: clamp(60px, 8vw, 110px) 0 clamp(40px, 6vw, 70px) 0;
}

/* Canvas for floating golden particles & divine light rays */
#vitthal-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Subtle temple jali background layer */
.hero-pattern-overlay {
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/temple-pattern.svg');
  background-repeat: repeat;
  background-size: 80px 80px;
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}

/* Hero Content Grid */
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(30px, 5vw, 60px);
}

/* Left Hero Typography & Actions */
.hero-content {
  display: flex;
  flex-direction: column;
}

.hero-spiritual-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(201, 151, 56, 0.18);
  border: 1px solid rgba(240, 202, 104, 0.45);
  color: #FFE699;
  font-family: var(--font-devanagari);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  padding: 8px 20px;
  border-radius: var(--radius-full);
  margin-bottom: 22px;
  width: fit-content;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.hero-spiritual-pill .om-symbol {
  color: #FFD56B;
  font-size: 1.1rem;
}

.hero-hotel-title {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.15;
  margin-bottom: 16px;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.hero-hotel-title span.brand-gold {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}

.hero-headline {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  color: #FFEBB5;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 18px;
}

.hero-supporting-text {
  font-size: 1.1rem;
  color: #E2D3CE;
  line-height: 1.65;
  margin-bottom: 32px;
  max-width: 540px;
}

.hero-cta-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 36px;
}

.hero-cta-buttons .btn {
  font-size: 0.92rem;
}

/* Hero Trust Strip in dark container */
.hero-trust-bar {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(201, 151, 56, 0.35);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #FFF2CC;
}

.hero-trust-item svg {
  width: 14px;
  height: 14px;
  fill: #FFD56B;
}

/* --------------------------------------------------------------------------
   RIGHT HERO: ANIMATED LORD VITTHAL SILHOUETTE
   -------------------------------------------------------------------------- */
.hero-visual-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Soft divine pulsing halo behind Vitthal */
.divine-aura-layer {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(234, 185, 68, 0.45) 0%, rgba(201, 151, 56, 0.15) 50%, transparent 75%);
  animation: auraPulse 6s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes auraPulse {
  0% {
    transform: scale(0.92);
    opacity: 0.65;
  }
  100% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* Slow rotating rays */
.divine-rays-layer {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 230, 153, 0.08) 20deg, transparent 40deg, rgba(255, 230, 153, 0.08) 60deg, transparent 80deg, rgba(255, 230, 153, 0.08) 100deg, transparent 120deg, rgba(255, 230, 153, 0.08) 140deg, transparent 160deg, rgba(255, 230, 153, 0.08) 180deg, transparent 200deg, rgba(255, 230, 153, 0.08) 220deg, transparent 240deg, rgba(255, 230, 153, 0.08) 260deg, transparent 280deg, rgba(255, 230, 153, 0.08) 300deg, transparent 320deg, rgba(255, 230, 153, 0.08) 340deg, transparent 360deg);
  animation: rotateRays 45s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes rotateRays {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Vitthal Silhouette Container */
.vitthal-silhouette-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 400px;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.7));
  animation: subtleFloat 8s ease-in-out infinite alternate;
}

@keyframes subtleFloat {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-8px);
  }
}

.vitthal-silhouette-container img,
.vitthal-silhouette-container svg {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   DEDICATED SPIRITUAL SECTION: "YOUR PANDHARPUR YATRA STARTS HERE"
   -------------------------------------------------------------------------- */
.spiritual-yatra-section {
  background: radial-gradient(circle at 50% 30%, #380C14 0%, #20040A 70%, #120205 100%);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  border-top: 2px solid var(--gold-primary);
  border-bottom: 2px solid var(--gold-primary);
}

.spiritual-yatra-section .section-title {
  color: #FFF2CC;
}

.spiritual-yatra-section .section-subtitle {
  color: #E6D8D2;
}

.yatra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 40px;
}

.yatra-feature-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 151, 56, 0.3);
  border-radius: var(--radius-lg);
  padding: 30px 24px;
  text-align: center;
  transition: var(--transition);
}

.yatra-feature-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--gold-bright);
  transform: translateY(-4px);
}

.yatra-card-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(201, 151, 56, 0.2);
  border: 1.5px solid var(--gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px auto;
  color: #FFD56B;
}

.yatra-card-icon svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.yatra-feature-card h3 {
  color: #FFF2CC;
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.yatra-feature-card p {
  color: #E2D3CE;
  font-size: 0.94rem;
  line-height: 1.6;
}

/* Responsive Hero adjustments */
@media (max-width: 991px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }

  .hero-spiritual-pill {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-supporting-text {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta-buttons {
    justify-content: center;
  }

  .hero-trust-bar {
    justify-content: center;
  }

  .vitthal-silhouette-container {
    max-width: 300px;
    margin: 0 auto;
  }

  .divine-aura-layer {
    width: 320px;
    height: 320px;
  }

  .divine-rays-layer {
    width: 380px;
    height: 380px;
  }
}