/* =========================================================
   PROJECTS SECTION
========================================================= */

.project-section{
    padding-top:78px;
}


/* =========================================================
   HOME PROJECT LIST
========================================================= */

.project-list{
    display:grid;

    gap:18px;
}


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

.project-card{
    border:
        1px solid
        var(--line);

    background:
        linear-gradient(
            145deg,
            rgba(38,62,105,.1),
            rgba(255,255,255,.015)
        );

    border-radius:26px;

    padding:18px;

    display:grid;

    grid-template-columns:
        minmax(0,.92fr)
        minmax(0,1.08fr);

    gap:22px;

    align-items:stretch;

    overflow:hidden;
}


.project-card:nth-child(even){
    grid-template-columns:
        minmax(0,1.08fr)
        minmax(0,.92fr);
}


.project-card:nth-child(even)
.project-media{
    order:2;
}


/* =========================================================
   PROJECT MEDIA
========================================================= */

.project-media{
    position:relative;

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

    border-radius:20px;

    overflow:hidden;

    min-height:280px;

    background:#0a1423;
}


.project-media img{
    width:100%;

    height:100%;

    display:block;

    object-fit:cover;
}


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

.project-type{
    position:absolute;

    left:14px;

    top:14px;

    z-index:2;

    background:
        rgba(
            7,
            17,
            31,
            .8
        );

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    border-radius:999px;

    padding:
        7px 10px;

    color:#e9f3ff;

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:.1em;
}


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

.project-body{
    padding:
        12px 8px 8px;

    display:flex;

    flex-direction:column;

    min-width:0;
}


.project-body h3{
    font-size:29px;

    margin:
        4px 0 10px;

    letter-spacing:-.035em;
}


.project-body p{
    color:var(--muted);

    line-height:1.78;

    margin:0;

    max-width:620px;
}


/* =========================================================
   TECHNOLOGY LIST
========================================================= */

.tech-list{
    display:flex;

    gap:7px;

    flex-wrap:wrap;

    margin:
        20px 0;
}


.tech-list span{
    font-size:11px;

    padding:
        6px 9px;

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

    border-radius:999px;

    color:#bdcbe0;
}


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

.project-actions{
    display:flex;

    gap:14px;

    flex-wrap:wrap;

    margin-top:auto;

    padding-top:12px;
}


.text-link{
    font-size:13px;

    font-weight:800;

    color:#a8bbd2;

    transition:
        color .18s ease;
}


.text-link:hover{
    color:var(--text);
}


.primary-link{
    color:var(--accent);
}


.project-details-link{
    display:inline-flex;

    align-items:center;

    gap:5px;
}


.project-details-arrow{
    transition:
        transform .18s ease;
}


.project-details-link:hover
.project-details-arrow{
    transform:
        translateX(3px);
}


html[dir="rtl"]
.project-details-link:hover
.project-details-arrow{
    transform:
        translateX(-3px);
}


/* =========================================================
   VIEW ALL PROJECTS
========================================================= */

.section-more{
    display:flex;

    justify-content:flex-end;

    margin-top:22px;
}


/* =========================================================
   ALL PROJECTS — ARCHIVE GRID
========================================================= */

.project-archive{
    display:grid;

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

    gap:20px;

    align-items:stretch;

    padding-bottom:20px;
}


/* =========================================================
   ARCHIVE VERTICAL CARDS
========================================================= */

