/* ==========================================================
   TK Featured
   Version 2.0 - Production
   ----------------------------------------------------------
   01. Variables
   02. Base
   03. Section
   04. Container
   05. Header
   06. Navigation
========================================================== */


/* ==========================================================
   01. Variables
========================================================== */

.tkfeatured{

    /* Brand */
    --tkfeatured-primary:#0F766E;
    --tkfeatured-primary-hover:#115E59;

    /* Surface */
    --tkfeatured-bg:#F8FAFC;
    --tkfeatured-card:#FFFFFF;

    /* Text */
    --tkfeatured-title:#0F172A;
    --tkfeatured-text:#64748B;

    /* Border */
    --tkfeatured-border:#E5E7EB;
    --tkfeatured-light:#F1F5F9;
    --tkfeatured-pagination:#CBD5E1;

    /* Radius */
    --tkfeatured-radius-sm:10px;
    --tkfeatured-radius-md:12px;
    --tkfeatured-radius-lg:18px;
    --tkfeatured-radius-pill:999px;

    /* Space */
    --tkfeatured-space-xs:8px;
    --tkfeatured-space-sm:12px;
    --tkfeatured-space-md:18px;
    --tkfeatured-space-lg:24px;
    --tkfeatured-space-xl:40px;

    /* Shadow */
    --tkfeatured-shadow:
        0 8px 30px rgba(15,23,42,.06);

    --tkfeatured-shadow-hover:
        0 18px 45px rgba(15,23,42,.12);

    /* Transition */
    --tkfeatured-transition:all .35s ease;

}


/* ==========================================================
   02. Base
========================================================== */

.tkfeatured *,
.tkfeatured *::before,
.tkfeatured *::after{

    box-sizing:border-box;

}

.tkfeatured img{

    display:block;

    max-width:100%;

    height:auto;

}

.tkfeatured a{

    text-decoration:none;

}


/* ==========================================================
   03. Section
========================================================== */

.tkfeatured{

    padding:70px 0;

    background:var(--tkfeatured-bg);

}


/* ==========================================================
   04. Container
========================================================== */

.tkfeatured .container{

    width:100%;

    max-width:1280px;

    margin:0 auto;

}


/* ==========================================================
   05. Header
========================================================== */

.tkfeatured-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:var(--tkfeatured-space-xl);

    margin-bottom:38px;

}

.tkfeatured-header-left{

    flex:1;

    min-width:0;

}

.tkfeatured-subtitle{

    display:inline-flex;

    align-items:center;

    gap:var(--tkfeatured-space-xs);

    margin-bottom:var(--tkfeatured-space-sm);

    font-size:13px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:var(--tkfeatured-primary);

}

.tkfeatured-title{

    margin:0;

    font-size:34px;

    line-height:1.25;

    font-weight:700;

    color:var(--tkfeatured-title);

}

.tkfeatured-desc{

    max-width:650px;

    margin-top:16px;

    color:var(--tkfeatured-text);

    font-size:16px;

    line-height:1.75;

}

.tkfeatured-header-right{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-end;

    gap:var(--tkfeatured-space-md);

    flex-shrink:0;

}


/* ==========================================================
   06. Navigation
========================================================== */

.tkfeatured-navigation{

    display:flex;

    align-items:center;

    gap:var(--tkfeatured-space-sm);

}

.tkfeatured-prev,
.tkfeatured-next{

    display:flex;

    justify-content:center;

    align-items:center;

    width:44px;

    height:44px;

    padding:0;

    border:none;

    border-radius:var(--tkfeatured-radius-pill);

    background:#fff;

    color:var(--tkfeatured-title);

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

    cursor:pointer;

    transition:var(--tkfeatured-transition);

}

.tkfeatured-prev:hover,
.tkfeatured-next:hover{

    background:var(--tkfeatured-primary);

    color:#fff;

    transform:translateY(-2px);

}

.tkfeatured-prev i,
.tkfeatured-next i{

    font-size:18px;

}

.tkfeatured-all{

    display:inline-flex;

    align-items:center;

    gap:var(--tkfeatured-space-xs);

    color:var(--tkfeatured-primary);

    font-size:15px;

    font-weight:600;

    transition:var(--tkfeatured-transition);

}

.tkfeatured-all i{

    transition:transform .3s ease;

}

.tkfeatured-all:hover{

    color:var(--tkfeatured-primary-hover);

}

