/* ==================== Global KI Page Classes ==================== */
/* This file contains utility classes to replace common inline styles across KI pages */
/* ==================== Common Utility Classes ==================== */
.bg-glass-light {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.bg-glass-medium {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
}

.bg-glass-dark {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}

/* Text Colors */
.text-white {
  color: #ffffff !important;
}

.text-gray-light {
  color: rgba(255, 255, 255, 0.8) !important;
}

.text-gray-medium {
  color: rgba(255, 255, 255, 0.7) !important;
}

.text-gray-dark {
  color: rgba(255, 255, 255, 0.6) !important;
}

.text-gray-darker {
  color: #a1a1aa !important;
}

.text-gray-subtle {
  color: #71717a !important;
}

/* Positioning */
.pos-relative {
  position: relative !important;
}

.pos-absolute {
  position: absolute !important;
}

.z-1 {
  z-index: 1 !important;
}

.z-2 {
  z-index: 2 !important;
}

.z-3 {
  z-index: 3 !important;
}

/* Flexbox utilities */
.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.flex-column {
  flex-direction: column !important;
}

.align-center {
  align-items: center !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-between {
  justify-content: space-between !important;
}

.text-center {
  text-align: center !important;
}

/* Spacing utilities */
.gap-8 {
  gap: 8px !important;
}

.gap-10 {
  gap: 10px !important;
}

.gap-12 {
  gap: 12px !important;
}

.gap-16 {
  gap: 16px !important;
}

.gap-20 {
  gap: 20px !important;
}

.gap-24 {
  gap: 24px !important;
}

.gap-32 {
  gap: 32px !important;
}

/* Margin utilities */
.mb-8 {
  margin-bottom: 8px !important;
}

.mb-12 {
  margin-bottom: 12px !important;
}

.mb-16 {
  margin-bottom: 16px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mb-24 {
  margin-bottom: 24px !important;
}

.mb-32 {
  margin-bottom: 32px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.mb-48 {
  margin-bottom: 48px !important;
}

/* Padding utilities */
.p-16 {
  padding: 16px !important;
}

.p-20 {
  padding: 20px !important;
}

.p-24 {
  padding: 24px !important;
}

.p-32 {
  padding: 32px !important;
}

.p-40 {
  padding: 40px !important;
}

.p-48 {
  padding: 48px !important;
}

/* Grid utilities */
.grid {
  display: grid !important;
}

.grid-1 {
  grid-template-columns: 1fr !important;
}

.grid-2 {
  grid-template-columns: 1fr 1fr !important;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr) !important;
}

.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}

/* Border radius */
.rounded-8 {
  border-radius: 8px !important;
}

.rounded-12 {
  border-radius: 12px !important;
}

.rounded-16 {
  border-radius: 16px !important;
}

.rounded-20 {
  border-radius: 20px !important;
}

.rounded-24 {
  border-radius: 24px !important;
}

.rounded-32 {
  border-radius: 32px !important;
}

.rounded-full {
  border-radius: 50% !important;
}

/* Width and Height */
.w-full {
  width: 100% !important;
}

.h-full {
  height: 100% !important;
}

.max-w-500 {
  max-width: 500px !important;
}

.max-w-600 {
  max-width: 600px !important;
}

.max-w-720 {
  max-width: 720px !important;
}

.max-w-780 {
  max-width: 780px !important;
}

.max-w-1000 {
  max-width: 1000px !important;
}

.max-w-1200 {
  max-width: 1200px !important;
}

.max-w-1400 {
  max-width: 1400px !important;
}

/* Font sizes */
.text-xs {
  font-size: 12px !important;
}

.text-sm {
  font-size: 14px !important;
}

.text-base {
  font-size: 16px !important;
}

.text-lg {
  font-size: 18px !important;
}

.text-xl {
  font-size: 20px !important;
}

.text-2xl {
  font-size: 24px !important;
}

.text-3xl {
  font-size: 32px !important;
}

.text-4xl {
  font-size: 48px !important;
}

/* Font weights */
.font-normal {
  font-weight: 400 !important;
}

.font-medium {
  font-weight: 500 !important;
}

.font-semibold {
  font-weight: 600 !important;
}

.font-bold {
  font-weight: 700 !important;
}

.font-extrabold {
  font-weight: 800 !important;
}

.font-black {
  font-weight: 900 !important;
}

/* Line heights */
.leading-tight {
  line-height: 1.2 !important;
}

.leading-normal {
  line-height: 1.4 !important;
}

.leading-relaxed {
  line-height: 1.6 !important;
}

/* Transitions */
.transition {
  transition: all 0.3s ease !important;
}

.transition-fast {
  transition: all 0.2s ease !important;
}

.transition-slow {
  transition: all 0.5s ease !important;
}

/* Hover effects */
.hover-lift:hover {
  transform: translateY(-2px);
}

.hover-lift-more:hover {
  transform: translateY(-4px);
}

.hover-scale:hover {
  transform: scale(1.02);
}

/* Common button styles */
.btn-glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px 24px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-glass:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.btn-primary {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(37, 99, 235, 0.9) 100%);
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: 8px;
  padding: 12px 24px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-primary:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgb(37, 99, 235) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.btn-success {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.8) 0%, rgba(21, 128, 61, 0.9) 100%);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 8px;
  padding: 12px 24px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-success:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.9) 0%, rgb(21, 128, 61) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
}

/* Responsive utilities */
@media (max-width: 991px) {
  .grid-3 {
    grid-template-columns: 1fr !important;
  }
  .grid-2 {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 767px) {
  .text-4xl {
    font-size: 32px !important;
  }
  .text-3xl {
    font-size: 24px !important;
  }
  .text-2xl {
    font-size: 20px !important;
  }
  .p-48 {
    padding: 24px !important;
  }
  .p-40 {
    padding: 20px !important;
  }
  .p-32 {
    padding: 16px !important;
  }
}
@media (max-width: 575px) {
  .text-4xl {
    font-size: 28px !important;
  }
  .text-3xl {
    font-size: 22px !important;
  }
  .p-24 {
    padding: 16px !important;
  }
  .p-20 {
    padding: 12px !important;
  }
}
/* ==================== Mobile Grid Utilities ==================== */
@media (max-width: 767px) {
  .mobile-1-col {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

@media (max-width: 767px) {
  .mobile-reduce-gap {
    gap: 12px !important;
  }
}

@media (max-width: 767px) {
  .mobile-center {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ==================== Responsive Display Utilities ==================== */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hide-desktop {
    display: none !important;
  }
}

.show-mobile {
  display: none;
}
@media (max-width: 767px) {
  .show-mobile {
    display: block !important;
  }
}

/* ==================== Tech Stack Utilities ==================== */
.tech-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}
@media (max-width: 991px) {
  .tech-grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}
@media (max-width: 767px) {
  .tech-grid-3 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

.tech-card-hover {
  transition: all 0.2s ease !important;
}
.tech-card-hover:hover {
  border-color: #666666 !important;
  transform: translateY(-2px) !important;
}

.tech-tags-wrap {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}