/* ==========================================================================
   परळचा राजा — Festive Premium design system
   Ek hi file me tokens, layout, components aur purane WordPress markup ka
   compatibility layer. Purane theme ki CSS ke *baad* load hoti hai, isliye
   yeh jo bhi set karti hai wahi final hai.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Brand */
  --maroon-900:#3E0A12;
  --maroon-800:#4A0C16;
  --maroon-700:#5C0F1C;
  --maroon-600:#6D1220;
  --maroon-500:#87182A;
  --saffron-600:#C8501F;
  --saffron-500:#E8622C;
  --saffron-400:#F2803F;
  --gold-600:#A97B24;
  --gold-500:#C99A35;
  --gold-400:#D4A544;
  --gold-300:#E5C377;
  --gold-200:#F0DCA8;

  /* Neutrals — warm, kagaz jaisa */
  --paper:#FFFBF5;
  --paper-2:#FDF4E8;
  --paper-3:#F6E9D8;
  --ink-900:#1F1410;
  --ink-700:#3D2B22;
  --ink-500:#6B564A;
  --ink-400:#8C7869;
  --line:rgba(109,18,32,.12);
  --line-gold:rgba(212,165,68,.34);

  /* Maroon sections par text */
  --on-dark:#F6E7DA;
  --on-dark-dim:#D6B9A8;

  /* Shape & depth */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(62,10,18,.06), 0 2px 8px rgba(62,10,18,.05);
  --sh-2:0 4px 12px rgba(62,10,18,.08), 0 12px 32px rgba(62,10,18,.08);
  --sh-3:0 12px 28px rgba(62,10,18,.14), 0 32px 64px rgba(62,10,18,.14);
  --sh-gold:0 6px 20px rgba(200,80,31,.28);

  /* Rhythm */
  --gutter:clamp(18px, 4vw, 40px);
  --wrap:1240px;
  --wrap-narrow:820px;
  --sec-y:clamp(56px, 8vw, 108px);
  --nav-h:76px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --font-body:'Mukta', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:'Tiro Devanagari Marathi', 'Mukta', Georgia, serif;
}

/* ---- 2. Reset / base ---------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
/* koi display:block rule [hidden] ko na haraye */
[hidden] { display:none !important; }

html { -webkit-text-size-adjust:100%; }
html.pcr-lock, body.pcr-lock { overflow:hidden; }

body.pcr {
  margin:0;
  background:var(--paper);
  color:var(--ink-700);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

.pcr img, .pcr video { max-width:100%; height:auto; display:block; }

.pcr h1,.pcr h2,.pcr h3,.pcr h4 {
  font-family:var(--font-display);
  color:var(--maroon-700);
  font-weight:400;
  line-height:1.25;
  margin:0 0 .5em;
  letter-spacing:.005em;
}
.pcr h1 { font-size:clamp(2.1rem, 5vw, 3.5rem); }
.pcr h2 { font-size:clamp(1.65rem, 3.6vw, 2.6rem); }
.pcr h3 { font-size:clamp(1.2rem, 2.2vw, 1.55rem); }
.pcr h4 { font-size:1.1rem; font-family:var(--font-body); font-weight:600; }
.pcr p  { margin:0 0 1.1em; }
.pcr a  { color:var(--saffron-600); text-decoration:none; transition:color .2s var(--ease); }
.pcr a:hover { color:var(--maroon-600); }

.pcr :focus-visible {
  outline:3px solid var(--saffron-500);
  outline-offset:3px;
  border-radius:4px;
}

/* Screen-reader only */
.pcr-sr {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Skip link — keyboard se aane walon ke liye */
.pcr-skip {
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--gold-400); color:var(--maroon-900);
  padding:10px 18px; border-radius:var(--r-sm); font-weight:600;
  transition:top .2s var(--ease);
}
.pcr-skip:focus { top:12px; }

/* ---- 3. Layout helpers -------------------------------------------------- */
.pcr-wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.pcr-wrap--narrow { max-width:var(--wrap-narrow); }
.pcr-section { padding-block:var(--sec-y); position:relative; }

/* Maroon band — gehra, beech me halka garam ujala */
.pcr-section--dark {
  background-color:var(--maroon-600);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200,80,31,.42) 0%, rgba(200,80,31,0) 65%),
    linear-gradient(180deg, var(--maroon-700) 0%, var(--maroon-600) 45%, var(--maroon-800) 100%);
  color:var(--on-dark);
}
.pcr-section--dark h1,.pcr-section--dark h2,.pcr-section--dark h3,.pcr-section--dark h4 { color:#fff; }
.pcr-section--dark a { color:var(--gold-300); }
.pcr-section--dark a:hover { color:var(--gold-200); }

.pcr-section--tint { background:var(--paper-2); }

/* ---- 4. Section heading + gold ornament -------------------------------- */
.pcr-head { text-align:center; max-width:760px; margin:0 auto clamp(32px,5vw,56px); }
.pcr-head--left { text-align:left; margin-inline:0; }

.pcr-eyebrow {
  display:inline-block;
  font-size:.82rem; font-weight:700;
  color:var(--saffron-600);
  margin-bottom:.7em;
}
.pcr-section--dark .pcr-eyebrow { color:var(--gold-400); }

.pcr-head p { color:var(--ink-500); font-size:1.05rem; margin:0; }
.pcr-section--dark .pcr-head p { color:var(--on-dark-dim); }

/* Gold toran divider — heading ke neeche */
.pcr-orn {
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:.2em auto 1em; max-width:260px;
}
.pcr-head--left .pcr-orn { margin-inline:0; justify-content:flex-start; }
.pcr-orn::before, .pcr-orn::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-400));
}
.pcr-orn::after { background:linear-gradient(270deg, transparent, var(--gold-400)); }
.pcr-orn i {
  width:9px; height:9px; flex:none;
  background:var(--gold-400); transform:rotate(45deg); border-radius:2px;
}

/* ---- 5. Buttons --------------------------------------------------------- */
.pcr-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-body); font-size:1rem; font-weight:600; line-height:1;
  padding:15px 30px; border-radius:var(--r-pill);
  border:1px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  text-align:center;
}
.pcr-btn:hover { transform:translateY(-2px); }
.pcr-btn:active { transform:translateY(0); }

