/* =========================================================
   PMAI LAB — FACULTY PAGE
   Version 3.0
   Professional Academic Team Directory
========================================================= */

/* FACULTY PAGE INTERNATIONAL ACADEMIC REFINEMENT */
.faculty-page { color: var(--home-ink, #10213d); background: #fff; }
.faculty-page section { scroll-margin-top: var(--pmai-navbar-height, 79px); }
.faculty-page .faculty-hero { min-height: 0; justify-content: flex-start; padding: 78px 24px 76px; text-align: left; overflow: hidden; background: linear-gradient(120deg, #f7fbff 0%, #fff 54%, #e9f7f6 100%); }
.faculty-page .faculty-hero::before { content: "∑    ∫    ∂    ∇    λ    π"; position: absolute; top: 22%; right: -2%; color: rgba(33,103,232,.07); font: 4rem Georgia, serif; letter-spacing: .8rem; white-space: pre; }
.faculty-page .faculty-hero-content { position: relative; width: min(1200px, 100%); max-width: 1200px; margin: 0 auto; padding-right: 390px; }
.faculty-page .faculty-hero-content::after { content: "FACULTY / PMAI LAB"; position: absolute; top: -30px; right: 0; color: #8998aa; font-size: .65rem; font-weight: 800; letter-spacing: .15em; }
.faculty-page .faculty-hero .section-label { color: var(--home-blue, #2167e8); letter-spacing: .14em; }.faculty-page .faculty-hero .section-label::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--home-cyan, #18b9c7); box-shadow: 0 0 0 5px rgba(24,185,199,.12); }
.faculty-page .faculty-hero h1 { margin: 18px 0 22px; color: var(--home-ink, #10213d); font: 400 clamp(3.4rem, 6vw, 5.8rem)/.95 Georgia, "Times New Roman", serif; letter-spacing: 0; }.faculty-page .faculty-hero p:not(.section-label) { max-width: 650px; margin: 0; color: var(--home-muted, #65738a); font-size: 1.08rem; line-height: 1.8; }
.faculty-page .faculty-hero-content::before { display: none; }
.faculty-page .faculty-hero-visual { position: absolute; right: 0; bottom: 2px; width: 320px; height: 210px; padding: 22px; display: flex; align-items: flex-end; border: 1px solid rgba(33,103,232,.22); color: rgba(16,33,61,.55); background: radial-gradient(circle at 50% 45%, rgba(24,185,199,.16), transparent 35%), linear-gradient(145deg, rgba(255,255,255,.25), rgba(219,234,254,.48)); font-size: .57rem; font-weight: 800; letter-spacing: .1em; box-shadow: 18px 20px 0 rgba(33,103,232,.06); }
.faculty-page .faculty-hero-visual::after { content: "PEOPLE  →  KNOWLEDGE  →  COLLABORATION"; }
.faculty-page .faculty-directory { padding: 78px 24px 100px; background: #fff; }.faculty-page .faculty-grid { max-width: 1200px; gap: 18px; }.faculty-page .faculty-card { min-height: 320px; border-radius: 0; box-shadow: 0 7px 22px rgba(16,33,61,.05); }.faculty-page .faculty-card:hover { transform: translateY(-4px); border-color: #94b8e5; box-shadow: 0 17px 34px rgba(16,33,61,.1); }.faculty-page .faculty-photo { min-height: 320px; background: linear-gradient(145deg, #dcebf0, #f4f7fb); }.faculty-page .faculty-photo img { filter: saturate(.88); }.faculty-page .faculty-info { padding: 26px; }.faculty-page .faculty-number { color: var(--home-blue, #2167e8); letter-spacing: .14em; }.faculty-page .faculty-info h2 { color: var(--home-ink, #10213d); font: 1.5rem/1.18 Georgia, serif; letter-spacing: 0; }.faculty-page .faculty-department { color: var(--home-blue, #2167e8); }.faculty-page .faculty-tags span { border-radius: 3px; background: #edf6fb; color: #34718d; }.faculty-page .faculty-profile { color: var(--home-blue, #2167e8); }.faculty-page .faculty-profile:hover { transform: translateX(3px); }
.faculty-page .faculty-expertise { padding: 88px 24px; background: #f3f7fb; }.faculty-page .expertise-list { max-width: 1000px; margin: 0 auto; }.faculty-page .expertise-list span { border-radius: 3px; border-color: #cbd9e6; color: #53667d; background: #fff; }.faculty-page .faculty-cta { padding: 86px 24px; background: linear-gradient(110deg, #d9fbf3, #e8e2ff); }.faculty-page .faculty-cta::before, .faculty-page .faculty-cta::after { display: none; }.faculty-page .faculty-cta .section-heading h2 { color: var(--home-ink, #10213d); font-family: Georgia, serif; }.faculty-page .faculty-cta .btn { border-radius: 5px; transition: transform .25s ease, box-shadow .25s ease; }.faculty-page .faculty-cta .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(33,103,232,.15); }
.faculty-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }.faculty-reveal.is-visible { opacity: 1; transform: none; }
@media (max-width: 900px) { .faculty-page .faculty-hero-content { padding-right: 0; }.faculty-page .faculty-hero-visual { position: relative; right: auto; bottom: auto; width: 100%; max-width: 560px; height: 150px; margin-top: 42px; }.faculty-page .faculty-hero-content::after { top: -24px; }.faculty-page .faculty-grid { grid-template-columns: 1fr; max-width: 650px; }.faculty-page .faculty-card { grid-template-columns: 180px minmax(0, 1fr); }.faculty-page .faculty-photo { min-height: 330px; } }
@media (max-width: 600px) { .faculty-page .faculty-hero { padding: 54px 16px 60px; }.faculty-page .faculty-hero::before { font-size: 2rem; letter-spacing: .4rem; }.faculty-page .faculty-hero h1 { font-size: clamp(2.9rem, 15vw, 4.2rem); }.faculty-page .faculty-directory, .faculty-page .faculty-expertise, .faculty-page .faculty-cta { padding-left: 16px; padding-right: 16px; }.faculty-page .faculty-card { display: block; }.faculty-page .faculty-photo { min-height: 280px; max-height: 340px; }.faculty-page .faculty-info { padding: 22px; }.faculty-page .faculty-info h2 { font-size: 1.35rem; }.faculty-page .faculty-cta .hero-buttons { align-items: stretch; }.faculty-page .faculty-cta .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .faculty-reveal { opacity: 1; transform: none; }.faculty-page .faculty-card, .faculty-page .faculty-photo img, .faculty-page .faculty-cta .btn { transition: none; } }


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

.faculty-hero {

    min-height: 430px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 100px 20px 90px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #f8fafc 0%,
            #eff6ff 50%,
            #f8fafc 100%
        );

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

}


.faculty-hero-content {

    width: 100%;

    max-width: 900px;

    margin: 0 auto;

}


.faculty-hero .section-label {

    margin-bottom: 12px;

}


.faculty-hero h1 {

    margin: 15px 0 25px;

    color: var(--primary);

    font-size: clamp(
        2.5rem,
        5vw,
        4.2rem
    );

    line-height: 1.08;

    letter-spacing: -1px;

}


.faculty-hero p:not(.section-label) {

    max-width: 720px;

    margin: 0 auto;

    color: var(--text-light);

    font-size: 1.08rem;

    line-height: 1.8;

}


/* =========================================================
   FACULTY INTRODUCTION
========================================================= */

.faculty-introduction {

    padding-top: 90px;

    padding-bottom: 45px;

}


.faculty-introduction .section-heading {

    max-width: 850px;

    margin-left: auto;

    margin-right: auto;

}


.faculty-introduction .section-heading p:not(.section-label) {

    max-width: 720px;

    margin-left: auto;

    margin-right: auto;

}


/* =========================================================
   FACULTY DIRECTORY
========================================================= */

.faculty-directory {

    padding-top: 45px;

    padding-bottom: 100px;

}


.faculty-grid {

    width: 100%;

    max-width: 1250px;

    margin: 0 auto;

    display: grid;

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

    gap: 30px;

}


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

.faculty-card {

    position: relative;

    display: grid;

    grid-template-columns:
        190px minmax(0, 1fr);

    min-height: 360px;

    overflow: hidden;

    background: #ffffff;

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

    border-radius: 18px;

    box-shadow:
        0 8px 30px rgba(
            15,
            23,
            42,
            0.04
        );

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

}


.faculty-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 4px;

    height: 100%;

    background: var(--accent);

    opacity: 0;

    transition: opacity 0.3s ease;

}


.faculty-card:hover {

    transform: translateY(-6px);

    border-color: var(--accent);

    box-shadow:
        0 20px 55px rgba(
            15,
            23,
            42,
            0.10
        );

}


.faculty-card:hover::before {

    opacity: 1;

}


/* =========================================================
   FACULTY PHOTO
========================================================= */

.faculty-photo {

    position: relative;

    min-height: 360px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #e2e8f0,
            #f8fafc
        );

}


.faculty-photo::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(15, 23, 42, 0.10),
            transparent 40%
        );

    pointer-events: none;

}


.faculty-photo img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.5s ease;

}


.faculty-card:hover .faculty-photo img {

    transform: scale(1.04);

}


/* =========================================================
   FACULTY INFORMATION
========================================================= */

.faculty-info {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    padding: 30px;

}


.faculty-number {

    display: inline-flex;

    align-items: center;

    min-height: 24px;

    margin-bottom: 12px;

    color: var(--accent);

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;

}


.faculty-info h2 {

    margin: 0 0 8px;

    color: var(--primary);

    font-size: 1.45rem;

    line-height: 1.25;

}


.faculty-designation {

    margin: 0 0 7px;

    color: var(--text);

    font-size: 0.88rem;

    font-weight: 700;

    line-height: 1.55;

}


.faculty-department {

    margin: 0 0 17px;

    color: var(--accent);

    font-size: 0.80rem;

    font-weight: 600;

    line-height: 1.55;

}


.faculty-description {

    margin: 0 0 20px;

    color: var(--text-light);

    font-size: 0.88rem;

    line-height: 1.7;

}


/* =========================================================
   FACULTY TAGS
========================================================= */

.faculty-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: auto;

    margin-bottom: 20px;

}


.faculty-tags span {

    display: inline-flex;

    align-items: center;

    padding: 6px 10px;

    border: 1px solid #dbeafe;

    border-radius: 30px;

    background: #eff6ff;

    color: var(--accent);

    font-size: 0.68rem;

    font-weight: 700;

    line-height: 1.2;

    transition:
        background 0.25s ease,
        border-color 0.25s ease;

}


.faculty-card:hover .faculty-tags span {

    border-color: #bfdbfe;

}


/* =========================================================
   PROFILE LINK
========================================================= */

.faculty-profile {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: var(--accent);

    font-size: 0.85rem;

    font-weight: 800;

    text-decoration: none;

    transition:
        color 0.25s ease,
        transform 0.25s ease;

}


.faculty-profile:hover {

    color: var(--primary);

    transform: translateX(3px);

}


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

.faculty-expertise {

    padding-top: 90px;

    padding-bottom: 90px;

    background: var(--surface);

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

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

}


.faculty-expertise .section-heading {

    max-width: 850px;

    margin-left: auto;

    margin-right: auto;

}


.faculty-expertise .section-heading p:not(.section-label) {

    max-width: 700px;

    margin-left: auto;

    margin-right: auto;

}


/* =========================================================
   EXPERTISE LIST
========================================================= */

.expertise-list {

    width: 100%;

    max-width: 1050px;

    margin: 35px auto 0;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 11px;

}


.expertise-list span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 16px;

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

    border-radius: 30px;

    background: #ffffff;

    color: var(--text);

    font-size: 0.82rem;

    font-weight: 600;

    line-height: 1.3;

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

}


.expertise-list span:hover {

    transform: translateY(-2px);

    border-color: var(--accent);

    box-shadow:
        0 8px 20px rgba(
            15,
            23,
            42,
            0.06
        );

}


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

.faculty-cta {

    padding: 100px 20px;

}


.faculty-cta .section-heading {

    max-width: 850px;

    margin-left: auto;

    margin-right: auto;

}


.faculty-cta .section-heading p:not(.section-label) {

    max-width: 700px;

    margin-left: auto;

    margin-right: auto;

}


/* =========================================================
   CTA BUTTON AREA
========================================================= */

.faculty-cta .hero-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 30px;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1150px) {

    .faculty-grid {

        max-width: 1000px;

        gap: 24px;

    }


    .faculty-card {

        grid-template-columns:
            165px minmax(0, 1fr);

        min-height: 350px;

    }


    .faculty-photo {

        min-height: 350px;

    }


    .faculty-info {

        padding: 25px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .faculty-grid {

        grid-template-columns: 1fr;

        max-width: 760px;

    }


    .faculty-card {

        grid-template-columns:
            210px minmax(0, 1fr);

        min-height: 350px;

    }


    .faculty-photo {

        min-height: 350px;

    }


    .faculty-info {

        padding: 30px;

    }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 700px) {

    .faculty-hero {

        min-height: 390px;

        padding: 75px 20px;

    }


    .faculty-hero h1 {

        font-size: 2.7rem;

    }


    .faculty-introduction {

        padding-top: 70px;

        padding-bottom: 30px;

    }


    .faculty-directory {

        padding-top: 30px;

        padding-bottom: 75px;

    }


    .faculty-card {

        grid-template-columns: 170px minmax(0, 1fr);

        min-height: 320px;

    }


    .faculty-photo {

        min-height: 320px;

    }


    .faculty-info {

        padding: 24px;

    }


    .faculty-info h2 {

        font-size: 1.3rem;

    }


    .faculty-description {

        font-size: 0.84rem;

    }


    .faculty-expertise {

        padding-top: 70px;

        padding-bottom: 70px;

    }


    .faculty-cta {

        padding: 75px 20px;

    }

}


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

@media (max-width: 560px) {

    .faculty-hero {

        min-height: 370px;

        padding: 65px 18px;

    }


    .faculty-hero h1 {

        margin-top: 12px;

        margin-bottom: 20px;

        font-size: 2.35rem;

        letter-spacing: -0.5px;

    }


    .faculty-hero p:not(.section-label) {

        font-size: 0.95rem;

        line-height: 1.7;

    }


    .faculty-introduction {

        padding-top: 60px;

        padding-bottom: 25px;

    }


    .faculty-directory {

        padding: 25px 15px 65px;

    }


    .faculty-grid {

        gap: 20px;

    }


    .faculty-card {

        display: grid;

        grid-template-columns: 1fr;

        min-height: auto;

        border-radius: 16px;

    }


    .faculty-photo {

        width: 100%;

        height: 310px;

        min-height: 310px;

    }


    .faculty-photo img {

        object-position: center top;

    }


    .faculty-info {

        padding: 25px 22px 27px;

    }


    .faculty-number {

        margin-bottom: 10px;

    }


    .faculty-info h2 {

        font-size: 1.4rem;

    }


    .faculty-designation {

        font-size: 0.84rem;

    }


    .faculty-department {

        font-size: 0.78rem;

    }


    .faculty-description {

        font-size: 0.85rem;

        line-height: 1.65;

    }


    .faculty-tags {

        margin-top: 0;

    }


    .faculty-profile {

        font-size: 0.84rem;

    }


    .faculty-expertise {

        padding: 65px 18px;

    }


    .expertise-list {

        margin-top: 28px;

        gap: 8px;

    }


    .expertise-list span {

        padding: 8px 12px;

        font-size: 0.75rem;

    }


    .faculty-cta {

        padding: 70px 18px;

    }


    .faculty-cta .hero-buttons {

        flex-direction: column;

        width: 100%;

    }


    .faculty-cta .hero-buttons .btn {

        width: 100%;

        max-width: 300px;

        text-align: center;

    }

}


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

@media (max-width: 380px) {

    .faculty-hero h1 {

        font-size: 2.05rem;

    }


    .faculty-photo {

        height: 280px;

        min-height: 280px;

    }


    .faculty-info {

        padding: 22px 18px 24px;

    }


    .faculty-info h2 {

        font-size: 1.25rem;

    }


    .faculty-tags span {

        padding: 5px 8px;

        font-size: 0.64rem;

    }


    .expertise-list span {

        font-size: 0.7rem;

    }

}


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

.faculty-profile:focus-visible,
.expertise-list span:focus-visible {

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

    outline-offset: 3px;

}


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

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

    .faculty-card,
    .faculty-photo img,
    .faculty-profile,
    .expertise-list span {

        transition: none;

    }


    .faculty-card:hover {

        transform: none;

    }


    .faculty-card:hover .faculty-photo img {

        transform: none;

    }


    .faculty-profile:hover {

        transform: none;

    }


    .expertise-list span:hover {

        transform: none;

    }

}