// ==========================================================================
// Monitor.Cat — Coming Soon Cards
// ==========================================================================

@use 'tokens' as *;

.monitorcat-wrap {
  // ---------------------------------------------------------------------------
  // Wrapper that holds the card + badge together
  // ---------------------------------------------------------------------------
  .mc-coming-soon-wrap {
    position: relative;
  }

  // ---------------------------------------------------------------------------
  // "Coming Soon" pill badge overlay
  // ---------------------------------------------------------------------------
  .mc-coming-soon-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 6px 14px;
    font-family: $mc-font-body;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: $mc-lavender-strong;
    background: $mc-lavender-light;
    border-radius: $mc-radius-pill;
    pointer-events: auto;
    opacity: 1;
    filter: none;
    z-index: 2;
  }

  // ---------------------------------------------------------------------------
  // Coming soon card style
  // ---------------------------------------------------------------------------
  .mc-coming-soon {
    opacity: 0.55;
    filter: grayscale(0.5);
    pointer-events: none;
    user-select: none;
    transition:
      opacity $mc-transition-base,
      filter $mc-transition-base;

    // Prevent any hover/focus effects
    &:hover {
      transform: none !important;
      box-shadow: $mc-shadow-card !important;
    }
  }

  // ---------------------------------------------------------------------------
  // Lock overlay (legacy class from template)
  // ---------------------------------------------------------------------------
  .mc-coming-soon-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;

    .dashicons {
      font-size: 2rem;
      width: 2rem;
      height: 2rem;
      color: $mc-text-light;
      opacity: 0.3;
    }
  }
}