/* =========================================================
   LEGACYLOGIC
   CATEGORY / SERVICE WORK PAGE
   Common CSS for:
   - Website Development
   - Software Development
   - Google Business Profile
   - Logo & Branding
========================================================= */


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

.category-page-hero {

    position: relative;

    padding: 7.5rem 0 3.5rem;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f8f7 100%
        );

    border-bottom:
        1px solid
        rgba(14, 44, 58, .06);

    overflow: hidden;
}


/* Decorative circle */

.category-page-hero::before {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    left: -140px;
    top: 20px;

    border:
        1px solid
        rgba(46, 139, 135, .10);

    border-radius: 50%;
}


.category-page-hero::after {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -120px;
    bottom: -130px;

    border:
        1px solid
        rgba(201, 162, 39, .10);

    border-radius: 50%;
}


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

.category-page-title {

    position: relative;

    z-index: 2;

    margin: 0;

    text-align: center;

    font-family: 'Fraunces', serif;

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

    font-weight: 600;

    line-height: 1.15;

    color: var(--navy);
}


/* =========================================================
   BREADCRUMB
========================================================= */

.category-page-breadcrumb {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: .55rem;

    margin-top: 1rem;

    color: var(--ink-soft);

    font-size: .78rem;
}


.category-page-breadcrumb a {

    color: var(--navy);

    font-weight: 600;

    text-decoration: none;
}


.category-page-breadcrumb a:hover {

    color: var(--teal);
}


.category-page-breadcrumb i {

    color: var(--gold);

    font-size: .6rem;
}



/* =========================================================
   CATEGORY PROJECT SECTION
========================================================= */

.category-project-section {

    padding: 4rem 0 5rem;

    background: #fff;
}



/* =========================================================
   SEARCH BOX
========================================================= */

.category-search {

    position: relative;

    margin-bottom: 3.5rem;
}


.category-search input {

    width: 100%;

    height: 62px;

    padding:
        0
        1.5rem
        0
        4rem;

    border:
        1px solid
        rgba(14, 44, 58, .10);

    border-radius: 50rem;

    background: #fff;

    color: var(--navy);

    font-size: .9rem;

    outline: none;

    box-shadow:
        0 8px 28px
        rgba(14, 44, 58, .05);

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


.category-search input::placeholder {

    color: #8aa0b4;
}


.category-search input:focus {

    border-color:
        rgba(46, 139, 135, .45);

    box-shadow:
        0 10px 30px
        rgba(46, 139, 135, .08);
}


.category-search-icon {

    position: absolute;

    left: 1.1rem;

    top: 50%;

    transform: translateY(-50%);

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #eef8f8;

    color: var(--teal);

    font-size: .95rem;
}



/* =========================================================
   PROJECT GRID
========================================================= */

.category-project-grid {

    row-gap: 1.5rem;
}



/* =========================================================
   PROJECT CARD
========================================================= */

.category-project-card {

    height: 100%;

    display: flex;

    overflow: hidden;

    background: #fff;

    border:
        1px solid
        rgba(14, 44, 58, .10);

    border-radius: 20px;

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


.category-project-card:hover {

    transform: translateY(-4px);

    border-color:
        rgba(46, 139, 135, .30);

    box-shadow:
        0 18px 38px
        rgba(14, 44, 58, .09);
}



/* =========================================================
   PROJECT IMAGE AREA
========================================================= */

.category-project-image {

    width: 42%;

    min-height: 340px;

    padding: 1.4rem;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #f1f5ef,
            #e8f0ed
        );

    overflow: hidden;
}


.category-project-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;

    transition:
        transform .35s ease;
}


.category-project-card:hover
.category-project-image img {

    transform: scale(1.025);
}



/* =========================================================
   DIFFERENT IMAGE BACKGROUNDS
   Optional
========================================================= */

.category-project-image.image-cream {

    background:
        linear-gradient(
            135deg,
            #faf6e9,
            #f2ead6
        );
}


