/* ============================================================================
 * vh-card.css — Vista Hub v2.3
 * mockup cards (natural-height image + mask-fade) · uniform grid · sticky mini player
 * ============================================================================
 *
 * COLOUR SYSTEM — jaanboojh ke chuna gaya
 *   Player accent  : #FFD24C (warm amber)
 *   Kyun amber?
 *     - Brand red (--accent) CTA + NEW badge pe already hai. Player uspe
 *       banao to card "sab kuch important hai" chillane lagta hai.
 *     - Pink (--pink) mana hai.
 *     - Neon green (--neon) 2015 wale music-app cliché hai, aur dark image
 *       ke upar chubhta hai.
 *     - Amber gold hai. Vista Hub ki zyadatar images — diya, mandir, dhoop,
 *       manuscript — sab warm-toned hain. Amber unme ghul jaata hai par
 *       chamakta bhi hai. Play button pe akela amber, baaki sab white/grey.
 *   Baaki sab       : #fff (controls), #9a9a9a (secondary text)
 *
 * `css/vh-card.css` pe rakho. style.css ke BAAD load hota hai, isliye purane
 * (v2.0: `.ovl-*` CSS style.css se DELETED — koi template use nahi karta tha.) `search.php`
 * jaisi kuch jagah uspe depend kar sakti hai.
 * ========================================================================= */


/* Player palette — ek jagah, poore file mein use */
:root {
  --vh-gold:      #FFD24C;
  --vh-gold-dim:  rgba(255, 210, 76, .18);
  --vh-track:     rgba(255, 255, 255, .22);
}


/* ---------------------------------------------------------------------------
 * GRID — v2.0 SINGLE SOURCE OF TRUTH (mobile-first LOCK)
 *
 * Poori site EK phone-column hai (:root --maxw:620px) — desktop pe wahi
 * column bada dikhta hai. Isliye: koi breakpoint nahi, koi masonry nahi,
 * koi !important war nahi (style.css ka purana masonry + 2/3/4-col base
 * block DELETED). Ek layout = ek testing = CLS har device pe same.
 * ------------------------------------------------------------------------- */
.posts-grid,
.vh-tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;                          /* v2.4 — 18px→14px, mobile pe kasa (Vivek) */
  margin-top: 6px;
}

/* ---------------------------------------------------------------------------
 * v2.0 — CONTENT-VISIBILITY WAPAS (scroll engine ka sabse bada win)
 *
 * Pehle yahan se hataya gaya tha kyunki fluid feed-ads ko push() ke waqt
 * real width chahiye thi ("availableWidth=0" error). v2.0+: in-feed grid ka
 * SIBLING hai (card ke andar nahi) aur lazy-push viewport ke paas hota hai —
 * width real milti hai, rukawat nahi.
 *
 * Ab har feed-card `content-visibility:auto`: off-screen card ka LAYOUT +
 * PAINT dono skip. Single post pe ~40 card, home pe ~60 — bina is rule ke
 * browser SAB rasterize karta tha; ab sirf viewport ke aas-paas wale. 4GB
 * phone pe scroll ka sabse bada bojh yahi tha. Aur jab Auto Ads #post-body
 * mein ad insert karta hai, relayout in contained cards ke andar nahi
 * ghusta — insert sasta ho jaata hai (ads ON = jank wali bimari ka doosra
 * ilaaj).
 *
 * `contain-intrinsic-size: auto Npx` — pehli render se pehle placeholder
 * height. `auto` keyword pehli render ke baad ASLI height yaad rakhta
 * hai, isliye scrollbar/anchor kabhi nahi kudte. Hero is rule mein NAHI
 * hai (wo grid ka child nahi hota, aur LCP element ko chhedna nahi).
 *
 * v2.4 — 500px guess bahut chhota tha (Vivek: scroll pe cards "khisakti"
 * dikhti thi — real card 550-650px ki hoti hai, off-screen se andar aate
 * hi height 500→real badalti thi = visible jump). Audio-wale card ke
 * paas ek extra player-row hai, isliye do alag estimate: non-audio
 * ~560px, audio ~610px. `auto` phir bhi asli height le lega — ye sirf
 * PEHLI guess ko sach ke zyada kareeb laata hai taaki jump chhota/gayab ho.
 *
 * IntersectionObserver ([data-reveal]) c-v ke saath normal kaam karta hai —
 * reveal animation waise hi chalti hai.
 * ------------------------------------------------------------------------- */
