/* ============================================================================
   POPGRIT — Vault Countdown slider  (shortcode [pg_vault_slider])
   ----------------------------------------------------------------------------
   A notahotel-style horizontal slider: CSS scroll-snap (peek + snap) + a light
   pointer-drag (vault-slider.js). Dark/premium to match the Grit Market.
   Renders Vault ranks 10 → 7 as a countdown, then an "Enter the Vault" slide.
   ============================================================================ */
.pg-vault { background:#0a0a0a; color:#e8e8e8; padding: clamp(52px,7vw,104px) 0; overflow:hidden; }
.pg-vault-inner { max-width:1340px; margin:0 auto; padding:0 clamp(20px,5vw,64px); }

.pg-vault-eyebrow { display:flex; align-items:center; gap:10px; color:#21c7b6;
  font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; }
.pg-vault-eyebrow::before { content:""; width:9px; height:9px; border-radius:50%; background:#21c7b6; flex:none; }
.pg-vault-title { font-size:clamp(28px,4.4vw,50px); line-height:1.04; margin:.34em 0 .12em; color:#fff; }
.pg-vault-sub { color:#9a9a9a; font-size:15px; max-width:60ch; margin-bottom:clamp(26px,3.2vw,44px); }

/* ---- track ---- */
.pg-vault-track {
  display:flex; gap:22px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:4px 0 20px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; cursor:grab; user-select:none;
}
.pg-vault-track::-webkit-scrollbar { display:none; }
.pg-vault-track.is-dragging { cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; }

.pg-vault-slide { flex:0 0 clamp(284px, 31vw, 384px); scroll-snap-align:start; }

/* ---- item card ---- */
.pg-vault-card { position:relative; height:100%; display:flex; flex-direction:column;
  background:#161616; border:1px solid #262626; border-radius:16px; overflow:hidden;
  transition:border-color .3s ease, transform .45s cubic-bezier(.22,.61,.36,1); }
.pg-vault-card:hover { border-color:#21c7b6; transform:translateY(-5px); }
.pg-vault-media { position:relative; aspect-ratio:4/3; background:radial-gradient(120% 120% at 50% 30%,#181818,#0c0c0c);
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pg-vault-media img { width:100%; height:100%; object-fit:cover; }
.pg-vault-ph { font-weight:800; font-size:clamp(54px,8vw,92px); color:#1d1d1d; letter-spacing:.04em; line-height:1; }
.pg-vault-rank { position:absolute; top:12px; left:12px; z-index:2;
  background:rgba(10,10,10,.72); border:1px solid #383838; color:#FCCA19;
  font-size:11.5px; letter-spacing:.12em; padding:5px 11px; border-radius:999px; }
.pg-vault-body { padding:18px 18px 22px; display:flex; flex-direction:column; flex:1; }
.pg-vault-name { color:#fff; font-size:18px; line-height:1.24; }
.pg-vault-meta { color:#838383; font-size:12.5px; margin-top:5px; }
.pg-vault-value { color:#21c7b6; font-size:23px; font-weight:600; margin-top:12px; }
.pg-vault-blurb { color:#b9b9b9; font-size:13px; line-height:1.55; margin-top:9px; }

/* ---- "Enter the Vault" CTA slide ---- */
.pg-vault-cta { flex:0 0 clamp(284px, 31vw, 384px); scroll-snap-align:start; }
.pg-vault-cta a { height:100%; min-height:100%; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; gap:14px; padding:30px;
  background:linear-gradient(155deg,#16221f 0%,#0d1413 100%);
  border:1px solid #21c7b6; border-radius:16px; color:#fff; text-decoration:none;
  transition:transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease; }
.pg-vault-cta a:hover { transform:translateY(-5px); box-shadow:0 14px 48px rgba(33,199,182,.18); }
.pg-vault-cta-k { color:#21c7b6; font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
.pg-vault-cta-title { font-size:clamp(23px,2.6vw,32px); line-height:1.08; }
.pg-vault-cta-arrow { margin-top:auto; color:#21c7b6; font-size:24px; }

/* hint that there's more to scroll */
.pg-vault-hint { color:#909090; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-top:14px; }

@media (prefers-reduced-motion: reduce){
  .pg-vault-track { scroll-behavior:auto; }
  .pg-vault-card, .pg-vault-cta a { transition:none; }
}