/*
 * Web Projects Template Styles
 */
@import 'base.css';

.container-narrow {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Grid layout responsive */
.courses-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    width: 100%;
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
}

/* Course Card */
.course-card {
    background: white;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    height: 100%;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin: 0;
    border-top: 4px solid var(--color-gray-300);
}

.course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

/* Course Header */
.course-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-md) var(--space-xs) var(--space-md);
    border-bottom: 1px solid var(--color-gray-200);
}

.course-title {
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    flex: 1;
}

/* Course Status */
.status-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: white;
    text-align: center;
    white-space: nowrap;
}

/* Status Colors */
.course-status-concluso {
    border-top-color: var(--color-gray-400);
}
.course-status-concluso .status-badge {
    background-color: var(--color-gray-400);
}

.course-status-in-corso {
    border-top-color: #10b981;
}
.course-status-in-corso .status-badge {
    background-color: #10b981;
}

.course-status-termina-a-breve {
    border-top-color: #f59e0b;
}
.course-status-termina-a-breve .status-badge {
    background-color: #f59e0b;
}

.course-status-in-arrivo {
    border-top-color: #3b82f6;
}
.course-status-in-arrivo .status-badge {
    background-color: #3b82f6;
}

/* Course Image */
.course-image {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.course-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-normal);
}

.course-card:hover .course-image img {
    transform: scale(1.05);
}

/* Course Content */
.course-content {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Course Meta */
.course-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.meta-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    font-weight: 400;
}

.meta-value {
    font-size: var(--font-size-md);
    color: var(--color-text);
    font-weight: 600;
}

/* Course Type */
.course-type {
    margin-bottom: var(--space-md);
}

.course-tag {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border-radius: 9999px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Tag Colors - simili ai tag dei progetti */
.tag-webinar {
    background-color: #f0f7ff;
    color: #3b82f6;
}

.tag-corso-in-aula {
    background-color: #ecfdf5;
    color: #10b981;
}

.tag-formazione-1-to-1 {
    background-color: #fff1f2;
    color: #e11d48;
}

.tag-workshop {
    background-color: #ede9fe;
    color: #8b5cf6;
}

.tag-seminario {
    background-color: #fff7ed;
    color: #f97316;
}

/* Course Description */
.course-description {
    color: var(--color-gray-500);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-md);
    flex-grow: 1;
}

/* Course Action */
.course-action {
    margin-top: auto;
    text-align: center;
}

.course-action-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: var(--color-primary);
    color: white;
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background-color var(--transition-normal);
    width: 100%;
    text-align: center;
}

.course-action-button:hover {
    background-color: var(--color-primary-dark);
    color: white;
}

/* Status-specific button colors */
.course-status-in-corso .course-action-button {
    background-color: #10b981;
}
.course-status-in-corso .course-action-button:hover {
    background-color: #059669;
}

.course-status-in-arrivo .course-action-button {
    background-color: #3b82f6;
}
.course-status-in-arrivo .course-action-button:hover {
    background-color: #2563eb;
}

.course-status-termina-a-breve .course-action-button {
    background-color: #f59e0b;
}
.course-status-termina-a-breve .course-action-button:hover {
    background-color: #d97706;
}

/* Media Queries */
@media screen and (min-width: 481px) {
    .courses-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1025px) {
    .courses-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Accessibilità */
@media (prefers-reduced-motion: reduce) {
    .course-card,
    .course-card .course-image img,
    .course-action-button {
        transition: none !important;
        transform: none !important;
    }

    .course-card:hover .course-image img {
        transform: none !important;
    }
}

/* High Contrast Mode */
@media (forced-colors: active) {
    .course-card {
        border: 2px solid CanvasText !important;
    }

    .status-badge,
    .course-tag {
        border: 1px solid currentColor !important;
        background: none !important;
    }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .course-card {
        background: var(--color-gray-100);
    }

    .course-title {
        color: var(--color-gray-600);
    }

    .meta-value {
        color: var(--color-gray-600);
    }

    .course-description {
        color: var(--color-gray-500);
    }

    .course-header {
        border-bottom-color: var(--color-gray-300);
    }
}

/* Print Styles */
@media print {
    .course-card {
        break-inside: avoid;
        page-break-inside: avoid;
        border: 1px solid #000;
        box-shadow: none !important;
    }

    .course-action {
        display: none;
    }

    .courses-grid {
        display: block;
    }

    .course-card {
        margin-bottom: 1cm;
    }
}