/*
 * GenWave Utility Classes
 * =======================
 * Reusable classes for AI-generated widgets.
 * LLM uses these instead of writing CSS from scratch.
 */

/* === Layout === */
.gw-flex { display: flex; }
.gw-flex-col { flex-direction: column; }
.gw-flex-center { display: flex; align-items: center; justify-content: center; }
.gw-flex-between { display: flex; align-items: center; justify-content: space-between; }
.gw-flex-wrap { flex-wrap: wrap; }

.gw-grid { display: grid; gap: var(--gw-space-lg); }
.gw-grid-2 { grid-template-columns: repeat(2, 1fr); }
.gw-grid-3 { grid-template-columns: repeat(3, 1fr); }
.gw-grid-4 { grid-template-columns: repeat(4, 1fr); }
.gw-grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.gw-stack { display: flex; flex-direction: column; }
.gw-stack > * + * { margin-top: var(--gw-space-md); }

/* === Spacing === */
.gw-gap-sm { gap: var(--gw-space-sm); }
.gw-gap-md { gap: var(--gw-space-md); }
.gw-gap-lg { gap: var(--gw-space-lg); }
.gw-gap-xl { gap: var(--gw-space-xl); }

.gw-p-sm { padding: var(--gw-space-sm); }
.gw-p-md { padding: var(--gw-space-md); }
.gw-p-lg { padding: var(--gw-space-lg); }
.gw-p-xl { padding: var(--gw-space-xl); }

/* === Cards === */
.gw-card {
    background: var(--gw-color-bg);
    border-radius: var(--gw-radius-lg);
    overflow: hidden;
    transition: var(--gw-transition-normal);
}

.gw-card-elevated {
    background: var(--gw-color-bg);
    border-radius: var(--gw-radius-lg);
    box-shadow: var(--gw-shadow-md);
    overflow: hidden;
    transition: var(--gw-transition-normal);
}

.gw-card-bordered {
    background: var(--gw-color-bg);
    border: 1px solid var(--gw-color-border);
    border-radius: var(--gw-radius-lg);
    overflow: hidden;
    transition: var(--gw-transition-normal);
}

.gw-card-glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--gw-radius-lg);
    overflow: hidden;
    transition: var(--gw-transition-normal);
}

/* === Hover Effects === */
.gw-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--gw-shadow-lg);
}

.gw-hover-glow:hover {
    box-shadow: 0 0 24px rgba(var(--gw-color-primary), 0.25);
}

.gw-hover-scale:hover {
    transform: scale(1.03);
}

.gw-hover-border-accent:hover {
    border-color: var(--gw-color-primary);
}

/* === Images === */
.gw-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gw-img-rounded {
    border-radius: var(--gw-radius-md);
}

.gw-img-circle {
    border-radius: 50%;
    aspect-ratio: 1;
    object-fit: cover;
}

/* === Typography === */
.gw-text-balance {
    text-wrap: balance;
}

.gw-text-gradient {
    background: linear-gradient(135deg, var(--gw-color-primary), var(--gw-color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gw-text-muted {
    color: var(--gw-color-muted);
}

/* === Scroll Animations === */
.gw-animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--gw-transition-normal), transform 0.6s var(--gw-transition-normal);
}

.gw-animate-on-scroll.gw-animated {
    opacity: 1;
    transform: translateY(0);
}

.gw-animate-fade-in {
    opacity: 0;
    transition: opacity 0.6s ease;
}
.gw-animate-fade-in.gw-animated {
    opacity: 1;
}

.gw-animate-scale-in {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.5s ease, transform 0.5s var(--gw-ease-spring);
}
.gw-animate-scale-in.gw-animated {
    opacity: 1;
    transform: scale(1);
}

/* Stagger delay utility */
.gw-delay-1 { transition-delay: 0.1s; }
.gw-delay-2 { transition-delay: 0.2s; }
.gw-delay-3 { transition-delay: 0.3s; }
.gw-delay-4 { transition-delay: 0.4s; }
.gw-delay-5 { transition-delay: 0.5s; }

/* === Responsive === */
@media (max-width: 1024px) {
    .gw-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .gw-grid-2, .gw-grid-3, .gw-grid-4 { grid-template-columns: 1fr; }
    .gw-hide-mobile { display: none !important; }
    .gw-stack-mobile { flex-direction: column; }
}

/* === Misc === */
.gw-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;
}

.gw-divider {
    height: 1px;
    background: var(--gw-color-border);
    margin: var(--gw-space-lg) 0;
}