/* ==========================================================
   BRAYAN PORTFOLIO — PROJECT GRID
========================================================== */

.ba-project-filters,
.ba-project-grid {
    --project-bg: #0D1119;
    --project-bg-hover: #111620;

    --project-text: #F5F7FA;
    --project-muted: #A8B0BF;

    --project-border: #272E3A;

    --project-accent: #7C83FF;
    --project-accent-soft: rgba(124, 131, 255, .11);
}

/* ==========================================================
   FILTERS
========================================================== */

.ba-project-filters {
    margin-bottom: 34px;
}


.ba-project-filters .dtr-filter-nav {
    display: flex;
    align-items: center;

    gap: 10px;

    margin: 0;
}


.ba-project-filters .dtr-filter-nav a {
    margin: 0;

    padding: 11px 20px;

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

    border-radius: 10px;

    background: transparent;

    color:
        var(--project-muted);

    font-size: 15px;
    font-weight: 500;

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.ba-project-filters .dtr-filter-nav a:hover {
    color:
        var(--project-text);

    border-color:
        rgba(124, 131, 255, .55);
}


.ba-project-filters .dtr-filter-nav a.active {
    background:
        var(--project-accent);

    border-color:
        var(--project-accent);

    color:
        #090C13;
}


/* ==========================================================
   GRID SPACING
========================================================== */

.ba-project-grid {
    margin:
        0 -10px;
}


.ba-project-grid .dtr-portfolio-item {
    padding:
        0 10px;

    margin-bottom:
        20px;

    overflow:
        visible;
}


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

.ba-project-card__inner {
    position: relative;

    display: flex;
    flex-direction: column;

    height: 100%;

    padding: 10px;

    overflow: hidden;

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

    border-radius:
        16px;

    background:
        var(--project-bg);

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


.ba-project-card:hover
.ba-project-card__inner {

    transform:
        translateY(-5px);

    border-color:
        rgba(124, 131, 255, .42);

    background:
        var(--project-bg-hover);

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


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

.ba-project-card__image {
    position: relative;

    width: 100%;

    aspect-ratio:
        16 / 10;

    overflow: hidden;

    border-radius:
        11px;

    background:
        #121722;
}


.ba-project-card__image > a {
    display: block;

    width: 100%;
    height: 100%;
}


.ba-project-card__image img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    object-fit:
        cover;

    transition:
        transform .45s
        cubic-bezier(.2, .7, .2, 1);
}


.ba-project-card:hover
.ba-project-card__image img {

    transform:
        scale(1.035);
}


/*
 * Override Navein's original 1.1 zoom.
 */

.dtr-portfolio-item:hover
.dtr-portfolio-item__img img {

    transform:
        scale(1.035);
}


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

.ba-project-card__content {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding:
        24px 18px 18px;
}


/* ==========================================================
   PROJECT TECHNOLOGIES
========================================================== */

.ba-project-card__technologies {

    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 17px;
}


.ba-project-tech {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 27px;

    padding:
        5px 10px;

    border:
        1px solid
        rgba(124, 131, 255, .22);

    border-radius:
        999px;

    background:
        rgba(124, 131, 255, .09);

    color:
        #BFC2FF;

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        600;

    line-height:
        1;

    white-space:
        nowrap;
}


/* Small visual reaction when hovering the card */

.ba-project-card:hover
.ba-project-tech {

    border-color:
        rgba(124, 131, 255, .34);
}


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

.ba-project-card__title {
    padding: 0;

    margin:
        0 0 12px;

    font-family:
        inherit;

    font-size:
        25px;

    font-weight:
        650;

    line-height:
        1.25;

    letter-spacing:
        -.025em;
}


.ba-project-card__title a {
    color:
        var(--project-text);

    text-decoration:
        none;

    transition:
        color .2s ease;
}


.ba-project-card__title a:hover {
    color:
        var(--project-accent);
}


/* ==========================================================
   EXCERPT
========================================================== */

.ba-project-card__excerpt {
    padding: 0 !important;

    margin:
        0 !important;

    color:
        var(--project-muted);

    font-family:
        inherit;

    font-size:
        16px;

    font-weight:
        400;

    line-height:
        1.65;
}


/* ==========================================================
   ACTIONS
========================================================== */

.ba-project-card__actions {
    display: flex;
    flex-wrap: wrap;

    gap:
        9px;

    margin-top:
        auto;

    padding-top:
        24px;
}


.ba-project-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap:
        8px;

    min-height:
        39px;

    padding:
        8px 13px;

    border:
        1px solid
        #364052;

    border-radius:
        9px;

    background:
        #171E2A;

    color:
        #E9EDF4;

    font-family:
        inherit;

    font-size:
        14px;

    font-weight:
        500;

    line-height:
        1;

    text-decoration:
        none;

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.ba-project-action:hover {
    color:
        #FFFFFF;

    border-color:
        rgba(124, 131, 255, .55);

    background:
        #1C2432;

    transform:
        translateY(-2px);
}


/* Main Case Study action */

.ba-project-action--primary {
    border-color:
        rgba(124, 131, 255, .35);

    background:
        rgba(124, 131, 255, .11);

    color:
        #BEC1FF;
}


.ba-project-action--primary:hover {
    border-color:
        var(--project-accent);

    background:
        var(--project-accent);

    color:
        #090C13;
}


/* ==========================================================
   REMOVE OLD NAVEIN OVERLAY / ARROW
========================================================== */

.ba-project-card
.dtr-portfolio-item__wrap-link,

.ba-project-card
.dtr-portfolio-item__link {

    display:
        none !important;
}


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

@media (max-width: 1024px) {

    .ba-project-card__title {
        font-size:
            23px;
    }


    .ba-project-card__excerpt {
        font-size:
            15.5px;
    }

}


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

@media (max-width: 782px) {

    .ba-project-filters {
        margin-bottom:
            26px;
    }


    .ba-project-filters .dtr-filter-nav {
        gap:
            8px;
    }


    .ba-project-filters .dtr-filter-nav a {
        padding:
            9px 14px;

        font-size:
            14px;
    }


    .ba-project-grid {
        margin:
            0;
    }


    .ba-project-grid
    .dtr-portfolio-item {

        padding:
            0;

        margin-bottom:
            18px;
    }


    .ba-project-card__content {
        padding:
            21px 16px 16px;
    }


    .ba-project-card__title {
        font-size:
            22px;
    }


    .ba-project-card__excerpt {
        font-size:
            16px;
    }

}


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

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

    .ba-project-card__inner,
    .ba-project-card__image img,
    .ba-project-action {

        transition:
            none;
    }


    .ba-project-card:hover
    .ba-project-card__inner,

    .ba-project-action:hover {

        transform:
            none;
    }

}