.project-archive .project-card,
.project-archive .project-card:nth-child(even){

    height:100%;

    padding:14px;

    display:grid;

    grid-template-columns:1fr;

    grid-template-rows:
        auto
        1fr;

    gap:0;

    align-items:stretch;

    border-radius:24px;

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


.project-archive
.project-card:nth-child(even)
.project-media{
    order:0;
}


@media(hover:hover){

    .project-archive
    .project-card:hover{

        transform:
            translateY(-4px);

        border-color:
            rgba(
                var(--accent-rgb),
                .28
            );

        background:
            linear-gradient(
                145deg,
                rgba(
                    var(--accent-rgb),
                    .08
                ),
                rgba(
                    255,
                    255,
                    255,
                    .018
                )
            );

        box-shadow:
            0 20px 50px
            rgba(
                0,
                0,
                0,
                .16
            );
    }

}


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

.project-archive
.project-media{

    width:100%;

    min-height:0;

    aspect-ratio:
        16 / 10;

    border-radius:18px;
}


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

.project-archive
.project-body{

    padding:
        18px 5px 5px;

    min-height:0;
}


.project-archive
.project-body h3{

    font-size:
        clamp(
            21px,
            1.8vw,
            25px
        );

    line-height:1.2;

    margin:
        2px 0 10px;

    letter-spacing:-.025em;
}


.project-archive
.project-body p{

    font-size:14px;

    line-height:1.72;

    max-width:none;
}


/* =========================================================
   ARCHIVE TECHNOLOGY
========================================================= */

.project-archive
.tech-list{

    margin:
        17px 0 12px;

    gap:6px;
}


.project-archive
.tech-list span{

    padding:
        5px 8px;

    font-size:10px;
}


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

.project-archive
.project-actions{

    margin-top:auto;

    padding-top:12px;

    gap:12px;
}


.project-archive
.text-link{

    font-size:12px;
}


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

.project-archive
.project-type{

    left:12px;

    top:12px;

    padding:
        6px 9px;

    font-size:9px;
}


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

.future-project-card{

    grid-column:
        1 / -1;

    border:
        1px dashed
        var(--line-strong);

    border-radius:24px;

    padding:26px;

    display:flex;

    gap:18px;

    align-items:center;

    color:var(--muted);
}


.future-project-card > span{

    width:54px;

    height:54px;

    flex:
        0 0 54px;

    border-radius:18px;

    display:grid;

    place-items:center;

    background:
        rgba(
            var(--accent-rgb),
            .08
        );

    font-size:30px;

    color:var(--accent);
}


.future-project-card h3{

    margin:
        0 0 6px;

    color:var(--text);
}


.future-project-card p{

    margin:0;

    line-height:1.7;
}


/* =========================================================
   PROJECT DETAIL PAGE
========================================================= */

.project-detail-page{

    min-height:100vh;
}


/* =========================================================
   PROJECT DETAIL HERO
========================================================= */

.project-detail-hero{

    padding:
        calc(var(--header-h) + 64px)
        0
        64px;
}


.project-back-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:34px;

    color:var(--muted);

    font-size:13px;

    font-weight:700;

    transition:
        color .18s ease,
        transform .18s ease;
}


.project-back-link:hover{

    color:var(--text);

    transform:
        translateX(-3px);
}


html[dir="rtl"]
.project-back-link:hover{

    transform:
        translateX(3px);
}


/* =========================================================
   DETAIL GRID
========================================================= */

.project-detail-grid{

    display:grid;

    grid-template-columns:
        minmax(0,.88fr)
        minmax(0,1.12fr);

    gap:58px;

    align-items:center;
}


/* =========================================================
   DETAIL COPY
========================================================= */

.project-detail-copy{

    min-width:0;
}


.project-detail-copy h1{

    margin:
        8px 0 18px;

    font-size:
        clamp(
            44px,
            5.4vw,
            76px
        );

    line-height:1;

    letter-spacing:-.055em;
}


html[dir="rtl"]
.project-detail-copy h1{

    letter-spacing:0;

    line-height:1.15;
}


.project-detail-lead{

    max-width:580px;

    margin:0;

    color:var(--muted);

    font-size:17px;

    line-height:1.85;
}


/* =========================================================
   DETAIL TECH
========================================================= */

.project-detail-tech{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:24px;
}


.project-detail-tech span{

    padding:
        7px 11px;

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

    border-radius:999px;

    background:
        rgba(
            255,
            255,
            255,
            .018
        );

    color:#c1d0e5;

    font-size:11px;

    font-weight:700;
}


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

.project-detail-actions{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:28px;
}