.pcr .pcr-btn--primary {
  background:linear-gradient(135deg, var(--saffron-500), var(--saffron-600));
  color:#fff; box-shadow:var(--sh-gold);
}
.pcr .pcr .pcr-btn--primary:hover { color:#fff; box-shadow:0 10px 28px rgba(200,80,31,.38); }

.pcr .pcr-btn--gold {
  background:linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color:var(--maroon-900); box-shadow:0 6px 20px rgba(169,123,36,.3);
}
.pcr .pcr-btn--gold:hover { color:var(--maroon-900); }

.pcr .pcr-btn--ghost {
  background:rgba(255,255,255,.08); color:#fff;
  border-color:rgba(240,220,168,.5); backdrop-filter:blur(6px);
}
.pcr .pcr-btn--ghost:hover { background:rgba(255,255,255,.16); color:#fff; border-color:var(--gold-300); }

.pcr .pcr-btn--outline { border-color:var(--line-gold); color:var(--maroon-600); background:transparent; }
.pcr .pcr-btn--outline:hover { background:var(--maroon-600); border-color:var(--maroon-600); color:#fff; }

.pcr-btn--sm { padding:10px 20px; font-size:.9rem; }

/* ---- 6. Header / navigation -------------------------------------------- */
.pcr-header {
  position:sticky; top:0; z-index:90;
  background:linear-gradient(180deg, var(--maroon-800) 0%, var(--maroon-700) 100%);
  border-bottom:1px solid rgba(212,165,68,.22);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.pcr-header.is-stuck {
  box-shadow:0 8px 28px rgba(62,10,18,.28);
  background:rgba(62,10,18,.92);
  backdrop-filter:blur(14px) saturate(1.2);
}

/* Patli gold patti sabse upar — toran ka ishara */
.pcr-header::before {
  content:''; display:block; height:3px;
  background:linear-gradient(90deg, var(--saffron-500), var(--gold-400) 35%, var(--gold-200) 50%, var(--gold-400) 65%, var(--saffron-500));
}

.pcr-nav { display:flex; align-items:center; gap:24px; min-height:var(--nav-h); }

.pcr-brand { display:flex; align-items:center; gap:12px; flex:none; margin-right:auto; }
.pcr-brand img { height:52px; width:auto; }
.pcr-brand-text { display:flex; flex-direction:column; line-height:1.15; }
.pcr-brand-name {
  font-family:var(--font-display); font-size:1.28rem; color:#fff; letter-spacing:.01em;
}
.pcr-brand-sub { font-size:.74rem; color:var(--gold-300); }

/* Desktop menu */
.pcr-menu { display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.pcr-menu > li { position:relative; }
.pcr-menu > li > a {
  display:flex; align-items:center; gap:6px;
  padding:10px 14px; border-radius:var(--r-pill);
  color:var(--on-dark); font-size:.95rem; font-weight:500; white-space:nowrap;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.pcr-menu > li > a:hover,
.pcr-menu > li:focus-within > a { background:rgba(212,165,68,.16); color:#fff; }
.pcr-menu > li.is-active > a { color:var(--gold-300); background:rgba(212,165,68,.12); }

.pcr-caret { width:9px; height:9px; flex:none; opacity:.75; transition:transform .25s var(--ease); }
.pcr-menu > li:hover > a .pcr-caret { transform:rotate(180deg); }
/* Drawer me khud ka "+" button hai, isliye wahan caret ki zaroorat nahi */
.pcr-drawer .pcr-caret { display:none; }

/* Dropdown */
.pcr-menu ul {
  position:absolute; top:calc(100% + 10px); left:0; z-index:5;
  min-width:250px; margin:0; padding:8px; list-style:none;
  background:var(--paper); border:1px solid var(--line-gold);
  border-radius:var(--r-md); box-shadow:var(--sh-3);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease-out), visibility .22s;
}
.pcr-menu li:hover > ul,
.pcr-menu li:focus-within > ul { opacity:1; visibility:visible; transform:translateY(0); }
.pcr-menu ul ul { top:-8px; left:calc(100% + 6px); }

.pcr-menu ul a {
  display:block; padding:9px 14px; border-radius:var(--r-sm);
  color:var(--ink-700); font-size:.92rem; line-height:1.4;
}
.pcr-menu ul a:hover { background:var(--paper-3); color:var(--maroon-600); }
.pcr-menu ul li.is-active > a { color:var(--saffron-600); font-weight:600; }

/* Dropdown ke tale jo dubara khulte hain unke liye chhota teer */
.pcr-menu ul li.has-sub > a::after {
  content:'›'; float:right; opacity:.5; font-size:1.15em; line-height:1.2;
}

.pcr-nav-actions { display:flex; align-items:center; gap:10px; flex:none; }

/* Mobile toggle */
.pcr-burger {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px;
  background:rgba(212,165,68,.14); border:1px solid rgba(212,165,68,.3);
  border-radius:var(--r-sm); cursor:pointer;
}
.pcr-burger span {
  display:block; height:2px; width:100%; background:var(--gold-200); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.pcr-burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.pcr-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.pcr-burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.pcr-drawer {
  position:fixed; inset:0 0 0 auto; z-index:100;
  width:min(380px, 88vw);
  background:linear-gradient(180deg, var(--maroon-800), var(--maroon-900));
  border-left:1px solid var(--line-gold);
  transform:translateX(101%); transition:transform .38s var(--ease-out);
  display:flex; flex-direction:column;
  overscroll-behavior:contain;
}
.pcr-drawer.is-open { transform:translateX(0); }
.pcr-drawer-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter); border-bottom:1px solid rgba(212,165,68,.2); flex:none;
}
.pcr-drawer-top span { font-family:var(--font-display); color:#fff; font-size:1.15rem; }
.pcr-drawer-close {
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  background:rgba(212,165,68,.14); border:1px solid rgba(212,165,68,.3);
  color:var(--gold-200); font-size:1.4rem; line-height:1;
}
.pcr-drawer-body { overflow-y:auto; padding:14px var(--gutter) 40px; flex:1; }

.pcr-drawer ul { list-style:none; margin:0; padding:0; }
.pcr-drawer > .pcr-drawer-body > ul > li { border-bottom:1px solid rgba(212,165,68,.14); }
.pcr-drawer a {
  display:block; padding:13px 2px; color:var(--on-dark); font-size:1rem; font-weight:500;
}
.pcr-drawer a:hover, .pcr-drawer li.is-active > a { color:var(--gold-300); }
.pcr-drawer ul ul { margin:0 0 8px 14px; padding-left:12px; border-left:1px solid rgba(212,165,68,.2); }
.pcr-drawer ul ul a { padding:9px 2px; font-size:.92rem; font-weight:400; color:var(--on-dark-dim); }

/* Sub-menu kholna/band karna */
.pcr-drawer .pcr-sub-toggle {
  position:absolute; right:0; top:5px;
  width:34px; height:34px; border-radius:var(--r-sm); cursor:pointer;
  background:rgba(212,165,68,.12); border:1px solid rgba(212,165,68,.24);
  color:var(--gold-200); font-size:1.1rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s var(--ease);
}
.pcr-drawer li.has-sub { position:relative; }
.pcr-drawer li.has-sub > ul { display:none; }
.pcr-drawer li.has-sub.is-open > ul { display:block; }
.pcr-drawer li.has-sub.is-open > .pcr-sub-toggle { transform:rotate(45deg); }

.pcr-scrim {
  position:fixed; inset:0; z-index:99;
  background:rgba(31,20,16,.6); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.pcr-scrim.is-open { opacity:1; visibility:visible; }

/* ---- 7. Announcement strip -------------------------------------------- */
.pcr-announce {
  background:linear-gradient(90deg, var(--saffron-600), var(--saffron-500) 50%, var(--saffron-600));
  color:#fff; font-size:.92rem; text-align:center;
}
.pcr-announce a { color:#fff; display:block; padding:10px var(--gutter); font-weight:500; }
.pcr-announce a:hover { color:var(--gold-200); }
.pcr-announce b { font-weight:700; }

/* ---- 8. Hero ------------------------------------------------------------ */
.pcr-hero {
  position:relative; isolation:isolate;
  min-height:clamp(520px, 88vh, 860px);
  display:grid; align-items:center;
  background:var(--maroon-900);
  overflow:hidden;
}
.pcr-hero-media { position:absolute; inset:0; z-index:-2; }
.pcr-hero-media img {
  width:100%; height:100%; object-fit:cover; object-position:center 22%;
  animation:pcr-kenburns 22s var(--ease) infinite alternate;
}
@keyframes pcr-kenburns { from { transform:scale(1); } to { transform:scale(1.07); } }

.pcr-hero::after {
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(62,10,18,.72) 0%, rgba(62,10,18,.34) 32%, rgba(62,10,18,.5) 62%, rgba(62,10,18,.94) 100%),
    radial-gradient(ellipse 70% 55% at 50% 55%, rgba(200,80,31,.28), transparent 70%);
}

.pcr-hero-inner { position:relative; text-align:center; padding-block:clamp(90px,14vh,150px); }

.pcr-hero-om {
  font-family:var(--font-display); color:var(--gold-300);
  font-size:1.35rem; word-spacing:.28em; margin-bottom:.7em; opacity:.92;
}
.pcr-hero h1 {
  color:#fff; margin:0 0 .25em;
  font-size:clamp(2.8rem, 8.5vw, 6rem); line-height:1.05;
  text-shadow:0 2px 24px rgba(62,10,18,.6);
}
.pcr-hero-sub {
  max-width:640px; margin:0 auto 2em;
  color:var(--on-dark); font-size:clamp(1rem, 2vw, 1.2rem); line-height:1.7;
}
.pcr-hero-since {
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 18px; margin-bottom:1.4em;
  border:1px solid rgba(212,165,68,.45); border-radius:var(--r-pill);
  background:rgba(62,10,18,.4); backdrop-filter:blur(8px);
  color:var(--gold-200); font-size:.9rem; font-weight:500;
}
.pcr-hero-ctas { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

.pcr-hero-scroll {
  position:absolute; left:50%; bottom:28px; translate:-50% 0;
  color:var(--gold-300); font-size:.8rem;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.pcr-hero-scroll::after {
  content:''; width:1px; height:34px;
  background:linear-gradient(180deg, var(--gold-400), transparent);
  animation:pcr-bob 2.2s var(--ease) infinite;
}
@keyframes pcr-bob { 0%,100% { transform:translateY(0); opacity:1; } 50% { transform:translateY(7px); opacity:.4; } }

/* ---- 9. Stats band ------------------------------------------------------ */
.pcr-stats {
  display:grid; grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--line-gold);
}
.pcr-stat { padding:clamp(26px,4vw,44px) 18px; text-align:center; border-right:1px solid var(--line-gold); }
.pcr-stat:last-child { border-right:0; }
.pcr-stat-value {
  font-family:var(--font-display); font-size:clamp(1.9rem,4vw,3rem);
  color:var(--gold-400); line-height:1; margin-bottom:.25em;
}
.pcr-stat-label { font-size:.9rem; color:var(--on-dark-dim); }

/* ---- 10. Cards ---------------------------------------------------------- */
.pcr-grid { display:grid; gap:clamp(18px, 2.4vw, 30px); }
.pcr-grid--2 { grid-template-columns:repeat(2, 1fr); }
.pcr-grid--3 { grid-template-columns:repeat(3, 1fr); }
.pcr-grid--4 { grid-template-columns:repeat(4, 1fr); }

.pcr-card {
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.pcr-card:hover { transform:translateY(-6px); box-shadow:var(--sh-3); border-color:var(--line-gold); }

.pcr-card-media { position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--paper-3); }
.pcr-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); }
.pcr-card:hover .pcr-card-media img { transform:scale(1.07); }
.pcr-card-media::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(62,10,18,.5));
  opacity:0; transition:opacity .4s var(--ease);
}
.pcr-card:hover .pcr-card-media::after { opacity:1; }

.pcr-card-body { padding:22px 24px 26px; flex:1; display:flex; flex-direction:column; }
.pcr-card h3 { margin:0 0 .35em; font-size:1.25rem; }
.pcr-card p { color:var(--ink-500); font-size:.95rem; line-height:1.65; margin:0 0 1em; flex:1; }
.pcr-card-more {
  font-size:.88rem; font-weight:600; color:var(--saffron-600);
  display:inline-flex; align-items:center; gap:6px;
}
.pcr-card-more::after { content:'→'; transition:transform .3s var(--ease-out); }
.pcr-card:hover .pcr-card-more::after { transform:translateX(5px); }

/* Maroon band ke andar cards */
.pcr-section--dark .pcr-card { background:rgba(255,255,255,.05); border-color:rgba(212,165,68,.2); }
.pcr-section--dark .pcr-card h3 { color:#fff; }
.pcr-section--dark .pcr-card p { color:var(--on-dark-dim); }
.pcr-section--dark .pcr-card-more { color:var(--gold-300); }

/* ---- 11. Person card (कार्यकारी मंडळ) --------------------------------- */
.pcr-person { text-align:center; }
.pcr-person-photo {
  position:relative; width:clamp(120px, 15vw, 164px); aspect-ratio:1;
  margin:0 auto 16px; border-radius:50%; overflow:hidden;
  border:3px solid var(--gold-400);
  box-shadow:0 8px 24px rgba(62,10,18,.16);
  background:var(--paper-3);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease);
}
.pcr-person:hover .pcr-person-photo { transform:translateY(-5px) scale(1.03); box-shadow:0 14px 34px rgba(62,10,18,.24); }
.pcr-person-photo img { width:100%; height:100%; object-fit:cover; }
.pcr-person-name { font-family:var(--font-display); font-size:1.1rem; color:var(--maroon-700); margin:0 0 .15em; }
.pcr-person-role {
  font-size:.86rem; color:var(--saffron-600); font-weight:600;
}

/* ---- 12. Photo gallery -------------------------------------------------- */
.pcr-filters { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:34px; }
.pcr-chip {
  padding:9px 20px; border-radius:var(--r-pill); cursor:pointer;
  background:transparent; border:1px solid var(--line-gold);
  color:var(--on-dark-dim); font-family:var(--font-body); font-size:.9rem; font-weight:500;
  transition:all .25s var(--ease);
}
.pcr-chip:hover { color:#fff; border-color:var(--gold-400); }
.pcr-chip.is-active { background:var(--gold-400); border-color:var(--gold-400); color:var(--maroon-900); font-weight:600; }

.pcr-masonry { columns:4; column-gap:14px; }
.pcr-tile {
  display:block; break-inside:avoid; margin-bottom:14px;
  border-radius:var(--r-md); overflow:hidden; position:relative;
  background:rgba(255,255,255,.06); cursor:zoom-in;
  border:1px solid rgba(212,165,68,.18);
}
.pcr-tile img { width:100%; transition:transform .6s var(--ease-out), filter .4s var(--ease); }
.pcr-tile::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(62,10,18,.55));
  opacity:0; transition:opacity .35s var(--ease);
}
.pcr-tile:hover img { transform:scale(1.06); }
.pcr-tile:hover::after { opacity:1; }
.pcr-tile[hidden] { display:none; }

/* ---- 13. Lightbox ------------------------------------------------------- */
.pcr-lb {
  position:fixed; inset:0; z-index:200;
  background:rgba(31,10,14,.95); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.pcr-lb.is-open { opacity:1; visibility:visible; }
.pcr-lb img {
  max-width:92vw; max-height:86vh; object-fit:contain;
  border-radius:var(--r-md); box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.pcr-lb-btn {
  position:absolute; width:52px; height:52px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.1); border:1px solid rgba(212,165,68,.35);
  color:var(--gold-200); font-size:1.5rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s var(--ease);
}
.pcr-lb-btn:hover { background:rgba(212,165,68,.3); color:#fff; }
.pcr-lb-close { top:22px; right:22px; }
.pcr-lb-prev  { left:22px;  top:50%; transform:translateY(-50%); }
.pcr-lb-next  { right:22px; top:50%; transform:translateY(-50%); }
.pcr-lb-count {
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  color:var(--on-dark-dim); font-size:.88rem;
}

/* ---- 14. Video ---------------------------------------------------------- */
.pcr-video {
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--r-lg); background:#000;
  border:1px solid rgba(212,165,68,.28);
  box-shadow:var(--sh-3);
}
.pcr-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Click par hi YouTube load ho — pehle sirf poster dikhta hai (tez khulta hai) */
.pcr-video-facade { cursor:pointer; display:block; width:100%; padding:0; border:0; background:#000; }
.pcr-video-facade img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.82; transition:opacity .4s var(--ease), transform .6s var(--ease-out); }
.pcr-video-facade:hover img { opacity:1; transform:scale(1.04); }
.pcr-video-play {
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:76px; height:76px; border-radius:50%;
  background:linear-gradient(135deg, var(--saffron-500), var(--saffron-600));
  box-shadow:0 10px 34px rgba(200,80,31,.5);
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease-out);
}
.pcr-video-facade:hover .pcr-video-play { transform:translate(-50%,-50%) scale(1.1); }
.pcr-video-play::after {
  content:''; border-left:20px solid #fff;
  border-top:12px solid transparent; border-bottom:12px solid transparent;
  margin-left:5px;
}

.pcr-live-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:var(--r-pill);
  background:rgba(232,98,44,.18); border:1px solid rgba(232,98,44,.5);
  color:#fff; font-size:.84rem; font-weight:600;
}
.pcr-live-dot {
  width:8px; height:8px; border-radius:50%; background:var(--saffron-500);
  box-shadow:0 0 0 0 rgba(232,98,44,.7); animation:pcr-pulse 2s infinite;
}
@keyframes pcr-pulse {
  0%   { box-shadow:0 0 0 0 rgba(232,98,44,.7); }
  70%  { box-shadow:0 0 0 12px rgba(232,98,44,0); }
  100% { box-shadow:0 0 0 0 rgba(232,98,44,0); }
}

/* ---- 15. Prose (लेख / about text) -------------------------------------- */
.pcr-prose { font-size:1.06rem; line-height:1.95; color:var(--ink-700); }
.pcr-prose p { margin:0 0 1.5em; text-align:justify; text-justify:inter-word; }
.pcr-prose > p:first-of-type::first-letter {
  float:left; font-family:var(--font-display); font-size:3.4em; line-height:.86;
  padding:.06em .12em 0 0; color:var(--saffron-600);
}
.pcr-prose h2, .pcr-prose h3 { margin-top:1.6em; }
.pcr-prose blockquote {
  margin:2em 0; padding:22px 28px;
  background:var(--paper-2); border-left:3px solid var(--gold-400);
  border-radius:0 var(--r-md) var(--r-md) 0;
  font-family:var(--font-display); font-size:1.15rem; color:var(--maroon-700);
}
.pcr-prose blockquote p:last-child { margin-bottom:0; }

/* ---- 16. Page banner (inner pages) ------------------------------------- */
.pcr-banner {
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:clamp(56px, 9vw, 104px);
  background-color:var(--maroon-700);
  background-image:
    radial-gradient(ellipse 70% 70% at 50% -10%, rgba(200,80,31,.45), transparent 68%),
    linear-gradient(180deg, var(--maroon-700), var(--maroon-800));
  text-align:center;
}
.pcr-banner::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--gold-400) 25%, var(--gold-200) 50%, var(--gold-400) 75%, transparent);
}
.pcr-banner h1 { color:#fff; margin:0; }
.pcr-banner p { color:var(--on-dark-dim); max-width:640px; margin:.7em auto 0; }

.pcr-crumbs {
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  margin-bottom:1em; font-size:.85rem; color:var(--on-dark-dim);
}
.pcr-crumbs a { color:var(--gold-300); }
.pcr-crumbs li { list-style:none; }
.pcr-crumbs ol { display:contents; margin:0; padding:0; }
.pcr-crumbs li + li::before { content:'›'; margin-right:8px; opacity:.55; }

/* ---- 17. Contact -------------------------------------------------------- */
.pcr-contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(28px,5vw,60px); align-items:start; }

