/* ==================================================
   COURSES.CSS
   PART 1
   GLOBAL + COURSE LISTING + MY COURSES
================================================== */

:root{

    --primary:#0b6bcb;
    --primary-dark:#084e97;
    --secondary:#14b8a6;

    --heading:#132238;
    --text:#5f6b7a;

    --bg:#f5f8fc;
    --white:#ffffff;

    --border:#e6edf5;

    --radius-sm:12px;
    --radius:18px;
    --radius-lg:26px;

    --shadow-sm:0 5px 18px rgba(0,0,0,.05);
    --shadow:0 12px 35px rgba(0,0,0,.08);
    --shadow-lg:0 20px 55px rgba(0,0,0,.12);

    --transition:.3s ease;

}

/* ==================================================
   BASE
================================================== */

.pc-course-shell{
    width:min(1200px,92%);
    margin:auto;
}

.pc-course-listing,
.pc-course-overview,
.pc-course-benefits,
.pc-course-learn,
.pc-course-curriculum,
.pc-course-faq,
.pc-course-final-cta,
.pc-watch-layout{
    padding:90px 0;
}

.pc-course-listing{
    background:var(--bg);
}

/* ==================================================
   SECTION HEADINGS
================================================== */

.pc-course-section-head{
    text-align:center;
    max-width:850px;
    margin:0 auto 60px;
}

.pc-course-section-head span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    background:#eaf4ff;

    color:var(--primary);

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    margin-bottom:18px;
}

.pc-course-section-head h2{

    color:var(--heading);

    font-size:46px;

    line-height:1.2;

    font-weight:800;

    margin-bottom:14px;
}

.pc-course-section-head p{

    color:var(--text);

    font-size:17px;

    line-height:1.9;
}

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

.pc-course-hero{

    background:
    linear-gradient(
    135deg,
    #edf6ff 0%,
    #f9fbff 100%
    );

    padding:120px 0;
}

.pc-course-hero-content{
    max-width:900px;
}

.pc-course-label{

    display:inline-flex;

    padding:10px 18px;

    background:#eaf4ff;

    color:var(--primary);

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    margin-bottom:24px;
}

.pc-course-title{

    color:var(--heading);

    font-size:62px;

    line-height:1.08;

    font-weight:800;

    margin-bottom:22px;
}

.pc-course-lead{

    color:var(--text);

    font-size:19px;

    line-height:1.9;
}

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

.pc-course-grid{

    display:grid;

    grid-template-columns:
    repeat(
    auto-fit,
    minmax(360px,1fr)
    );

    gap:30px;
}

/* ==================================================
   COURSE CARD
================================================== */

.pc-course-card{

    background:#fff;

    border-radius:28px;

    overflow:hidden;

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

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

    transition:.35s;

    display:flex;

    flex-direction:column;

    height:100%;
}

.pc-course-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 25px 60px
    rgba(11,107,203,.12);
}

.pc-course-card-image{
    overflow:hidden;
}

.pc-course-card-image img{

    width:100%;

    height:240px;

    object-fit:cover;

    display:block;

    transition:.5s;
}

.pc-course-card:hover img{
    transform:scale(1.06);
}

.pc-course-card-content{

    padding:28px;

    display:flex;

    flex-direction:column;

    flex:1;
}

/* ==================================================
   CATEGORY
================================================== */

.pc-course-category{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    align-self:flex-start;

    padding:8px 14px;

    background:#e9f7f4;

    color:#0f9d89;

    border-radius:50px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:18px;
}

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

.pc-course-card-title{

    font-size:28px;

    line-height:1.3;

    font-weight:800;

    margin:0 0 15px;
}

.pc-course-card-title a{

    color:var(--heading);

    text-decoration:none;
}

.pc-course-card-title a:hover{
    color:var(--primary);
}

/* ==================================================
   DESCRIPTION
================================================== */

.pc-course-card-desc{

    color:var(--text);

    line-height:1.9;

    font-size:15px;

    margin-bottom:24px;

    flex:1;
}

/* ==================================================
   META
================================================== */

.pc-course-meta{

    display:grid;

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

    gap:12px;

    margin-bottom:25px;
}

.pc-course-meta-item{

    background:#f8fbff;

    border-radius:14px;

    padding:16px;

    text-align:center;
}

.pc-course-meta-item strong{

    display:block;

    color:var(--primary);

    font-size:20px;

    font-weight:800;

    margin-bottom:4px;
}

.pc-course-meta-item span{

    color:var(--text);

    font-size:12px;
}

/* ==================================================
   FOOTER
================================================== */

