/* ─── Home page ───────────────────────────────────── */
.home-fullscreen {
    height:          100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding-top:     calc(var(--navbar-height) * 1.5);
}

.home-hero {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    gap:             1.5rem;
}

.home-hero__title {
    font-size:   2.2rem;
    font-weight: 700;
    color:       var(--color-text);
    line-height: 1.4;
}

@media (max-width: 768px) {
    .home-hero__title {
        font-size: 1.5rem;
    }
}

/* ─── Course type selection page ─────────────────── */
.courses-type {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            1.25rem;
    width:          100%;
    max-width:      360px;
}

.course-type-btn {
    width:            100%;
    padding:          1.1rem 2rem;
    font-family:      var(--font-main);
    font-size:        1.1rem;
    font-weight:      700;
    color:            #fff;
    background-color: var(--color-primary);
    border:           none;
    border-radius:    var(--border-radius);
    cursor:           pointer;
    transition:       background-color var(--transition),
                      transform        var(--transition);
}

.course-type-btn:hover {
    background-color: var(--color-primary-hover);
    transform:        translateY(-2px);
}

.course-type-btn.disabled {
    background-color: var(--color-border);
    color:            var(--color-text-muted);
    cursor:           not-allowed;
    transform:        none;
    pointer-events:   none;
}

/* ─── Course list page ────────────────────────────── */
.course-list-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.25rem;
}

.course-card {
    background-color: var(--color-card);
    border:           1px solid var(--card-accent, var(--color-border));
    border-radius:    var(--border-radius-lg);
    padding:          2rem 1.25rem;
    cursor:           pointer;
    transition:       border-color var(--transition),
                      transform    var(--transition);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    min-height:       120px;
}

.course-card.has-color {
    background-color: color-mix(in srgb, var(--card-accent) 10%, var(--color-card));
}

.course-card:hover {
    border-color: var(--color-primary);
    transform:    translateY(-2px);
}

.course-card__name {
    font-size:   1.1rem;
    font-weight: 700;
    color:       var(--color-text);
    text-align:  center;
}

/* Chapter list */
.chapter-list {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
    list-style:     none;
    padding:        0;
    margin:         0;
}

.chapter-item {
    display:          flex;
    align-items:      center;
    gap:              1rem;
    padding:          1rem 1.25rem;
    background-color: var(--color-card);
    border:           1px solid var(--color-border);
    border-radius:    var(--border-radius-lg);
    cursor:           pointer;
    transition:       border-color     var(--transition),
                      box-shadow       var(--transition),
                      transform        var(--transition);
}

.chapter-item:hover {
    border-color: var(--color-primary);
    box-shadow:   0 4px 12px rgba(24, 95, 165, 0.1);
    transform:    translateY(-1px);
}

.chapter-item__number {
    flex-shrink:      0;
    width:            2.2rem;
    height:           2.2rem;
    border-radius:    50%;
    background-color: var(--color-primary-light);
    color:            var(--color-primary);
    font-size:        0.85rem;
    font-weight:      700;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    transition:       background-color var(--transition),
                      color            var(--transition);
}

.chapter-item:hover .chapter-item__number {
    background-color: var(--color-primary);
    color:            #fff;
}

.chapter-item__name {
    flex:        1;
    font-size:   1rem;
    font-weight: 600;
    color:       var(--color-text);
}

.chapter-item__arrow {
    color:      var(--color-text-muted);
    font-size:  1.1rem;
    transition: color var(--transition), transform var(--transition);
}

.chapter-item:hover .chapter-item__arrow {
    color:     var(--color-primary);
    transform: translateX(-3px);
}

@media (max-width: 768px) {
    .course-list-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .course-list-grid {
        grid-template-columns: 1fr;
    }
}