.pcr-info-item { display:flex; gap:16px; padding-block:18px; border-bottom:1px solid var(--line); }
.pcr-info-item:last-child { border-bottom:0; }
.pcr-info-icon {
  flex:none; width:46px; height:46px; border-radius:var(--r-md);
  background:linear-gradient(135deg, var(--paper-3), var(--paper-2));
  border:1px solid var(--line-gold);
  display:flex; align-items:center; justify-content:center; color:var(--saffron-600);
}
.pcr-info-icon svg { width:21px; height:21px; }
.pcr-info-label { font-size:.8rem; color:var(--ink-400); margin-bottom:2px; }
.pcr-info-value { color:var(--ink-900); font-weight:500; white-space:pre-line; line-height:1.6; }

.pcr-form { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,4vw,38px); box-shadow:var(--sh-2); }
.pcr-field { margin-bottom:18px; }
.pcr-field label { display:block; font-size:.86rem; font-weight:600; color:var(--ink-700); margin-bottom:7px; }
.pcr-field input, .pcr-field textarea {
  width:100%; padding:13px 16px; font-family:var(--font-body); font-size:1rem; color:var(--ink-900);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.pcr-field input:focus, .pcr-field textarea:focus {
  outline:none; background:#fff;
  border-color:var(--saffron-500); box-shadow:0 0 0 3px rgba(232,98,44,.14);
}
.pcr-field textarea { min-height:140px; resize:vertical; }

.pcr-note { padding:14px 18px; border-radius:var(--r-sm); font-size:.95rem; margin-bottom:20px; }
.pcr-note--ok   { background:#E9F6EC; border:1px solid #B7E0C1; color:#1D6A33; }
.pcr-note--err  { background:#FDECEA; border:1px solid #F5C2BC; color:#9B2314; }

/* ---- 18. Footer --------------------------------------------------------- */
.pcr-footer {
  background:linear-gradient(180deg, var(--maroon-800), var(--maroon-900));
  color:var(--on-dark-dim); font-size:.95rem;
}
.pcr-footer::before {
  content:''; display:block; height:3px;
  background:linear-gradient(90deg, var(--saffron-500), var(--gold-400) 35%, var(--gold-200) 50%, var(--gold-400) 65%, var(--saffron-500));
}
.pcr-footer-main { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,52px); padding-block:clamp(44px,6vw,72px); }
.pcr-footer h4 {
  color:var(--gold-300); font-size:.9rem;
  margin:0 0 18px; font-weight:600;
}
.pcr-footer ul { list-style:none; margin:0; padding:0; }
.pcr-footer li { margin-bottom:10px; }
.pcr-footer a { color:var(--on-dark-dim); }
.pcr-footer a:hover { color:var(--gold-300); }
.pcr-footer-brand img { height:64px; width:auto; margin-bottom:16px; }
.pcr-footer-brand p { line-height:1.7; margin:0 0 1em; }

.pcr-socials { display:flex; gap:10px; }
.pcr-social {
  width:42px; height:42px; border-radius:50%;
  background:rgba(212,165,68,.12); border:1px solid rgba(212,165,68,.28);
  color:var(--gold-200);
  display:flex; align-items:center; justify-content:center;
  transition:background .25s var(--ease), transform .25s var(--ease-out), color .25s var(--ease);
}
.pcr-social:hover { background:var(--gold-400); color:var(--maroon-900); transform:translateY(-3px); }
.pcr-social svg { width:19px; height:19px; fill:currentColor; }

.pcr-footer-bottom {
  border-top:1px solid rgba(212,165,68,.18);
  padding-block:22px;
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; justify-content:space-between;
  font-size:.86rem; color:rgba(214,185,168,.75);
}
.pcr-footer-bottom a { color:var(--gold-300); }

/* ---- 19. Scroll-reveal -------------------------------------------------- */
/* Chhupane ki state sirf tab lagti hai jab JS ne <html> par .pcr-js laga diya
   ho. JS band ho, file na chale ya script beech me toot jaaye - kisi bhi soorat
   me content dikhta rehta hai, khaali page nahi milta. */
.pcr-js .pcr-reveal { opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease-out); }
.pcr-js .pcr-reveal.is-in { opacity:1; transform:none; }

/* Back to top */
.pcr-top {
  position:fixed; right:22px; bottom:22px; z-index:80;
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  background:linear-gradient(135deg, var(--saffron-500), var(--saffron-600));
  border:0; color:#fff; font-size:1.2rem; line-height:1;
  box-shadow:var(--sh-gold);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s var(--ease), transform .3s var(--ease-out), visibility .3s;
}
.pcr-top.is-in { opacity:1; visibility:visible; transform:none; }

/* ---- 20. Responsive ----------------------------------------------------- */
@media (max-width:1100px) {
  .pcr-masonry { columns:3; }
  .pcr-footer-main { grid-template-columns:1fr 1fr; }
}
@media (max-width:980px) {
  .pcr-menu, .pcr-nav-actions .pcr-btn { display:none; }
  .pcr-burger { display:flex; }
  .pcr-grid--4 { grid-template-columns:repeat(2, 1fr); }
  .pcr-grid--3 { grid-template-columns:repeat(2, 1fr); }
  .pcr-contact-grid { grid-template-columns:1fr; }
  .pcr-stats { grid-template-columns:repeat(2, 1fr); }
  .pcr-stat:nth-child(2n) { border-right:0; }
  .pcr-stat:nth-child(-n+2) { border-bottom:1px solid var(--line-gold); }
}
@media (max-width:640px) {
  body.pcr { font-size:16px; }
  .pcr-masonry { columns:2; column-gap:10px; }
  .pcr-tile { margin-bottom:10px; }
  .pcr-grid--2, .pcr-grid--3, .pcr-grid--4 { grid-template-columns:1fr; }
  .pcr-brand img { height:42px; }
  .pcr-brand-name { font-size:1.08rem; }
  .pcr-brand-sub { display:none; }
  .pcr-hero { min-height:78vh; }
  .pcr-hero-ctas .pcr-btn { width:100%; }
  .pcr-prose p { text-align:left; }
  .pcr-lb-prev { left:8px; } .pcr-lb-next { right:8px; }
  .pcr-footer-main { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  .pcr *, .pcr *::before, .pcr *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .pcr-js .pcr-reveal { opacity:1; transform:none; }
}

/* ---- 21. Print ---------------------------------------------------------- */
@media print {
  .pcr-header, .pcr-drawer, .pcr-scrim, .pcr-top, .pcr-announce, .pcr-hero-scroll { display:none !important; }
  body.pcr { background:#fff; color:#000; }
}

/* ==========================================================================
   22. Legacy compatibility
   Jo pages abhi purane WordPress markup par hain unhe naye shell ke andar
   theek dikhane ke liye. Purane theme ki style.css ke baad load hota hai,
   isliye yahan jo likha hai wahi jeetta hai.
   ========================================================================== */

/* Purana theme body par gehra background aur page-wide overlay lagata tha */
body.pcr .bg-overlay,
body.pcr .container-wrapper,
body.pcr .hc-wrapper { background:transparent !important; box-shadow:none !important; }

body.pcr .content {
  background:transparent !important;
  color:var(--ink-700) !important;
  padding-block:var(--sec-y) !important;
  font-family:var(--font-body) !important;
  font-size:1.05rem !important;
  line-height:1.85 !important;
}

/* Purane fixed-width containers ko naye gutter ke hisaab se */
body.pcr .content .container,
body.pcr .content .om-c-container {
  width:100% !important; max-width:var(--wrap) !important;
  margin-inline:auto !important; padding-inline:var(--gutter) !important;
  float:none !important;
}
body.pcr .content .container-inner,
body.pcr .content .om-c-container-inner { width:auto !important; margin:0 !important; }

/* Legacy headings ko naye type system me laao */
body.pcr .content h1, body.pcr .content h2,
body.pcr .content h3, body.pcr .content h4 {
  font-family:var(--font-display) !important;
  color:var(--maroon-700) !important;
  font-weight:400 !important;
}
body.pcr .content strong, body.pcr .content b { color:var(--ink-900); font-weight:600; }
body.pcr .content a { color:var(--saffron-600); }
body.pcr .content a:hover { color:var(--maroon-600); }

/* Purani banner patti ab header khud banata hai */
body.pcr .page-title-wrapper { display:none !important; }

/* Purane gallery/portfolio grids — flex me badal kar theek kar diya */
body.pcr .gallery-grid .items {
  display:flex !important; flex-wrap:wrap !important;
  gap:14px !important; margin:0 !important; width:auto !important;
}
body.pcr .gallery-grid .items .item {
  float:none !important; margin:0 !important;
  flex:1 1 190px !important; max-width:280px !important;
  border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--sh-1);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease);
}
body.pcr .gallery-grid .items .item:hover { transform:translateY(-4px); box-shadow:var(--sh-2); }
body.pcr .gallery-grid .items .item img { width:100% !important; height:auto !important; display:block; }

body.pcr .ompf-portfolio .ompf-item {
  border-radius:var(--r-md); overflow:hidden;
  box-shadow:var(--sh-1); border:1px solid var(--line);
}

/* Purani tables ko padhne layak banao */
body.pcr .content table {
  width:100% !important; height:auto !important;
  border-collapse:collapse; margin:1.5em 0;
}
body.pcr .content table td { padding:10px 12px !important; vertical-align:middle; }
body.pcr .content table img { margin-inline:auto; border-radius:var(--r-sm); }

/* Purane theme ka floating social rail aur uska music button — dono ab naye
   design me hain (footer aur .pcr-music), isliye purane wale chhupa dete hain */
body.pcr > .social-icons,
body.pcr .war_soundy_audio_control { display:none !important; }

/* wpb rows me purane margins hata do */
body.pcr .content .vc_row, body.pcr .content .wpb_row { margin:0 !important; }
body.pcr .content .wpb_text_column:last-child { margin-bottom:0 !important; }

/* Jis sadasya ki photo abhi uploads me nahi hai — naam ka akshar dikhta hai */
.pcr-person-photo--empty {
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, var(--maroon-600), var(--maroon-800));
  border-color:var(--gold-500);
}
.pcr-person-photo--empty span {
  font-family:var(--font-display); color:var(--gold-300);
  font-size:clamp(2.4rem, 5vw, 3.4rem); line-height:1;
}