.pc-course-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    padding-top:22px;

    border-top:1px solid #edf2f7;

    margin-top:auto;
}

/* ==================================================
   PRICE
================================================== */

.pc-course-price{

    display:flex;

    flex-direction:column;
}

.pc-old-price{

    font-size:14px;

    color:#9ca3af;

    text-decoration:line-through;
}

.pc-course-price strong{

    font-size:30px;

    font-weight:800;

    color:var(--primary);
}

/* ==================================================
   BUTTON
================================================== */

.pc-course-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:150px;

    height:50px;

    padding:0 22px;

    background:var(--primary);

    color:#fff;

    border:none;

    border-radius:12px;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:.3s;
}

.pc-course-btn:hover{
    background:var(--primary-dark);
}

/* ==================================================
   EMPTY STATE
================================================== */

.pc-course-empty{

    max-width:700px;

    margin:auto;

    background:#fff;

    border-radius:24px;

    padding:60px 35px;

    text-align:center;

    border:1px solid var(--border);
}

.pc-course-empty h3{

    font-size:32px;

    color:var(--heading);

    margin-bottom:12px;
}

.pc-course-empty p{

    color:var(--text);

    line-height:1.9;
}

/* ==================================================
   SINGLE COURSE HERO
================================================== */

.pc-course-single-hero{

    background:
    linear-gradient(
    135deg,
    #edf6ff 0%,
    #f9fbff 100%
    );

    padding:100px 0;
}

.pc-course-single-grid{

    display:grid;

    grid-template-columns:
    1.1fr .9fr;

    gap:70px;

    align-items:center;
}

.pc-course-single-content{
    max-width:700px;
}

.pc-course-single-label{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    background:#eaf4ff;

    color:var(--primary);

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    margin-bottom:24px;
}

.pc-course-single-title{

    color:var(--heading);

    font-size:58px;

    line-height:1.08;

    font-weight:800;

    margin-bottom:22px;
}

.pc-course-single-lead{

    color:var(--text);

    font-size:18px;

    line-height:1.9;

    margin-bottom:30px;
}

/* ==================================================
   COURSE IMAGE
================================================== */

.pc-course-single-image{
    position:relative;
}

.pc-course-single-image img{

    width:100%;

    display:block;

    border-radius:28px;

    box-shadow:
    0 25px 60px
    rgba(0,0,0,.12);

    object-fit:cover;
}

/* ==================================================
   STATS
================================================== */

.pc-course-single-stats{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin:35px 0;
}

.pc-course-single-stat{

    flex:1;

    min-width:140px;

    background:#fff;

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

    border-radius:18px;

    padding:22px;

    text-align:center;

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

.pc-course-single-stat strong{

    display:block;

    color:var(--primary);

    font-size:28px;

    font-weight:800;

    margin-bottom:6px;
}

.pc-course-single-stat span{

    display:block;

    color:var(--text);

    font-size:13px;
}

/* ==================================================
   PRICE
================================================== */

.pc-course-single-price-wrap{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:35px;
}

.pc-course-single-old-price{

    color:#9ca3af;

    text-decoration:line-through;

    font-size:24px;

    font-weight:500;
}

.pc-course-single-price{

    color:var(--primary);

    font-size:48px;

    font-weight:800;

    line-height:1;
}

/* ==================================================
   ENROLL BUTTON
================================================== */

.pc-course-single-actions{
    margin-top:10px;
}

.pc-course-single-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:220px;

    height:58px;

    padding:0 34px;

    background:var(--primary);

    color:#fff;

    text-decoration:none;

    border-radius:14px;

    font-size:16px;

    font-weight:700;

    transition:.3s;
}

.pc-course-single-btn:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);
}

/* ==================================================
   OVERVIEW
================================================== */

.pc-course-overview{
    background:#fff;
}

.pc-course-content{

    max-width:950px;

    margin:auto;
}

.pc-course-content p{

    color:var(--text);

    font-size:17px;

    line-height:2;

    margin-bottom:22px;
}

.pc-course-content p:last-child{
    margin-bottom:0;
}

/* ==================================================
   BENEFITS
================================================== */

.pc-course-benefits{
    background:var(--bg);
}

.pc-course-benefits-grid{

    display:grid;

    grid-template-columns:
    repeat(
    auto-fit,
    minmax(260px,1fr)
    );

    gap:28px;
}

.pc-course-benefit-card{

    background:#fff;

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

    border-radius:24px;

    padding:32px;

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

    transition:.3s;
}

.pc-course-benefit-card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 18px 40px
    rgba(0,0,0,.08);
}

