/* ========================================================================
   HL2MP — Weapons: 3D tilt cards (module scoped)
   ===================================================================== */

.wp-section h2{ margin-bottom:8px; }

.wp-cards{
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  background: linear-gradient(180deg, #0f1827dd, #0b121ddd);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);

  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap:16px;

  /* subtle scene tilt */
  perspective:1800px;
  transform-style:preserve-3d;
  transform: rotateX(10deg) rotateY(12deg);
  transform-origin:center;
}

.wp-card{
  position:relative;
  height:240px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(150,180,210,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  isolation:isolate;
}

.wp-card__bg{
  position:absolute; inset:-40px;
  background: center / cover no-repeat;
  filter: blur(6px) brightness(.9) saturate(1.1);
  transform: translateZ(-50px);
  z-index:0;
}

.wp-card__img{
  position:absolute; inset:10% 8% 28% 8%;
  width:auto; height:auto;
  max-width:84%; max-height:62%;
  margin:auto;
  object-fit:contain;
  z-index:1;
  transition: transform .2s ease-out;
  pointer-events:none;
}

.wp-card__text{
  position:absolute; inset:auto 0 0 0;
  padding:10px 10px 12px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  display:flex; flex-direction:column; align-items:center; gap:2px;
  z-index:2;
}

.wp-card__title{
  margin:0; font-size:16px; font-weight:800; letter-spacing:.2px; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}

.wp-card__desc{
  margin:0; font-size:12.5px; color:#c7d3e6; text-align:center;
}

/* Responsiveness & a11y motion */
@media (max-width:720px){
  .wp-cards{ transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .wp-cards{ transform:none; }
  .wp-card__img{ transition:none; }
}