/* Google Classroom Card - Premium Modern Redesign */

.gc-card {
    display: flex;
    flex-direction: column;
    width: 320px;
    /* Slightly wider for premium feel */
    height: 310px;
    /* Taller to breathe */
    background-color: #ffffff;
    border: none;
    /* No cheap borders */
    border-radius: 24px;
    /* Hyper-modern roundness */
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
    /* Subtle base shadow */
}

.gc-card:hover {
    transform: translateY(-4px);
    /* Premium lift */
    box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.12), 0 6px 12px -2px rgba(0, 0, 0, 0.08);
    /* Deep soft bloom */
}

/* Card Header - Vibrant Gradients */
.gc-card-header {
    height: 120px;
    /* Taller header */
    padding: 24px;
    position: relative;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Premium Gradient Palette */
.gc-card[data-category="web"] .gc-card-header {
    background: linear-gradient(135deg, #1A73E8 0%, #8AB4F8 100%);
    /* Deep Blue to Light Blue */
}

.gc-card[data-category="it"] .gc-card-header {
    background: linear-gradient(135deg, #E37400 0%, #FCC934 100%);
    /* Orange to Gold */
}

.gc-card[data-category="speaking"] .gc-card-header {
    background: linear-gradient(135deg, #C5221F 0%, #F28B82 100%);
    /* Red to Salmon */
}

.gc-card[data-category="science"] .gc-card-header {
    background: linear-gradient(135deg, #00796B 0%, #4DB6AC 100%);
    /* Teal to Light Teal */
}

.gc-card[data-category="finances"] .gc-card-header {
    background: linear-gradient(135deg, #188038 0%, #81C995 100%);
    /* Green to Light Green */
}

.gc-card[data-category="creative"] .gc-card-header {
    background: linear-gradient(135deg, #9334E6 0%, #C58AF9 100%);
    /* Purple to Lavender */
}


.gc-card-title {
    font-family: 'Google Sans', 'Inter', sans-serif;
    font-size: 24px;
    /* Larger */
    font-weight: 500;
    /* Medium weight */
    line-height: 1.2;
    margin-bottom: 4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Subtle text shadow for readability */
}

.gc-card-title:hover {
    text-decoration: none;
    /* Clean look */
}

.gc-card-section {
    font-family: 'Google Sans', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    opacity: 0.95;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    /* Modern touch */
}

/* Instructor Avatar - Floating with Glassmorphism */
.gc-card-instructor {
    position: absolute;
    top: 88px;
    /* Perfectly positioned overlap */
    right: 24px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.gc-card-instructor i {
    width: 56px;
    height: 56px;
    background-color: rgba(255, 255, 255, 0.95);
    /* Nearly opaque white */
    color: #5f6368;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Pop out shadow */
}

/* Card Body */
.gc-card-body {
    padding: 24px 24px 0 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.gc-card-description {
    font-family: 'Roboto', 'Inter', sans-serif;
    font-size: 14px;
    color: #5f6368;
    line-height: 1.6;
    margin-top: 16px;
    /* Clean formatting */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card Footer */
.gc-card-footer {
    height: 64px;
    padding: 0 24px;
    border-top: none;
    /* Clean separation by whitespace only */
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.gc-folder-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    /* Squircle */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5f6368;
    transition: all 0.2s;
    background-color: #f1f3f4;
    /* Subtle background */
}

.gc-folder-icon:hover {
    background-color: #e8f0fe;
    /* Light blue interaction */
    color: #1a73e8;
    transform: scale(1.05);
    /* Micro interaction */
}

.gc-folder-icon i {
    font-size: 20px;
}