/* =====================================================
   HOMEPAGE CSS
===================================================== */


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

.hero {

    position:
        relative;

    min-height:
        650px;

    display:
        flex;

    align-items:
        center;

    background:
        linear-gradient(
            rgba(7,28,22,.65),
            rgba(7,28,22,.70)
        ),
        url("../images/home/hero.jpg")
        center/cover no-repeat;

    color:
        white;

}


.hero-content {

    position:
        relative;

    z-index:
        2;

    padding:
        100px 0;

}


.hero-tag {

    display:
        inline-block;

    margin-bottom:
        20px;

    color:
        #e2c47f;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.hero h1 {

    max-width:
        800px;

    font-size:
        clamp(45px, 7vw, 78px);

    line-height:
        .98;

    letter-spacing:
        -2px;

}


.hero p {

    max-width:
        600px;

    margin:
        25px 0 30px;

    font-size:
        18px;

    opacity:
        .9;

}


.hero-buttons {

    display:
        flex;

    gap:
        12px;

    flex-wrap:
        wrap;

}



/* =====================================================
   DIRECTOR'S MESSAGE
===================================================== */

.director-section {

    background:
        var(--white);

}


/* =====================================================
   DIRECTOR CARD
===================================================== */

.director-card {

    display:
        grid;

    grid-template-columns:
        0.85fr 1.15fr;

    gap:
        55px;

    align-items:
        center;

    padding:
        45px;

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

    border-radius:
        16px;

    background:
        white;

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.06);

}


/* =====================================================
   DIRECTOR IMAGE

   FULL IMAGE
   NO CROPPING
   ORIGINAL ASPECT RATIO
===================================================== */

.director-image {

    width:
        100%;

    overflow:
        hidden;

    border-radius:
        14px;

    background:
        #e8eeeb;

}


.director-image img {

    width:
        100%;

    height:
        auto;

    display:
        block;

    object-fit:
        contain;

}



/* =====================================================
   DIRECTOR CONTENT
===================================================== */

.director-content {

    max-width:
        700px;

}


.director-content h2 {

    margin:
        7px 0 18px;

    font-size:
        37px;

    line-height:
        1.1;

}


.director-content > p {

    margin-bottom:
        14px;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.75;

}



/* =====================================================
   DIRECTOR DIVIDER
===================================================== */

.director-divider {

    width:
        70px;

    height:
        3px;

    margin:
        0 0 22px;

    border-radius:
        10px;

    background:
        var(--primary);

}



/* =====================================================
   DIRECTOR SIGNATURE
===================================================== */

.director-signature {

    margin-top:
        24px;

    color:
        var(--primary);

}


.director-signature span {

    display:
        block;

    margin-bottom:
        4px;

    font-size:
        14px;

}


.director-signature strong {

    display:
        block;

    font-size:
        18px;

}


.director-signature small {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        13px;

}



/* =====================================================
   ACHIEVEMENTS
===================================================== */

.achievements {

    background:
        var(--light);

}


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

.achievement-grid {

    display:
        grid;

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

    gap:
        20px;

    max-width:
        976px;

    margin-left:
        auto;

    margin-right:
        auto;

}


.achievement-card {

    padding:
        30px;

    background:
        white;

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

    border-radius:
        14px;

    transition:
        .25s;

}


.achievement-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.08);

}


.achievement-number {

    color:
        var(--primary);

    font-size:
        42px;

    font-weight:
        900;

    line-height:
        1;

}


.achievement-card h3 {

    margin-top:
        16px;

    font-size:
        19px;

}


.achievement-card p {

    margin-top:
        8px;

    color:
        var(--muted);

    font-size:
        14px;

}



/* =====================================================
   RANKERS
===================================================== */

.carousel-header {

    display:
        flex;

    justify-content:
        space-between;

    margin-bottom:
        15px;

}


.carousel-buttons {

    display:
        flex;

    gap:
        8px;

}


.carousel-btn {

    width:
        45px;

    height:
        45px;

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

    background:
        white;

    border-radius:
        50%;

    font-size:
        20px;

    cursor:
        pointer;

    transition:
        .25s;

}


