/* ==========================================================
   COURSES SECTION
   FEATURE FRAMES
   PREMIUM CREATIVE INSTITUTE
   BLACK + ORANGE + WHITE
========================================================== */


/* ==========================================================
   VARIABLES
========================================================== */

:root{

    --course-radius:28px;

    --course-gap:2rem;

    --course-overlay:
        linear-gradient(
            180deg,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,.35) 35%,
            rgba(0,0,0,.92) 100%
        );

    --course-glass:
        rgba(255,255,255,.08);

    --course-border:
        rgba(0,0,0,.12);

    --course-shadow:
        0 20px 45px rgba(0,0,0,.16);

    --course-shadow-hover:
        0 35px 70px rgba(0,0,0,.24);

    --accent1:#F99B1D;

    --accent2:#F99B1D;

    --accent3:#F99B1D;

    --text-light:#FFFFFF;

    --text-dark:#000000;

    --text-soft:#555555;

}


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

.courses{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:#FFFFFF;

    color:#000000;

}


/* ==========================================================
   DECORATIVE BACKGROUND
   SUBTLE ORANGE ONLY
========================================================== */

.courses::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(249,155,29,.08),
            transparent 70%
        );

    top:-180px;

    left:-120px;

    pointer-events:none;

}

.courses::after{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(249,155,29,.06),
            transparent 70%
        );

    right:-250px;

    bottom:-200px;

    pointer-events:none;

}


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

.courses-grid{

    display:grid;

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

    gap:var(--course-gap);

}


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

.course-card{

    position:relative;

    overflow:hidden;

    border-radius:var(--course-radius);

    cursor:pointer;

    isolation:isolate;

    background:#111111;

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

    transition:
        transform .55s cubic-bezier(.2,.8,.2,1),
        box-shadow .55s,
        border-color .55s;

    border:2px solid #000000;

}


/* ==========================================================
   CARD BORDER
========================================================== */

.course-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:inherit;

    background:

        linear-gradient(
            135deg,
            #F99B1D,
            rgba(249,155,29,.15),
            #F99B1D
        );

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;

    opacity:0;

    transition:.45s;

    z-index:10;

}

.course-card:hover::before{

    opacity:1;

}


/* ==========================================================
   CARD HOVER
========================================================== */

.course-card:hover{

    transform:
        translateY(-14px);

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

}


/* ==========================================================
   MEDIA
========================================================== */

.course-media{

    position:relative;

    overflow:hidden;

    aspect-ratio:16/10;

    background:#000000;

}

.course-media img,
.course-media video{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .8s ease,
        filter .8s ease;

}

.course-card:hover img,
.course-card:hover video{

    transform:scale(1.08);

    filter:
        brightness(1.05)
        contrast(1.05)
        saturate(1.15);

}


/* ==========================================================
   OVERLAY
========================================================== */

.course-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:28px;

    background:
        var(--course-overlay);

    z-index:2;

}


/* ==========================================================
   ORANGE HOVER OVERLAY
========================================================== */

.course-overlay::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            135deg,
            rgba(249,155,29,.20),
            rgba(0,0,0,0)
        );

    opacity:0;

    transition:.5s;

}

.course-card:hover
.course-overlay::before{

    opacity:1;

}


/* ==========================================================
   DURATION
========================================================== */

.course-duration{

    width:max-content;

    padding:10px 18px;

    border-radius:100px;

    backdrop-filter:blur(12px);

    background:
        rgba(249,155,29,.90);

    border:1px solid
        #F99B1D;

    color:#FFFFFF;

    font-size:.82rem;

    font-weight:600;

    margin-bottom:18px;

    letter-spacing:.4px;

    transition:
        transform .45s,
        background .45s,
        color .45s;

}

.course-card:hover
.course-duration{

    transform:
        translateY(-4px);

    background:#F99B1D;

    color:#FFFFFF;

}


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

.course-overlay h3{

    color:#FFFFFF;

    font-size:2rem;

    line-height:1.15;

    font-weight:700;

    margin:0;

    transition:

        transform .45s,

        letter-spacing .45s,

        color .45s;

}

.course-card:hover h3{

    transform:
        translateY(-5px);

    letter-spacing:.5px;

    color:#FFFFFF;

}


/* ==========================================================
   PREMIUM HOVER EFFECTS
========================================================== */

.course-card{

    transform-style:preserve-3d;

    will-change:transform;

    transition:

        transform .55s cubic-bezier(.2,.8,.2,1),

        box-shadow .55s ease,

        border-color .45s ease;

}


/* ==========================================================
   ORANGE GLOW RING
========================================================== */

.course-card::after{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    background:

        linear-gradient(
            135deg,
            #F99B1D,
            #FFFFFF,
            #F99B1D,
            #F99B1D
        );

    background-size:300% 300%;

    opacity:0;

    z-index:-1;

    filter:blur(20px);

    animation:
        orangeGlow 8s linear infinite;

    transition:opacity .45s;

}

.course-card:hover::after{

    opacity:.45;

}

@keyframes orangeGlow{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}


/* ==========================================================
   IMAGE DARKEN
========================================================== */