.tkfeatured-all:hover i{

    transform:translateX(4px);

}
/* ==========================================================
   07. Swiper
========================================================== */

.tkfeatured-slider{

    position:relative;

    overflow:hidden;

    padding:6px 2px 12px;

}

.tkfeatured-slider .swiper-wrapper{

    align-items:stretch;

}

.tkfeatured-slider .swiper-slide{

    display:flex;

    height:auto;

    box-sizing:border-box;

}


/* ==========================================================
   08. Card
========================================================== */

.tkfeatured-card{

    display:flex;

    flex-direction:column;

    width:100%;
    min-height:100%;

    background:var(--tkfeatured-card);

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

    border-radius:var(--tkfeatured-radius-lg);

    overflow:hidden;

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

    will-change:transform;

    transition:var(--tkfeatured-transition);

}

.tkfeatured-card:hover{

    transform:translateY(-8px);

    border-color:rgba(15,118,110,.15);

    box-shadow:var(--tkfeatured-shadow-hover);

}


/* ==========================================================
   09. Thumbnail
========================================================== */

.tkfeatured-image{

    position:relative;

    display:block;

    overflow:hidden;

    aspect-ratio:16 / 9;

    background:var(--tkfeatured-light);

}

.tkfeatured-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .45s ease;

}

.tkfeatured-card:hover .tkfeatured-image img{

    transform:scale(1.05);

}


/* ==========================================================
   10. Card Body
========================================================== */

.tkfeatured-body{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:var(--tkfeatured-space-lg);

}


/* ==========================================================
   11. Badge
========================================================== */

.tkfeatured-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    align-self:flex-start;

    min-height:30px;

    padding:6px 14px;

    margin-bottom:var(--tkfeatured-space-md);

    border-radius:var(--tkfeatured-radius-pill);

    background:var(--badge-color,var(--tkfeatured-primary));

    color:#fff;

    font-size:12px;

    font-weight:700;

    line-height:1;

    white-space:nowrap;

    transition:var(--tkfeatured-transition);

}

.tkfeatured-card:hover .tkfeatured-badge{

    filter:brightness(1.05);

}


/* ==========================================================
   12. Course Title
========================================================== */

.tkfeatured-course-title{

    margin:0 0 var(--tkfeatured-space-lg);

    min-height:64px;

    font-size:22px;

    font-weight:700;

    line-height:1.45;

}

.tkfeatured-course-title a{

    color:var(--tkfeatured-title);

    transition:var(--tkfeatured-transition);

}

.tkfeatured-card:hover .tkfeatured-course-title a{

    color:var(--tkfeatured-primary);

}
/* ==========================================================
   13. Meta
========================================================== */

.tkfeatured-meta{

    display:flex;

    flex-direction:column;

    gap:var(--tkfeatured-space-md);

    margin-top:auto;

}

.tkfeatured-meta-item{

    display:flex;

    align-items:flex-start;

    gap:14px;

}

.tkfeatured-meta-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:42px;

    height:42px;

    border-radius:12px;

    background:var(--tkfeatured-light);

    font-size:20px;

    line-height:1;

    user-select:none;

    transition:var(--tkfeatured-transition);

}

.tkfeatured-card:hover .tkfeatured-meta-icon{

    background:rgba(15,118,110,.08);

}

.tkfeatured-meta-content{

    flex:1;

    min-width:0;

}

.tkfeatured-meta-label{

    display:block;

    margin-bottom:4px;

    color:var(--tkfeatured-text);

    font-size:13px;

    font-weight:600;

    line-height:1.4;

}

.tkfeatured-meta-value{

    color:var(--tkfeatured-title);

    font-size:15px;

    font-weight:700;

    line-height:1.6;

    word-break:break-word;

}


/* ==========================================================
   14. Divider
========================================================== */

.tkfeatured-divider{

    width:100%;

    height:1px;

    margin:var(--tkfeatured-space-lg) 0
           20px;

    background:linear-gradient(
        90deg,
        transparent 0%,
        var(--tkfeatured-border) 20%,
        var(--tkfeatured-border) 80%,
        transparent 100%
    );

}


/* ==========================================================
   15. Footer
========================================================== */

.tkfeatured-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:var(--tkfeatured-space-sm);

}


/* ==========================================================
   16. Button
========================================================== */

