/* =========================================================
   PMAI LAB — PREMIUM CARDS & HOME SECTIONS
   File: assets/css/cards.css
   Version: 2.0
========================================================= */


/* =========================================================
   SHARED CARD VARIABLES
========================================================= */

:root {

    --card-radius: 20px;

    --card-radius-small: 14px;

    --card-shadow:
        0 10px 35px rgba(15, 23, 42, 0.06);

    --card-shadow-hover:
        0 20px 50px rgba(15, 23, 42, 0.11);

}


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

.intro-section {

    max-width: 1200px;

    margin: 0 auto;

    position: relative;

}


/* =========================================================
   INTRODUCTION HEADING
========================================================= */

.intro-section .section-heading {

    max-width: 850px;

}


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

.intro-stats {

    max-width: 900px;

    margin: 45px auto 0;

    display: grid;

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

    gap: 20px;

}


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

.stat-card {

    position: relative;

    padding: 32px 24px;

    text-align: center;

    overflow: hidden;

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

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

    background:
        rgba(255, 255, 255, 0.9);

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

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

}


/* Decorative glow */

.stat-card::before {

    content: "";

    position: absolute;

    width: 100px;

    height: 100px;

    top: -50px;

    right: -40px;

    border-radius: 50%;

    background:
        rgba(37, 99, 235, 0.07);

}


/* Hover */

.stat-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(37, 99, 235, 0.25);

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

}


/* Number */

.stat-card strong {

    position: relative;

    z-index: 2;

    display: block;

    margin-bottom: 7px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    font-size: 2.5rem;

    line-height: 1;

    font-weight: 850;

}


/* Label */

.stat-card span {

    position: relative;

    z-index: 2;

    color:
        var(--text-light);

    font-size:
        0.9rem;

    font-weight:
        650;

}


/* =========================================================
   ACADEMIC AREA ICONS
========================================================= */

.area-icon {

    width: 58px;

    height: 58px;

    margin-bottom: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #eef2ff
        );

    border:
        1px solid
        rgba(37, 99, 235, 0.10);

    color:
        var(--accent);

    font-size:
        1.05rem;

    font-weight:
        850;

    box-shadow:
        0 8px 20px
        rgba(37, 99, 235, 0.08);

    transition:
        transform 0.3s ease,
        background 0.3s ease;

}


/* Icon hover */

.area-card:hover .area-icon {

    transform:
        translateY(-3px)
        scale(1.04);

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #ede9fe
        );

}


/* =========================================================
   ACADEMIC AREA CARDS
========================================================= */

.area-card {

    position: relative;

    overflow: hidden;

    padding: 32px;

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

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

    background:
        rgba(255, 255, 255, 0.95);

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

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

}


/* Top accent line */

.area-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform 0.3s ease;

}


/* Hover */

.area-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(37, 99, 235, 0.20);

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

}


.area-card:hover::before {

    transform:
        scaleX(1);

}


/* Heading */

.area-card h3 {

    margin-bottom:
        12px;

    color:
        var(--primary);

    font-size:
        1.25rem;

    line-height:
        1.3;

    letter-spacing:
        -0.02em;

}


/* Description */

.area-card p {

    margin-bottom:
        22px;

    color:
        var(--text-light);

    font-size:
        0.94rem;

    line-height:
        1.75;

}


/* Link */

.area-card a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    color:
        var(--accent);

    font-size:
        0.88rem;

    font-weight:
        750;

    transition:
        gap 0.25s ease;

}


.area-card a:hover {

    gap:
        10px;

}


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

.course-preview-grid {

    max-width:
        1200px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        22px;

}


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

.course-card {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        310px;

    padding:
        30px;

    overflow:
        hidden;

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

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

    background:
        var(--background);

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

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

}


/* Decorative background */

.course-card::after {

    content: "";

    position:
        absolute;

    width:
        150px;

    height:
        150px;

    right:
        -70px;

    bottom:
        -70px;

    border-radius:
        50%;

    background:
        rgba(37, 99, 235, 0.06);

    transition:
        transform 0.3s ease;

}


