/**
 * AI Innovation Hub Showcase – Custom styles
 * Complements Bootstrap; load after Bootstrap CSS.
 */

:root {
    /* CUNY Blue */
    --ai-hub-primary: #0033A1; 
    
    /* Taxi Yellow */
    --ai-hub-accent: #FFB71B; 
    
    /* Using the Blue for the Dark shade */
    --ai-hub-dark: #001E60; 
    
    /* A very light tint of the Blue for the background */
    --ai-hub-light-bg: #F0F4FA; 
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ai-hub-dark);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.ai-hub-hero {
    background: var(--ai-hub-primary);
    color: #fff;
    padding: 4rem 0;
}

.ai-hub-hero h1 {
    font-weight: 700;
    margin-bottom: 1rem;
}

.ai-hub-section {
    padding: 3rem 0;
}

.ai-hub-section:nth-of-type(even) {
    background-color: var(--ai-hub-light-bg);
}

.ai-hub-card {
    border: none;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}

.ai-hub-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.15);
}

.ai-hub-footer {
    background-color: var(--ai-hub-primary);
    color: rgba(255, 255, 255, 0.85);
    padding: 2rem 0;
    margin-top: auto;
}

.ai-hub-footer a {
    color: rgba(255, 255, 255, 0.9);
}

.ai-hub-footer a:hover {
    color: #fff;
}

/* Showcase Specific Styles */
.project-img-wrapper {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background-color: #e9ecef;
    border-bottom: 4px solid var(--ai-hub-accent);
}

.project-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ai-hub-card:hover .project-img-wrapper img {
    transform: scale(1.05);
}

.track-badge {
    background-color: var(--ai-hub-light-bg);
    color: var(--ai-hub-primary);
    border: 1px solid var(--ai-hub-primary);
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.35em 0.65em;
}

.team-members {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 1rem;
}