/* ==========================================================================
   Multi-page components
   Loaded after style.css on every page.
   ========================================================================== */

/* ---------- A. INNER PAGE HERO ---------- */
.page-hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(74px,10vw,126px) 0 clamp(60px,8vw,96px);
  background:var(--ink); text-align:center; color:var(--cream);
}
.page-hero__bg{
  position:absolute; inset:0; z-index:-3;
  background-size:cover; background-position:center;
  transform:scale(1.08); animation:phZoom 18s ease-in-out infinite alternate;
}
@keyframes phZoom{ to{ transform:scale(1); } }
.page-hero__veil{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(180deg, rgba(7,4,13,.9) 0%, rgba(10,6,18,.86) 45%, rgba(42,15,28,.92) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(255,153,51,.2), transparent 60%);
}
.page-hero__mandala{
  position:absolute; left:50%; top:50%; width:560px; height:560px; z-index:-2;
  transform:translate(-50%,-50%); opacity:.09; pointer-events:none;
  background:
    repeating-conic-gradient(from 0deg, var(--gold) 0deg 4deg, transparent 4deg 8deg),
    radial-gradient(circle, transparent 32%, var(--gold) 33% 35%, transparent 36%);
  border-radius:50%; animation:spin 80s linear infinite;
}
.page-hero h1{
  font-size:clamp(31px,5vw,58px); margin-bottom:14px; color:var(--cream);
  position:relative; z-index:1;
}
.page-hero__sub{
  position:relative; z-index:1; max-width:660px; margin:0 auto 22px;
  color:var(--txt-light-2); font-size:16.4px;
}
.page-hero .eyebrow{ background:rgba(217,171,78,.12); border-color:rgba(217,171,78,.3); color:var(--gold-lt); position:relative; z-index:1; }
.crumbs{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  padding:9px 22px; border-radius:40px; font-size:12.6px;
  background:rgba(248,241,226,.06); border:1px solid rgba(217,171,78,.22);
  color:var(--txt-light-2);
}
.crumbs a{ color:var(--gold-lt); transition:color .3s; }
.crumbs a:hover{ color:var(--saffron); }
.crumbs i{ font-size:8px; opacity:.5; }
.crumbs span{ color:var(--txt-light-2); }

/* ---------- B. HOME: WHY CHOOSE US ---------- */
.section--why{ background:var(--grad-night); color:var(--cream); }
.section--why .section__title{ color:var(--cream); }
.section--why .section__sub{ color:var(--txt-light-2); }
.section--why .eyebrow{ background:rgba(217,171,78,.12); border-color:rgba(217,171,78,.28); color:var(--gold-lt); }
.why__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.why{
  position:relative; padding:32px 26px; border-radius:var(--r-lg); text-align:center;
  background:linear-gradient(160deg, rgba(248,241,226,.07), rgba(248,241,226,.02));
  border:1px solid rgba(217,171,78,.18);
  transition:transform .5s var(--ease), border-color .5s;
}
.why:hover{ transform:translateY(-9px); border-color:rgba(217,171,78,.5); }
.why__icon{
  width:62px; height:62px; margin:0 auto 18px; border-radius:50%;
  display:grid; place-items:center; font-size:24px;
  background:var(--grad-gold); color:#3a2503;
  transition:transform .55s var(--ease-back);
}
.why:hover .why__icon{ transform:rotate(-10deg) scale(1.08); }
.why h4{ font-size:17.5px; color:var(--gold-lt); margin-bottom:8px; }
.why p{ margin:0; font-size:13.6px; color:var(--txt-light-2); }
@media (max-width:1020px){ .why__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .why__grid{ grid-template-columns:1fr; } }

