/* Gigrity Modern Job Cards */

:root {
  --gigrity-primary: #1F4B3F;
  --gigrity-secondary: #5BBB7B;
  --gigrity-bg-soft: #F0F4F8;
  --gigrity-text-main: #222222;
  --gigrity-text-muted: #717171;
  --gigrity-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  --gigrity-card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  --gigrity-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.job-card-premium {
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--gigrity-card-shadow);
  transition: var(--gigrity-transition);
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

.job-card-premium:hover {
  transform: translateY(-8px);
  box-shadow: var(--gigrity-card-hover-shadow);
}

.job-card-image-wrapper {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.job-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--gigrity-transition);
}

.job-card-premium:hover .job-card-image {
  transform: scale(1.08);
}

.job-card-content {
  padding: 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.job-card-category {
  font-size: 13px;
  font-weight: 600;
  color: var(--gigrity-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.job-card-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--gigrity-text-main);
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
  transition: color 0.3s ease;
}

.job-card-title:hover {
  color: var(--gigrity-secondary);
}

.job-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.job-card-badge {
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
}

.badge-budget {
  background: rgba(91, 187, 123, 0.1);
  color: var(--gigrity-secondary);
}

.badge-status {
  background: rgba(31, 75, 63, 0.05);
  color: var(--gigrity-primary);
}

.job-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--gigrity-text-muted);
}

.job-card-footer span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Icons styling */
.job-card-icon {
  font-size: 14px;
}

/* Category Card Styling */
.category-card-premium {
  background: #ffffff;
  border-radius: 24px;
  padding: 30px 24px;
  text-align: center;
  box-shadow: var(--gigrity-card-shadow);
  transition: var(--gigrity-transition);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
  text-decoration: none !important;
}

.category-card-premium:hover {
  transform: translateY(-10px);
  box-shadow: var(--gigrity-card-hover-shadow);
  border-color: var(--gigrity-secondary);
}

.category-icon-wrapper {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: var(--gigrity-transition);
  font-size: 28px;
}

/* Random pastel backgrounds classes for icons */
.bg-pastel-1 { background: rgba(91, 187, 123, 0.1); color: #5BBB7B; }
.bg-pastel-2 { background: rgba(31, 75, 63, 0.1); color: #1F4B3F; }
.bg-pastel-3 { background: rgba(255, 152, 0, 0.1); color: #FF9800; }
.bg-pastel-4 { background: rgba(33, 150, 243, 0.1); color: #2196F3; }
.bg-pastel-5 { background: rgba(156, 39, 176, 0.1); color: #9C27B0; }
.bg-pastel-6 { background: rgba(233, 30, 99, 0.1); color: #E91E63; }

.category-card-premium:hover .category-icon-wrapper {
  transform: scale(1.1) rotate(5deg);
}

.category-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--gigrity-text-main);
  margin-bottom: 8px;
}

.category-count {
  font-size: 13px;
  color: var(--gigrity-text-muted);
  font-weight: 500;
}