/* ==========================================================
   PROJECT PAGE
   Enterprise Active Directory Lab
========================================================== */


/* ---------- Base Layout ---------- */

.project-page {
    width: min(1200px, 90%);
    margin: 0 auto;
    padding-top: 90px;
    overflow: hidden;
}


.project-page .section {
    min-height: auto;
    padding: 3.5rem 0;
}



/* ---------- Hero ---------- */


.project-hero-card {

    background:
        rgba(255,255,255,0.04);

    border:
        1px solid rgba(255,255,255,0.12);

    backdrop-filter:
        blur(20px);

    border-radius:
        24px;

    padding:
        2.25rem;

}



.project-hero__grid {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        3rem;

    align-items:center;

}



.project-title {

    font-size:
        clamp(2.5rem,5vw,4rem);

    line-height:
        1.1;

    margin-top:
        1rem;

}



.project-description {

    margin-top:
        1.25rem;

    line-height:
        1.7;

    color:
        var(--color-text-muted);

    max-width:
        600px;

}



/* ---------- Tags ---------- */


.project-card__tags {

    display:flex;

    flex-wrap:wrap;

    gap:.65rem;

    margin:
        1.5rem 0;

}



.tag {

    display:inline-flex;

    align-items:center;

    padding:
        .45rem .9rem;

    border-radius:
        999px;

    font-size:
        .85rem;


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

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

    color:
        rgba(255,255,255,.85);

}




/* ==========================================================
   NETWORK DIAGRAM
========================================================== */


.network-diagram-card {


    padding:
        1.75rem;


    border-radius:
        22px;


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


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


    backdrop-filter:
        blur(15px);


}



.network-node {


    padding:
        1rem;


    text-align:
        center;


    border-radius:
        14px;


    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.02)
        );


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


    box-shadow:
        0 0 25px rgba(0,150,255,.12);


    font-weight:
        600;

}



.network-node span {

    display:block;

    margin-top:
        .5rem;

    font-size:
        .8rem;

    opacity:
        .65;

    font-family:
        "JetBrains Mono", monospace;

}



.network-node.server {

    margin:
        1rem 0;

}



.network-line {


    width:
        2px;

    height:
        35px;

    margin:
        auto;

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

}



.network-branches {

    display:grid;

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

    gap:
        1rem;

}



/* ==========================================================
   PROJECT STATS
========================================================== */


.stats-grid {


    display:grid;


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


    gap:
        1rem;


}



.stat-card {


    padding:
        1.5rem;


    border-radius:
        18px;


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


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


    text-align:
        center;


}



.stat-card h3 {


    font-size:
        2rem;


    font-family:
        "Space Grotesk", sans-serif;


}



.stat-card p {


    margin-top:
        .5rem;


    opacity:
        .7;


}



/* ==========================================================
   SECTION HEADINGS
========================================================== */


.section-head {

    margin-bottom:
        1.75rem;

}



.section-head__title {

    margin-top:
        .5rem;

}



/* ==========================================================
   INFORMATION CARDS
========================================================== */


.project-grid {


    display:grid;


    grid-template-columns:
        repeat(auto-fit,minmax(240px,1fr));


    gap:
        1rem;


}



.project-info-card {


    padding:
        1.5rem;


    border-radius:
        18px;


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


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


    transition:
        .25s ease;


}



.project-info-card:hover {


    transform:
        translateY(-5px);


    border-color:
        rgba(0,150,255,.35);


}



.project-info-card h3 {


    font-size:
        1rem;


    opacity:
        .7;


}



.project-info-card p {


    margin-top:
        .75rem;


    line-height:
        1.6;


}



/* ==========================================================
   TERMINAL STYLE SECTIONS
========================================================== */


.terminal-card {


    padding:
        1.75rem;


    border-radius:
        20px;


    background:
        rgba(0,0,0,.35);


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


    overflow-x:auto;


}



.terminal-card pre {


    margin:
        0;


    font-family:
        "JetBrains Mono", monospace;


    line-height:
        1.7;


    color:
        rgba(255,255,255,.85);


}



/* ==========================================================
   SERVICES
========================================================== */


.services-grid {


    display:grid;


    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));


    gap:
        1rem;


}



.services-grid div {


    padding:
        1.25rem;


    border-radius:
        16px;


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


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


}



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


.project-content-card {


    padding:
        2rem;


    border-radius:
        20px;


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


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


}



.project-content-card p {


    margin-top:
        1rem;


    line-height:
        1.7;


    color:
        var(--color-text-muted);


}



/* ==========================================================
   RESPONSIVE
========================================================== */


@media(max-width:900px){


    .project-hero__grid {

        grid-template-columns:
            1fr;

    }


    .stats-grid {

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

    }


    .network-branches {

        grid-template-columns:
            1fr;

    }


}



@media(max-width:600px){


    .project-page {

        width:
            92%;

    }


    .stats-grid {

        grid-template-columns:
            1fr;

    }


    .project-hero-card {

        padding:
            1.5rem;

    }


}