/**
 * Utility Classes - Page-Specific Extensions
 *
 * This file contains page-specific utility classes that extend the core
 * component system. Core utilities (display, flexbox, spacing, etc.) are
 * defined in components.css.
 *
 * @version 2.0.0
 * @date 2026-02-18
 */

/* ============================================
   EXTENDED SPACING UTILITIES
   ============================================ */

/* Margin Top - Extended */
.mt-16 { margin-top: var(--space-16) !important; }
.mt-20 { margin-top: var(--space-20) !important; }

/* Margin Bottom - Extended */
.mb-16 { margin-bottom: var(--space-16) !important; }
.mb-20 { margin-bottom: var(--space-20) !important; }

/* ============================================
   EXTENDED TEXT UTILITIES
   ============================================ */

/* Text Sizes - Extended */
.text-5xl { font-size: 3rem !important; line-height: var(--leading-none) !important; }
.text-6xl { font-size: 3.75rem !important; line-height: var(--leading-none) !important; }
.text-7xl { font-size: 4.5rem !important; line-height: var(--leading-none) !important; }

/* Text Colors - Extended */
.text-accent-glow { color: var(--color-accent-glow) !important; }
.text-accent-cyan { color: var(--color-accent-cyan) !important; }
.text-accent-violet { color: var(--color-accent-violet) !important; }

/* ============================================
   BACKGROUND UTILITIES
   ============================================ */

/* Gradient Backgrounds */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary)) !important;
}

.bg-gradient-cyan-violet {
    background: linear-gradient(135deg, var(--color-accent-cyan), var(--color-accent-violet)) !important;
}

.bg-gradient-rgba {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(139, 92, 246, 0.1)) !important;
}

/* Section Backgrounds */
.bg-section-secondary {
    background: var(--color-bg-secondary) !important;
}

/* ============================================
   EXTENDED BORDER RADIUS
   ============================================ */

.rounded-2xl { border-radius: var(--radius-2xl) !important; }
.rounded-3xl { border-radius: var(--radius-3xl) !important; }

/* ============================================
   EXTENDED SHADOWS
   ============================================ */

.shadow-cyan { box-shadow: var(--shadow-cyan) !important; }
.shadow-violet { box-shadow: var(--shadow-violet) !important; }
.shadow-glass { box-shadow: var(--shadow-glass) !important; }

/* ============================================
   EVENT CARD COMPONENTS
   ============================================ */

/* Event Date Badge */
.event-date-badge {
    background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    text-align: center;
    margin-bottom: var(--space-4);
}

.event-date-day {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    display: block;
    line-height: var(--leading-none);
}

.event-date-month {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* Event Info */
.event-info {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.event-location {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.event-location-icon {
    margin-right: var(--space-2);
    font-size: var(--text-base);
}

/* Event Card Actions */
.event-actions {
    width: 100%;
    justify-content: center;
}

/* ============================================
   CTA SECTION
   ============================================ */

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(139, 92, 246, 0.1));
    padding: var(--space-16) 0;
}

/* CTA Content */
.cta-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.cta-description {
    color: var(--color-text-secondary);
    margin: var(--space-6) 0 var(--space-8);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}

/* CTA Button Group */
.cta-button-group {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* ============================================
   HERO SECTION
   ============================================ */

/* Hero CTA Group */
.hero-cta-group {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* Hero Buttons */
.hero-buttons {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-6);
}

/* ============================================
   LOGO STYLES
   ============================================ */

/* Logo Container */
.logo-container {
    margin-top: var(--space-8);
    padding: var(--space-8);
    text-align: center;
}

/* Logo Image */
.logo-image {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    opacity: 0.8;
    transition: opacity var(--transition-base);
}

.logo-image:hover {
    opacity: 1;
}

/* ============================================
   BUTTON UTILITIES
   ============================================ */

/* Buttons use components.css base styles */

/* Button Full Width */
.btn-full {
    width: 100%;
}

/* Button Group Centered */
.btn-group-centered {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* ============================================
   PROGRESS BAR UTILITIES
   ============================================ */

/* Progress Container */
.progress-container {
    width: 100%;
    height: 8px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

/* Progress Fill with CSS Variable */
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent-cyan), var(--color-accent-violet));
    transition: width var(--transition-slow);
}

/* Progress Width Utilities (for inline style replacement) */
.progress-25 { width: 25% !important; }
.progress-50 { width: 50% !important; }
.progress-75 { width: 75% !important; }
.progress-100 { width: 100% !important; }

/* ============================================
   TABLE UTILITIES
   ============================================ */

/* Table Cell Centered */
.td-centered {
    text-align: center !important;
}

/* Table Cell with Colspan */
.td-colspan-full {
    grid-column: 1 / -1;
    text-align: center;
}

/* ============================================
   FORM UTILITIES
   ============================================ */

/* Form Inline */
.form-inline {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

/* Mobile-first responsive utilities */
@media (max-width: 640px) {
    .sm\:text-center { text-align: center !important; }
    .sm\:flex-col { flex-direction: column !important; }
    .sm\:gap-2 { gap: var(--space-2) !important; }
}

@media (max-width: 768px) {
    .md\:text-center { text-align: center !important; }
    .md\:flex-col { flex-direction: column !important; }
}

@media (min-width: 768px) {
    .md\:text-left { text-align: left !important; }
    .md\:flex-row { flex-direction: row !important; }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ============================================
   INTERACTIVE UTILITIES
   ============================================ */

/* Cursor */
.cursor-pointer { cursor: pointer !important; }

/* Transition */
.transition-base { transition: all var(--transition-base) !important; }
.transition-fast { transition: all var(--transition-fast) !important; }

/* Hover Scale */
.hover\:scale-105:hover {
    transform: scale(1.05) !important;
}

.hover\:scale-110:hover {
    transform: scale(1.1) !important;
}

/* ============================================
   SECTION TAG
   ============================================ */

/* Section Tag */
.section-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-glass);
    border: 1px solid var(--color-border-glass);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-accent-primary);
}

/* ============================================
   OVERFLOW & SCROLL
   ============================================ */

.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }

/* ============================================
   POSITION UTILITIES
   ============================================ */

.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }

/* ============================================
   Z-INDEX UTILITIES
   ============================================ */

.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-50 { z-index: 50 !important; }