.pc-course-benefit-card h3{

    color:var(--heading);

    font-size:22px;

    font-weight:700;

    margin-bottom:12px;
}

.pc-course-benefit-card p{

    color:var(--text);

    font-size:15px;

    line-height:1.9;
}

/* ==================================================
   LEARNING OUTCOMES
================================================== */

.pc-course-learn{
    background:#fff;
}

.pc-course-learn-grid{

    display:grid;

    grid-template-columns:
    repeat(
    auto-fit,
    minmax(300px,1fr)
    );

    gap:20px;
}

.pc-course-learn-item{

    position:relative;

    background:#fff;

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

    border-radius:18px;

    padding:22px 22px 22px 60px;

    font-size:15px;

    font-weight:600;

    color:var(--heading);

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

.pc-course-learn-item::before{

    content:"✓";

    position:absolute;

    left:22px;

    top:21px;

    width:24px;

    height:24px;

    border-radius:50%;

    background:#e8fbf6;

    color:#0f9d89;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:13px;

    font-weight:700;
}

/* ==================================================
   CURRICULUM
================================================== */

.pc-course-curriculum{
    background:var(--bg);
}

.pc-course-module-list{

    max-width:950px;

    margin:0 auto;
}

.pc-course-module{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    background:#fff;

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

    border-radius:22px;

    padding:24px 28px;

    margin-bottom:18px;

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

    transition:.3s;

    position:relative;

    overflow:hidden;
}

.pc-course-module:before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    bottom:0;

    width:5px;

    background:linear-gradient(
        180deg,
        #0b6bcb,
        #14b8a6
    );
}

.pc-course-module:last-child{
    margin-bottom:0;
}

.pc-course-module:hover{

    transform:translateY(-4px);

    box-shadow:
    0 20px 45px
    rgba(11,107,203,.12);
}

.pc-course-module-title{

    font-size:20px;

    font-weight:800;

    color:var(--heading);

    line-height:1.4;

    flex:1;

    padding-left:10px;
}

.pc-course-module-meta{

    background:#edf6ff;

    color:#0b6bcb;

    border-radius:50px;

    padding:10px 16px;

    font-size:13px;

    font-weight:700;

    white-space:nowrap;
}
/* ==================================================
   FAQ
================================================== */

.pc-course-faq{
    background:#fff;
}

.pc-course-faq-list{

    max-width:900px;

    margin:0 auto;
}