/* Menu ke daayein wale items ke dropdown screen ke bahar na jaayein —
   JS inhe naapkar .pcr-flip laga deta hai, phir ye ulti disha me khulte hain. */
.pcr-menu li.pcr-flip > ul { left:auto; right:0; }
.pcr-menu ul li.pcr-flip > ul { left:auto; right:calc(100% + 6px); }

/* ==========================================================================
   23. Legacy post / article pages (news, blog archives)
   Purana theme in do columns ko float karta tha; naye shell me float tootta hai
   aur sidebar neeche gir jaata tha. JS `pcr-post-layout` laga deta hai, uske
   baad yahan se grid sambhalta hai. 28 purane pages isi par chalte hain.
   ========================================================================== */
body.pcr .pcr-post-layout {
  display:grid;
  grid-template-columns:minmax(0, 1fr) 320px;
  gap:clamp(32px, 4vw, 60px);
  align-items:start;
}
body.pcr .pcr-post-layout > .content-column-content,
body.pcr .pcr-post-layout > .content-column-sidebar {
  width:auto !important; float:none !important; margin:0 !important; min-width:0;
}

/* ---- post ka upar ka meta (tareekh · vibhag · comments) ---------------- */
body.pcr .post-meta {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding-bottom:18px; margin-bottom:28px;
  border-bottom:1px solid var(--line);
  font-size:.9rem; color:var(--ink-400);
}
body.pcr .post-meta a { color:var(--saffron-600); font-weight:500; }
body.pcr .post-meta-divider { opacity:.4; }

