// ==========================================================================
// Monitor.Cat — Clay Card
// Multi-layer shadow card matching monitor-cat-home
// ==========================================================================

@use 'tokens' as *;

.monitorcat-wrap {
  // ---------------------------------------------------------------------------
  // Base clay card
  // ---------------------------------------------------------------------------
  .mc-card {
    background: $mc-white;
    border: 1px solid $mc-border-color;
    border-radius: $mc-radius-card;
    box-shadow: $mc-shadow-card;
    padding: 1.5rem;
    transition:
      transform $mc-transition-base,
      box-shadow $mc-transition-base;
  }

  // ---------------------------------------------------------------------------
  // Hoverable variant — lifts on hover
  // ---------------------------------------------------------------------------
  .mc-card-hover {
    &:hover {
      transform: translateY(-4px);
      box-shadow: $mc-shadow-card-hover;
    }
  }

  // ---------------------------------------------------------------------------
  // Inset card — recessed / nested appearance
  // ---------------------------------------------------------------------------
  .mc-card-inset {
    background: $mc-base;
    border: 1px solid $mc-border-color;
    border-radius: $mc-radius-inset;
    box-shadow: $mc-shadow-inset;
    padding: 1.25rem;
  }

  // ---------------------------------------------------------------------------
  // Card padding variants
  // ---------------------------------------------------------------------------
  .mc-card-compact {
    padding: 1rem;
  }

  .mc-card-spacious {
    padding: 2rem;
  }

  // ---------------------------------------------------------------------------
  // Card header / body / footer sections
  // ---------------------------------------------------------------------------
  .mc-card-header {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid $mc-border-color;
  }

  .mc-card-body {
    margin-bottom: 1rem;
  }

  .mc-card-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid $mc-border-color;
  }

  // ---------------------------------------------------------------------------
  // Full-bleed card (no padding — for cards with edge-to-edge content)
  // ---------------------------------------------------------------------------
  .mc-card-flush {
    padding: 0;

    .mc-card-header,
    .mc-card-body,
    .mc-card-footer {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }

    .mc-card-header {
      padding-top: 1.5rem;
    }

    .mc-card-footer {
      padding-bottom: 1.5rem;
    }
  }
}