.dashboard-learner-certificates {
    --navy:#0c2a7a;
    --navy2:#071c5e;
    --blue:#1e63ef;
    --ink:#12205c;
    --muted:#5f6f9a;
    --bg:#f3f7ff;
    --line:#dbe5f6;
    --white:#fff;
    --green:#10a56f;
    --purple:#7042eb;
    --orange:#ff7a24;
    --red:#e93e66;
    --shadow:0 10px 28px rgba(13,41,113,.08);
    --radius:15px;

    margin:0;
    padding-top:20px;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;

    color:var(--ink);

    background:linear-gradient(
        180deg,
        #f7faff 0,
        #edf4ff 100%
    );

    font-size:14px;
}

.dashboard-learner-certificates * {
    box-sizing:border-box;
}

.dashboard-learner-certificates a {
    text-decoration:none;
    color:inherit;
}

.dashboard-learner-certificates button,
.dashboard-learner-certificates input,
.dashboard-learner-certificates select,
.dashboard-learner-certificates textarea {
    font:inherit;
}

.dashboard-learner-certificates .icon {
    width:22px;
    height:22px;
    display:block;
}

.dashboard-learner-certificates .app {
    min-height:100vh;
}


/* =========================================================
   MAIN
   ========================================================= */

.dashboard-learner-certificates .main {
    width:100%;
    min-height:100vh;
    padding:12px 18px 28px;
}

.dashboard-learner-certificates .content {
    width:100%;
    max-width:1400px;
    margin:0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.dashboard-learner-certificates .page-hero {
    min-height:180px;
    height:auto;

    border-radius:15px;
    overflow:hidden;
    position:relative;

    color:#fff;

    background:
        linear-gradient(
            100deg,
            #09266f,
            #10339a 60%,
            #1a49c6
        );

    display:flex;
    align-items:center;

    /*
     * Increased internal padding so the content
     * does not touch the edges of the card.
     */
    padding:32px 44px;

    margin-bottom:16px;

    box-shadow:var(--shadow);
}

.dashboard-learner-certificates .page-hero::after {
    content:'';

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(7,28,94,.12),
            rgba(7,28,94,0)
        );

    pointer-events:none;
}

.dashboard-learner-certificates .page-hero.mountain {
    background-image:
        linear-gradient(
            90deg,
            #08236d 0%,
            #0e3194 55%,
            rgba(14,49,148,.35) 100%
        ),
        url('/assets/dashboard-assets/banner-mountain.png');

    background-repeat:no-repeat;
    background-size:cover;
    background-position:right center;
}


/* =========================================================
   HERO TEXT
   ========================================================= */

.dashboard-learner-certificates .page-hero .hero-copy {
    position:relative;
    z-index:2;

    width:100%;
    max-width:650px;

    padding:4px 0;
}

.dashboard-learner-certificates .page-hero h1 {
    font-size:42px;
    line-height:1.08;

    margin:0 0 10px;

    letter-spacing:-.025em;
    color:#fff;
}

.dashboard-learner-certificates .page-hero p {
    margin:0;

    max-width:620px;

    color:rgba(255,255,255,.92);

    font-size:18px;
    line-height:1.5;
}


/* =========================================================
   HERO NOTE
   ========================================================= */

.dashboard-learner-certificates .hero-note {
    position:absolute;

    right:40px;
    top:50%;

    z-index:3;

    max-width:220px;

    padding:8px 4px;

    font-family:cursive;
    font-size:24px;
    line-height:1.15;

    text-align:right;

    color:#fff;

    transform:
        translateY(-50%)
        rotate(-2deg);
}


/* =========================================================
   GRID
   ========================================================= */

.dashboard-learner-certificates .grid {
    display:grid;
    gap:14px;
}

.dashboard-learner-certificates .g4 {
    grid-template-columns:repeat(4,1fr);
}

.dashboard-learner-certificates .cert-layout {
    grid-template-columns:2.1fr 1fr;
}


/* =========================================================
   CARDS
   ========================================================= */

.dashboard-learner-certificates .card {
    background:#fff;

    border:1px solid #e0e8f6;
    border-radius:14px;

    box-shadow:
        0 7px 20px rgba(14,41,114,.045);
}