/* ---- post ka mazmoon --------------------------------------------------- */
body.pcr .post-content { font-size:1.05rem; line-height:1.9; }
body.pcr .post-content > p { margin:0 0 1.4em; }

/* Bikhri hui images ko ek saaf grid me — JS `pcr-imgrid` laga deta hai.
   Bina iske har image apni line par chali jaati thi (reset me img{display:block}). */
body.pcr .pcr-imgrid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:14px; margin:0 0 1.6em;
}
body.pcr .pcr-imgrid .pcr-tile { margin:0; border-color:var(--line); background:var(--paper-3); }
body.pcr .pcr-imgrid img {
  width:100%; height:100%; aspect-ratio:4/3; object-fit:cover;
}

/* ---- sidebar ------------------------------------------------------------ */
body.pcr .content-column-sidebar { position:sticky; top:calc(var(--nav-h) + 20px); }
body.pcr .sidebar-widget {
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
  padding:22px 24px; margin-bottom:20px;
}
body.pcr .sidebar-widget-title,
body.pcr .sidebar-widget h3, body.pcr .sidebar-widget h4 {
  font-family:var(--font-body) !important;
  font-size:.95rem !important; font-weight:700 !important;
  color:var(--maroon-700) !important;
  margin:0 0 14px !important; padding:0 0 12px;
  border-bottom:1px solid var(--line-gold);
}
body.pcr .sidebar-widget ul { list-style:none; margin:0; padding:0; }
body.pcr .sidebar-widget li { padding:7px 0; border-bottom:1px solid rgba(109,18,32,.06); }
body.pcr .sidebar-widget li:last-child { border-bottom:0; }
body.pcr .sidebar-widget a { color:var(--ink-700); font-size:.95rem; }
body.pcr .sidebar-widget a:hover { color:var(--saffron-600); }
body.pcr .sidebar-widget input[type="text"],
body.pcr .sidebar-widget input[type="search"] {
  width:100%; padding:11px 14px; font-family:var(--font-body); font-size:.95rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm);
}
body.pcr .sidebar-widget input:focus {
  outline:none; border-color:var(--saffron-500); box-shadow:0 0 0 3px rgba(232,98,44,.14);
}
/* WordPress ki bachi-khuchi khaali widgets — inme kuch hota hi nahi tha */
body.pcr .sidebar-widget.widget_recent_comments,
body.pcr .sidebar-widget.widget_pages { display:none; }