/* =========================================================
   DETAIL MEDIA
========================================================= */

.project-detail-media{

    min-width:0;
}


.project-detail-browser{

    position:relative;

    overflow:hidden;

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

    border-radius:26px;

    background:#091525;

    box-shadow:
        0 32px 90px
        rgba(
            0,
            0,
            0,
            .28
        );

    transform:
        rotate(1deg);

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


.project-detail-browser:hover{

    transform:
        rotate(0)
        translateY(-3px);

    border-color:
        rgba(
            var(--accent-rgb),
            .30
        );
}


.project-browser-bar{

    height:42px;

    display:flex;

    align-items:center;

    gap:7px;

    padding:
        0 15px;

    background:
        rgba(
            255,
            255,
            255,
            .035
        );

    border-bottom:
        1px solid
        var(--line);
}


.project-browser-bar span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:
        rgba(
            255,
            255,
            255,
            .22
        );
}


.project-browser-bar span:first-child{

    background:
        var(--accent);
}


.project-detail-browser img{

    display:block;

    width:100%;

    aspect-ratio:
        16 / 10;

    object-fit:cover;
}


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

.project-detail-content{

    padding-top:20px;
}


.project-story-grid{

    display:grid;

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

    gap:18px;
}


/* =========================================================
   DETAIL PANEL
========================================================= */

.project-detail-panel{

    min-width:0;

    padding:
        30px;

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

    border-radius:26px;

    background:
        linear-gradient(
            145deg,
            rgba(
                38,
                62,
                105,
                .08
            ),
            rgba(
                255,
                255,
                255,
                .012
            )
        );
}


.project-detail-label{

    margin-bottom:9px;

    color:var(--accent);

    font-size:10px;

    font-weight:800;

    letter-spacing:.12em;

    text-transform:uppercase;
}


.project-detail-panel h2,
.project-stack-panel h2{

    margin:
        0 0 14px;

    font-size:
        clamp(
            24px,
            2vw,
            31px
        );

    letter-spacing:-.035em;
}


html[dir="rtl"]
.project-detail-panel h2,
html[dir="rtl"]
.project-stack-panel h2{

    letter-spacing:0;
}


.project-detail-panel > p{

    margin:0;

    color:var(--muted);

    font-size:14px;

    line-height:1.9;
}


/* =========================================================
   PROJECT HIGHLIGHTS
========================================================= */

.project-highlight-list{

    display:grid;

    gap:12px;

    margin-top:8px;
}


.project-highlight{

    display:grid;

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

    gap:10px;

    align-items:start;

    color:#c4d1e4;

    font-size:13px;

    line-height:1.65;
}


.project-highlight-icon{

    width:25px;

    height:25px;

    display:grid;

    place-items:center;

    border:
        1px solid
        rgba(
            var(--accent-rgb),
            .24
        );

    border-radius:8px;

    background:
        rgba(
            var(--accent-rgb),
            .08
        );

    color:var(--accent);

    font-size:11px;

    font-weight:900;
}


/* =========================================================
   STACK PANEL
========================================================= */

.project-stack-panel{

    margin-top:18px;

    padding:
        26px 30px;

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

    border-radius:24px;

    background:
        rgba(
            255,
            255,
            255,
            .015
        );

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;
}


.project-stack-panel h2{

    margin-bottom:0;
}


.project-stack-list{

    display:flex;

    flex-wrap:wrap;

    justify-content:flex-end;

    gap:8px;
}


.project-stack-list span{

    padding:
        9px 13px;

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

    border-radius:999px;

    background:
        rgba(
            var(--accent-rgb),
            .045
        );

    color:#c4d1e4;

    font-size:12px;

    font-weight:700;
}


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

.project-detail-footer{

    margin-top:22px;

    padding-top:22px;

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

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    flex-wrap:wrap;
}


/* =========================================================
   PROJECT NOT FOUND
========================================================= */

.project-not-found{

    min-height:
        calc(
            100vh - var(--header-h)
        );

    padding:
        calc(var(--header-h) + 70px)
        0
        80px;

    display:flex;

    align-items:center;
}