/* Hover */

.course-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(37, 99, 235, 0.25);

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

}


.course-card:hover::after {

    transform:
        scale(1.25);

}


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

.course-category {

    position:
        relative;

    z-index:
        2;

    display:
        inline-flex;

    width:
        fit-content;

    margin-bottom:
        15px;

    padding:
        6px 10px;

    border-radius:
        999px;

    background:
        #eff6ff;

    color:
        var(--accent);

    font-size:
        0.66rem;

    font-weight:
        850;

    letter-spacing:
        1px;

}


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

.course-card h3 {

    position:
        relative;

    z-index:
        2;

    margin-bottom:
        12px;

    color:
        var(--primary);

    font-size:
        1.25rem;

    line-height:
        1.3;

    letter-spacing:
        -0.02em;

}


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

.course-card p {

    position:
        relative;

    z-index:
        2;

    margin-bottom:
        22px;

    color:
        var(--text-light);

    font-size:
        0.92rem;

    line-height:
        1.7;

}


/* =========================================================
   COURSE LINK
========================================================= */

.course-card a {

    position:
        relative;

    z-index:
        2;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    margin-top:
        auto;

    color:
        var(--accent);

    font-size:
        0.88rem;

    font-weight:
        750;

    transition:
        gap 0.25s ease;

}


.course-card a:hover {

    gap:
        11px;

}


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

.section-action {

    margin-top:
        42px;

    text-align:
        center;

}


/* =========================================================
   WHY PMAI SECTION
========================================================= */

#why-pmai {

    position:
        relative;

    overflow:
        hidden;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #f1f5f9 100%
        );

}


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

.why-grid {

    max-width:
        1150px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        20px;

}


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

.why-card {

    position:
        relative;

    padding:
        30px;

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

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

    background:
        rgba(255,255,255,0.92);

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

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

}


/* Number marker */

.why-card::before {

    content:
        "";

    display:
        block;

    width:
        38px;

    height:
        4px;

    margin-bottom:
        22px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );

}


/* Hover */

.why-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(37, 99, 235, 0.20);

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

}


/* Heading */

.why-card h3 {

    margin-bottom:
        11px;

    color:
        var(--primary);

    font-size:
        1.1rem;

    line-height:
        1.35;

}


/* Paragraph */

.why-card p {

    color:
        var(--text-light);

    font-size:
        0.9rem;

    line-height:
        1.7;

}


/* =========================================================
   FACULTY PREVIEW
========================================================= */

#faculty-preview {

    position:
        relative;

}


/* =========================================================
   FACULTY PREVIEW BOX
========================================================= */

.faculty-preview-box {

    max-width:
        1000px;

    margin:
        0 auto;

    padding:
        35px 40px;

    display:
        grid;

    grid-template-columns:
        0.7fr 1.3fr auto;

    align-items:
        center;

    gap:
        30px;

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

    border-radius:
        22px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f8fafc
        );

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

    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease;

}


.faculty-preview-box:hover {

    transform:
        translateY(-5px);

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

}


/* Faculty strong text */

.faculty-preview-box strong {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--primary);

    font-size:
        1.45rem;

    line-height:
        1.2;

}


/* Faculty secondary text */

.faculty-preview-box span {

    display:
        block;

    color:
        var(--text-light);

    font-size:
        0.88rem;

}


/* =========================================================
   SEMINARS PREVIEW
========================================================= */

#seminars-preview {

    position:
        relative;

    text-align:
        center;

    background:
        var(--background);

}


/* =========================================================
   SEMINAR TOPICS
========================================================= */

.seminar-topics {

    max-width:
        950px;

    margin:
        0 auto 38px;

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        11px;

}


/* Topic pill */

