/* ================================================================
 * learning.css — Video courses, live sessions & certificates
 * ================================================================
 * Shared by learning.html (student hub) and verify.html (public
 * credential verification).
 *
 * Layout only. Every colour comes from academy-theme.css, which is
 * loaded after this file and republishes the dashboard's purple /
 * pink / amber palette on the short token names used below.
 * ================================================================ */

/* All colour tokens live in academy-theme.css. */

* { box-sizing: border-box; }

/* body, header, h1, .btn and card colours are owned by
   academy-theme.css; only layout stays here. */
.wrap { max-width: 1150px; margin: 0 auto; padding: 0 20px 40px; }

.head {
    max-width: 1150px; margin: 0 auto; padding: 0 20px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.head-title { display: flex; align-items: center; gap: 16px; }

/* tabs */
/* The strip carries a trailing "Live Events calendar" link with margin-left:auto.
   Without wrapping, that link overflows the page on phone widths instead of
   dropping to a second row. */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; border-bottom: 1px solid var(--line); }
.tab {
    background: none; border: none;
    padding: 12px 16px; font-size: 14px; cursor: pointer;
    border-bottom: 2px solid transparent;
}
/* The tab strip also carries a link out to the Live Events calendar. */
a.tab { text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }

/* cards */
/* The 310px floor is wider than a phone viewport can supply (320px viewport
   minus .wrap's 2x20px padding = 280px), which pushed the whole page into
   horizontal scroll. min() lets the column fall back to the container width
   and changes nothing once the container is at least 310px wide. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 16px; }
.card { padding: 18px; }
.card h3 { margin: 0 0 8px; font-size: 16px; }
.meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--mut); margin: 6px 0; }
.desc { font-size: 13px; color: var(--mut); margin: 8px 0; }

/* progress */
.bar { height: 6px; border-radius: 99px; overflow: hidden; margin: 12px 0 6px; }
.fill { height: 100%; }
.progress-text { font-size: 12px; color: var(--mut); }

/* buttons */
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ok { font-size: 13px; }
.empty { color: var(--mut); font-size: 14px; padding: 24px 0; }

/* "Coming soon" state for an announced-but-unreleased course.
   The badge sits in the .meta row; .soon-note replaces the enrol
   button so the card never looks broken or clickable. */
.meta .tag.soon {
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 99px;
    padding: 2px 9px;
    font-weight: 600;
    letter-spacing: 0.4px;
}
.soon-note { font-size: 12px; color: var(--mut); font-style: italic; }

/* modals */
.modal {
    position: fixed; inset: 0;
    display: none; align-items: center; justify-content: center;
    z-index: 9999; padding: 20px;
}
.modal.active { display: flex; }
.modal-box {
    border-radius: 14px; padding: 24px; max-width: 960px;
    width: 100%; max-height: 88vh; overflow: auto; position: relative;
}
.close {
    position: absolute; top: 12px; right: 14px; background: none;
    border: none; color: var(--mut); font-size: 24px; cursor: pointer; line-height: 1;
}

/* course player */
.player-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 18px; margin-top: 16px; }
.lesson-list { display: flex; flex-direction: column; gap: 6px; }
.lesson {
    display: flex; align-items: center; gap: 9px; padding: 10px;
    border-radius: 8px; cursor: pointer; font-size: 13px;
}
.lesson .t { flex: 1; }
.lesson .d { color: var(--mut); font-size: 11px; }
.stage iframe, .stage video {
    width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 10px; background: #000;
}
.stage h3 { margin: 14px 0 6px; font-size: 17px; }

/* certificate sheet */
.cert-sheet { border-radius: 16px; padding: 34px 26px; text-align: center; }
.cert-brand { font-size: 11px; letter-spacing: 3px; }
.cert-title { font-size: 19px; font-weight: 700; margin: 10px 0 18px; }
.cert-sub { font-size: 13px; margin: 6px 0; }
.cert-name { font-size: 26px; font-weight: 700; margin: 10px 0; }
.cert-course { font-size: 19px; margin: 10px 0; }
.cert-id { font-family: ui-monospace, Consolas, monospace; font-size: 13px; margin-top: 16px; }
.cert-note { font-size: 11px; margin-top: 6px; }
.cert-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

/* toast */
#toast {
    position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
    padding: 12px 22px; border-radius: 10px; font-size: 14px;
    display: none; z-index: 10000; max-width: 90vw;
}

.signin { padding: 26px; text-align: center; }

/* verification page */
.verify-box { padding: 28px; max-width: 640px; margin: 40px auto; }
.verify-icon { font-size: 46px; text-align: center; margin-bottom: 10px; }
.verify-title { font-size: 20px; font-weight: 700; text-align: center; margin: 0 0 6px; }
.verify-reason { text-align: center; color: var(--mut); font-size: 14px; margin: 0 0 18px; }
.verify-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.verify-row span:first-child { color: var(--mut); }
.verify-row span:last-child { text-align: right; font-weight: 600; }
.verify-input { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0; }
.verify-input input {
    flex: 1 1 260px; border-radius: 8px; padding: 11px 13px; font-size: 13px;
}

@media (max-width: 760px) { .player-wrap { grid-template-columns: 1fr; } }

/* Printing a certificate should produce a clean page. */
@media print {
    .tabs, .actions, #toast, header, .verify-input, .no-print { display: none !important; }
    body { background: #fff; color: #000; padding: 0; }
    .card, .cert-sheet { border-color: #000; background: #fff; color: #000; }
    .cert-name, .cert-title, .cert-course, .cert-id { color: #000; }
    .cert-sub, .cert-brand, .cert-note, .meta { color: #333; }
    .modal { position: static; background: none; padding: 0; }
    .modal-box { border: none; max-width: none; box-shadow: none; }
}

/* certificate id chip */
.cred-id {
    font-family: ui-monospace, Consolas, monospace; font-size: 12px;
    border-radius: 6px;
    padding: 6px 10px; display: inline-block; margin: 6px 0;
}