.posts-grid > .vh-card,
.vh-tile-grid > .vh-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 560px;
}
.posts-grid > .vh-card.vh-card--audio,
.vh-tile-grid > .vh-card.vh-card--audio {
  contain-intrinsic-size: auto 610px;
}


/* ---------------------------------------------------------------------------
 * CARD SHELL
 * ------------------------------------------------------------------------- */
.vh-card { position: relative; margin: 0; }

.vh-box {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #000;                 /* mask-fade jahan khatam hoti hai wahi rang */
  border: 1px solid var(--border);
  /* v1.0 polish — soft ambient elevation: card bg se halka utha hua
     lagta hai (premium app feel). Ek static shadow = zero paint cost
     scroll pe (hover-animate nahi kar rahe, 4GB phones ka khayal). */
  box-shadow: 0 2px 12px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05);  /* v2.0 — dono ek declaration me (pehla overwrite ho raha tha) */
  isolation: isolate;               /* z-index sirf is card ke andar */
}

/* v2.3 — 4:5 aspect-ratio lock GAYA (mockup: image apni natural height
   leti hai, letterbox nahi). Hero ab mobile/desktop dono pe same rule —
   do sizing-system maintain karna bekaar tha. */
.vh-card--hero { grid-column: 1 / -1; margin-bottom: 4px; }


/* ---------------------------------------------------------------------------
 * v2.3 — IMAGE (mockup: top full-bleed, natural height, bottom mask-fade)
 *
 * Purana system (`.vh-blur` GPU blur backdrop + `.vh-img` absolute+clamp
 * box-relative height) yahan se GAYA — mockup mein letterbox banta hi
 * nahi, image apni asli height mein poori chaudhai leti hai, normal
 * document-flow mein. Per-card `filter:blur(34px)` backdrop khatam = 4GB
 * phone ka sabse bada GPU-cost gaya.
 *
 * "Blur effect" ab mask-image fade hai (Vivek: "ब्लर इफेक्ट के साथ बॉक्स
 * में खत्म") — image ka aakhri ~26% dheere transparent hota hai, peeche
 * `.vh-box` ka kaala background jhaankta hai. `mask-image` GPU pe sasta hai
 * (ek alpha multiply), asli `filter:blur()` jaisa mahenga nahi.
 * ------------------------------------------------------------------------- */
.vh-img {
  display: block;
  width: 100%;
  height: auto;          /* featured image apne width/height attrs se CLS-safe hai */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
}

/* Content se khींchi gayi image — size pehle se pata nahi, isliye CLS
   suraksha ke liye ek reserved ratio + cover-fit. */
.vh-img--noar {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.vh-img--none {
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  font-size: 2.6rem;
  color: var(--border-2);
  background: var(--card-2);
}

/* ---------------------------------------------------------------------------
 * FULL-CARD CLICK OVERLAY
 *
 * `.vh-card-link` — `.vh-box` ka direct child, poore card ko dhakta hai
 * (z-index 3). Image, blur, text — kahin bhi click = post open. Ye asli fix
 * hai: pehle title ka `::after` sirf `.vh-text` (positioned parent) ko cover
 * karta tha, isliye image pe click kaam nahi karta tha.
 *
 * Buttons (play/like/share) z-index 4 pe hain — unka click pehle unhi ko
 * milta hai, overlay tak nahi jaata.
 * ------------------------------------------------------------------------- */
.vh-card-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  text-decoration: none;
}
.vh-card-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -3px;
  border-radius: 16px;
}

/* Title link ab sirf text ka rang; click overlay sambhaalti hai.
   (Title pe alag <a> rakha taaki text hi bhi clickable rahe — accessibility.) */
