/* =======================================================
   Portfolio Engine
   layout.css
   Layout, Navbar, Hero, Footer & Grid
======================================================= */

/* ===========================
   NAVBAR
=========================== */

header{

    position:sticky;
    top:0;
    z-index:1000;

    background:rgba(13,17,23,.80);

    backdrop-filter:blur(16px);

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

}

.navbar{

    width:min(92%,var(--container));

    margin-inline:auto;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo{

    font-size:1.7rem;

    font-weight:700;

    color:var(--text);

}

.logo span{

    color:var(--primary);

}

.nav-links{

    display:flex;

    align-items:center;

    gap:2rem;

}

.nav-links a{

    color:var(--muted);

    font-weight:500;

    transition:var(--transition);

}

.nav-links a:hover,

.nav-links a.active{

    color:var(--primary);

}

.menu-toggle{

    display:none;

    font-size:2rem;

    color:var(--text);

}

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

.hero-section{

    min-height:calc(100vh - 72px);

    display:flex;

    align-items:center;

}

.hero-content{

    width:min(92%,var(--container));

    margin-inline:auto;

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:4rem;

    align-items:center;

}

.hero-label{

    display:inline-block;

    margin-bottom:1rem;

    color:var(--primary);

    font-weight:600;

}

.hero-text h2{

    margin-top:1rem;

    font-size:1.5rem;

    color:var(--primary);

}

.hero-text p{

    margin-top:1.5rem;

    max-width:650px;

}

.hero-buttons{

    margin-top:2.5rem;

    display:flex;

    gap:1rem;

    flex-wrap:wrap;

}

.hero-image{

    display:flex;

    justify-content:center;

}

.hero-image img{

    width:350px;

    aspect-ratio:1;

    object-fit:cover;

    border-radius:50%;

    border:5px solid var(--border);

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

}

/* ===========================
   SECTION HEADER
=========================== */

.section-header{

    text-align:center;

    margin-bottom:4rem;

}

.section-header h2{

    margin-bottom:.8rem;

}

.section-header p{

    max-width:700px;

    margin-inline:auto;

}

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

.stats-grid,

.projects-grid{

    display:grid;

    gap:2rem;

}

.stats-grid{

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

}

.projects-grid{

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

}

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

.footer{

    margin-top:120px;

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

    background:var(--surface);

}

.footer-container{

    width:min(92%,var(--container));

    margin-inline:auto;

    padding:60px 0;

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:3rem;

}

.footer-brand h2{

    font-size:1.8rem;

    margin-bottom:.7rem;

}

.footer-links,

.footer-social{

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.footer-links a,

.footer-social a{

    color:var(--muted);

    transition:var(--transition);

}

.footer-links a:hover,

.footer-social a:hover{

    color:var(--primary);

}

.footer-bottom{

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

    text-align:center;

    padding:25px;

}

/* ===========================
   MAIN
=========================== */

main{

    min-height:100vh;

}