/* ---- comments ---------------------------------------------------------- */
body.pcr .comments-section {
  margin-top:48px; padding-top:32px; border-top:1px solid var(--line);
}
body.pcr .comments-section h3, body.pcr .comments-section h4 { font-size:1.3rem; }

@media (max-width:980px) {
  body.pcr .pcr-post-layout { grid-template-columns:1fr; }
  body.pcr .content-column-sidebar { position:static; }
}

/* WordPress export ki bachi-khuchi widgets — inme ya to kuch hai hi nahi,
   ya wahi cheez do baar aa rahi hai. Sidebar inke bina saaf dikhta hai. */
body.pcr .sidebar-widget.ompf_widget_portfolio { display:none; }   /* "Recent Works" — khaali */
body.pcr .sidebar-widget.widget_recent_entries
       ~ .sidebar-widget.widget_recent_entries { display:none; }   /* dobara aayi "Recent Posts" */

/* purane icon-font ke bullets sidebar me adhoore glyph jaise dikhte the */
body.pcr .sidebar-widget li::before,
body.pcr .sidebar-widget li::marker { content:none; }

/* JS jab tay kar le ki comments me kuch hai hi nahi */
body.pcr .comments-section.pcr-empty { display:none; }

/* Post ke andar akeli image — grid nahi banti, par lightbox aur look wahi */
body.pcr .post-content .pcr-tile:not(.pcr-imgrid .pcr-tile) {
  display:inline-block; max-width:100%; margin:0 0 1.2em;
}