.pc-course-faq-item{

    background:#fff;

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

    border-radius:20px;

    padding:28px;

    margin-bottom:18px;

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

.pc-course-faq-item:last-child{
    margin-bottom:0;
}

.pc-course-faq-item h3{

    color:var(--heading);

    font-size:20px;

    font-weight:700;

    margin-bottom:12px;
}

.pc-course-faq-item p{

    color:var(--text);

    line-height:1.9;

    font-size:15px;
}

/* ==================================================
   FINAL CTA
================================================== */

.pc-course-final-cta{

    background:
    linear-gradient(
    135deg,
    #0b6bcb,
    #0d82f0
    );

    padding:100px 0;
}

.pc-course-final-box{

    max-width:900px;

    margin:0 auto;

    text-align:center;

    color:#fff;
}

.pc-course-final-box h2{

    font-size:48px;

    line-height:1.2;

    font-weight:800;

    margin-bottom:18px;
}

.pc-course-final-box p{

    font-size:18px;

    line-height:1.9;

    max-width:760px;

    margin:0 auto 35px;

    opacity:.95;
}

.pc-course-final-box .pc-course-single-btn{

    background:#fff;

    color:var(--primary);
}

.pc-course-final-box .pc-course-single-btn:hover{

    background:#f4f8ff;

    color:var(--primary-dark);
}

/* ==================================================
   WATCH COURSE HERO
================================================== */

.pc-watch-hero{

    background:
    linear-gradient(
    135deg,
    #edf6ff,
    #f9fbff
    );

    padding:70px 0;
}

.pc-watch-hero h1{

    color:var(--heading);

    font-size:46px;

    font-weight:800;

    margin-bottom:12px;
}

.pc-watch-hero p{

    color:var(--text);

    font-size:17px;

    line-height:1.8;
}

/* ==================================================
   WATCH LAYOUT
================================================== */

.pc-watch-layout{
    background:var(--bg);
}

.pc-watch-grid{

    display:grid;

    grid-template-columns:
    320px 1fr;

    gap:30px;
}

/* ==================================================
   SIDEBAR
================================================== */

.pc-watch-sidebar{

    background:#fff;

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

    border-radius:24px;

    padding:25px;

    height:fit-content;

    position:sticky;

    top:20px;

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

.pc-watch-sidebar h2{

    color:var(--heading);

    font-size:22px;

    margin-bottom:24px;
}

.pc-watch-module{
    margin-bottom:24px;
}

.pc-watch-module:last-child{
    margin-bottom:0;
}

.pc-watch-module h3{

    color:var(--heading);

    font-size:15px;

    font-weight:700;

    margin-bottom:12px;
}

.pc-watch-lessons{

    list-style:none;

    margin:0;

    padding:0;
}

.pc-watch-lessons li{
    margin-bottom:8px;
}

.pc-watch-lessons li:last-child{
    margin-bottom:0;
}

.pc-watch-lessons a{

    display:block;

    text-decoration:none;

    color:var(--text);

    background:#f8fbff;

    border-radius:12px;

    padding:12px 14px;

    transition:.3s;
}

.pc-watch-lessons a:hover{

    background:#eaf4ff;

    color:var(--primary);
}

/* ==================================================
   VIDEO CONTENT
================================================== */

.pc-watch-content{

    background:#fff;

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

    border-radius:24px;

    padding:35px;

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

.pc-watch-video{

    overflow:hidden;

    border-radius:20px;

    margin-bottom:30px;
}

.pc-watch-video iframe,
.pc-watch-video video{

    width:100%;

    height:650px;

    display:block;

    border:0;
}

.pc-watch-content h2{

    color:var(--heading);

    font-size:32px;

    font-weight:800;

    margin-bottom:16px;
}

.pc-watch-content p{

    color:var(--text);

    font-size:16px;

    line-height:2;
}

/* ==================================================
   LESSON NAVIGATION
================================================== */

.pc-watch-nav{

    display:flex;

    justify-content:space-between;

    gap:15px;

    margin-top:40px;
}

.pc-watch-nav a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:170px;

    height:54px;

    padding:0 20px;

    background:var(--primary);

    color:#fff;

    text-decoration:none;

    border-radius:14px;

    font-weight:700;

    transition:.3s;
}

.pc-watch-nav a:hover{
    background:var(--primary-dark);
}

/* ==================================================
   TABLES
================================================== */

.pc-course-content table{

    width:100%;

    border-collapse:collapse;

    margin:30px 0;
}

.pc-course-content table th{

    background:#edf6ff;

    color:var(--heading);

    padding:14px;

    border:1px solid var(--border);
}

.pc-course-content table td{

    padding:14px;

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

    color:var(--text);
}

/* ==================================================
   RESPONSIVE
================================================== */

@media(max-width:1100px){

    .pc-course-single-grid{
        grid-template-columns:1fr;
    }

    .pc-watch-grid{
        grid-template-columns:1fr;
    }

    .pc-watch-sidebar{
        position:relative;
        top:auto;
    }
}

@media(max-width:992px){

    .pc-course-title,
    .pc-course-single-title{
        font-size:46px;
    }

    .pc-course-section-head h2{
        font-size:36px;
    }

    .pc-course-final-box h2{
        font-size:40px;
    }
}

@media(max-width:768px){

    .pc-course-hero,
    .pc-course-single-hero,
    .pc-course-final-cta{
        padding:70px 0;
    }

    .pc-course-title,
    .pc-course-single-title{
        font-size:36px;
    }

    .pc-course-section-head h2{
        font-size:30px;
    }

    .pc-course-final-box h2{
        font-size:32px;
    }

    .pc-course-grid{
        grid-template-columns:1fr;
    }

    .pc-course-meta{
        grid-template-columns:1fr;
    }

    .pc-course-footer{

        flex-direction:column;

        align-items:flex-start;
    }

    .pc-course-footer .pc-course-btn{
        width:100%;
    }

    .pc-course-single-stats{
        flex-direction:column;
    }

    .pc-watch-content{
        padding:22px;
    }

    .pc-watch-video iframe,
    .pc-watch-video video{
        height:260px;
    }

    .pc-watch-nav{
        flex-direction:column;
    }

    .pc-watch-nav a{
        width:100%;
    }
}

@media(max-width:480px){

    .pc-course-title,
    .pc-course-single-title{
        font-size:30px;
    }

    .pc-course-card-content{
        padding:22px;
    }

    .pc-course-benefit-card,
    .pc-course-faq-item,
    .pc-course-module{
        padding:22px;
    }

    .pc-watch-hero h1{
        font-size:30px;
    }

    .pc-watch-content h2{
        font-size:24px;
    }
}