.vh-link { color: inherit; text-decoration: none; position: relative; z-index: 4; }


/* ---------------------------------------------------------------------------
 * BODY — kicker · title · desc
 * Image ab UPAR normal-flow mein hai (overlay nahi), isliye text seedha
 * card-bg (kaala) pe baithta hai — text-shadow ab zaroori nahi (wo image
 * ke upar legibility ke liye tha).
 * `pointer-events:none` + link `auto` — wahi purana stretched-link trick:
 * plain text pe click bhi neeche `.vh-card-link` tak pahunche.
 * ------------------------------------------------------------------------- */
.vh-body {
  position: relative;
  z-index: 4;
  padding: 13px 16px 4px;
  pointer-events: none;
}
.vh-body a { pointer-events: auto; }

/* Kicker row — "• ताज़ा अपडेट ..................... NEW" (sirf नई पोस्ट
   sections mein; badge (🔥 ट्रेंडिंग) hone par uski jagah). Green = site ke
   G2 palette mein "aaj/taaza" ka matlab (`.vh-more` bhi isi rang mein). */
.vh-kick {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.vh-kick-l {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--vh-green);
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vh-kick-dot {
  width: 6px; height: 6px; flex: none;
  border-radius: 50%;
  background: var(--vh-green);
}

.vh-title {
  margin: 0 0 6px;
  color: #fff;
  font-weight: 700;
  line-height: 1.28;
  font-size: clamp(.95rem, 4vw, 1.08rem);
}
.vh-title .vh-link {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vh-card--hero .vh-title { font-size: clamp(1.1rem, 5vw, 1.5rem); }

/* Tile grid (category zone 1) — bade tiles, mota title */
.vh-tile-grid .vh-title { font-size: clamp(1rem, 4.3vw, 1.15rem); }

.vh-new {
  display: inline-block; vertical-align: middle;
  background: var(--accent); color: #fff;
  font-size: .58rem; font-weight: 700; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 5px; margin-left: 6px;
}

/* TRENDING BADGE — 🔥 ट्रेंडिंग/सीजन section ke cards pe.
   "NEW" badge se alag rang (red hai wo), ye amber — player ke color se
   match, "abhi relevant hai" wala feel. Panel se aaya label (jaise "राखी"). */
.vh-badge-trend {
  display: inline-block; vertical-align: middle;
  background: var(--vh-gold); color: #0D0F11;
  font-size: .58rem; font-weight: 700; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 5px; margin-left: 6px;
  white-space: nowrap;
}

.vh-desc {
  margin: 0 0 2px;
  color: #cbcbcb;
  font-weight: 400;
  line-height: 1.5;
  font-size: clamp(.78rem, 3.1vw, .86rem);
}
.vh-desc-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vh-card--hero .vh-desc-text { -webkit-line-clamp: 3; }

.vh-more {
  margin: 0; color: var(--vh-green-soft, #a3e6b9); font-weight: 600;
  font-size: clamp(.78rem, 3.1vw, .86rem);
}   /* v3.1 — apni alag line, ab kabhi clamp se cut nahi hoga (Vivek) */


/* ---------------------------------------------------------------------------
 * PLAYER — EK SLIM ROW (Vivek ka mockup)
 * play · now-time · seek bar · end-time · share-chip — sab ek row mein.
 * Purane multi-row system (seek/ctrl/foot, like-in-card, ⏪⏩, equalizer,
 * hint) mockup mein nahi hai — like ab sirf single-post like-bar pe,
 * skip/scrub mini-bar + drag pe. `flex-wrap` bahut chhoti screen ke liye
 * safety-net; kuch tootega nahi, bas dusri line le lega.
 * ------------------------------------------------------------------------- */
.vh-player {
  position: relative;
  z-index: 4;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  padding: 11px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.97), rgba(0,0,0,.82));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* v2.3 — border-top HATAYI (Vivek: "player ke upar patli line"). Purana
     style.css override kabhi kaam nahi kiya (galat class target karta
     tha), isliye seedha source pe hi hataya — ab kahin bhi nahi dikhegi. */
}

.vh-player .vh-btn--play { margin: 0; flex-shrink: 0; min-width: 46px; min-height: 46px; }
.vh-player .vh-range { flex: 1 1 70px; min-width: 50px; }

.vh-t {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  color: #c5c5c5;
  min-width: 30px;
  font-variant-numeric: tabular-nums;
}
.vh-t--now { color: var(--vh-gold); }
.vh-t--end { text-align: right; }

/* Native <input type=range> apne look ke saath.
   Custom div-slider mein keyboard + screen-reader support haath se likhna
   padta. Range free mein deta hai. `--p` (0–100) JS set karta hai. */
.vh-range {
  flex: 1;
  -webkit-appearance: none; appearance: none;
  height: 24px;                     /* tap target 24px, dikhta 5px */
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.vh-range::-webkit-slider-runnable-track {
  height: 5px; border-radius: 4px;
  background: linear-gradient(
    to right,
    var(--vh-gold) 0%, var(--vh-gold) calc(var(--p, 0) * 1%),
    var(--vh-track) calc(var(--p, 0) * 1%), var(--vh-track) 100%
  );
  box-shadow: 0 0 8px rgba(255,210,76,.3);
}
.vh-range::-moz-range-track    { height: 5px; border-radius: 4px; background: var(--vh-track); }
.vh-range::-moz-range-progress { height: 5px; border-radius: 4px; background: var(--vh-gold); box-shadow: 0 0 8px rgba(255,210,76,.3); }
.vh-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 2px solid var(--vh-gold);
  margin-top: -5px;                 /* track ke center pe */
  box-shadow: 0 1px 6px rgba(0,0,0,.5), 0 0 6px rgba(255,210,76,.45);
}
.vh-range::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 2px solid var(--vh-gold);
  box-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.vh-range:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }


