/* =========================================================
   PMAI LAB — PREMIUM GLOBAL STYLESHEET
   Python, Mathematics & Artificial Intelligence Lab
   File: assets/css/style.css
   Version: 3.0
========================================================= */


/* =========================================================
   GLOBAL RESET
========================================================= */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   ROOT DESIGN SYSTEM
========================================================= */

:root {

    /* ---------- Brand ---------- */

    --primary: #0b1f3a;

    --primary-dark: #071426;

    --accent: #2563eb;

    --accent-dark: #1d4ed8;

    --accent-light: #dbeafe;


    /* ---------- Backgrounds ---------- */

    --background: #ffffff;

    --surface: #f8fafc;

    --surface-alt: #f1f5f9;

    --surface-blue: #eff6ff;


    /* ---------- Typography ---------- */

    --text: #0f172a;

    --text-secondary: #334155;

    --text-light: #64748b;

    --text-muted: #94a3b8;


    /* ---------- Borders ---------- */

    --border: #e2e8f0;

    --border-light: #edf2f7;

    --border-dark: #cbd5e1;


    /* ---------- White ---------- */

    --white: #ffffff;


    /* ---------- Radius ---------- */

    --radius-sm: 8px;

    --radius-md: 12px;

    --radius-lg: 18px;

    --radius-xl: 24px;

    --radius-pill: 999px;


    /* ---------- Shadows ---------- */

    --shadow-sm:
        0 4px 12px rgba(15, 23, 42, 0.05);

    --shadow-md:
        0 10px 30px rgba(15, 23, 42, 0.08);

    --shadow-lg:
        0 20px 50px rgba(15, 23, 42, 0.10);

    --shadow-xl:
        0 30px 80px rgba(15, 23, 42, 0.13);


    /* ---------- Layout ---------- */

    --container-width: 1200px;

    --content-width: 850px;

    --section-padding: 100px;


    /* ---------- Transitions ---------- */

    --transition-fast:
        0.2s ease;

    --transition:
        0.3s ease;

    --transition-slow:
        0.5s ease;

}


/* =========================================================
   HTML
========================================================= */

html {

    scroll-behavior: smooth;

    scroll-padding-top: 80px;

}


/* =========================================================
   BODY
========================================================= */

body {

    min-height: 100vh;

    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background: var(--background);

    color: var(--text);

    font-size: 16px;

    line-height: 1.7;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

}


/* =========================================================
   IMAGES
========================================================= */

img {

    max-width: 100%;

    height: auto;

    display: block;

}


/* =========================================================
   LINKS
========================================================= */

a {

    color: inherit;

    text-decoration: none;

}


a:focus-visible {

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

    outline-offset: 4px;

}


/* =========================================================
   BUTTON SYSTEM
========================================================= */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 48px;

    padding:
        0 22px;

    border:
        1px solid transparent;

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

    font-size: 0.95rem;

    font-weight: 700;

    line-height: 1;

    cursor: pointer;

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);

}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.btn-primary {

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #12345f
        );

    color: var(--white);

    border-color:
        var(--primary);

    box-shadow:
        0 8px 20px
        rgba(11, 31, 58, 0.16);

}


.btn-primary:hover {

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent-dark)
        );

    border-color:
        var(--accent);

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 25px
        rgba(37, 99, 235, 0.22);

}


/* =========================================================
   SECONDARY BUTTON
========================================================= */

.btn-secondary {

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

    color:
        var(--primary);

    border-color:
        var(--border);

}


.btn-secondary:hover {

    background:
        var(--white);

    color:
        var(--accent);

    border-color:
        var(--accent);

    transform:
        translateY(-2px);

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

}


/* =========================================================
   BUTTON ACTIVE
========================================================= */

.btn:active {

    transform:
        translateY(0);

}


/* =========================================================
   GENERAL SECTION SYSTEM
========================================================= */

section {

    position: relative;

    padding:
        var(--section-padding) 20px;

}


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

.section-container {

    width:
        min(
            calc(100% - 40px),
            var(--container-width)
        );

    margin:
        0 auto;

}


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

.section-heading {

    max-width:
        var(--content-width);

    margin:
        0 auto 52px;

    text-align:
        center;

}


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

.section-label {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        14px;

    color:
        var(--accent);

    font-size:
        0.75rem;

    font-weight:
        800;

    letter-spacing:
        0.14em;

    line-height:
        1.4;

    text-transform:
        uppercase;

}


/* Decorative line before section label */

.section-label::before {

    content:
        "";

    width:
        22px;

    height:
        2px;

    margin-right:
        9px;

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

    background:
        var(--accent);

}


/* =========================================================
   SECTION HEADING H2
========================================================= */

.section-heading h2 {

    margin-bottom:
        17px;

    color:
        var(--primary);

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    line-height:
        1.12;

    letter-spacing:
        -0.035em;

}


