/* =======================================================
   Portfolio Engine
   pages.css
   Page-specific styling
======================================================= */

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

.hero-text h1{

    margin-bottom:1rem;

    letter-spacing:-1px;

}

.hero-text h2{

    margin-bottom:1.5rem;

    max-width:700px;

}

.hero-text p{

    font-size:1.05rem;

    max-width:650px;

}

.hero-label{

    text-transform:uppercase;

    letter-spacing:1px;

    font-size:.9rem;

}

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

.hero-image{

    position:relative;

}

.hero-image img{

    width:360px;

    height:360px;

    object-fit:cover;

    border-radius:50%;

    background:var(--surface);

}

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

.stats-section{

    padding-top:20px;

}

/* ===========================
   FEATURED PROJECTS
=========================== */

.projects-section{

    padding-top:40px;

}

.projects-section .section-header{

    margin-bottom:60px;

}

/* ===========================
   PROJECT DETAILS
=========================== */

.project-description{

    min-height:80px;

}

.project-buttons{

    margin-top:auto;

    padding-top:20px;

}

/* ===========================
   SKILLS
=========================== */

.skills-section{

    padding-top:60px;

}

.skills-grid{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:16px;

}

/* ===========================
   ABOUT PAGE
=========================== */

.about-section{

    max-width:850px;

    margin:auto;

}

.about-section p{

    margin-bottom:20px;

}

/* ===========================
   TIMELINE
=========================== */

.timeline{

    margin-top:50px;

}

.timeline-item{

    padding:30px;

    border-left:3px solid var(--primary);

    margin-bottom:25px;

    background:var(--surface);

    border-radius:0 16px 16px 0;

}

.timeline-item h3{

    margin-bottom:8px;

}

/* ===========================
   CONTACT
=========================== */

.contact-section{

    text-align:center;

}

.contact-links{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:40px;

}

/* ===========================
   EMPTY STATES
=========================== */

.empty-state{

    text-align:center;

    padding:80px 20px;

    color:var(--muted);

}

/* ===========================
   SECTION SPACING
=========================== */

#stats{

    margin-top:-30px;

}

#featured-projects{

    margin-top:30px;

}

#skills{

    margin-top:30px;

}

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

.page-title{

    text-align:center;

    margin-bottom:70px;

}

.page-title h1{

    margin-bottom:15px;

}

.page-title p{

    max-width:700px;

    margin:auto;

}

/* ===========================
   HOVER EFFECT
=========================== */

.project-card{

    cursor:pointer;

}