// ====================================
// NextGen Framework Cards
// ====================================

@use '../index' as *;

// Base card
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: var(--ng-card-bg);
  background-clip: border-box;
  border: 1px solid var(--ng-card-border);
  border-radius: $border-radius;
  box-shadow: var(--ng-box-shadow-sm);
  
  &:hover {
    box-shadow: var(--ng-box-shadow);
    transition: box-shadow 0.3s ease;
  }
}

// Card body
.card-body {
  flex: 1 1 auto;
  padding: $spacer * 1.25;
  color: var(--ng-body-color);
}

// Card title
.card-title {
  margin-bottom: $spacer * 0.75;
  font-size: $font-size-lg;
  font-weight: 600;
  color: var(--ng-body-color);
}

// Card subtitle
.card-subtitle {
  margin-top: -($spacer * 0.375);
  margin-bottom: 0;
  font-size: $font-size-base;
  color: var(--ng-gray-600);
}

// Card text
.card-text {
  color: var(--ng-body-color);
  
  &:last-child {
    margin-bottom: 0;
  }
}

// Card image
.card-img-top {
  width: 100%;
  border-top-left-radius: calc($border-radius - 1px);
  border-top-right-radius: calc($border-radius - 1px);
}

// Card header
.card-header {
  padding: $spacer * 0.75 $spacer * 1.25;
  margin-bottom: 0;
  background-color: var(--ng-card-header-bg);
  border-bottom: 1px solid var(--ng-card-header-border);
  color: var(--ng-body-color);
  
  &:first-child {
    border-top-left-radius: calc($border-radius - 1px);
    border-top-right-radius: calc($border-radius - 1px);
  }
}

// Card footer
.card-footer {
  padding: $spacer * 0.75 $spacer * 1.25;
  background-color: var(--ng-card-footer-bg);
  border-top: 1px solid var(--ng-card-footer-border);
  color: var(--ng-body-color);
  
  &:last-child {
    border-bottom-left-radius: calc($border-radius - 1px);
    border-bottom-right-radius: calc($border-radius - 1px);
  }
}

// Card groups
.card-group {
  display: flex;
  flex-direction: column;
  
  > .card {
    margin-bottom: $spacer;
  }
  
  @media (min-width: 576px) {
    flex-flow: row wrap;
    
    > .card {
      flex: 1 0 0%;
      margin-bottom: 0;
      
      + .card {
        margin-left: 0;
        border-left: 0;
      }
      
      // Handle rounded corners
      &:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      
      &:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }
}