/* ============================================================
   courses-popover.css
   Hover preview card — used on courses.html and learners.html.

   HIDDEN on screens ≤ 900px (touch / mobile).
   ============================================================ */

/* ── Base panel ── */
.cs-popover {
    position: absolute;
    width: 330px;
    max-height: 80vh;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 30px -6px rgba(26, 43, 86, 0.18),
                0 4px 10px -4px rgba(26, 43, 86, 0.1);
    padding: 18px 18px 16px;
    z-index: 9998;
    font-family: 'DM Sans', sans-serif;

    /* hidden state */
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* ── Visible state ── */
.cs-popover.cs-popover--visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* ── Arrow pointing LEFT (popover is to the right of the card) ── */
.cs-popover.cs-popover--arrow-left::before {
    content: '';
    position: absolute;
    top: 28px;
    left: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 8px 7px 0;
    border-color: transparent #e2e8f0 transparent transparent;
}
.cs-popover.cs-popover--arrow-left::after {
    content: '';
    position: absolute;
    top: 29px;
    left: -6px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 7px 6px 0;
    border-color: transparent #ffffff transparent transparent;
}

/* ── Arrow pointing RIGHT (popover is to the left of the card) ── */
.cs-popover.cs-popover--arrow-right::before {
    content: '';
    position: absolute;
    top: 28px;
    right: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 8px;
    border-color: transparent transparent transparent #e2e8f0;
}
.cs-popover.cs-popover--arrow-right::after {
    content: '';
    position: absolute;
    top: 29px;
    right: -6px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 7px;
    border-color: transparent transparent transparent #ffffff;
}

/* ── Title ── */
.cs-pop-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #1a2b56;
    margin: 0 0 4px 0;
    line-height: 1.4;
}

/* ── Level badge line ── */
.cs-pop-meta {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 10px;
}

/* ── Description ── */
.cs-pop-desc {
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.55;
    margin: 0 0 12px 0;

    /* clamp to 8 lines */
    display: -webkit-box;
    -webkit-line-clamp: 12;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Scope section ── */
.cs-pop-scope h5 {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1a2b56;
    margin: 0 0 8px 0;
}

.cs-pop-scope ul {
    list-style: none;
    padding: 0;
    margin: 0 0 14px 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cs-pop-scope li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.78rem;
    color: #334155;
    line-height: 1.45;
}

.cs-scope-icon {
    color: #f58220;
    font-size: 0.76rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ── Action row ── */
.cs-pop-actions {
    display: flex;
    gap: 8px;
}

.cs-pop-btn {
    flex: 1;
    height: 38px;
    border: none;
    border-radius: 7px;
    background: linear-gradient(45deg, #f5781f, #ffb347);
    color: #ffffff;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.cs-pop-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #1a2b56, #1d2a44);
    transform: translateY(-1px);
}

.cs-pop-btn:disabled {
    cursor: not-allowed;
}

/* ── HIDE on mobile / tablet touch screens ── */
@media (max-width: 900px) {
    .cs-popover,
    .cs-popover.cs-popover--visible {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}