.project-not-found-card{

    max-width:680px;

    margin:auto;

    padding:
        42px;

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

    border-radius:28px;

    background:
        rgba(
            9,
            19,
            34,
            .72
        );

    text-align:center;

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


.project-not-found-card h1{

    margin:
        8px 0 14px;

    font-size:
        clamp(
            38px,
            6vw,
            68px
        );
}


.project-not-found-card p{

    margin:
        0 auto 24px;

    max-width:520px;

    color:var(--muted);

    line-height:1.8;
}


/* =========================================================
   ARCHIVE — TABLET
========================================================= */

@media(max-width:1100px){

    .project-archive{

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

        gap:18px;
    }


    .project-detail-grid{

        gap:34px;
    }


    .project-detail-copy h1{

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

}


/* =========================================================
   PROJECT DETAIL — TABLET
========================================================= */

@media(max-width:900px){

    .project-detail-hero{

        padding:
            calc(var(--header-h) + 45px)
            0
            48px;
    }


    .project-detail-grid{

        grid-template-columns:1fr;

        gap:32px;
    }


    .project-detail-copy{

        max-width:720px;
    }


    .project-detail-media{

        max-width:760px;

        width:100%;
    }


    .project-detail-browser{

        transform:none;
    }


    .project-story-grid{

        grid-template-columns:1fr;
    }

}


/* =========================================================
   PROJECT ARCHIVE — MOBILE
========================================================= */

@media(max-width:700px){

    .project-archive{

        grid-template-columns:1fr;

        gap:16px;
    }


    .project-archive
    .project-card,
    .project-archive
    .project-card:nth-child(even){

        padding:12px;

        border-radius:22px;
    }


    .project-archive
    .project-media{

        aspect-ratio:
            16 / 10;

        border-radius:17px;
    }


    .project-archive
    .project-body{

        padding:
            15px 5px 5px;
    }


    .project-archive
    .project-body h3{

        font-size:23px;
    }


    .project-archive
    .project-body p{

        font-size:13px;

        line-height:1.7;
    }


    .project-archive
    .tech-list{

        margin:
            15px 0 10px;
    }


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

    .project-detail-hero{

        padding:
            calc(var(--header-h) + 32px)
            0
            36px;
    }


    .project-back-link{

        margin-bottom:24px;
    }


    .project-detail-copy h1{

        font-size:
            clamp(
                38px,
                11vw,
                52px
            );

        margin-bottom:15px;
    }


    .project-detail-lead{

        font-size:14px;

        line-height:1.8;
    }


    .project-detail-tech{

        margin-top:19px;
    }


    .project-detail-actions{

        margin-top:22px;
    }


    .project-detail-browser{

        border-radius:20px;
    }


    .project-browser-bar{

        height:36px;
    }


    .project-detail-panel{

        padding:22px;

        border-radius:22px;
    }


    .project-stack-panel{

        padding:22px;

        flex-direction:column;

        align-items:flex-start;
    }


    .project-stack-list{

        justify-content:flex-start;
    }


    .project-detail-footer{

        align-items:flex-start;

        flex-direction:column;
    }


    .project-not-found-card{

        padding:
            30px 22px;
    }

}


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

@media(max-width:420px){

    .project-archive{

        gap:14px;
    }


    .project-archive
    .project-card,
    .project-archive
    .project-card:nth-child(even){

        padding:10px;

        border-radius:20px;
    }


    .project-archive
    .project-media{

        border-radius:15px;
    }


    .project-archive
    .project-body{

        padding:
            14px 4px 4px;
    }


    .project-archive
    .project-body h3{

        font-size:21px;
    }


    .project-archive
    .project-body p{

        font-size:12.5px;
    }


    .project-detail-panel{

        padding:19px;
    }


    .project-stack-panel{

        padding:19px;
    }


    .project-detail-tech span,
    .project-stack-list span{

        font-size:10px;
    }

}