/* ---- 24. Language switcher --------------------------------------------- */
.pcr-lang {
  display:flex; align-items:center; gap:2px; flex:none;
  padding:3px; border-radius:var(--r-pill);
  background:rgba(212,165,68,.12); border:1px solid rgba(212,165,68,.26);
}
.pcr-lang a {
  padding:5px 12px; border-radius:var(--r-pill);
  font-size:.82rem; font-weight:600; line-height:1.3; white-space:nowrap;
  color:var(--on-dark-dim);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.pcr-lang a:hover { color:#fff; }
.pcr-lang a.is-on { background:var(--gold-400); color:var(--maroon-900); }

/* Drawer me poori chaudai le, taaki ungli se dabana aasan ho */
.pcr-lang--drawer { margin-top:22px; justify-content:stretch; }
.pcr-lang--drawer a { flex:1; text-align:center; padding-block:10px; font-size:.9rem; }

/* Desktop nav chhupte waqt switcher bhi chhup jaata hai — drawer wala bachta hai */
@media (max-width:980px) { .pcr-header .pcr-lang { display:none; } }

/* ---- 25. Announcement popup -------------------------------------------- */
.pcr-pop {
  position:fixed; inset:0; z-index:150;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px, 4vw, 32px);
}
.pcr-pop-veil {
  position:absolute; inset:0;
  background:rgba(31,10,14,.82); backdrop-filter:blur(4px);
  animation:pcr-fade .35s var(--ease);
}
@keyframes pcr-fade { from { opacity:0; } to { opacity:1; } }

.pcr-pop-box {
  position:relative; max-width:min(92vw, 780px); max-height:88vh;
  border-radius:var(--r-lg); overflow:visible;
  animation:pcr-pop-in .45s var(--ease-out);
}
@keyframes pcr-pop-in {
  from { opacity:0; transform:translateY(18px) scale(.97); }
  to   { opacity:1; transform:none; }
}
.pcr-pop-img { display:block; }
.pcr-pop-img img {
  width:100%; height:auto; max-height:74vh; object-fit:contain;
  display:block; border-radius:var(--r-lg) var(--r-lg) 0 0;
  border:1px solid var(--gold-500); border-bottom:0;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.pcr-pop-cap {
  margin:0; padding:13px 18px; text-align:center;
  background:linear-gradient(180deg, var(--maroon-700), var(--maroon-800));
  color:var(--gold-200); font-family:var(--font-display); font-size:1.05rem; line-height:1.4;
  border:1px solid var(--gold-500); border-top:0;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.pcr-pop-x {
  position:absolute; top:-16px; right:-16px; z-index:2;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  background:var(--gold-400); border:2px solid var(--maroon-800); color:var(--maroon-900);
  font-size:1.4rem; line-height:1; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.45);
  transition:transform .2s var(--ease-out), background .2s var(--ease);
}
.pcr-pop-x:hover { background:var(--gold-300); transform:scale(1.08); }

@media (max-width:560px) {
  .pcr-pop-x { top:-12px; right:-12px; width:34px; height:34px; font-size:1.2rem; }
  .pcr-pop-cap { font-size:.94rem; padding:10px 14px; }
  .pcr-pop-img img { max-height:66vh; }
}

/* ---- 26. Background music toggle --------------------------------------- */
.pcr-music {
  position:fixed; left:22px; bottom:22px; z-index:80;
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  background:linear-gradient(135deg, var(--maroon-600), var(--maroon-800));
  border:1px solid var(--gold-500); color:var(--gold-300);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(62,10,18,.35);
  transition:transform .25s var(--ease-out), color .25s var(--ease), box-shadow .25s var(--ease);
}
.pcr-music:hover { transform:translateY(-2px); color:var(--gold-200); }
.pcr-music svg { width:22px; height:22px; fill:currentColor; }
/* Bajte waqt halki si dhadkan — dekhkar pata chale ki chal raha hai */
.pcr-music.is-playing { color:var(--saffron-400); box-shadow:0 0 0 0 rgba(232,98,44,.5); animation:pcr-music-beat 2.4s infinite; }
@keyframes pcr-music-beat {
  0%,100% { box-shadow:0 6px 20px rgba(62,10,18,.35), 0 0 0 0 rgba(232,98,44,.45); }
  50%     { box-shadow:0 6px 20px rgba(62,10,18,.35), 0 0 0 9px rgba(232,98,44,0); }
}
.pcr-music .pcr-music-off { display:none; }
.pcr-music.is-playing .pcr-music-off { display:block; }
.pcr-music.is-playing .pcr-music-on  { display:none; }

@media (max-width:640px) { .pcr-music { left:16px; bottom:16px; width:44px; height:44px; } }

/* ---- 27. Homepage slider ------------------------------------------------
   Purane design ka nivo slider, naye roop me. Slides ek doosre ke upar rakhi
   hain aur sirf opacity badalti hai - isliye height nahi uchhalti.
   -------------------------------------------------------------------------- */
.pcr-slider {
  position:relative; isolation:isolate;
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-3); border:1px solid var(--line-gold);
  background:var(--maroon-900);
}
.pcr-slider-track { position:relative; aspect-ratio:4/3; }

.pcr-slide {
  position:absolute; inset:0; margin:0;
  opacity:0; visibility:hidden;
  transition:opacity .7s var(--ease), visibility .7s;
}
.pcr-slide.is-on { opacity:1; visibility:visible; }
.pcr-slide img { width:100%; height:100%; object-fit:cover; }

/* Teer — normally halke, hover/focus par poore */
.pcr-slider-btn {
  position:absolute; top:50%; translate:0 -50%; z-index:2;
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  background:rgba(62,10,18,.55); border:1px solid rgba(212,165,68,.45);
  color:var(--gold-200); font-size:1.5rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px);
  opacity:0; transition:opacity .3s var(--ease), background .25s var(--ease);
}
.pcr-slider:hover .pcr-slider-btn,
.pcr-slider:focus-within .pcr-slider-btn { opacity:1; }
.pcr-slider-btn:hover { background:rgba(62,10,18,.85); color:#fff; }
.pcr-slider-prev { left:12px; }
.pcr-slider-next { right:12px; }

/* Dots — neeche, image ke upar tairte hue */
.pcr-slider-dots {
  position:absolute; left:0; right:0; bottom:12px; z-index:2;
  display:flex; flex-wrap:wrap; gap:7px; justify-content:center;
  padding-inline:14px;
}
.pcr-slider-dots button {
  width:8px; height:8px; padding:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.55); border:0;
  box-shadow:0 0 0 1px rgba(62,10,18,.35), 0 1px 3px rgba(0,0,0,.4);
  transition:background .25s var(--ease), transform .25s var(--ease-out), width .25s var(--ease);
}
.pcr-slider-dots button:hover { background:var(--gold-200); }
.pcr-slider-dots button.is-on { background:var(--gold-400); width:20px; border-radius:var(--r-pill); }

/* Neeche halki chhaya taaki dots har photo par dikh jaayein */
.pcr-slider::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:96px; z-index:1;
  background:linear-gradient(180deg, transparent, rgba(31,10,14,.72));
  pointer-events:none;
}

@media (max-width:640px) {
  .pcr-slider-btn { opacity:1; width:36px; height:36px; font-size:1.25rem; }
  .pcr-slider-prev { left:8px; } .pcr-slider-next { right:8px; }
}

/* Jisne animation kam karne ko kaha ho, uske liye slider apne aap nahi chalega
   (JS dekhta hai) — par slide badalna phir bhi turant ho */
@media (prefers-reduced-motion:reduce) {
  .pcr-slide { transition:none; }
}
