/* ==========================================================
   AlterMind - Free Lectures Page
   Version: 1.0
   ========================================================== */


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

.free-lectures-hero{
    position:relative;
    overflow:hidden;
    padding:190px 0 120px;
    background:
        radial-gradient(circle at top right,
        rgba(110,70,255,.18),
        transparent 45%),
        radial-gradient(circle at bottom left,
        rgba(0,212,255,.10),
        transparent 40%);
}

.free-lectures-hero::before{

    content:"";
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        rgba(255,255,255,.02),
        rgba(255,255,255,.01)
    );

    pointer-events:none;

}

.free-lectures-hero .section-title{

    max-width:850px;
    margin:auto;
    position:relative;
    z-index:2;

}

.free-lectures-hero .section-title span{

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

    padding:8px 18px;

    border-radius:100px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:var(--accent);

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:22px;

}

.free-lectures-hero h1{

    font-size:clamp(42px,6vw,68px);

    line-height:1.1;

    margin-bottom:24px;

    color:#fff;

}

.free-lectures-hero p{

    max-width:760px;

    margin:0 auto;

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

    font-size:1.08rem;

    line-height:1.9;

}

.free-lectures-hero .am-buttons{

    margin-top:45px;

    justify-content:center;

    gap:18px;

}

.free-lectures-hero .btn{

    min-width:210px;

}

.free-lectures-hero .btn-secondary{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

}

.free-lectures-hero .btn-secondary:hover{

    background:rgba(255,255,255,.10);

}


/* ==========================================================
   COMMON SECTION SPACING
   ========================================================== */

.featured-lecture,
.lecture-library,
.free-lectures-faq,
.free-lectures-cta{

    padding:100px 0;

}

.featured-lecture .section-title,
.lecture-library .section-title,
.free-lectures-faq .section-title,
.free-lectures-cta .section-title{

    max-width:760px;

    margin:0 auto 70px;

}

.featured-lecture .section-title span,
.lecture-library .section-title span,
.free-lectures-faq .section-title span,
.free-lectures-cta .section-title span{

    color:var(--accent);

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.featured-lecture h2,
.lecture-library h2,
.free-lectures-faq h2,
.free-lectures-cta h2{

    margin-top:16px;

    margin-bottom:20px;

    font-size:clamp(32px,4vw,48px);

    color:#fff;

}

.featured-lecture p,
.lecture-library p,
.free-lectures-faq p,
.free-lectures-cta p{

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

    line-height:1.9;

}


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

.lecture-library .grid-3{

    display:grid;

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

    gap:32px;

}


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

.reveal{

    transition:
    transform .6s ease,
    opacity .6s ease;

}


/* ==========================================================
   GLASS EFFECT
   ========================================================== */

.featured-lecture-card,
.lecture-card{

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    transition:.35s ease;

}

.featured-lecture-card:hover,
.lecture-card:hover{

    transform:translateY(-8px);

    border-color:rgba(124,92,255,.35);

    box-shadow:

        0 20px 60px rgba(0,0,0,.25),

        0 0 40px rgba(124,92,255,.10);

}

/* ==========================================================
   FEATURED LECTURE
   ========================================================== */

.featured-lecture-card{

    max-width:980px;

    margin:auto;

    padding:60px;

    display:grid;

    grid-template-columns:1fr;

    position:relative;

    overflow:hidden;

}

.featured-lecture-card::before{

    content:"";

    position:absolute;

    top:-120px;
    right:-120px;

    width:260px;
    height:260px;

    border-radius:50%;

    background:radial-gradient(
        rgba(124,92,255,.25),
        transparent 70%
    );

    pointer-events:none;

}

.featured-lecture-card h3{

    font-size:2rem;

    color:#fff;

    margin:20px 0;

}

.featured-lecture-card p{

    max-width:760px;

    line-height:1.9;

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

    margin-bottom:35px;

}

.lecture-meta{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

}

.lecture-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 16px;

    border-radius:100px;

    font-size:.82rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.05em;

}

.lecture-tag.featured{

    background:rgba(124,92,255,.18);

    color:#8d7dff;

    border:1px solid rgba(124,92,255,.30);

}

.lecture-duration{

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

    font-size:.9rem;

}


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

.lecture-outcomes{

    display:grid;

    grid-template-columns:repeat(2,minmax(220px,1fr));

    gap:18px;

    margin:40px 0;

    padding:0;

    list-style:none;

}

.lecture-outcomes li{

    position:relative;

    padding:18px 20px 18px 52px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.06);

    border-radius:14px;

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

    transition:.3s ease;

}

.lecture-outcomes li:hover{

    transform:translateY(-4px);

    border-color:rgba(124,92,255,.28);

    background:rgba(255,255,255,.06);

}

.lecture-outcomes li::before{

    content:"✓";

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    width:22px;
    height:22px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--accent);

    color:#fff;

    font-size:.8rem;

    font-weight:700;

}


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

.featured-lecture-card .am-buttons{

    margin-top:35px;

}

.featured-lecture-card .btn{

    min-width:220px;

}


/* ==========================================================
   FEATURED ANIMATION
   ========================================================== */