.dashboard-learner-certificates .panel {
    padding:20px;
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.dashboard-learner-certificates .section-title {
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    margin-bottom:14px;
}

.dashboard-learner-certificates .section-title .left {
    display:flex;
    align-items:center;
    gap:12px;
}

.dashboard-learner-certificates .section-title h2 {
    font-size:21px;
    margin:0;

    color:#112668;
}

.dashboard-learner-certificates .section-title p {
    font-size:12px;
    color:#6879a0;

    margin:4px 0 0;
    line-height:1.45;
}

.dashboard-learner-certificates .link {
    color:#0f54e8;
    font-weight:750;
    font-size:12px;
}


/* =========================================================
   ICON TILES
   ========================================================= */

.dashboard-learner-certificates .tile-icon {
    height:44px;
    width:44px;

    border-radius:12px;

    display:grid;
    place-items:center;

    flex:0 0 44px;
}

.dashboard-learner-certificates .blue {
    background:#e9f1ff;
    color:#1f65ef;
}

.dashboard-learner-certificates .green {
    background:#e4f8ef;
    color:#0b9d6b;
}

.dashboard-learner-certificates .purple {
    background:#efe8ff;
    color:#6f3eeb;
}

.dashboard-learner-certificates .orange {
    background:#fff0e3;
    color:#f27418;
}


/* =========================================================
   STAT CARDS
   ========================================================= */

.dashboard-learner-certificates .stat-card {
    padding:18px;

    display:flex;
    align-items:center;

    gap:14px;

    min-height:92px;
}

.dashboard-learner-certificates .stat-card .val {
    font-size:25px;
    font-weight:850;

    color:#0e246e;

    line-height:1;
}

.dashboard-learner-certificates .stat-card .label {
    font-size:13px;
    font-weight:700;
}

.dashboard-learner-certificates .stat-card .sub {
    font-size:11px;
    color:#7583a5;

    margin-top:4px;
}


/* =========================================================
   CERTIFICATE ROW
   ========================================================= */

.dashboard-learner-certificates .cert-row {
    display:grid;

    grid-template-columns:
        95px
        1.25fr
        .8fr
        .9fr
        auto;

    gap:12px;

    align-items:center;

    padding:14px 12px;

    border-bottom:1px solid #e4ebf6;
}

.dashboard-learner-certificates .cert-row:last-child {
    border-bottom:0;
}

.dashboard-learner-certificates .cert-row img {
    width:95px;
    height:58px;

    border-radius:8px;

    object-fit:contain;
    object-position:center;
}

.dashboard-learner-certificates .cert-row h3 {
    font-size:13px;

    margin:0 0 4px;
}

.dashboard-learner-certificates .cert-row .meta {
    font-size:12px;
    color:#6878a0;
}

.dashboard-learner-certificates .cert-row .meta b {
    color:var(--ink);
}


/* =========================================================
   STATUS PILL
   ========================================================= */

.dashboard-learner-certificates .pill {
    display:inline-flex;
    align-items:center;

    gap:7px;

    padding:6px 12px;

    border-radius:999px;

    font-size:11px;
    font-weight:700;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.dashboard-learner-certificates .btn {
    height:42px;

    border-radius:9px;

    border:1px solid #1d5df0;

    background:#fff;

    color:#0e4bdc;

    padding:0 22px;

    font-weight:750;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    white-space:nowrap;
}

.dashboard-learner-certificates .btn .icon {
    width:22px;
    height:22px;
}


/* =========================================================
   COURSE ROW
   ========================================================= */

.dashboard-learner-certificates .course-row {
    display:grid;

    grid-template-columns:190px 1fr auto;

    gap:16px;

    align-items:center;

    padding:14px;

    border:1px solid #e1e9f6;

    border-radius:12px;

    background:#fff;
}

.dashboard-learner-certificates .course-row img {
    width:190px;
    height:92px;

    object-fit:contain;
    object-position:center;

    border-radius:10px;
}

.dashboard-learner-certificates .course-row h3 {
    font-size:16px;

    margin:0 0 4px;

    color:#0b226a;
}

.dashboard-learner-certificates .course-row .meta {
    font-size:12px;
    color:#6878a0;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.dashboard-learner-certificates .progress {
    height:7px;

    background:#e6ebf6;

    border-radius:999px;

    overflow:hidden;

    margin:10px 0 5px;
}

.dashboard-learner-certificates .progress span {
    display:block;

    height:100%;

    background:#2264ed;

    border-radius:999px;
}


/* =========================================================
   CERTIFICATE PREVIEW
   ========================================================= */

.dashboard-learner-certificates .cert-preview {
    padding:18px;
}

.dashboard-learner-certificates .cert-preview img {
    width:100%;

    border:2px solid #1c60ee;

    border-radius:8px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1200px) {

    .dashboard-learner-certificates .cert-layout {
        grid-template-columns:1fr;
    }

    .dashboard-learner-certificates .g4 {
        grid-template-columns:repeat(2,1fr);
    }

    .dashboard-learner-certificates .page-hero {
        padding:30px 36px;
    }

    .dashboard-learner-certificates .page-hero .hero-copy {
        max-width:70%;
    }

    .dashboard-learner-certificates .hero-note {
        right:32px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:900px) {

    .dashboard-learner-certificates .main {
        padding:16px;
    }

    .dashboard-learner-certificates .g4 {
        grid-template-columns:1fr;
    }

    .dashboard-learner-certificates .course-row {
        grid-template-columns:1fr;
    }

    .dashboard-learner-certificates .course-row img {
        width:100%;
        height:170px;

        object-fit:contain;
        object-position:center;
    }

    .dashboard-learner-certificates .page-hero {
        min-height:170px;

        padding:28px 26px;
    }

    .dashboard-learner-certificates .page-hero .hero-copy {
        max-width:100%;
    }

    .dashboard-learner-certificates .page-hero h1 {
        font-size:32px;
    }

    .dashboard-learner-certificates .page-hero p {
        font-size:15px;
        line-height:1.5;
    }

    .dashboard-learner-certificates .hero-note {
        display:none;
    }

    .dashboard-learner-certificates .panel {
        padding:16px;
    }

    .dashboard-learner-certificates .cert-row {
        grid-template-columns:1fr;

        gap:10px;

        padding:16px;
    }

    .dashboard-learner-certificates .cert-row img {
        width:100%;
        height:150px;

        object-fit:contain;
        object-position:center;
    }

    .dashboard-learner-certificates .cert-row .btn {
        width:100%;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:600px) {

    .dashboard-learner-certificates {
        padding-top:10px;
    }

    .dashboard-learner-certificates .main {
        padding:12px;
    }

    .dashboard-learner-certificates .page-hero {
        min-height:165px;

        padding:26px 22px;

        border-radius:14px;
    }

    .dashboard-learner-certificates .page-hero h1 {
        font-size:29px;

        margin-bottom:9px;
    }

    .dashboard-learner-certificates .page-hero p {
        font-size:14px;

        line-height:1.5;
    }

    .dashboard-learner-certificates .panel {
        padding:15px;
    }

    .dashboard-learner-certificates .section-title {
        margin-bottom:12px;
    }

    .dashboard-learner-certificates .section-title h2 {
        font-size:19px;
    }

    .dashboard-learner-certificates .stat-card {
        padding:16px;
    }
}