/* =========================================================
   Tech Journey
   categories.css

   Categories Page
========================================================= */


/* =========================================================
   Category Hero
========================================================= */

.category-hero {

    min-height:
        460px;

    display:
        flex;

    align-items:
        center;

    padding:
        100px 0 80px;

}


.category-hero h1 {

    margin-top:
        18px;

    margin-bottom:
        28px;

    font-size:
        clamp(
            42px,
            6vw,
            72px
        );

    line-height:
        1.15;

    letter-spacing:
        -.04em;

}


.category-lead {

    max-width:
        720px;

    font-size:
        17px;

    line-height:
        2;

    opacity:
        .78;

}


/* =========================================================
   Categories Section
========================================================= */

.categories-section {

    padding:
        100px 0;

}


.categories-section.field-section {

    padding-top:
        40px;

}


/* =========================================================
   Section Heading
========================================================= */

.section-heading {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        24px;

    margin-bottom:
        60px;

}


.section-number {

    flex:
        0 0 auto;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        .12em;

    opacity:
        .45;

}


.section-heading h2 {

    margin-top:
        12px;

    margin-bottom:
        16px;

}


.section-heading .eyebrow {

    margin:
        0;

}


/* =========================================================
   Category Grid
========================================================= */

.category-grid {

    display:
        grid;

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

    gap:
        24px;

}


/* =========================================================
   Category Card
========================================================= */

.category-card {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        310px;

    padding:
        34px;

    border:
        1px solid
        rgba(
            127,
            127,
            127,
            .18
        );

    border-radius:
        18px;

    color:
        inherit;

    text-decoration:
        none;

    overflow:
        hidden;

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

}


.category-card:hover {

    transform:
        translateY(
            -6px
        );

    border-color:
        rgba(
            127,
            127,
            127,
            .4
        );

    box-shadow:
        0 18px 45px
        rgba(
            0,
            0,
            0,
            .08
        );

}


/* =========================================================
   Category Icon
========================================================= */

.category-icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    margin-bottom:
        20px;

    border-radius:
        50%;

    background:
        rgba(
            127,
            127,
            127,
            .10
        );

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        .04em;

}


/* =========================================================
   Category Number
========================================================= */

.category-number {

    display:
        block;

    margin-bottom:
        22px;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        .12em;

    opacity:
        .5;

}


/* =========================================================
   Category Title
========================================================= */

.category-card h3 {

    margin-bottom:
        16px;

    font-size:
        28px;

    line-height:
        1.3;

}


/* =========================================================
   Category Description
========================================================= */

.category-card p {

    max-width:
        520px;

    margin:
        0;

    font-size:
        15px;

    line-height:
        1.9;

    opacity:
        .7;

}


/* =========================================================
   Category Meta
========================================================= */

.article-count {

    display:
        block;

    margin-top:
        auto;

    padding-top:
        28px;

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

    opacity:
        .5;

}


/* =========================================================
   Field Experience
========================================================= */

.field-card {

    display:
        grid;

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

    gap:
        50px;

    padding:
        50px;

    border:
        1px solid
        rgba(
            127,
            127,
            127,
            .18
        );

    border-radius:
        20px;

}


.field-card-mark {

    display:
        flex;

    align-items:
        flex-start;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        .12em;

    opacity:
        .45;

}


.field-card-content {

    max-width:
        720px;

}


.field-card-content h3 {

    margin-top:
        12px;

    margin-bottom:
        20px;

    font-size:
        30px;

    line-height:
        1.4;

}


.field-card-content p:not(.eyebrow) {

    margin-bottom:
        28px;

    font-size:
        15px;

    line-height:
        2;

    opacity:
        .72;

}


/* =========================================================
   Text Link
========================================================= */

.text-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    font-size:
        14px;

    font-weight:
        600;

    text-decoration:
        none;

}


.text-link span {

    transition:
        transform .2s ease;

}


.text-link:hover span {

    transform:
        translateX(
            4px
        );

}


/* =========================================================
   Category Bottom
========================================================= */

.category-bottom {

    padding:
        120px 0;

}


.category-bottom .container {

    padding:
        70px 60px;

    border-radius:
        24px;

    background:
        linear-gradient(
            135deg,
            rgba(
                127,
                127,
                127,
                .10
            ),
            rgba(
                127,
                127,
                127,
                .04
            )
        );

}


.category-bottom h2 {

    margin-top:
        14px;

    margin-bottom:
        28px;

    font-size:
        clamp(
            30px,
            4vw,
            48px
        );

    line-height:
        1.4;

}


.category-bottom p:not(.eyebrow) {

    max-width:
        700px;

    margin-bottom:
        32px;

    line-height:
        2;

    opacity:
        .75;

}


/* =========================================================
   Footer
========================================================= */

.site-footer a + a {

    margin-left:
        20px;

}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 900px) {


    .category-hero {

        min-height:
            400px;

        padding:
            80px 0 60px;

    }


    .categories-section {

        padding:
            80px 0;

    }


    .category-grid {

        grid-template-columns:
            1fr;

    }


    .category-card {

        min-height:
            280px;

    }


    .field-card {

        grid-template-columns:
            1fr;

        gap:
            25px;

        padding:
            40px;

    }


    .field-card-mark {

        display:
            block;

    }


}


@media (max-width: 600px) {


    .category-hero {

        padding:
            70px 0 50px;

    }


    .category-hero h1 {

        font-size:
            42px;

    }


    .category-lead {

        font-size:
            15px;

        line-height:
            1.9;

    }


    .categories-section {

        padding:
            70px 0;

    }


    .section-heading {

        gap:
            16px;

        margin-bottom:
            40px;

    }


    .category-card {

        min-height:
            0;

        padding:
            28px;

        border-radius:
            14px;

    }


    .category-icon {

        width:
            38px;

        height:
            38px;

    }


    .category-number {

        margin-bottom:
            18px;

    }


    .category-card h3 {

        font-size:
            24px;

    }


    .category-card p {

        font-size:
            14px;

    }


    .article-count {

        padding-top:
            24px;

    }


    .field-card {

        padding:
            28px;

        border-radius:
            16px;

    }


    .field-card-content h3 {

        font-size:
            24px;

    }


    .field-card-content p:not(.eyebrow) {

        font-size:
            14px;

    }


    .category-bottom {

        padding:
            80px 0;

    }


    .category-bottom .container {

        padding:
            45px 28px;

        border-radius:
            18px;

    }


    .category-bottom h2 {

        font-size:
            30px;

    }


}