.seminar-topics span {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        10px 17px;

    border:
        1px solid
        rgba(37, 99, 235, 0.12);

    border-radius:
        999px;

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #eef2ff
        );

    color:
        var(--accent);

    font-size:
        0.84rem;

    font-weight:
        700;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.seminar-topics span:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 8px 20px
        rgba(37, 99, 235, 0.10);

}


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

#final-cta {

    position:
        relative;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #0b1f3a 0%,
            #102a4c 55%,
            #172554 100%
        );

    color:
        white;

}


/* Decorative circles */

#final-cta::before {

    content:
        "";

    position:
        absolute;

    width:
        360px;

    height:
        360px;

    top:
        -180px;

    right:
        -100px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        50%;

}


#final-cta::after {

    content:
        "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    bottom:
        -150px;

    left:
        -100px;

    border:
        1px solid
        rgba(255,255,255,0.06);

    border-radius:
        50%;

}


/* Keep content above decoration */

#final-cta .section-heading {

    position:
        relative;

    z-index:
        2;

}


/* Label */

#final-cta .section-label {

    color:
        #93c5fd;

}


/* Heading */

#final-cta .section-heading h2 {

    color:
        white;

}


/* Description */

#final-cta .section-heading p {

    color:
        #cbd5e1;

}


/* CTA buttons */

#final-cta .hero-buttons {

    margin-top:
        28px;

}


/* Secondary button */

#final-cta .btn-secondary {

    background:
        white;

    border-color:
        white;

    color:
        var(--primary);

}


#final-cta .btn-secondary:hover {

    background:
        #eff6ff;

    border-color:
        #eff6ff;

    color:
        var(--accent);

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1050px) {

    .course-preview-grid {

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

    }


    .why-grid {

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

    }


    .faculty-preview-box {

        grid-template-columns:
            1fr 1fr;

    }


    .faculty-preview-box .btn {

        grid-column:
            1 / -1;

        justify-self:
            center;

    }

}


/* =========================================================
   RESPONSIVE — SMALL TABLET
========================================================= */

@media (max-width: 800px) {

    .intro-stats {

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

        gap:
            14px;

    }


    .stat-card {

        padding:
            25px 15px;

    }


    .stat-card strong {

        font-size:
            2.1rem;

    }


    .faculty-preview-box {

        grid-template-columns:
            1fr;

        text-align:
            center;

    }


    .faculty-preview-box .btn {

        grid-column:
            auto;

        justify-self:
            center;

    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 650px) {

    .intro-stats {

        grid-template-columns:
            1fr;

        max-width:
            400px;

    }


    .stat-card {

        padding:
            28px 20px;

    }


    .course-preview-grid {

        grid-template-columns:
            1fr;

    }


    .why-grid {

        grid-template-columns:
            1fr;

    }


    .area-card,
    .course-card,
    .why-card {

        padding:
            26px;

    }


    .faculty-preview-box {

        padding:
            30px 24px;

    }


    .seminar-topics {

        gap:
            8px;

    }


    .seminar-topics span {

        font-size:
            0.78rem;

        padding:
            8px 13px;

    }


    #final-cta .hero-buttons {

        flex-direction:
            column;

        align-items:
            center;

    }


    #final-cta .hero-buttons .btn {

        width:
            100%;

        max-width:
            320px;

    }

}


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

@media (max-width: 420px) {

    .stat-card strong {

        font-size:
            2rem;

    }


    .area-card,
    .course-card,
    .why-card {

        padding:
            23px;

    }


    .course-card {

        min-height:
            280px;

    }


    .faculty-preview-box {

        padding:
            26px 20px;

    }

}


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

.area-card a:focus-visible,
.course-card a:focus-visible,
.faculty-preview-box a:focus-visible,
.seminar-topics span:focus-visible {

    outline:
        3px solid
        rgba(37, 99, 235, 0.45);

    outline-offset:
        4px;

}


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

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

    .stat-card,
    .area-card,
    .area-icon,
    .course-card,
    .why-card,
    .faculty-preview-box,
    .seminar-topics span,
    .area-card a,
    .course-card a {

        transition:
            none;

    }

}