/* ============================================
   CARDS.CSS — Service card specific styles
   (extends main.css)
   ============================================ */

/* Service card outer — direct grid item */
.service-card-outer {
  width: 100%;          /* Always fill the grid column */
  display: block;       /* Simple block — no flex complications */
  position: relative;
}

.service-card-outer .tooltip-box.below {
  /* Override to show BELOW the card with blur shadow */
  top: calc(100% + 8px);
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}

.service-card-outer .tooltip-box.below::before {
  bottom: auto;
  top: -5px;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent var(--color-accent) transparent;
}

/* Ensure locked card tooltip triggers on hover */
.locked-card {
  pointer-events: auto;
}

/* Card entrance animation */
.service-card-wrapper {
  animation: cardEntrance 0.6s cubic-bezier(0.4,0,0.2,1) both;
}

@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Each card delays based on order — set via JS inline style */