.category-project-image.image-teal {

    background:
        linear-gradient(
            135deg,
            #edf8f7,
            #dfeeed
        );
}


.category-project-image.image-blue {

    background:
        linear-gradient(
            135deg,
            #eef5fa,
            #e1ebf1
        );
}


.category-project-image.image-pink {

    background:
        linear-gradient(
            135deg,
            #fff2f1,
            #f8e6e3
        );
}



/* =========================================================
   PROJECT CONTENT
========================================================= */

.category-project-content {

    width: 58%;

    padding: 1.6rem;

    display: flex;

    flex-direction: column;
}



/* =========================================================
   PROJECT BADGE
========================================================= */

.category-project-badge {

    align-self: flex-start;

    margin-bottom: .9rem;

    padding:
        .4rem
        .7rem;

    border-radius: 50rem;

    background: #f2ead7;

    color: #176b70;

    font-family:
        'Space Mono',
        monospace;

    font-size: .6rem;

    font-weight: 700;

    letter-spacing: .05em;
}



/* =========================================================
   PROJECT TITLE
========================================================= */

.category-project-title {

    margin:
        0 0
        .45rem;

    font-family:
        'Fraunces',
        serif;

    font-size: 1.45rem;

    font-weight: 600;

    line-height: 1.25;

    color: var(--navy);
}



/* =========================================================
   PROJECT CATEGORY
========================================================= */

.category-project-category {

    margin-bottom: .75rem;

    color: var(--teal);

    font-size: .8rem;

    font-weight: 700;
}



/* =========================================================
   PROJECT DESCRIPTION
========================================================= */

.category-project-description {

    margin: 0;

    color: var(--ink-soft);

    font-size: .82rem;

    line-height: 1.7;
}



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

.category-project-footer {

    margin-top: auto;

    padding-top: 1.5rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;
}



/* =========================================================
   PROJECT TYPE
========================================================= */

.category-project-type {

    display: flex;

    align-items: center;

    gap: .5rem;

    color: var(--ink-soft);

    font-size: .78rem;

    font-weight: 500;
}


.category-project-type i {

    color: var(--teal);
}



/* =========================================================
   VIEW DETAILS BUTTON
========================================================= */

.category-project-button {

    display: inline-flex;

    align-items: center;

    gap: .55rem;

    padding:
        .68rem
        1rem;

    border-radius: 50rem;

    background: #edf8f9;

    color: var(--navy);

    text-decoration: none;

    font-size: .76rem;

    font-weight: 700;

    white-space: nowrap;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.category-project-button:hover {

    background: var(--teal);

    color: #fff;

    transform: translateX(2px);
}


.category-project-button i {

    font-size: .7rem;
}



/* =========================================================
   NO PROJECTS MESSAGE
========================================================= */

.category-no-projects {

    padding: 3rem 1rem;

    text-align: center;

    color: var(--ink-soft);

    font-size: .9rem;
}


.category-no-projects i {

    display: block;

    margin-bottom: .8rem;

    color: var(--teal);

    font-size: 1.5rem;
}



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

@media (max-width: 991.98px) {

    .category-project-image {

        min-height: 300px;
    }


    .category-project-title {

        font-size: 1.3rem;
    }

}


@media (max-width: 767.98px) {

    .category-page-hero {

        padding:
            7.5rem
            0
            3rem;
    }


    .category-project-section {

        padding:
            3rem
            0
            4rem;
    }


    .category-search {

        margin-bottom: 2rem;
    }


    .category-search input {

        height: 56px;

        font-size: .82rem;
    }


    .category-project-card {

        display: block;
    }


    .category-project-image {

        width: 100%;

        height: 230px;

        min-height: 230px;

        padding: 1rem;
    }


    .category-project-content {

        width: 100%;

        padding: 1.4rem;
    }


    .category-project-footer {

        margin-top: 1.5rem;
    }


    .category-project-button {

        padding:
            .65rem
            .85rem;
    }

}