/* =========================================================
   VEIC 2027 — WORKSHOP HIGHLIGHTS (Home)
   File: assets/css/workshop-highlights.css
   Reuses the shared --veic-* palette and .veic-section-heading
   / .veic-heading-dot styles declared elsewhere (header.css /
   important-dates.css) — no need to redeclare them here.
   ========================================================= */

.veic-wh-outer{
    width: 100%;
    max-width: 1400px;
    margin: 20px auto 40px;
    padding: 20px 20px 10px;
    box-sizing: border-box;
}

.veic-wh-grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.veic-wh-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    background: var(--veic-white);
    border: 1px solid rgba(10, 46, 115, 0.08);
    border-radius: 14px;
    padding: 28px 16px;
    box-shadow: 0 10px 30px rgba(10, 46, 115, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.veic-wh-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(10, 46, 115, 0.12);
}

.veic-wh-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0, 200, 255, 0.12);
    color: var(--veic-primary);
    flex: 0 0 auto;
}

.veic-wh-icon svg{
    width: 26px;
    height: 26px;
}

.veic-wh-title{
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.35;
    color: var(--veic-text);
}

/* -------- Responsive -------- */
@media (max-width: 992px){
    .veic-wh-grid{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px){
    .veic-wh-grid{
        grid-template-columns: repeat(2, 1fr);
    }
    .veic-wh-card{
        padding: 22px 12px;
    }
}