/* ==========================================================
   PROJECT PAGE
   Chrissy Rae's Cookies Website
========================================================== */


/* ---------- 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 SECTION
========================================================== */


.project-hero-card {

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

    border:
        1px solid rgba(255,255,255,.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;

}



/* Hero Typography */


.hero__title {

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

    line-height:
        1.1;

    margin-top:
        1rem;

}



.hero__title span {

    display:block;

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

}



.hero__desc {

    margin-top:
        1.25rem;

    max-width:
        600px;

    line-height:
        1.7;

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

}



/* ==========================================================
   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:
        var(--radius-pill);

    font-family:
        var(--font-mono);

    font-size:
        .75rem;


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


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


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

}



/* ==========================================================
   WEBSITE MOCKUP
========================================================== */


.website-preview-card {


    display:flex;

    justify-content:center;


}



.browser {


    width:100%;

    max-width:430px;


    overflow:hidden;


    border-radius:
        20px;


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


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


}



.browser-top {


    display:flex;

    align-items:center;

    gap:1rem;


    padding:
        .75rem 1rem;


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


}



.browser-buttons {

    display:flex;

    gap:.4rem;

}



.browser-buttons span {


    width:10px;

    height:10px;

    border-radius:50%;


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

}



.browser-address {


    flex:1;

    text-align:center;


    font-family:
        var(--font-mono);


    font-size:
        .7rem;


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

}



.browser-content {

    padding:
        1.5rem;

}



.website-banner {


    padding:
        1.5rem;


    text-align:center;


    border-radius:
        16px;


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


}



.website-banner p {


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

}



.website-nav {


    display:flex;

    justify-content:center;

    gap:
        1rem;


    margin:
        1rem 0;


    font-size:
        .75rem;


    font-family:
        var(--font-mono);


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

}



.website-preview-image {


    height:120px;


    display:flex;


    align-items:center;

    justify-content:center;


    font-size:
        60px;


    border-radius:
        16px;


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


}



.website-sections {


    display:grid;


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


    gap:
        .75rem;


    margin-top:
        1rem;


}



.mini-card {


    padding:
        .9rem;


    text-align:center;


    border-radius:
        12px;


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


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


    font-size:
        .8rem;


}



/* ==========================================================
   PROJECT 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 var(--color-border);


    transition:
        .25s ease;


}



.project-info-card:hover {


    transform:
        translateY(-5px);


    border-color:
        var(--color-border-strong);


}



.project-info-card h3 {


    font-size:
        1rem;


    margin-bottom:
        .75rem;


}



.project-info-card p {


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


    line-height:
        1.6;


}



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


.terminal-card {


    padding:
        1.75rem;


    border-radius:
        20px;


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


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


    overflow-x:auto;


}



.terminal-card pre {


    margin:
        0;


    font-family:
        var(--font-mono);


    font-size:
        .85rem;


    line-height:
        1.7;


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


}



/* ==========================================================
   TECHNOLOGY GRID
========================================================== */


.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 var(--color-border);


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


}



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


.project-content-card {


    padding:
        2rem;


    border-radius:
        20px;


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


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


}



.project-content-card h2 {


    margin-top:
        .75rem;


}



.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;


}



.website-preview-card {


    margin-top:
        1rem;


}


}



@media(max-width:600px){


.project-page {


    width:
        92%;


}



.project-hero-card {


    padding:
        1.5rem;


}



.project-grid {


    grid-template-columns:
        1fr;


}


}