/* =========================================================
   Quiz Card Grid — shared across public pages:
   - careerlab
   - life-skills
   - olympiad-quizzes
   Used to present quiz/career/skill lists in a card layout
   matching the internal student dashboard style.
   ========================================================= */

.qc-section { margin: 0 0 25px 0; }

.qc-group-title {
    font-size: 16px;
    font-weight: 700;
    color: #555;
    margin: 18px 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid #ccc;
}

.qc-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.qc-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 14px 15px;
    min-width: 220px;
    flex: 1 1 240px;
    max-width: 300px;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.qc-card:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
    text-decoration: none;
}

.qc-card-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    line-height: 1.3;
}

.qc-card-desc {
    font-size: 12px;
    color: #777;
    line-height: 1.45;
    margin-bottom: 10px;
    /* Clamp to two lines for visual consistency */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.qc-card-cta {
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    margin-top: auto;
    align-self: flex-start;
}

/* Compact variant: for cards without a description (e.g. class selectors) */
.qc-card.qc-card-compact {
    padding: 10px 14px;
    min-width: 120px;
    flex: 0 1 140px;
    max-width: 170px;
    text-align: center;
    display: block;
}
.qc-card.qc-card-compact .qc-card-name { margin-bottom: 0; font-size: 13px; }

/* ===== Theme: Career (yellow accent) ===== */
.qc-theme-career .qc-group-title { border-bottom-color: #f0b429; color: #8a6d0f; }
.qc-theme-career .qc-card:hover { border-color: #f0b429; }
.qc-theme-career .qc-card-cta { color: #d4a017; }
.qc-theme-career .qc-card-cta:hover { color: #8a6d0f; }

/* ===== Theme: Life Skill (teal accent) ===== */
.qc-theme-lifeskill .qc-group-title { border-bottom-color: #1a8a7d; color: #1a8a7d; }
.qc-theme-lifeskill .qc-card:hover { border-color: #1a8a7d; }
.qc-theme-lifeskill .qc-card-cta { color: #1a8a7d; }
.qc-theme-lifeskill .qc-card-cta:hover { color: #0f7a6a; }

/* ===== Theme: Olympiad (blue accent) ===== */
.qc-theme-olympiad .qc-group-title { border-bottom-color: #2471a3; color: #2471a3; }
.qc-theme-olympiad .qc-card:hover { border-color: #2471a3; }
.qc-theme-olympiad .qc-card-cta { color: #2471a3; }
.qc-theme-olympiad .qc-card-cta:hover { color: #1b4f72; }

/* Responsive — narrower screens */
@media (max-width: 600px) {
    .qc-card { min-width: 100%; max-width: 100%; flex: 1 1 100%; }
    .qc-card.qc-card-compact { min-width: calc(50% - 6px); max-width: calc(50% - 6px); flex: 0 1 calc(50% - 6px); }
}