.tkfeatured-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--tkfeatured-primary);

    font-size:15px;

    font-weight:700;

    line-height:1.4;

    transition:var(--tkfeatured-transition);

}

.tkfeatured-btn i{

    font-size:14px;

    transition:transform .3s ease;

}

.tkfeatured-btn:hover{

    color:var(--tkfeatured-primary-hover);

}

.tkfeatured-btn:hover i{

    transform:translateX(4px);

}


/* ==========================================================
   17. Accessibility
========================================================== */

.tkfeatured-btn:focus-visible,
.tkfeatured-all:focus-visible,
.tkfeatured-prev:focus-visible,
.tkfeatured-next:focus-visible{

    outline:2px solid var(--tkfeatured-primary);

    outline-offset:3px;

    border-radius:var(--tkfeatured-radius-sm);

}
/* ==========================================================
   18. Pagination
========================================================== */

.tkfeatured-pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:36px;

}

.tkfeatured-pagination .swiper-pagination-bullet{

    width:10px;

    height:10px;

    margin:0 6px !important;

    border-radius:var(--tkfeatured-radius-pill);

    background:var(--tkfeatured-pagination);

    opacity:1;

    transition:var(--tkfeatured-transition);

}

.tkfeatured-pagination .swiper-pagination-bullet-active{

    width:28px;

    background:var(--tkfeatured-primary);

}


/* ==========================================================
   19. Shared Animation
========================================================== */

.tkfeatured-card,
.tkfeatured-image img,
.tkfeatured-badge,
.tkfeatured-btn,
.tkfeatured-all,
.tkfeatured-prev,
.tkfeatured-next,
.tkfeatured-meta-icon,
.tkfeatured-pagination .swiper-pagination-bullet{

    transition:var(--tkfeatured-transition);

}


/* ==========================================================
   20. Responsive
========================================================== */

@media (max-width:991px){

    .tkfeatured{

        padding:56px 0;

    }

    .tkfeatured-header{

        flex-direction:column;

        gap:var(--tkfeatured-space-lg);

    }

    .tkfeatured-header-right{

        width:100%;

        flex-direction:row;

        justify-content:space-between;

        align-items:center;

    }

    .tkfeatured-title{

        font-size:30px;

    }

    .tkfeatured-body{

        padding:22px;

    }

}

@media (max-width:767px){

    .tkfeatured{

        padding:48px 0;

    }

    .tkfeatured-title{

        font-size:26px;

    }

    .tkfeatured-desc{

        font-size:15px;

    }

    .tkfeatured-header-right{

        flex-direction:column;

        align-items:flex-start;

        gap:var(--tkfeatured-space-md);

    }

    .tkfeatured-navigation{

        order:2;

    }

    .tkfeatured-all{

        order:1;

    }

    .tkfeatured-body{

        padding:20px;

    }

    .tkfeatured-course-title{

        min-height:auto;

        margin-bottom:20px;

        font-size:20px;

    }

    .tkfeatured-meta{

        gap:16px;

    }

    .tkfeatured-meta-item{

        gap:12px;

    }

    .tkfeatured-meta-icon{

    width:38px;

    height:38px;

    border-radius:10px;

    font-size:18px;

    }

    .tkfeatured-prev,
    .tkfeatured-next{

        width:40px;

        height:40px;

    }

}

@media (max-width:480px){

    .tkfeatured{

        padding:40px 0;

    }

    .tkfeatured-title{

        font-size:24px;

    }

    .tkfeatured-body{

        padding:18px;

    }

    .tkfeatured-badge{

        font-size:11px;

    }

    .tkfeatured-meta-value{

        font-size:14px;

    }

}


/* ==========================================================
   21. Reduced Motion
========================================================== */

@media (prefers-reduced-motion:reduce){

    .tkfeatured *,
    .tkfeatured *::before,
    .tkfeatured *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/* ==========================================================
   22. Print
========================================================== */

@media print{

    .tkfeatured-navigation,
    .tkfeatured-pagination{

        display:none !important;

    }

    .tkfeatured-card{

        box-shadow:none;

        border:1px solid #999;

    }

}


/* ==========================================================
   23. Performance
========================================================== */

.tkfeatured-card{

    backface-visibility:hidden;

    transform:translateZ(0);

}

.tkfeatured-image{

    contain:layout paint;

}

.tkfeatured-image img{

    backface-visibility:hidden;

}