/* ============================================
   SOFT SKILLS ACADEMY - BOOTSTRAP 5 UTILITIES
   Custom utilities and enhancements
   ============================================ */

/* Display Utilities */
.display-inline {
    display: inline;
}

.display-inline-block {
    display: inline-block;
}

/* Spacing Enhancements */
.gap-xl {
    gap: 2rem;
}

.gap-2xl {
    gap: 3rem;
}

.gap-3xl {
    gap: 4rem;
}

/* Opacity Utilities */
.opacity-25 {
    opacity: 0.25;
}

.opacity-75 {
    opacity: 0.75;
}

/* Cursor Utilities */
.cursor-pointer {
    cursor: pointer;
}

.cursor-disabled {
    cursor: not-allowed;
}

/* Text Utilities */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-gradient-yellow {
    background: linear-gradient(135deg, #f7c600, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-cyan {
    background: linear-gradient(135deg, #00d4ff, #0891b2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-success {
    background: linear-gradient(135deg, #10b981, #059669);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Transform Utilities */
.scale-110 {
    transform: scale(1.1);
}

.scale-105 {
    transform: scale(1.05);
}

.skew-x {
    transform: skewX(-10deg);
}

.skew-y {
    transform: skewY(-10deg);
}

/* Animation Utilities */
.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-slide-in-left {
    animation: slideInLeft 0.3s ease-out;
}

.animate-slide-in-right {
    animation: slideInRight 0.3s ease-out;
}

.animate-bounce-in {
    animation: bounceIn 0.5s ease-out;
}

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Filter Utilities */
.blur {
    filter: blur(4px);
}

.blur-sm {
    filter: blur(2px);
}

.blur-lg {
    filter: blur(12px);
}

.brightness-110 {
    filter: brightness(1.1);
}

.brightness-90 {
    filter: brightness(0.9);
}

.saturate-150 {
    filter: saturate(1.5);
}

.saturate-75 {
    filter: saturate(0.75);
}

/* Background Utilities */
.bg-gradient-to-r {
    background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
}

.bg-gradient-to-b {
    background: linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
}

.bg-glass {
    background: rgba(26, 31, 46, 0.7);
    backdrop-filter: blur(20px);
}

.bg-glass-light {
    background: rgba(26, 31, 46, 0.5);
    backdrop-filter: blur(10px);
}

/* Border Utilities */
.border-gradient {
    border: 2px solid;
    border-image: linear-gradient(135deg, #f7c600, #00d4ff) 1;
}

.border-top-thick {
    border-top-width: 4px;
}

.border-dashed-light {
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

/* Shadow Utilities */
.shadow-xl {
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
}

.shadow-inner-lg {
    box-shadow: inset 0 24px 40px rgba(0, 0, 0, 0.1);
}

.shadow-glow {
    box-shadow: 0 0 30px rgba(247, 198, 0, 0.2);
}

.shadow-glow-cyan {
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.2);
}

.shadow-glow-green {
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.2);
}

/* Hover Utilities */
.hover-shadow-lg {
    transition: box-shadow var(--transition-base);
}

.hover-shadow-lg:hover {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
}

.hover-scale-105 {
    transition: transform var(--transition-base);
}

.hover-scale-105:hover {
    transform: scale(1.05);
}

.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.hover-glow {
    transition: filter var(--transition-base);
}

.hover-glow:hover {
    filter: drop-shadow(0 0 10px rgba(247, 198, 0, 0.5));
}

/* Position Utilities */
.position-absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.position-sticky-top {
    position: sticky;
    top: 80px;
    z-index: 99;
}

/* Content Utilities */
.content-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.content-around {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

/* Grid Utilities */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Width/Height Utilities */
.w-fit {
    width: fit-content;
}

.h-fit {
    height: fit-content;
}

.w-screen {
    width: 100vw;
}

.h-screen {
    height: 100vh;
}

.w-min {
    width: min-content;
}

.h-min {
    height: min-content;
}

/* Line Height */
.leading-tight {
    line-height: 1.25;
}

.leading-normal {
    line-height: 1.5;
}

.leading-relaxed {
    line-height: 1.75;
}

.leading-loose {
    line-height: 2;
}

/* Letter Spacing */
.tracking-tighter {
    letter-spacing: -0.05em;
}

.tracking-tight {
    letter-spacing: -0.025em;
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

/* Scrollable Utilities */
.overflow-y-scroll {
    overflow-y: scroll;
}

.overflow-x-scroll {
    overflow-x: scroll;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}

.scroll-smooth {
    scroll-behavior: smooth;
}

/* Responsive Visibility */
@media (max-width: 576px) {
    .hide-sm {
        display: none;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .hide-md {
        display: none;
    }
}

@media (min-width: 769px) {
    .hide-lg {
        display: none;
    }
}

/* Print Utilities */
@media print {
    .no-print {
        display: none !important;
    }

    .print-block {
        display: block !important;
    }
}

/* Transition Utilities */
.transition-fast {
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-base {
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-slow {
    transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-none {
    transition: none;
}

/* Accessibility Utilities */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.focus-outline {
    outline: 2px solid var(--accent-yellow);
    outline-offset: 2px;
}

/* Loading Skeleton */
.skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Responsive Typography */
@media (max-width: 768px) {
    h1 {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
    }

    h2 {
        font-size: clamp(1.5rem, 3vw, 2rem);
    }

    h3 {
        font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    }

    .lead {
        font-size: 1rem;
    }
}