/* ==========================================================================
   Career Paths Page
   ========================================================================== */

.career-paths-page {

    position:relative;

    min-height:calc(100vh - 70px);

    padding:50px 0
        90px;

    overflow:hidden;

    background:radial-gradient(
            circle at 80% 0%,
            rgba(var(--t-cyan-rgb),.06),
            transparent 30%
        ),
        radial-gradient(
            circle at 0% 80%,
            rgba(59, 130, 246, .05),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--t-bg),
            var(--t-bg)
        );

    color:var(--t-text2);
}

/* ==========================================================================
   Grid Background
   ========================================================================== */

.career-paths-page::before {

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.20;

    background-image:linear-gradient(
            rgba(var(--t-line-rgb),.22) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(var(--t-line-rgb),.22) 1px,
            transparent 1px
        );

    background-size:45px 45px;
}

/* ==========================================================================
   Shell
   ========================================================================== */

.paths-shell {

    position:relative;

    z-index:2;

    width:calc(100% - 40px);

    max-width:1320px;

    margin:0 auto;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.paths-hero {

    position:relative;

    overflow:hidden;

    margin-bottom:45px;

    padding:48px
        42px;

    border:1px solid
        rgba(var(--t-line2-rgb),.60);

    border-radius:24px;

    background:radial-gradient(
            circle at 90% 10%,
            rgba(59, 130, 246, .26),
            transparent 38%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(var(--t-cyan-rgb),.11),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            var(--t-soft),
            rgba(var(--t-sky-rgb),.16)
        );

    box-shadow:0 30px 70px
        rgba(var(--t-shadow-rgb),.22);
}

.paths-hero::after {

    content:"";

    position:absolute;

    width:340px;

    height:340px;

    right:-90px;

    top:-120px;

    border-radius:50%;

    background:radial-gradient(
            circle,
            rgba(var(--t-cyan-rgb),.10),
            transparent 70%
        );
}

html[dir="rtl"]
.paths-hero::after {

    right:auto;

    left:-90px;
}

.paths-hero-content {

    position:relative;

    z-index:2;

    max-width:850px;
}

.paths-hero-badge {

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:18px;

    padding:8px 13px;

    border:1px solid
        rgba(var(--t-text-rgb),.12);

    border-radius:999px;

    background:rgba(var(--t-text-rgb),.06);

    color:var(--t-text3);

    font-size:11px;

    font-weight:800;
}

.paths-hero h1 {

    margin:0 0
        15px;

    color:var(--t-heading);

    font-size:clamp(
            34px,
            5vw,
            54px
        );

    line-height:1.2;

    font-weight:900;
}

.paths-hero p {

    max-width:760px;

    margin:0;

    color:var(--t-muted);

    font-size:13px;

    line-height:2;
}

/* ==========================================================================
   Stats
   ========================================================================== */

.paths-stats {

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:25px;
}

.paths-stat {

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:8px 11px;

    border:1px solid
        rgba(var(--t-text-rgb),.08);

    border-radius:9px;

    background:rgba(var(--t-text-rgb),.04);

    color:var(--t-muted);

    font-size:10px;
}

.paths-stat strong {

    color:var(--t-heading);
}

/* ==========================================================================
   Section Head
   ========================================================================== */

.paths-section-head {

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:20px;

    margin-bottom:22px;
}

.paths-section-head h2 {

    margin:0;

    color:var(--t-heading);

    font-size:22px;

    font-weight:900;
}

.paths-section-head p {

    margin-top:6px;

    color:var(--t-muted2);

    font-size:11px;
}

/* ==========================================================================
   Grid
   ========================================================================== */

.paths-grid {

    display:grid;

    grid-template-columns:repeat(
            3,
            minmax(0,1fr)
        );

    gap:22px;
}

/* ==========================================================================
   Card
   ========================================================================== */

.path-card {

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    min-height:100%;

    border:1px solid
        var(--t-line);

    border-radius:18px;

    background:linear-gradient(
            145deg,
            rgba(var(--t-soft-rgb),.96),
            rgba(var(--t-bg-rgb),.98)
        );

    box-shadow:0 22px 55px
        rgba(var(--t-shadow-rgb),.18);

    transition:transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.path-card:hover {

    transform:translateY(-5px);

    border-color:rgba(var(--t-cyan-rgb),.25);

    box-shadow:0 30px 70px
        rgba(var(--t-shadow-rgb),.28);
}

.path-card::before {

    content:"";

    position:absolute;

    left:0;

    top:0;

    z-index:2;

    width:100%;

    height:2px;

    background:linear-gradient(
            90deg,
            transparent,
            var(--t-cyan),
            transparent
        );

    opacity:.75;
}

/* ==========================================================================
   Thumbnail
   ========================================================================== */

.path-thumbnail {

    position:relative;

    display:block;

    overflow:hidden;

    aspect-ratio:16 / 9;

    background:var(--t-soft);

    border-bottom:1px solid
        var(--t-line);
}

.path-thumbnail img {

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .3s ease;
}

.path-card:hover
.path-thumbnail img {

    transform:scale(1.035);
}

.path-thumbnail-placeholder {

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:7px;

    background:radial-gradient(
            circle at center,
            rgba(var(--t-cyan-rgb),.10),
            transparent 55%
        ),
        var(--t-soft);

    color:var(--t-cyan);
}

.path-thumbnail-placeholder .icon {

    font-size:31px;
}

.path-thumbnail-placeholder .text {

    color:var(--t-muted2);

    font-size:9px;

    letter-spacing:1px;

    text-transform:uppercase;
}

/* ==========================================================================
   Featured Badge
   ========================================================================== */

.path-featured {

    position:absolute;

    top:12px;

    <?= $isArabic ? 'right' : 'left' ?>: 12px;

    z-index:5;

    display:inline-flex;

    align-items:center;

    gap:5px;

    padding:6px 9px;

    border:1px solid
        rgba(var(--t-yellow-rgb),.25);

    border-radius:7px;

    background:rgba(var(--t-yellow-rgb),.16);

    color:var(--t-yellow2);

    font-size:8px;

    font-weight:900;
}

/* ==========================================================================
   Card Body
   ========================================================================== */

.path-card-body {

    display:flex;

    flex:1;

    flex-direction:column;

    padding:21px;
}

.path-card-meta {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-bottom:10px;
}

.path-course-count {

    display:inline-flex;

    align-items:center;

    gap:6px;

    color:var(--t-muted2);

    font-size:9px;

    font-weight:700;
}

.path-course-count strong {

    color:var(--t-cyan);

    font-size:11px;
}

.path-type {

    color:var(--t-muted2);

    font-size:8px;

    letter-spacing:.7px;

    text-transform:uppercase;
}

/* ==========================================================================
   Title
   ========================================================================== */

.path-card-title {

    margin:0 0
        11px;

    color:var(--t-heading);

    font-size:19px;

    font-weight:900;

    line-height:1.45;
}

.path-card-title a {

    color:inherit;

    text-decoration:none;
}

.path-card-title a:hover {

    color:var(--t-cyan);
}

/* ==========================================================================
   Description
   ========================================================================== */

.path-description {

    display:-webkit-box;

    overflow:hidden;

    margin:0 0
        20px;

    color:var(--t-muted);

    font-size:11px;

    line-height:1.9;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:3;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.path-card-footer {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    margin-top:auto;

    padding-top:17px;

    border-top:1px solid
        var(--t-line);
}

.path-level-info {

    display:flex;

    flex-direction:column;

    gap:3px;
}

.path-level-label {

    color:var(--t-muted2);

    font-size:8px;

    text-transform:uppercase;

    letter-spacing:.7px;
}

.path-level-value {

    color:var(--t-text3);

    font-size:10px;

    font-weight:800;
}

/* ==========================================================================
   Button
   ========================================================================== */

.path-btn {

    display:inline-flex;

    min-height:39px;

    align-items:center;

    justify-content:center;

    gap:7px;

    padding:0 14px;

    border:1px solid
        rgba(var(--t-cyan-rgb),.23);

    border-radius:8px;

    background:rgba(var(--t-cyan-rgb),.06);

    color:var(--t-cyan);

    text-decoration:none;

    font-size:9px;

    font-weight:900;

    transition:all .2s ease;
}

.path-btn:hover {

    transform:translateY(-1px);

    background:var(--t-cyan);

    color:var(--t-on-accent);

    box-shadow:0 10px 28px
        rgba(var(--t-cyan-rgb),.15);
}

/* ==========================================================================
   Empty
   ========================================================================== */

.paths-empty {

    padding:55px 25px;

    border:1px solid
        var(--t-line);

    border-radius:16px;

    background:var(--t-soft);

    text-align:center;
}

.paths-empty-icon {

    margin-bottom:10px;

    font-size:28px;
}

.paths-empty h3 {

    margin-bottom:7px;

    color:var(--t-heading);

    font-size:15px;
}

.paths-empty p {

    color:var(--t-muted2);

    font-size:10px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1050px) {

    .paths-grid {

        grid-template-columns:repeat(
                2,
                minmax(0,1fr)
            );
    }
}

@media (max-width: 700px) {

    .career-paths-page {

        padding-top:25px;
    }

    .paths-shell {

        width:calc(100% - 24px);
    }

    .paths-hero {

        padding:28px 21px;

        border-radius:17px;
    }

    .paths-grid {

        grid-template-columns:1fr;
    }

    .paths-section-head {

        align-items:flex-start;

        flex-direction:column;
    }

    .path-card-footer {

        align-items:stretch;

        flex-direction:column;
    }

    .path-btn {

        width:100%;
    }
}