.vh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px;   /* WCAG 2.2 AA target size — 24px min, 44 diya */
  padding: 0 8px;
  background: none; border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 11px;
  transition: background .15s, transform .1s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.vh-btn:hover  { background: rgba(255,255,255,.09); }
.vh-btn:active { transform: scale(.9); }
.vh-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.vh-ico { width: 24px; height: 24px; fill: currentColor; display: block; }

/* Play button — ek hi cheez jo gold hai. Aankh yahin jaati hai. */
.vh-btn--play {
  background: var(--vh-gold);
  color: #0D0F11;
  min-width: 50px; min-height: 50px;
  border-radius: 50%;
  padding: 0;
  box-shadow: 0 3px 14px rgba(255,210,76,.32);
}
.vh-btn--play:hover  { background: #ffdd6e; }
.vh-btn--play:active { transform: scale(.93); }
.vh-btn--play .vh-ico { width: 24px; height: 24px; }

/* Play / pause toggle — `is-playing` JS lagata hai */
.vh-ico--pause { display: none; }
.vh-card.is-playing .vh-ico--play  { display: none; }
.vh-card.is-playing .vh-ico--pause { display: block; }
.vh-card.is-playing .vh-btn--play  { box-shadow: 0 0 0 5px var(--vh-gold-dim); }

/* Share chip — halka gold box + "शेयर करें" text (Vivek ka ask; card aur
   single-post content player dono isi class ko reuse karte hain). */
.vh-share-chip {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;                 /* WCAG 2.2 AA tap target */
  padding: 0 14px;
  background: var(--vh-gold-dim);
  color: var(--vh-gold);
  border: none;
  border-radius: 999px;
  font: 600 .74rem/1 var(--sans);
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.vh-share-chip:hover  { background: var(--vh-gold); color: #0D0F11; }
.vh-share-chip:active { transform: scale(.94); }
.vh-share-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }


/* Count next to a like button — shared with the single-post like-bar
   (`.vh-act.vh-like`); cards no longer have their own like button. */
.vh-like-n {
  font-size: .8rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 10px; text-align: left;
  color: #b5b5b5;
}
@keyframes vh-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}


/* v2.3 — FOOTER (equalizer + hint) aur NO-AUDIO CTA dono HATAYE: mockup
   player ab ek slim row hai, koi secondary row nahi; aur non-audio posts
   ke liye ab card desc ke baad seedha khatam ho jaata hai (post-card.php
   mein `if ($audio)` — else branch hai hi nahi ab). */


/* ---------------------------------------------------------------------------
 * SINGLE POST AUDIO PLAYER — colour override
 *
 * `main.js` content ke `<audio>` ko `.vh-player` (card wala hi flat-row
 * markup) mein badalta hai — ek `.vh-audio__kicker` label upar. `.vh-audio`
 * box ko amber tint deta hai taaki "ye is post ka audio hai" alag dikhe.
 *
 * v2.3 — `.vh-audio__btn` / `.vh-audio__fill` / `.vh-audio__bars` / pulsing
 * `::before` HATAYE: purani player-iteration ke the, naya mockup markup
 * inhe banata hi nahi (ab `.vh-btn--play` / `.vh-range` / koi equalizer
 * nahi — card wale hi classes reuse hote hain, colour automatically match
 * ho jaata hai, alag override ki zaroorat nahi).
 * ------------------------------------------------------------------------- */
.vh-audio {
  margin: 18px 0;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(140% 180% at 0% 50%, rgba(255,210,76,.12) 0%, transparent 60%),
    linear-gradient(135deg, var(--card) 0%, var(--card-2) 100%);
  border: 1px solid rgba(255,210,76,.3);
  box-shadow: 0 4px 18px rgba(255,210,76,.1);
}

.vh-audio__kicker {
  padding: 13px 16px 0;
  margin-bottom: 2px;
  color: var(--vh-gold);
  font-size: .8rem; font-weight: 600;
}


/* ---------------------------------------------------------------------------
 * SINGLE POST — like bar
 *
 * Share button yahan NAHI hai. `single.php` mein `.vh-fab-share` pehle se

 * floating hai — do share button rakhna bewakoofi hai.
 * ------------------------------------------------------------------------- */
.vh-actions {
  display: flex; align-items: center; gap: 12px;
  margin: 26px 0;
  padding: 13px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.vh-act {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 18px;
  background: var(--card-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  color: var(--body);
  font: 600 .86rem/1 var(--sans);
  cursor: pointer;
  transition: background .15s, transform .1s, color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.vh-act:hover  { background: var(--hover); }
.vh-act:active { transform: scale(.96); }
.vh-act:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.vh-act .vh-ico { width: 22px; height: 22px; }
.vh-act .vh-like-n { font-size: .88rem; color: inherit; }

.vh-like[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(229,57,53,.09);
}
.vh-like[aria-pressed="true"] .vh-ico { animation: vh-pop .3s ease; }

.vh-act-hint {
  font-size: .78rem; color: var(--muted);
}


/* ---------------------------------------------------------------------------
 * STICKY MINI PLAYER
 *
 * Card se scroll karke door chale jao — control neeche mil jaata hai.
 * AdSense anchor ad bhi neeche baithta hai. `--vh-anchor` var vh-player.js
 * set karta hai (ad ki height naapke), taaki dono na ladein.
 * ------------------------------------------------------------------------- */
#vh-mini {
  position: fixed;
  left: 10px; right: 10px;
  bottom: calc(10px + var(--vh-anchor, 0px));
  z-index: 9000;

  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px;
  border-radius: 15px;
  background: rgba(20, 22, 26, .95);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 10px 40px rgba(0,0,0,.7);

  transform: translateY(150%);
  opacity: 0;
  visibility: hidden;
  transition: transform .3s cubic-bezier(.32,.72,0,1), opacity .2s, visibility .3s;
}
#vh-mini.is-on {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
@media (min-width: 720px) {
  #vh-mini { left: 50%; right: auto; transform: translate(-50%, 150%); width: min(560px, 92vw); }
  #vh-mini.is-on { transform: translate(-50%, 0); }
}

.vh-mini-art {
  width: 44px; height: 44px; flex: none;
  border-radius: 9px; object-fit: cover;
  background: var(--card-2);
}
.vh-mini-mid { flex: 1; min-width: 0; }
.vh-mini-title {
  margin: 0 0 6px;
  font-size: .78rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vh-mini-title a { color: inherit; text-decoration: none; }
.vh-mini-title a:hover { color: var(--vh-gold); }

#vh-mini .vh-range { height: 14px; }
#vh-mini .vh-range::-webkit-slider-thumb { width: 10px; height: 10px; margin-top: -3.5px; }
#vh-mini .vh-range::-moz-range-thumb     { width: 10px; height: 10px; }

.vh-mini-ctrl { display: flex; align-items: center; gap: 1px; flex: none; }

/* Mini bar apne buttons compact rakhta hai. Card wale ab 44px hain, wo yahan
   pe bar ko phula denge — isliye explicit override. */
#vh-mini .vh-btn {
  min-width: 40px; min-height: 40px;
  color: #cfcfcf; padding: 0;
}
#vh-mini .vh-btn:hover { color: #fff; }
#vh-mini .vh-ico { width: 21px; height: 21px; }
#vh-mini .vh-btn--play {
  background: var(--vh-gold); color: #0D0F11;
  min-width: 44px; min-height: 44px;
  border-radius: 50%; margin: 0 4px;
  box-shadow: 0 2px 12px rgba(255,210,76,.3);
}
#vh-mini .vh-btn--play .vh-ico { width: 22px; height: 22px; }
#vh-mini .vh-btn--play:hover { background: #ffdd6e; }
#vh-mini.is-playing .vh-ico--play  { display: none; }
#vh-mini.is-playing .vh-ico--pause { display: block; }

/* Body pe padding — mini bar aakhri card ko na dhaake */
body.vh-mini-on { padding-bottom: 82px; }


/* ---------------------------------------------------------------------------
 * TOAST — "लिंक कॉपी हो गया"
 * ------------------------------------------------------------------------- */
#vh-toast {
  position: fixed;
  left: 50%; bottom: calc(96px + var(--vh-anchor, 0px));
  transform: translate(-50%, 12px);
  z-index: 9500;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(20,22,26,.97);
  border: 1px solid var(--border-2);
  color: var(--text);
  font: 600 .8rem/1 var(--sans);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s, transform .2s, visibility .2s;
}
#vh-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }


/* ---------------------------------------------------------------------------
 * ADSENSE v0.1 — card ke ANDAR ad nahi; cards ke BEECH Google FREE
 *
 * PEHLE yahan `.posts-grid, .vh-tile-grid { contain: layout style; }` tha —
 * poora grid Auto-Ads insertion-scanner ke liye sealed. Ye ASLI LIVE
 * blocker tha (style.css wala duplicate tha; ye file baad mein load hoti
 * hai). Mobile pe cards ke beech ads isi wajah se kabhi nahi aaye.
 *
 * AB grid-level contain GAYA. Suraksha per-card hai:
 *   - upar `.posts-grid > .vh-card` pe content-visibility:auto (implicit
 *     contain) — card ke ANDAR scanner nahi ghusta
 *   - style.css "CARD KILL-ZONE" — child ins/iframe collapse (last resort)
 * Google ab grid ke andar cards ke DARMIYAN sibling insert kar sakta hai;
 * style.css ka GRID SPANNER rule use full-width row deta hai (CLS-safe).
 * ------------------------------------------------------------------------- */

/* v1.0 — Auto-Ads-hide block HATAYA. Auto Ads officially ON; CSS se chhupana
   = served-but-hidden (policy risk). Grid suraksha `contain` se hai. */

/* v2.0 — `.vh-ad-cell/.vh-ad { contain:none }` escape-hatch REMOVED —
   manual ads hi nahi rahe, ye chor-darwaza band. */

/* Mini bar + toast Auto Ads ke DOM scan se bahar */
#vh-mini, #vh-toast { contain: layout style; }


/* ---------------------------------------------------------------------------
 * MOTION / DATA / A11Y
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vh-btn, #vh-mini, #vh-toast { transition: none !important; }
  .vh-like[aria-pressed="true"] .vh-ico { animation: none !important; }
}

/* v2.3 — `.vh-blur` GPU-blur backdrop system poora GAYA (mask-fade cheap
   hai, data-saver ke liye kuch aur ghatana zaroori nahi). backdrop-filter
   abhi bhi thoda mahenga hai, isliye wo override yahan rehta hai. */
@media (prefers-reduced-data: reduce) {
  #vh-mini, .vh-player { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Screen-reader only (category.php pehle se use karta hai — safety net) */
.vh-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* ---------------------------------------------------------------------------
 * SHUFFLE COMPAT (v3.30 wala system)
 *
 * `cat-section.php` limit ka 2x cards render karta hai; extra cards CSS se
 * chhupe hote hain, main.js unhe shuffle karke `data-show` jitne dikhata hai.
 * Isse LiteSpeed ke cached page pe bhi har visitor ko alag posts milte hain.
 *
 * Purana rule (style.css:1607) reveal ke liye `display:block` lagata tha —
 * masonry ke liye theek tha. Grid mein item ko `block` karna ganda hai
 * (browser waise to sambhaal leta hai, par explicit hona behtar). `revert`
 * grid ko apna default `display` wapas de deta hai.
 * ------------------------------------------------------------------------- */
.posts-grid.vh-shuffle.vh-shuffled > * { display: revert; }
.posts-grid.vh-shuffle > *[hidden]     { display: none !important; }


/* ===========================================================================
 * ADS — Vh Vista01 v2.0: MANUAL AD CSS POORA REMOVED
 * ===========================================================================
 * `.vh-ad*` framework (label, reserved min-heights, :has collapse) yahan se
 * gaya — manual units hi nahi rahe (inc/vh-ads.php v2.0). Auto Ads ke saare
 * rules ab EK jagah hain: style.css → "AUTO ADS ZONES" (kill-zones,
 * unfilled-collapse, transparent bg). Do jagah rules = specificity war —
 * wahi bug tha jisme :has() + min-height ladte the. Ab nahi.
 * ========================================================================= */

/* ===========================================================================
 * FULL-BLEED FEED — cards edge-to-edge (Vivek: "side mein jagah")
 * ===========================================================================
 * #site-wrapper mein 16px horizontal padding hai (text content ke liye theek).
 * Par feed cards full-width chahiye — side ka gap nahi. Grid ko wrapper ke
 * padding se bahar khींchte hain (negative margin), phir andar chhota gap.
 *
 * Sirf feed grids pe — text content (single post body) pe nahi.
 * ========================================================================= */
.posts-grid,
.vh-tile-grid {
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 10px;
  padding-right: 10px;
}

/* Section headings full-bleed feed ke saath align rahein */
.section-heading {
  margin-left: 2px;
  margin-right: 2px;
}

/* Hero bhi full-bleed */
.vh-card--hero {
  margin-left: -6px;
  margin-right: -6px;
}


/* === PWA INSTALL CTA — v1.0 (hidden by default; JS unhide) === */
.vh-pwa { display:flex; align-items:center; gap:12px; margin:18px 0; padding:12px 14px;
  background:linear-gradient(135deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid rgba(255,210,76,.35); border-radius:14px; box-shadow:0 4px 16px rgba(255,210,76,.08); }
.vh-pwa[hidden] { display:none; }
.vh-pwa-ico { width:48px; height:48px; border-radius:11px; flex:none; }
.vh-pwa-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.vh-pwa-txt strong { color:var(--text); font-size:.95rem; line-height:1.3; }
.vh-pwa-txt span   { color:var(--muted); font-size:.76rem; line-height:1.4; }
.vh-pwa-btn { flex:none; padding:10px 16px; background:var(--vh-gold); color:#0D0F11;
  border:none; border-radius:999px; font:700 .82rem/1 var(--sans); cursor:pointer;
  box-shadow:0 3px 12px rgba(255,210,76,.3); -webkit-tap-highlight-color:transparent; }
.vh-pwa-btn:active { transform:scale(.95); }
.posts-grid .vh-pwa, .vh-tile-grid .vh-pwa { grid-column:1/-1; }