/* --- Equipment grid --- */
.equip-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:18px;
  margin-top:18px;
}

/* --- Card shell --- */
.equip-card{
  position:relative;
  height:260px;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  background:#111;
  transform:translateZ(0);
  perspective:1000px; /* needed for true 3D flip */
}

/* --- Inner flip wrapper --- */
.equip-card .inner{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transition:transform .55s ease;
}

.equip-card.flip:hover .inner{
  transform:rotateY(180deg);
}

/* --- Shared face styles --- */
.equip-face{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:16px;
  overflow:hidden;
}

/* --- Front face --- */
.equip-front{
  position:relative;
  transform:rotateY(0deg);
  background:#000;
}

.equip-front img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}

/* --- Back face --- */
.equip-back{
  position:absolute;
  inset:0;
  transform:rotateY(180deg);
  padding:16px;
  color:#f5f5f5;
  background:linear-gradient(135deg, rgba(10,10,10,.96), rgba(0,0,0,.96));
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  z-index:2;
}

.equip-title{
  font-weight:700;
  font-size:1.05rem;
  margin:0 0 10px 0;
}

.equip-meta{
  font-size:.95rem;
  line-height:1.35;
  opacity:.92;
}

.equip-meta ul{
  margin:8px 0 0 18px;
  padding:0;
}

.equip-meta li{
  margin:2px 0;
}

/* --- Badge --- */
.equip-badge{
  position:absolute;
  bottom:10px;
  right:10px;
  z-index:6;
  padding:8px 12px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:900;
  color:#fff;
  background:rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* --- Name ribbon --- */
.name-ribbon{
  position:absolute;
  top:10px;
  left:10px;
  z-index:5;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-weight:800;
  font-size:.88rem;
}

/* --- Status styles --- */
.status-connected .equip-badge::before{
  content:"● ";
  color:#00d26a;
}

.status-inprogress .equip-badge::before{
  content:"⏳ ";
}

.status-notconnected .equip-badge::before{
  content:"⛔ ";
}

/* --- Image treatments by status --- */
.status-inprogress .equip-front img{
  filter:sepia(100%);
  opacity:.6;
  transition:all .3s ease;
}

.status-notconnected .equip-front img{
  filter:grayscale(100%) brightness(5%);
  opacity:1;
  transition:all .3s ease;
}

/* --- Tooltip cards (non-flip cards) --- */
.equip-card.tooltip .overlay{
  position:absolute;
  inset:auto 0 0 0;
  padding:12px 14px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.82));
  color:#fff;
  opacity:0;
  transition:opacity .25s ease;
  font-size:.95rem;
  z-index:4;
}

.equip-card.tooltip:hover .overlay{
  opacity:1;
}