.featured-lecture-card:hover .lecture-tag.featured{

    transform:scale(1.05);

    transition:.25s ease;

}

/* ==========================================================
   LECTURE LIBRARY
   ========================================================== */

.lecture-library{

    position:relative;

}

.lecture-library .grid-3{

    margin-top:20px;

}

.lecture-card{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:35px;

    min-height:380px;

    position:relative;

}

.lecture-card h3{

    margin:22px 0 18px;

    font-size:1.5rem;

    color:#ffffff;

    transition:.3s ease;

}

.lecture-card p{

    flex:1;

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

    line-height:1.8;

    margin-bottom:30px;

}

.lecture-card:hover h3{

    color:var(--accent);

}

.lecture-card .am-buttons{

    margin-top:auto;

}


/* ==========================================================
   STATUS BADGES
   ========================================================== */

.lecture-card .lecture-tag{

    width:max-content;

}

.lecture-tag.coming-soon{

    background:rgba(255,193,7,.12);

    color:#ffd24d;

    border:1px solid rgba(255,193,7,.25);

}

.lecture-tag.featured{

    background:rgba(124,92,255,.16);

    color:#8d7dff;

}


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

.lecture-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

    padding:1px;

    background:linear-gradient(
        135deg,
        rgba(124,92,255,.18),
        transparent,
        rgba(0,212,255,.12)
    );

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

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    opacity:0;

    transition:.35s ease;

}

.lecture-card:hover::before{

    opacity:1;

}


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

.lecture-card .btn{

    width:100%;

}

.lecture-card .btn:disabled{

    cursor:not-allowed;

    opacity:.55;

    background:rgba(255,255,255,.08);

    border-color:rgba(255,255,255,.08);

}


/* ==========================================================
   CARD ICON PLACEHOLDER
   ========================================================== */

.lecture-card::after{

    content:"🎓";

    position:absolute;

    top:26px;

    right:28px;

    font-size:1.8rem;

    opacity:.15;

    transition:.35s ease;

}

.lecture-card:hover::after{

    transform:scale(1.15);

    opacity:.35;

}


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

@media (max-width:1100px){

    .lecture-library .grid-3{

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

    }

}

@media (max-width:768px){

    .lecture-library .grid-3{

        grid-template-columns:1fr;

    }

    .lecture-card{

        min-height:auto;

    }

}
/* ==========================================================
   FAQ
   ========================================================== */

.free-lectures-faq{

    position:relative;

}

.free-lectures-faq .faq-item{

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:28px 32px;

    margin-bottom:24px;

    transition:.3s ease;

}

.free-lectures-faq .faq-item:hover{

    border-color:rgba(124,92,255,.30);

    transform:translateY(-4px);

}

.free-lectures-faq .faq-item h3{

    color:#ffffff;

    margin-bottom:12px;

    font-size:1.15rem;

}

.free-lectures-faq .faq-item p{

    margin:0;

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

    line-height:1.8;

}


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

.free-lectures-cta{

    position:relative;

}

.free-lectures-cta .section-title{

    max-width:900px;

    padding:70px 60px;

    border-radius:28px;

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

}

.free-lectures-cta .section-title h2{

    margin-bottom:20px;

}

.free-lectures-cta .section-title p{

    margin-bottom:35px;

}

.free-lectures-cta .am-buttons{

    justify-content:center;

}


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

.free-lectures-hero .btn,
.featured-lecture-card .btn,
.lecture-card .btn,
.free-lectures-cta .btn{

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}

.free-lectures-hero .btn:hover,
.featured-lecture-card .btn:hover,
.lecture-card .btn:hover,
.free-lectures-cta .btn:hover{

    transform:translateY(-3px);

    box-shadow:0 14px 30px rgba(124,92,255,.18);

}


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

.featured-lecture,
.lecture-library,
.free-lectures-faq{

    border-bottom:1px solid rgba(255,255,255,.05);

}


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

@media (max-width:992px){

    .featured-lecture-card{

        padding:40px;

    }

    .lecture-outcomes{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .free-lectures-hero{

        padding:100px 0 70px;

    }

    .featured-lecture,
    .lecture-library,
    .free-lectures-faq,
    .free-lectures-cta{

        padding:70px 0;

    }

    .featured-lecture-card{

        padding:30px;

    }

    .free-lectures-cta .section-title{

        padding:40px 28px;

    }

    .free-lectures-hero .btn,
    .featured-lecture-card .btn,
    .lecture-card .btn,
    .free-lectures-cta .btn{

        width:100%;

    }

    .free-lectures-hero .am-buttons{

        flex-direction:column;

    }

}

@media (max-width:480px){

    .free-lectures-hero h1{

        font-size:2.4rem;

    }

    .lecture-card{

        padding:28px;

    }

    .lecture-card h3{

        font-size:1.3rem;

    }

    .featured-lecture-card h3{

        font-size:1.6rem;

    }

}


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

.btn:focus-visible{

    outline:2px solid var(--accent);

    outline-offset:3px;

}

.lecture-card,
.featured-lecture-card{

    will-change:transform;

}