/* ==========================================================================
   DHARMIKAM — INNER PAGE SHELL
   Shared chrome for every inner page: the header's light treatment while it
   floats over a dark banner, the banner itself, and the breadcrumb.

   Everything here is namespaced under `body.has-page-hero` or under a
   `.page-hero` / `.breadcrumb-ayur` block that exists nowhere else, so this
   file cannot reach index.html or any page that does not load it.

   Load order: base.css → sections.css → animations.css → responsive.css
               → inner-page.css → <page>.css (last, so a page can refine)
   ========================================================================== */

/* ==========================================================================
   1. HEADER OVER A DARK INNER-PAGE BANNER
   The site header is transparent until scrolled; on the home page it floats
   over a cream hero, here over a dark photograph. Flip it to light ink while
   it is unscrolled — `.is-scrolled` restores the normal cream bar untouched.
   ========================================================================== */
body.has-page-hero .site-header:not(.is-scrolled) .nav-link{
  color:var(--cream)!important;opacity:.84;
}
body.has-page-hero .site-header:not(.is-scrolled) .nav-link:hover{opacity:1}
body.has-page-hero .site-header:not(.is-scrolled) .nav-link.active{
  color:#fff!important;opacity:1;
}
body.has-page-hero .site-header:not(.is-scrolled) .nav-link::after{
  background:linear-gradient(90deg,var(--gold-soft),var(--gold));
}
body.has-page-hero .site-header:not(.is-scrolled) .brand .logo img{
  filter:brightness(1.12) drop-shadow(0 4px 14px rgba(0,0,0,.55));
}
body.has-page-hero .site-header:not(.is-scrolled) .nav-toggler{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.38);
}
body.has-page-hero .site-header:not(.is-scrolled) .nav-toggler i{color:var(--cream)}

/* Registration button reads as a ghost chip on the photograph */
body.has-page-hero .site-header:not(.is-scrolled) .nav-cta-wrap .btn-primary-ayur{
  --btn-bg:rgba(255,255,255,.1);--btn-fg:var(--cream);
  border-color:rgba(255,255,255,.44);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:none;
}
body.has-page-hero .site-header:not(.is-scrolled) .nav-cta-wrap .btn-primary-ayur:hover{
  --btn-bg:var(--gold);--btn-fg:#231705;border-color:var(--gold);
}

/* The mobile dropdown panel is cream — its links must stay dark */
@media (max-width:1199.98px){
  body.has-page-hero .site-header:not(.is-scrolled) .navbar-collapse .nav-link{
    color:var(--ink)!important;opacity:.82;
  }
  body.has-page-hero .site-header:not(.is-scrolled) .navbar-collapse .nav-link.active{
    color:var(--deep)!important;
  }
  body.has-page-hero .site-header:not(.is-scrolled) .nav-cta-wrap .btn-primary-ayur{
    --btn-bg:var(--deep);--btn-fg:var(--cream);
    border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  }
}

/* ==========================================================================
   2. INNER-PAGE HERO BANNER
   ========================================================================== */
.page-hero{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;
  min-height:clamp(320px,40vw,470px);
  padding:calc(var(--nav-h) + clamp(56px,7vw,86px)) 0 clamp(52px,6vw,78px);
  text-align:center;color:var(--cream);
  background:var(--deep);
}

/* Three-frame photographic montage, echoing the ashram's own banner strip */
.page-hero__bg{
  position:absolute;inset:0;z-index:-2;
  display:grid;grid-template-columns:1.15fr 1fr 1fr;
}
.page-hero__bg img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.page-hero__bg span{position:relative;overflow:hidden}
.page-hero__bg span + span::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:2px;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(226,200,138,.45),transparent);
}

.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(15,46,30,.9) 0%,rgba(15,46,30,.66) 44%,rgba(15,46,30,.92) 100%),
    radial-gradient(820px 420px at 50% 46%,rgba(192,153,63,.2),transparent 72%);
}

.page-hero__inner{position:relative;z-index:1;max-width:840px;margin-inline:auto}
.page-hero .eyebrow{color:var(--gold-soft)}
.page-hero__title{
  color:var(--cream);
  font-size:clamp(2.5rem,6vw,4.4rem);
  line-height:1.04;letter-spacing:-.028em;
  margin-bottom:1.1rem;
}
.page-hero__lead{
  color:rgba(236,244,239,.84);
  max-width:60ch;margin:0 auto 1.9rem;
  font-size:clamp(1rem,.45vw + .92rem,1.14rem);
}

/* Breadcrumb */
.breadcrumb-ayur{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem;
  list-style:none;margin:0;padding:.62rem 1.3rem;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  width:max-content;margin-inline:auto;
  font-size:.71rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
}
.breadcrumb-ayur a{color:rgba(236,244,239,.78)}
.breadcrumb-ayur a:hover{color:var(--gold-soft)}
.breadcrumb-ayur li[aria-current]{color:var(--gold-soft)}
.breadcrumb-ayur .sep{color:rgba(226,200,138,.55);font-size:.8rem;line-height:1}

/* Floating botanicals over the banner */
.page-hero .float-ico{
  background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);
  color:var(--gold-soft);box-shadow:none;
}
.page-hero .fi-1{top:26%;left:7%;right:auto;--s:58px}
.page-hero .fi-2{top:34%;right:8%;--s:46px}
.page-hero .fi-3{bottom:16%;left:15%;--s:44px}
.page-hero .fi-4{bottom:22%;right:16%;left:auto;--s:52px}

@media (max-width:991.98px){
  .page-hero__bg{grid-template-columns:1fr 1fr}
  .page-hero__bg span:nth-child(3){display:none}
  .page-hero .fi-3,.page-hero .fi-4{display:none}
}
@media (max-width:575.98px){
  .page-hero__bg{grid-template-columns:1fr}
  .page-hero__bg span:nth-child(2){display:none}
  .page-hero .float-ico{display:none}
  .breadcrumb-ayur{font-size:.65rem;letter-spacing:.14em;padding:.55rem 1rem}
}


/* The floating botanicals sit at z-index 3; inner-page copy over the nature
   band can run wider than the home page's, so lift the text clear of them. */
body.has-page-hero .wellness .container{position:relative;z-index:4}