/* =========================================================
   SECTION HEADING PARAGRAPH
========================================================= */

.section-heading p {

    color:
        var(--text-light);

    font-size:
        1rem;

    line-height:
        1.8;

}


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

.section-action {

    display:
        flex;

    justify-content:
        center;

    margin-top:
        45px;

}


/* =========================================================
   ACADEMIC AREAS
========================================================= */

#academic-areas {

    width:
        100%;

    max-width:
        var(--container-width);

    margin:
        0 auto;

    background:
        var(--background);

}


/* =========================================================
   ACADEMIC AREA GRID
========================================================= */

.area-grid {

    display:
        grid;

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

    gap:
        24px;

}


/* =========================================================
   ACADEMIC AREA CARD
========================================================= */

.area-card {

    position:
        relative;

    padding:
        32px;

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

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

    background:
        var(--white);

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

    overflow:
        hidden;

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);

}


/* Top accent */

.area-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            var(--accent),
            #7c3aed
        );

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform var(--transition);

}


.area-card:hover {

    transform:
        translateY(-7px);

    border-color:
        #bfdbfe;

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

}


.area-card:hover::before {

    transform:
        scaleX(1);

}


/* =========================================================
   AREA CARD TITLE
========================================================= */

.area-card h3 {

    margin-bottom:
        14px;

    color:
        var(--primary);

    font-size:
        1.3rem;

    line-height:
        1.3;

    letter-spacing:
        -0.02em;

}


/* =========================================================
   AREA CARD DESCRIPTION
========================================================= */

.area-card p {

    margin-bottom:
        22px;

    color:
        var(--text-light);

    font-size:
        0.95rem;

    line-height:
        1.75;

}


/* =========================================================
   AREA CARD LINK
========================================================= */

.area-card a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    color:
        var(--accent);

    font-size:
        0.9rem;

    font-weight:
        700;

    transition:
        gap var(--transition);

}


.area-card a:hover {

    gap:
        10px;

}


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

#faculty-preview {

    text-align:
        center;

    background:
        linear-gradient(
            180deg,
            var(--surface),
            #ffffff
        );

}


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

#seminars-preview {

    text-align:
        center;

    background:
        var(--white);

}


/* =========================================================
   FOOTER
========================================================= */

#site-footer {

    position:
        relative;

    padding:
        35px 20px;

    text-align:
        center;

    background:
        var(--primary);

    color:
        rgba(255, 255, 255, 0.82);

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

}


#site-footer p {

    max-width:
        900px;

    margin:
        0 auto;

    font-size:
        0.85rem;

    line-height:
        1.7;

}


/* =========================================================
   SELECTION
========================================================= */

::selection {

    background:
        var(--accent);

    color:
        var(--white);

}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {

    width:
        9px;

}


::-webkit-scrollbar-track {

    background:
        var(--surface);

}


::-webkit-scrollbar-thumb {

    background:
        #cbd5e1;

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

}


::-webkit-scrollbar-thumb:hover {

    background:
        #94a3b8;

}


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

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {

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

    outline-offset:
        3px;

}


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

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

    html {

        scroll-behavior:
            auto;

    }

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;

    }

}


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

@media (max-width: 1100px) {

    :root {

        --section-padding:
            90px;

    }

    .area-grid {

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

    }

}


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

@media (max-width: 850px) {

    :root {

        --section-padding:
            80px;

    }

    .section-heading {

        margin-bottom:
            42px;

    }

}


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

@media (max-width: 600px) {

    :root {

        --section-padding:
            65px;

    }


    body {

        font-size:
            15px;

    }


    section {

        padding:
            var(--section-padding) 16px;

    }


    .section-container {

        width:
            min(
                calc(100% - 20px),
                var(--container-width)
            );

    }


    .section-heading {

        margin-bottom:
            36px;

    }


    .section-heading h2 {

        font-size:
            2rem;

    }


    .section-heading p {

        font-size:
            0.95rem;

    }


    .area-grid {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .area-card {

        padding:
            26px;

    }


    .section-action {

        margin-top:
            35px;

    }


    .btn {

        width:
            100%;

        max-width:
            320px;

    }


    #site-footer {

        padding:
            30px 16px;

    }

}


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

@media (max-width: 420px) {

    :root {

        --section-padding:
            55px;

    }


    .section-heading h2 {

        font-size:
            1.8rem;

    }


    .section-label {

        font-size:
            0.68rem;

    }


    .area-card {

        padding:
            23px;

    }

}


/* =========================================================
   PRINT
========================================================= */

@media print {

    .navbar,
    .menu-toggle,
    .hero-buttons,
    .btn {

        display:
            none !important;

    }


    body {

        background:
            white;

        color:
            black;

    }


    section {

        padding:
            30px 0;

    }

}