.course-media::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            to bottom,
            transparent,
            rgba(0,0,0,.15),
            rgba(0,0,0,.55)
        );

    z-index:1;

    transition:.45s;

}

.course-card:hover
.course-media::before{

    background:

        linear-gradient(
            to bottom,
            transparent,
            rgba(249,155,29,.12),
            rgba(0,0,0,.78)
        );

}


/* ==========================================================
   SHINE EFFECT
========================================================== */

.course-card .shine{

    position:absolute;

    top:0;

    left:-160%;

    width:60%;

    height:100%;

    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(255,255,255,.28),

            transparent

        );

    transform:skewX(-25deg);

    pointer-events:none;

}

.course-card:hover .shine{

    animation:
        shineMove 1.2s ease;

}

@keyframes shineMove{

    100%{

        left:170%;

    }

}


/* ==========================================================
   FLOATING ORANGE CIRCLE
========================================================== */

.course-card .floating-circle{

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(249,155,29,.35),

            transparent

        );

    top:-110px;

    right:-100px;

    opacity:0;

    pointer-events:none;

    transition:.5s;

}

.course-card:hover .floating-circle{

    opacity:1;

    transform:scale(1.2);

}


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

.course-overlay h3{

    transition:

        transform .45s,

        letter-spacing .45s,

        color .45s;

}

.course-card:hover h3{

    transform:
        translateY(-5px);

    letter-spacing:.5px;

    color:#FFFFFF;

}


/* ==========================================================
   DURATION BADGE
========================================================== */

.course-duration{

    transition:

        transform .45s,

        background .45s,

        color .45s;

}

.course-card:hover
.course-duration{

    transform:
        translateY(-4px);

    background:
        #F99B1D;

    color:#FFFFFF;

}


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

.course-media video{

    width:100%;

    height:100%;

    object-fit:cover;

    pointer-events:none;

}

.course-card:hover video{

    transform:scale(1.08);

    filter:

        brightness(1.1)

        saturate(1.25)

        contrast(1.08);

}


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

.course-media img{

    transition:

        transform .8s ease,

        filter .8s ease;

}

.course-card:hover img{

    transform:scale(1.08);

    filter:

        brightness(1.08)

        saturate(1.18);

}


/* ==========================================================
   GLASS OVERLAY
========================================================== */

.course-overlay{

    backdrop-filter:blur(0px);

    transition:

        backdrop-filter .45s,

        background .45s;

}

.course-card:hover
.course-overlay{

    backdrop-filter:blur(2px);

}


/* ==========================================================
   BORDER
========================================================== */

.course-card:hover{

    border-color:
        #F99B1D;

}


/* ==========================================================
   CURSOR
========================================================== */

.course-card{

    cursor:pointer;

}


/* ==========================================================
   ACTIVE CLICK
========================================================== */

.course-card:active{

    transform:
        scale(.98);

}


/* ==========================================================
   KEYBOARD ACCESSIBILITY
========================================================== */

.course-card:focus-visible{

    outline:none;

    box-shadow:

        0 0 0 4px

        rgba(249,155,29,.35);

}


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

@media(max-width:768px){

    .course-overlay{

        padding:22px;

    }

    .course-overlay h3{

        font-size:1.45rem;

    }

    .course-duration{

        font-size:.75rem;

    }

    .course-card:hover{

        transform:none;

    }

    .course-card:hover img,
    .course-card:hover video{

        transform:scale(1.04);

    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

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

    *{

        animation:none!important;

        transition:none!important;

        scroll-behavior:auto!important;

    }

}


/* ==========================================================
   REVEAL
========================================================== */

.course-card.show-card{

    opacity:1 !important;

    transform:translateY(0) !important;

}


/* ==========================================================
   COURSE INFO
========================================================== */

.course-info{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    margin-bottom:12px;

}

.course-info i{

    color:#F99B1D;

    transition:.35s;

}

.course-card:hover .course-info i{

    transform:
        translateX(8px);

}


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

.course-meta{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}

.course-meta span{

    background:
        rgba(249,155,29,.12);

    border:1px solid
        rgba(249,155,29,.45);

    padding:8px 14px;

    border-radius:100px;

    color:#FFFFFF;

    font-size:.8rem;

}


/* ==========================================================
   FEATURED BADGE
========================================================== */

.course-badge{

    position:absolute;

    top:20px;

    right:20px;

    background:#F99B1D;

    color:#FFFFFF;

    padding:8px 14px;

    border-radius:100px;

    font-size:.75rem;

    font-weight:600;

    box-shadow:

        0 10px 25px

        rgba(249,155,29,.35);

}


/* ==========================================================
   EXTRA ORANGE ACCENT
========================================================== */

.course-card .course-info i{

    color:#F99B1D;

}

.course-card:hover .course-info i{

    color:#F99B1D;

}


/* ==========================================================
   CLEAN WHITE SECTION SUPPORT
========================================================== */

.courses .section-title{

    position:relative;

    z-index:2;

    color:#000000;

}

.courses .section-title p{

    color:#000000;

}

.courses .section-title span{

    color:#F99B1D;

}