/* ===== Kurzy – velké „dlaždice“ ===== */
:root {
    --mint: #BFEFE5;
    --mint-2: #AEE6DB;
    --charcoal: #1B1D1F;
    --text: #1E2125;
    --muted: #5E6673;
    --radius: 22px;
    --shadow: 0 10px 30px rgba(27,29,31,.12);
    --shadow-lg: 0 16px 40px rgba(27,29,31,.18);
}

.courses {
    padding: 56px 0 72px;
}

    .courses h2 {
        font-size: 32px;
        margin: 0 0 26px;
        color: var(--charcoal);
    }

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

/* karta */
.course-card {
    display: block;
    position: relative;
    padding: 22px 22px 20px;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    background: radial-gradient(120% 160% at 100% 0, rgba(255,255,255,.8) 0, rgba(255,255,255,.45) 45%, rgba(255,255,255,.25) 100%), linear-gradient(180deg, var(--mint) 0%, var(--mint-2) 100%);
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease;
    min-height: 180px;
}

    .course-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
    }

    .course-card .icon {
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: rgba(255,255,255,.6);
        margin-bottom: 12px;
    }

        .course-card .icon svg {
            width: 26px;
            height: 26px;
            stroke-width: 1.7;
        }

    .course-card h3 {
        font-size: 20px;
        line-height: 1.25;
        margin: 0 0 8px;
        color: var(--charcoal);
    }

    .course-card p {
        margin: 0 0 18px;
        color: var(--muted);
        font-size: 15px;
    }

    .course-card .more {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        font-size: 14px;
        color: var(--charcoal);
    }

        .course-card .more svg {
            width: 20px;
            height: 20px;
            stroke-width: 1.8;
            transition: transform .2s ease;
        }

    .course-card:hover .more svg {
        transform: translateX(3px);
    }

/* tmavé pozadí (kdyby sekce seděla přes fotku) */
.hero + .courses {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0, #f7fbfa 20%);
}

/* responsivní drobnosti */
@media (max-width: 991px) {
    .courses {
        padding: 40px 0 56px;
    }

        .courses h2 {
            font-size: 26px;
        }
}