.carousel-btn:hover {

    color:
        white;

    background:
        var(--primary);

    border-color:
        var(--primary);

}


.ranker-carousel {

    display:
        flex;

    gap:
        20px;

    overflow-x:
        auto;

    scroll-behavior:
        smooth;

    scrollbar-width:
        none;

    cursor:
        grab;

    padding:
        5px 3px 20px;

}


.ranker-carousel::-webkit-scrollbar {

    display:
        none;

}


.ranker-card {

    min-width:
        270px;

    width:
        270px;

    overflow:
        hidden;

    background:
        white;

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

    border-radius:
        15px;

    flex-shrink:
        0;

    transition:
        .25s;

}


.ranker-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.1);

}


.ranker-image {

    height:
        300px;

    background:
        #e8eeeb;

}


.ranker-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.ranker-content {

    padding:
        20px;

}


.ranker-rank {

    color:
        var(--accent);

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        1px;

}


.ranker-content h3 {

    margin-top:
        6px;

    font-size:
        20px;

}


.ranker-class {

    color:
        var(--muted);

    font-size:
        13px;

}


.ranker-score {

    margin-top:
        8px;

    color:
        var(--primary);

    font-size:
        18px;

    font-weight:
        900;

}


.ranker-description {

    margin-top:
        8px;

    color:
        var(--muted);

    font-size:
        13px;

}



/* =====================================================
   QUICK INFO
===================================================== */

.quick-info {

    padding:
        60px 0;

    background:
        var(--primary);

    color:
        white;

}


.quick-grid {

    display:
        grid;

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

}


.quick-card {

    text-align:
        center;

    padding:
        20px;

    border-right:
        1px solid
        rgba(255,255,255,.15);

}


.quick-card:last-child {

    border-right:
        0;

}


.quick-card span {

    display:
        block;

    font-size:
        35px;

    font-weight:
        900;

}


.quick-card p {

    margin-top:
        3px;

    opacity:
        .7;

}



/* =====================================================
   TABLET
   850px AND BELOW
===================================================== */

@media (max-width:850px) {


    /* =================================================
       DIRECTOR
    ================================================= */

    .director-card {

        grid-template-columns:
            1fr;

        gap:
            35px;

        padding:
            35px;

    }


    .director-image {

        width:
            100%;

        max-width:
            500px;

    }


    .director-image img {

        width:
            100%;

        height:
            auto;

    }


    /* =================================================
       ACHIEVEMENTS
    ================================================= */

    .achievement-grid {

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

        max-width:
            760px;

    }


    /* =================================================
       QUICK INFO
    ================================================= */

    .quick-grid {

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

    }


    .quick-card {

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

    }

}



/* =====================================================
   MOBILE
   550px AND BELOW
===================================================== */

@media (max-width:550px) {


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

    .hero {

        min-height:
            580px;

    }


    .hero h1 {

        letter-spacing:
            -1px;

    }


    .hero p {

        font-size:
            16px;

    }



    /* =================================================
       DIRECTOR CARD
    ================================================= */

    .director-card {

        padding:
            22px;

        gap:
            28px;

        border-radius:
            14px;

    }


    /* =================================================
       DIRECTOR IMAGE

       NO FIXED HEIGHT
       NO CROPPING
    ================================================= */

    .director-image {

        width:
            100%;

        max-width:
            100%;

    }


    .director-image img {

        width:
            100%;

        height:
            auto;

        object-fit:
            contain;

    }


    /* =================================================
       DIRECTOR HEADING
    ================================================= */

    .director-content h2 {

        font-size:
            32px;

    }


    /* =================================================
       DIRECTOR TEXT
    ================================================= */

    .director-content > p {

        font-size:
            14px;

        line-height:
            1.7;

    }



    /* =================================================
       ACHIEVEMENTS
    ================================================= */

    .achievement-grid {

        grid-template-columns:
            1fr;

        max-width:
            100%;

    }



    /* =================================================
       QUICK INFO
    ================================================= */

    .quick-grid {

        grid-template-columns:
            1fr;

    }


    .quick-card {

        border-right:
            0;

    }



    /* =================================================
       RANKERS
    ================================================= */

    .ranker-card {

        min-width:
            250px;

        width:
            250px;

    }

}