/* Practice Exams Home Page - Clean CSS */

/* Section alignment and spacing */
.container {
    max-width: 1200px;
    margin: 0 auto;
}

section.container {
    margin-bottom: var(--edtt-spacing-xl);
}

section.container:last-child {
    margin-bottom: var(--edtt-spacing-lg);
}

/* Navigation Cards Section */
.navigation-cards-section .container {
    padding: 0 var(--edtt-spacing-md);
}

.navigation-cards-section .row {
    margin: 0 calc(-1 * var(--edtt-spacing-sm));
}

.navigation-cards-section [class*="col-"] {
    padding: 0 var(--edtt-spacing-sm);
}

/* Empty state component */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--edtt-spacing-xl);
    border: 2px dashed var(--edtt-color-border-default);
    border-radius: var(--edtt-border-radius-lg);
    background-color: var(--edtt-color-bg-secondary);
    text-align: center;
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    margin-bottom: var(--edtt-spacing-md);
    opacity: 0.6;
}

.empty-state-text {
    font-size: var(--edtt-font-size-lg);
    font-weight: 500;
    color: var(--edtt-color-text-secondary);
    margin: 0;
}

/* Section description */
.section-description {
    font-size: var(--edtt-font-size-lg);
    color: var(--edtt-color-text-secondary);
    margin: var(--edtt-spacing-sm) 0 0 0;
}

/* Exam Set Card Styles */
.exam-set-card {
    background: var(--edtt-color-bg-card);
    border-radius: var(--edtt-border-radius-lg);
    border: 1px solid var(--edtt-color-border-default);
    overflow: hidden;
    transition: var(--edtt-transition-normal);
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--edtt-shadow-card);
}

.exam-set-card:hover {
    box-shadow: var(--edtt-shadow-lg);
    transform: translateY(-2px);
    border-color: var(--edtt-color-border-primary);
}

.exam-set-thumbnail {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: var(--edtt-color-bg-secondary);
}

.exam-set-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--edtt-transition-normal);
}

.exam-set-card:hover .exam-set-thumbnail img {
    transform: scale(1.05);
}

.exam-set-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
            var(--edtt-color-primary-100) 0%,
            var(--edtt-color-secondary-100) 100%);
}

.exam-set-placeholder i {
    font-size: var(--edtt-font-size-6xl);
    color: var(--edtt-color-primary-300);
}

.exam-set-content {
    padding: var(--edtt-spacing-lg);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.exam-set-title {
    font-size: var(--edtt-font-size-lg);
    font-weight: 600;
    color: var(--edtt-color-text-default);
    margin-bottom: var(--edtt-spacing-sm);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.exam-set-description {
    font-size: var(--edtt-font-size-default);
    color: var(--edtt-color-text-secondary);
    margin-bottom: var(--edtt-spacing-md);
    line-height: 1.4;
    flex-grow: 1;
}

.exam-set-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--edtt-spacing-md);
    font-size: var(--edtt-font-size-sm);
}

.exam-count {
    background: var(--edtt-color-tertiary-100);
    color: var(--edtt-color-tertiary-600);
    padding: calc(var(--edtt-spacing-xs) / 2) var(--edtt-spacing-sm);
    border-radius: var(--edtt-border-radius-full);
    font-weight: 500;
}

.subject-grade {
    color: var(--edtt-color-text-secondary);
    font-weight: 500;
}

/* Grid system improvements */
.row {
    margin: 0 calc(-1 * var(--edtt-spacing-sm));
}

[class*="col-"] {
    padding: 0 var(--edtt-spacing-sm);
}

/* Universal carousel container spacing - No override needed */
.universal-carousel {
    overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {

    /* Reduce section spacing on mobile */
    section.container {
        margin-bottom: var(--edtt-spacing-lg);
    }

    .navigation-cards-section .container,
    .container {
        padding: 0 var(--edtt-spacing-sm);
    }

    .exam-set-thumbnail {
        height: 150px;
    }

    .exam-set-content {
        padding: var(--edtt-spacing-md);
    }

    .exam-set-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--edtt-spacing-xs);
    }

    .empty-state {
        padding: var(--edtt-spacing-lg);
    }

    .empty-state-icon {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .exam-set-thumbnail {
        height: 120px;
    }

    .empty-state {
        padding: var(--edtt-spacing-md);
    }

    .empty-state-text {
        font-size: var(--edtt-font-size-default);
    }
}

/* Loading Skeleton Styles */
.recently-taken-loading {
    margin-bottom: var(--edtt-spacing-lg);
}

.loading-skeleton {
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

.skeleton-card {
    background: var(--edtt-color-bg-card);
    border-radius: var(--edtt-border-radius-lg);
    border: 1px solid var(--edtt-color-border-default);
    overflow: hidden;
    height: 100%;
    box-shadow: var(--edtt-shadow-card);
}

.skeleton-image {
    height: 180px;
    background: linear-gradient(90deg,
            var(--edtt-color-bg-secondary) 25%,
            var(--edtt-color-bg-tertiary) 50%,
            var(--edtt-color-bg-secondary) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
}

.skeleton-content {
    padding: var(--edtt-spacing-lg);
}

.skeleton-title {
    height: 20px;
    background: linear-gradient(90deg,
            var(--edtt-color-bg-secondary) 25%,
            var(--edtt-color-bg-tertiary) 50%,
            var(--edtt-color-bg-secondary) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--edtt-border-radius-sm);
    margin-bottom: var(--edtt-spacing-sm);
}

.skeleton-subtitle {
    height: 16px;
    width: 60%;
    background: linear-gradient(90deg,
            var(--edtt-color-bg-secondary) 25%,
            var(--edtt-color-bg-tertiary) 50%,
            var(--edtt-color-bg-secondary) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--edtt-border-radius-sm);
    margin-bottom: var(--edtt-spacing-md);
}

.skeleton-progress {
    height: 8px;
    background: var(--edtt-color-bg-secondary);
    border-radius: var(--edtt-border-radius-full);
    margin-bottom: var(--edtt-spacing-md);
    overflow: hidden;
}

.skeleton-progress-bar {
    height: 100%;
    width: 70%;
    background: linear-gradient(90deg,
            var(--edtt-color-primary-200) 25%,
            var(--edtt-color-primary-300) 50%,
            var(--edtt-color-primary-200) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--edtt-border-radius-full);
}

.skeleton-button {
    height: 40px;
    background: linear-gradient(90deg,
            var(--edtt-color-bg-secondary) 25%,
            var(--edtt-color-bg-tertiary) 50%,
            var(--edtt-color-bg-secondary) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--edtt-border-radius-md);
}

@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes skeleton-loading {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

/* Responsive adjustments for skeleton */
@media (max-width: 767.98px) {
    .skeleton-image {
        height: 150px;
    }

    .skeleton-content {
        padding: var(--edtt-spacing-md);
    }
}

@media (max-width: 480px) {
    .skeleton-image {
        height: 120px;
    }

    .skeleton-content {
        padding: var(--edtt-spacing-sm);
    }

    .skeleton-title {
        height: 18px;
    }

    .skeleton-subtitle {
        height: 14px;
    }

    .skeleton-button {
        height: 36px;
    }
}