/* ---------- C. HOME: GALLERY PREVIEW STRIP ---------- */
.galstrip{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:34px; }
.galstrip a{
  position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:1/1;
  box-shadow:var(--shadow-sm); background:var(--ink-2);
  transition:transform .5s var(--ease), box-shadow .5s;
}
.galstrip a img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.galstrip a::after{
  content:'\f00e'; font-family:'Font Awesome 6 Free'; font-weight:900;
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(7,4,13,.6); color:var(--gold-lt); font-size:20px;
  opacity:0; transition:opacity .4s;
}
.galstrip a:hover{ transform:translateY(-6px) scale(1.03); box-shadow:var(--shadow); z-index:2; }
.galstrip a:hover img{ transform:scale(1.12); }
.galstrip a:hover::after{ opacity:1; }
@media (max-width:900px){ .galstrip{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .galstrip{ grid-template-columns:repeat(2,1fr); } }

/* ---------- D. GALLERY PAGE ---------- */
.galpage{ padding:clamp(56px,7vw,88px) 0 clamp(72px,9vw,120px); background:var(--parchment); }

.galbar{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:22px 28px; margin-bottom:34px; border-radius:var(--r-lg);
  background:var(--grad-night); color:var(--cream); box-shadow:var(--shadow);
}
.galbar__count{ display:flex; align-items:center; gap:14px; font-size:14px; }
.galbar__count b{ font-family:var(--ff-display); font-size:28px; color:var(--gold-lt); line-height:1; }
.galbar__count span{ color:var(--txt-light-2); }
.galbar__hint{ display:flex; align-items:center; gap:9px; font-size:12.6px; color:var(--txt-light-2); }
.galbar__hint i{ color:var(--saffron); }
.galbar__view{ display:flex; gap:6px; padding:5px; border-radius:40px; background:rgba(248,241,226,.07); }
.galbar__view button{
  padding:8px 16px; border-radius:30px; font-size:12.4px; font-weight:500;
  color:var(--txt-light-2); transition:.35s var(--ease);
}
.galbar__view button.is-active{ background:var(--grad-gold); color:#3a2503; font-weight:600; }

/* Category tabs */
.gcats{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:38px; }
.gcat{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 22px; border-radius:40px; font-size:13.4px; font-weight:500;
  border:1px solid rgba(169,124,38,.26); color:var(--txt-soft);
  background:#fff; transition:.35s var(--ease);
}
.gcat i{ font-size:12px; opacity:.7; }
.gcat em{
  font-style:normal; font-size:11px; padding:2px 8px; border-radius:20px;
  background:rgba(169,124,38,.14); color:var(--maroon-2); font-weight:600;
}
.gcat:hover{ border-color:var(--gold); color:var(--maroon); transform:translateY(-2px); }
.gcat.is-active{
  background:var(--grad-gold); color:#3a2503; border-color:transparent;
  box-shadow:var(--shadow-gold); font-weight:600;
}
.gcat.is-active em{ background:rgba(58,37,3,.16); color:#3a2503; }
.gcat.is-active i{ opacity:1; }

/* Masonry grid */
.gwall{ columns:4; column-gap:16px; }
.gwall.is-grid{ columns:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.gitem{
  position:relative; break-inside:avoid; margin:0 0 16px;
  border-radius:var(--r); overflow:hidden; cursor:zoom-in;
  background:var(--ink-2); box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease), box-shadow .5s;
  opacity:0; transform:translateY(26px);
}
.gwall.is-grid .gitem{ margin:0; height:270px; }
.gwall.is-grid .gitem img{ height:100%; object-fit:cover; }
.gitem.is-in{ opacity:1; transform:none; }
.gitem.is-hidden{ display:none; }
.gitem img{ width:100%; display:block; transition:transform .8s var(--ease), filter .5s; }
.gitem:hover{ transform:translateY(-7px); box-shadow:var(--shadow-lg); z-index:2; }
.gitem:hover img{ transform:scale(1.07); }
.gitem__cap{
  position:absolute; inset:auto 0 0 0; padding:40px 20px 18px;
  background:linear-gradient(transparent, rgba(7,4,13,.93) 65%);
  color:var(--cream); transform:translateY(18px); opacity:0;
  transition:.45s var(--ease);
}
.gitem:hover .gitem__cap{ transform:none; opacity:1; }
.gitem__cap b{ display:block; font-family:var(--ff-display); font-size:15.4px; color:var(--gold-lt); }
.gitem__cap span{ font-size:11.6px; color:var(--txt-light-2); }
.gitem__tag{
  position:absolute; top:12px; left:12px; z-index:2;
  padding:5px 12px; border-radius:30px; font-size:10px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  background:rgba(7,4,13,.7); color:var(--gold-lt);
  border:1px solid rgba(217,171,78,.3);
  backdrop-filter:blur(6px);
  opacity:0; transform:translateY(-8px); transition:.4s var(--ease);
}
.gitem:hover .gitem__tag{ opacity:1; transform:none; }
.gitem__zoom{
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(7,4,13,.7); color:var(--gold-lt); font-size:12px;
  border:1px solid rgba(217,171,78,.3); backdrop-filter:blur(6px);
  opacity:0; transform:scale(.7); transition:.4s var(--ease-back);
}
.gitem:hover .gitem__zoom{ opacity:1; transform:none; }

.gwall__empty{
  display:none; text-align:center; padding:70px 20px; color:var(--txt-soft);
}
.gwall__empty i{ font-size:40px; color:rgba(169,124,38,.4); margin-bottom:16px; display:block; }
.gwall__empty.is-on{ display:block; }

.galmore{ text-align:center; margin-top:44px; }
.galmore p{ font-size:13.4px; color:var(--txt-soft); margin-bottom:16px; }

@media (max-width:1180px){ .gwall{ columns:3; } .gwall.is-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){
  .gwall{ columns:2; column-gap:12px; }
  .gwall.is-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .gitem{ margin-bottom:12px; }
  /* Square rather than letterbox: a 200px-tall box shrinks the tall temple
     photos and posters to slivers once they stop being cropped. */
  .gwall.is-grid .gitem{ height:auto; aspect-ratio:1/1; }
  .galbar{ justify-content:center; text-align:center; }
}
@media (max-width:520px){
  .gwall{ columns:1; }
  .gwall.is-grid{ grid-template-columns:1fr; }
  .gitem__cap{ transform:none; opacity:1; }
  .gitem__tag{ opacity:1; transform:none; }
}

/* Lightbox counter + thumbs (gallery page) */
.lightbox__count{
  position:absolute; top:28px; left:50%; transform:translateX(-50%);
  font-size:12.6px; letter-spacing:.16em; color:var(--txt-light-2);
  padding:7px 18px; border-radius:30px;
  background:rgba(248,241,226,.07); border:1px solid rgba(217,171,78,.2);
}
.lightbox__count b{ color:var(--gold-lt); }

/* ---------- E. NAADI PAGE: 14 CHAPTERS ---------- */
.chapters{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.chap{
  display:flex; gap:18px; align-items:flex-start; padding:22px 24px;
  border-radius:var(--r); background:#fff;
  border:1px solid rgba(169,124,38,.16); box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease), box-shadow .45s, border-color .45s;
}
.chap:hover{ transform:translateX(7px); box-shadow:var(--shadow); border-color:var(--gold); }
.chap__no{
  flex:none; width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  font-family:var(--ff-display); font-size:17px; font-weight:700;
  background:linear-gradient(145deg, rgba(217,171,78,.3), rgba(255,153,51,.15));
  color:var(--maroon); border:1px solid rgba(169,124,38,.22);
  transition:.45s var(--ease-back);
}
.chap:hover .chap__no{ background:var(--grad-gold); color:#3a2503; transform:rotate(-8deg); }
.chap h4{ font-size:16.4px; color:var(--maroon); margin-bottom:5px; }
.chap p{ margin:0; font-size:13.6px; color:var(--txt-soft); line-height:1.66; }
.chap--special{ background:linear-gradient(150deg,#fffaf0,#fdf1dc); border-color:rgba(217,171,78,.4); }
.chap--special .chap__no{ background:var(--grad-gold); color:#3a2503; }
@media (max-width:860px){ .chapters{ grid-template-columns:1fr; } }

/* ---------- F. ABOUT PAGE: VALUES ---------- */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.value{
  padding:34px 30px; border-radius:var(--r-lg); text-align:center;
  background:#fff; border:1px solid rgba(169,124,38,.16); box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease), box-shadow .5s;
}
.value:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.value__icon{
  width:64px; height:64px; margin:0 auto 18px; border-radius:20px;
  display:grid; place-items:center; font-size:25px; color:var(--maroon);
  background:linear-gradient(145deg, rgba(217,171,78,.28), rgba(255,153,51,.14));
  border:1px solid rgba(169,124,38,.2);
  transition:transform .55s var(--ease-back);
}
.value:hover .value__icon{ transform:rotate(-9deg) scale(1.08); }
.value h4{ font-size:18px; color:var(--maroon); margin-bottom:8px; }
.value p{ margin:0; font-size:14.2px; color:var(--txt-soft); }
@media (max-width:900px){ .values{ grid-template-columns:1fr; } }

/* ---------- G. SERVICES PAGE: DETAIL ROWS ---------- */
.srow{ display:grid; grid-template-columns:.9fr 1.1fr; gap:52px; align-items:center; margin-bottom:66px; }
.srow:nth-child(even) .srow__media{ order:2; }
.srow:last-child{ margin-bottom:0; }
/* The box owns the shape, never the image. Giving the <img> the height and
   then asking it to fill its parent is circular - the parent had no height of
   its own - which is what collapsed the fit and re-cropped the poster. */
.srow__media{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  aspect-ratio:4/3; box-shadow:var(--shadow-lg);
}
.srow__media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.srow__media:hover img{ transform:scale(1.05); }
.srow__badge{
  position:absolute; top:18px; left:18px; z-index:2;
  padding:8px 18px; border-radius:30px; font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  background:var(--grad-gold); color:#3a2503; box-shadow:var(--shadow-sm);
}
.srow h3{ font-size:clamp(23px,3vw,31px); color:var(--maroon); margin-bottom:12px; }
.srow > div > p{ font-size:15.2px; color:var(--txt-soft); }
.srow__list{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:22px 0 26px; }
.srow__list li{
  display:flex; gap:10px; align-items:flex-start; font-size:13.8px; color:var(--txt-soft);
}
.srow__list i{
  flex:none; width:20px; height:20px; margin-top:3px; border-radius:50%;
  display:grid; place-items:center; font-size:9px;
  background:var(--grad-gold); color:#3a2503;
}
@media (max-width:960px){
  .srow{ grid-template-columns:1fr; gap:30px; margin-bottom:50px; }
  .srow:nth-child(even) .srow__media{ order:0; }
  /* Shape is released here - see "MOBILE IMAGE BEHAVIOUR" further down, which
     lets each photograph keep its own proportions once the row is one column. */
}
@media (max-width:520px){ .srow__list{ grid-template-columns:1fr; } }

/* ---------- H. CONTACT PAGE: HOURS TABLE ---------- */
.hours{
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(169,124,38,.18); background:#fff; box-shadow:var(--shadow-sm);
}
.hours__row{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:15px 22px; font-size:14px; border-bottom:1px solid rgba(169,124,38,.1);
}
.hours__row:last-child{ border-bottom:0; }
.hours__row b{ font-weight:500; color:var(--txt); }
.hours__row span{ color:var(--txt-soft); font-size:13.4px; }
.hours__row.is-closed{ background:rgba(107,18,32,.045); }
.hours__row.is-closed span{ color:var(--maroon-2); font-weight:600; }
.hours__row.is-today{ background:linear-gradient(100deg, rgba(217,171,78,.16), rgba(255,153,51,.07)); }
.hours__row.is-today b::after{
  content:'Today'; margin-left:10px; padding:2px 9px; border-radius:20px;
  font-size:9.6px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--grad-gold); color:#3a2503; font-weight:700;
}

/* ---------- I. QUICK CONTACT STRIP (home) ---------- */
.qstrip{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.qcard{
  display:flex; gap:18px; align-items:center; padding:26px 28px;
  border-radius:var(--r-lg); background:#fff;
  border:1px solid rgba(169,124,38,.16); box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease), box-shadow .45s, border-color .45s;
}
.qcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--gold); }
.qcard__icon{
  flex:none; width:54px; height:54px; border-radius:17px; display:grid; place-items:center;
  font-size:21px; background:var(--grad-gold); color:#3a2503;
  transition:transform .5s var(--ease-back);
}
.qcard:hover .qcard__icon{ transform:rotate(-10deg) scale(1.07); }
.qcard b{ display:block; font-family:var(--ff-display); font-size:15.6px; color:var(--maroon); margin-bottom:3px; }
.qcard p{ margin:0; font-size:13.6px; color:var(--txt-soft); line-height:1.6; }
.qcard a{ transition:color .3s; }
.qcard a:hover{ color:var(--saffron-dp); }
@media (max-width:960px){ .qstrip{ grid-template-columns:1fr; } }

/* ---------- J. SECTION CTA LINK ROW ---------- */
.seemore{ text-align:center; margin-top:44px; }

/* ---------- K. NOTICE BOX ---------- */
.notice{
  display:flex; gap:20px; align-items:flex-start; padding:26px 30px;
  border-radius:var(--r-lg);
  background:linear-gradient(135deg, rgba(217,171,78,.16), rgba(255,153,51,.07));
  border:1px dashed rgba(169,124,38,.42);
}
.notice__icon{
  flex:none; width:52px; height:52px; border-radius:17px; display:grid; place-items:center;
  font-size:22px; background:var(--grad-gold); color:#3a2503;
}
.notice h4{ font-size:17px; color:var(--maroon); margin-bottom:6px; }
.notice p{ margin:0; font-size:14.2px; color:var(--txt-soft); }
.notice p + p{ margin-top:8px; }
@media (max-width:620px){ .notice{ flex-direction:column; gap:14px; } }

/* ==========================================================================
   L. SAFE IMAGE FITTING
   Many of the centre's photographs and all of its posters are tall portraits.
   Forcing them into landscape boxes with object-fit:cover cuts off faces and
   poster headings. Where cropping would hide too much of an image, main.js
   adds .fit-safe: the image is then shown complete (contain) over a blurred,
   darkened copy of itself, so nothing is lost and there are no empty bars.
   ========================================================================== */
.fit-safe{ position:relative; overflow:hidden; background:var(--ink-2); }
.fit-safe::before{
  content:''; position:absolute; inset:0; z-index:0;
  background-image:var(--fit-img);
  background-size:cover; background-position:center;
  filter:blur(26px) brightness(.52) saturate(1.2);
  transform:scale(1.25);
}
.fit-safe > img,
.fit-safe > a > img{
  position:relative; z-index:1;
  width:100%; height:100%;
  object-fit:contain !important;
  object-position:center !important;
}
/* Keep the hover zoom subtle on contained images - they have no spare edges */
.fit-safe:hover > img{ transform:scale(1.03); }

/* Masonry columns show images at their natural height, so nothing is ever
   cropped there; the treatment only applies in the fixed-height grid view. */
.gwall:not(.is-grid) .gitem.fit-safe::before{ display:none; }
.gwall:not(.is-grid) .gitem.fit-safe > img{ height:auto; object-fit:contain !important; }

/* Overlays must stay above a .fit-safe image (which sits on z-index 1) */
.galstrip a::after{ z-index:2; }
.gitem__cap{ z-index:2; }
.rem figcaption{ position:absolute; z-index:2; }
.gcard__badge{ z-index:2; }
.about__exp{ z-index:3; }

/* ==========================================================================
   M. MOBILE IMAGE BEHAVIOUR
   On a phone the content columns are already full width, so there is nothing
   to gain by forcing photographs into a fixed shape. Letting each image keep
   its own proportions means nothing is cropped and nothing is letterboxed -
   the tall temple shots and the posters both show in full. These rules also
   neutralise .fit-safe if the script added it before the viewport narrowed.
   ========================================================================== */
@media (max-width:960px){
  .srow__media,
  .rem{ aspect-ratio:auto; height:auto; }

  .srow__media img,
  .rem img,
  .srow__media.fit-safe > img,
  .rem.fit-safe > img{
    height:auto;
    max-height:80vh;                /* keep a very tall photo from taking over */
    object-fit:contain !important;
  }

  .srow__media.fit-safe::before,
  .rem.fit-safe::before{ display:none; }

  /* Captions sit over the image on desktop; on mobile give them solid ground */
  .rem figcaption{
    position:static; background:var(--ink-2); padding:18px 20px 20px;
  }
  .rem p{ max-height:none; opacity:1; }
}

/* ==========================================================================
   N. MOBILE POLISH
   ========================================================================== */
@media (max-width:1020px){
  .values{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  /* The keyboard hint is meaningless on a touch device */
  .galbar__hint{ display:none; }
  .galbar{ gap:16px; padding:18px 20px; }
  .galbar__count{ justify-content:center; }
}
@media (max-width:760px){
  /* Big decorative mandalas cost paint time and show almost nothing here */
  .page-hero__mandala,
  .deco-mandala,
  .hero__mandala{ display:none; }

  .page-hero{ padding-block:64px 52px; }
  .gcats{ gap:8px; }
  .gcat{ padding:10px 16px; font-size:12.6px; }
}
@media (max-width:560px){
  .values{ grid-template-columns:1fr; }

  /* Comfortable thumb targets and no cramped edges */
  .section{ padding-block:56px; }
  .btn--lg{ padding:15px 26px; font-size:14.5px; }
  .ctaband__btns .btn,
  .hero__actions .btn,
  .galmore .btn,
  .seemore .btn{ width:100%; }

  .galbar__view{ width:100%; justify-content:center; }
  .srow__badge{ top:12px; left:12px; padding:6px 14px; font-size:10px; }

  /* Stop long phone numbers and emails forcing a sideways scroll */
  .cinfo p, .fcontact li, .topbar__right a{ word-break:break-word; }
}