/*********** Virtual Academy ***********/
/* Adapted from academy.css. Legacy design system (hardcoded hex, .btn). */
/* Loads only on is_page('virtual-academy') so class names are safe to reuse. */

/*Hero*/
.academy-hero{ background: linear-gradient(180.05deg, #041E88 42.06%, rgba(54, 85, 248, 0.71) 141.9%); padding: calc(var(--il-nav-total-height) + 20px) 20px 120px 20px; position: relative; overflow: hidden; }
.academy-hero .bg-image{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.academy-hero .bg-image img{ width: 100%; height: 100%; object-fit: cover; }
.academy-hero .content{ display: flex; align-items: center; justify-content: flex-start; padding: 0 20px; position: relative; z-index: 2; }
.academy-hero .content .left{ max-width: 760px; }
.academy-hero .content .left .hero-lockup{ width: 100%; max-width: 440px; margin-bottom: 32px; display: block; }
.academy-hero .content .left h1{ color: #fff; font-size: 56px; font-weight: 700; line-height: 1.2; }
.academy-hero .content .left h2{ font-size: 24px; color: #fff; line-height: 1.4; margin-top: 20px; font-weight: 300; }
.academy-hero .content .left .btn{ margin-top: 40px; }


/*What to Expect*/
.what-to-expect{ padding: 70px 20px; background: linear-gradient(356.48deg, #E5ECF6 2.9%, #FFFFFF 97.2%); }
.what-to-expect .content{ display: flex; gap: 50px; max-width: 1200px; margin: 0 auto; }
.what-to-expect .content h3{ color: #1547BC; font-size: 36px; font-weight: 600; margin-bottom: 20px; }
.what-to-expect .content .column{ width: 50%; }
.what-to-expect .content .column p{ color: #0b141f; font-size: 18px; font-weight: 300; line-height: 1.6; }
.what-to-expect .content .column p + p{ margin-top: 18px; }
.what-to-expect .content .column p strong{ color: #1547BC; font-size: 24px; font-weight: 600; line-height: 1.4; display: block; }

.what-to-expect .content.column-icons{ justify-content: center; margin-top: 60px; gap: 110px; max-width: 1024px; }
.what-to-expect .content.column-icons .column{ display: flex; flex-direction: column; align-items: center; width: auto; }
.what-to-expect .content.column-icons .column img{ margin-bottom: 20px; }
.what-to-expect .content.column-icons .column p{ color: #1547BC; font-size: 18px; font-weight: 500; text-align: center; }


/*Details + Agenda*/
.event{ background: url("../img/academy/bg-gradient.svg") #1547bc; background-size: cover; color: #FFF; padding: 70px 20px; }
.event .content{ display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; }
.event .content .column .blue-box{ background-color: #103BAC; border-radius: 16px; padding: 20px; margin-bottom: 15px; width: 380px; }
.event .content .column .blue-box .detail-eyebrow{ display: block; font-size: 18px; font-weight: 600; color: #FFAF1A; margin-bottom: 6px; }
.event .content .column .blue-box h3{ font-size: 34px; font-weight: 600; }
.event .content .column .blue-box h4{ font-size: 18px; font-weight: 300; margin: 4px 0; line-height: 1.4; }
.event .content .column .blue-box h4 strong{ font-weight: 500; }
.event .content .column .blue-box p{ font-size: 16px; font-weight: 300; line-height: 1.5; margin-top: 16px; display: inline-block; }
.event .content .column .blue-box span.price{ margin-top: 8px; display: block; font-size: 32px; font-weight: 600; color: #FFAF1A; }
.event .content .column .blue-box .btn{ width: 100%; margin-top: 18px; }

.event .show-agenda{ display: none; }

.event .content .agenda{ display: flex; gap: 35px; width: calc(100% - 450px); }
.event .content .agenda .agenda-list{ font-size: 16px; font-weight: 400; width: 100%; }
.event .content .agenda .agenda-list .agenda-day{ font-size: 22px; font-weight: 600; padding: 0 10px 8px; border-bottom: 1px solid rgba(255,255,255,0.25); margin-bottom: 8px; }
.event .content .agenda .agenda-list .agenda-item{ display: flex; padding: 10px; align-items: center; max-width: 100%; margin: 5px 0; }
.event .content .agenda .agenda-list .agenda-item img{ margin-right: 15px; width: 26px; }
.event .content .agenda .agenda-list .agenda-item span{ font-size: 16px; font-weight: 600; }
.event .content .agenda .agenda-list .agenda-item span strong{ font-size: 13px; font-weight: 400; display: inline-block; padding-left: 5px; }
.event .content .agenda .agenda-list .agenda-item p{ font-size: 16px; font-weight: 400; }
.event .content .agenda .agenda-list .agenda-item.session{ background: #1853DD; border-radius: 8px; padding: 10px; }

.event .content.banner-agenda{ background-color: #103BAC; border-radius: 8px; padding: 35px; display: flex; align-items: center; justify-content: space-between; margin-top: 50px; }
.event .content.banner-agenda .column span{ font-size: 21px; font-weight: 600; }
.event .content.banner-agenda .column p{ font-size: 16px; font-weight: 300; margin-top: 10px; }


/*Meet the Experts*/
.meet-the-experts{ padding: 60px 20px; background: linear-gradient(356.47deg, #FFFFFF 12.14%, #E5ECF6 50.76%); }
.meet-the-experts .meet-the-experts-bg{ padding: 55px 40px; margin: 0 auto; max-width: 1240px; background: url(../img/academy/meet-the-experts-bg.svg) #cddff4; border-radius: 16px; }
.meet-the-experts .content{ display: flex; justify-content: space-between; gap: 20px; color: #1547BC; }
.meet-the-experts .content h3{ font-weight: 600; font-size: 36px; width: 100%; text-align: center; margin-bottom: 40px; }
.meet-the-experts .content .column{ max-width: 330px; display: flex; flex-direction: column; align-items: center; }
.meet-the-experts .content .column img{ width: 172px; margin-bottom: 25px; }
.meet-the-experts .content .column span{ font-weight: 600; font-size: 22px; text-align: center; margin-bottom: 10px; }
.meet-the-experts .content .column p{ font-weight: 300; font-size: 16px; text-align: center; color: #0A3371; }

/*Top 3 Reasons to Attend*/
.reasons-to-attend{ padding: 40px 20px 60px; }
.reasons-to-attend .content{ display: flex; justify-content: center; gap: 60px; max-width: 1200px; margin: 0 auto; }
.reasons-to-attend .content h3{ font-weight: 600; font-size: 36px; width: 100%; text-align: center; margin-bottom: 40px; color: #1547BC; }
.reasons-to-attend .content .column{ max-width: 335px; display: flex; flex-direction: column; align-items: center; }
.reasons-to-attend .content .column img{ width: 56px; }
.reasons-to-attend .content .column span{ color: #1547BC; font-weight: 600; font-size: 20px; text-align: center; display: block; margin: 17px 0 5px; }
.reasons-to-attend .content .column p{ color: #0b141f; font-weight: 300; font-size: 16px; text-align: center; }

/*What People Are Saying*/
.people{ background-image: url("../img/academy/people-bg.svg"); background-size: cover; padding: 100px 0; }
.people .content{ display: flex; gap: 24px; justify-content: center; }
.people .content h3{ font-weight: 600; font-size: 36px; width: 100%; text-align: center; margin-bottom: 70px; color: #1547BC; }
.people .content .column{ max-width: 440px; display: flex; gap: 20px; flex-direction: column; }
.people .content .column .card{ width: 100%; border-radius: 16px; background: #FFF; padding: 30px 24px; box-shadow: 0 0.6px 61.8px 0 #1533551A; }
.people .content .column .card .card-header{ display: flex; margin-bottom: 15px; position: relative; }
.people .content .column .card .card-header img{ width: 56px; margin-right: 20px; }
.people .content .column .card .card-header h4{ color: #1547BC; font-weight: 600; font-size: 22px; }
.people .content .column .card .card-header p{ font-weight: 300; font-size: 16px; color: #041835; }
.people .content .column .card p{ font-weight: 300; font-size: 18px; line-height: 160%; }

.people .content .column .chevron{ display: none; }

/*Frequently asked questions*/
.faqs-section.academy{ background: linear-gradient(180deg, #E5ECF6 0%, #F4F7FB 100%); margin-top: -5px; }
.faqs-section.academy .content{ max-width: 960px; margin: 0 auto; }
.faqs-section.academy h3{ color: #1547BC; font-size: 36px; font-weight: 600; text-align: center; margin-bottom: 50px; }
.faqs-section.shown{ padding: 100px 20px 100px 20px; }

/* Card-style FAQ items */
.faqs-section.academy .accordion{ display: flex; flex-direction: column; gap: 16px; }
.faqs-section.academy .accordion .item{ background: #FFF; border-radius: 16px; padding: 28px 32px; box-shadow: 0 1px 3px rgba(15, 36, 98, 0.04), 0 4px 16px rgba(15, 36, 98, 0.06); border-left: 4px solid #1547BC; transition: box-shadow 0.25s ease, transform 0.25s ease; }
.faqs-section.academy .accordion .item:hover{ box-shadow: 0 2px 4px rgba(15, 36, 98, 0.06), 0 8px 24px rgba(15, 36, 98, 0.1); transform: translateY(-1px); }
.faqs-section.academy .accordion .item .question{ padding-bottom: 12px; }
.faqs-section.academy .accordion .item .question p{ font-size: 20px; font-weight: 600; color: #041E88; line-height: 1.4; padding-right: 0; padding-bottom: 0; margin: 0; }
.faqs-section.shown .accordion .item .answer { max-height: 1000px; opacity: 1; padding-bottom: 0; font-size: 17px; line-height: 1.6; color: #2B3A55; }
.faqs-section.shown .accordion .item .answer p{ color: #2B3A55; margin: 0; }
.faqs-section.shown .accordion .item .answer p + p{ margin-top: 12px; }
.faqs-section.shown .accordion .item .answer p strong{ font-weight: 600; color: #041E88; }


/*Responsive*/

@media screen and (max-width: 1024px){

    .hero-all-features.academy-hero { padding: calc(var(--il-nav-total-height) + 40px) 20px 80px; }
    .academy-hero .content .left .hero-lockup{ max-width: 320px; margin-bottom: 24px; }
    .hero-all-features.academy-hero .content .left h2 { max-width: 100%; margin-top: 20px; }

    .event .content{ flex-direction: column; }
    .event .content .column .blue-box { max-width: 100%; width: 100%; }
    .event .content.banner-agenda{ flex-direction: row; }

    .event .show-agenda{ width: 100%; background: #103BAC; display: flex; justify-content: space-between; border-radius: 10px; padding: 20px 15px; text-transform: uppercase; margin-top: 15px; }
    .event .show-agenda img{ transition: all .3s; }
    .event .show-agenda.active img{ transform: rotate(180deg); }
    .event .content{ gap: 0; }
    .event .content .column{ width: 100%; }
    .event .content .agenda{ max-height: 0; overflow: hidden; transition: all 0.3s; width: 100%; }
    .event .content .agenda.show{ max-height: 1500px; }
    .event .content.banner-agenda{ margin-top: 15px; }

    .people .content{ flex-direction: column; gap: 0; }
    .people .content .column{ max-width: 100%; margin-bottom: 0; gap: 0; }
    .people .content .column .card{ margin-bottom: 20px; padding: 23px 16px; }
    .people .content .column .card .card-header{ padding-right: 40px; margin-bottom: 0; }
    .people .content .column .chevron{ display: block; position: absolute; top: 50%; margin-top: -5px; right: 10px; width: 12px !important; margin-right: 0 !important; transition: all .3s; }
    .people .content .column .card .quote{ max-height: 0; overflow: hidden; transition: all .3s; font-size: 15px; }
    .people .content .column .card .card-header img{ width: 46px; margin-right: 15px; }
    .people .content .column .card .card-header h4{ font-size: 20px; }
    .people .content .column .card .card-header p{ font-size: 15px; }

    .people .content .column .card.show .quote{ max-height: 600px; overflow: visible; margin-top: 20px; }
    .people .content .column .card.show .chevron{ transform: rotate(180deg); }

    .faqs-section.shown { padding: 50px 20px; }
    .faqs-section.academy h3{ margin-bottom: 30px; }

}

@media screen and (max-width: 767px){

    .academy-hero .content .left h1{ font-size: 38px; }
    .academy-hero .content .left h2{ font-size: 20px; }

    .what-to-expect .content h3, .meet-the-experts .content h3, .reasons-to-attend .content h3, .people .content h3, .faqs-section.shown h3, .faqs-section.academy h3{ font-size: 28px; }

    .faqs-section.academy .accordion{ gap: 12px; }
    .faqs-section.academy .accordion .item{ padding: 22px 22px; border-radius: 14px; border-left-width: 3px; }
    .faqs-section.academy .accordion .item .question p{ font-size: 18px; }
    .faqs-section.shown .accordion .item .answer { font-size: 16px; }

    .hero-all-features.academy-hero { padding: calc(var(--il-nav-total-height) + 30px) 20px 60px; }

    .what-to-expect .content { flex-direction: column; }
    .what-to-expect .content .column { width: 100%; }
    .what-to-expect .content.column-icons { gap: 40px; }
    .what-to-expect .content .column p strong{ font-size: 20px; }

    .event .content .agenda { flex-direction: column; width: 100%; gap: 0; }
    .event .content .agenda .agenda-list .agenda-item { max-width: 100%; }
    .event .content .agenda .agenda-list + .agenda-list{ margin-top: 20px; }

    .meet-the-experts .content { flex-direction: column; gap: 30px; }
    .meet-the-experts .content .column { max-width: 100%; }

    .reasons-to-attend .content { flex-direction: column; align-items: center; gap: 30px; }

    .faqs-section.shown { padding: 20px 20px; }

}

@media screen and (max-width: 540px){

    .hero-all-features.academy-hero { padding: calc(var(--il-nav-total-height) + 20px) 20px 50px; }
    .academy-hero .content .left .hero-lockup{ max-width: 260px; }

    .what-to-expect { padding: 50px 20px; }

    .event { padding: 40px 20px; }
    .event .content.banner-agenda { flex-direction: column; }
    .event .content.banner-agenda .column{ width: 100%; }
    .event .content.banner-agenda .column .btn { width: 100%; }

    .meet-the-experts { padding: 30px 20px; }

}