/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap");

/*===== BASE =====*/
*,::before,::after{
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
body{
    margin: 3rem 0 0 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #697477;
    line-height: 1.6;
}
h1,h2,p{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
a{
    text-decoration: none;
    color: #697477;
}
img{
    max-width: 100%;
    height: auto;
    display: block;
}

/*===== CLASS CSS ===== */
.section{
    padding: 3rem 0;
}
.section-title{
    position: relative;
    font-size: 2rem;
    color: #2A3B47;
    margin: 2rem 0;
    text-align: center;
}
.section-title::after{
    position: absolute;
    content: "";
    width: 32px;
    height: .18rem;
    left: 0;
    right: 0;
    margin: auto;
    top: 2rem;
    background-color: #2196F3;
}

/*===== LAYOUT =====*/
.bd-grid{
    max-width: 1400px;
    display: grid;
    grid-template-columns: 100%;
    grid-column-gap: 2rem;
    width: calc(100% - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
}
.header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: #2196F3;
}

/*===== NAV =====*/
.nav{
    height: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media screen and (max-width: 768px){
    .nav_menu{
        position: fixed;
        top: 3rem;
        right: -100%;
        width: 80%;
        height: 100%;
        padding: 2rem;
        background-color: rgba(255,255,255,.3);
        transition: .5s;
        backdrop-filter: blur(10px);
    }
}
.nav_item{
    margin-bottom: 2rem;
}
.nav_link{
    position: relative;
    color: #2A3B47;
}
.nav_link:hover{
    color: #2196F3;
}
.logo{
    color: #FAFAFF;
}

/*===== HOME =====*/
.home{
    position: relative;
    background-color: #2196F3;
    overflow: hidden;
}
.home_container{
    height: calc(100vh - 3rem);
    row-gap: 5rem;
}
.home_title{
    text-align: center;
    align-self: flex-end;
    font-size: 6.25rem;
    color: #FAFAFF;
    line-height: .8;
}
.home_title span{
    text-shadow: 0 20px 25px rgba(0,0,0,.5);
}

/* ===== ABOUT =====*/
.about_container{
    justify-items: center;
    row-gap: 2rem;
    text-align: center;
}
.about_img{
    display: flex;
    justify-content: center;
    padding-top: 1rem;
    width: 120px;
    height: 120px;
    background-color: #2196F3;
    border-radius: 50%;
    overflow: hidden;
}
.about_img img{
    width: 100px;
}
.about_subtitle{
    font-size: 2rem;
    color: #2196F3;
    margin-bottom: .5rem;
}
.about_text{
    margin-bottom: 2rem;
}
.about_profession{
    display: block;
    margin-bottom: 2rem;
}

/* ===== SKILLS =====*/
.skills_container{
    row-gap: 2rem;
}
.skills_subtitle{
    color: #2196F3;
    margin-bottom: 1.5rem;
}
.skills_name{
    display: inline-block;
    font-size: .875rem;
    margin-right: 1rem;
    margin-bottom: 1.5rem;
    padding: .25rem .5rem;
    background-color: #FAFAFF;
    border-radius: .25rem;
}
.skills_name:hover{
    background-color: #2196F3;
    color: #FAFAFF;
}
.skills_img img{
    border-radius: .5rem;
}

/* ===== PROJECTS =====*/
.projects{
    background-color: transparent; /* let page background show through */
}
.project_container{
    display: grid;
    justify-items: stretch;
    row-gap: 2.5rem;
    gap: 28px;
    padding: 1.5rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}
.project_img{
    position: relative;
    overflow: visible;
    border-radius: 0; /* remove large outer rounding */
    background: transparent !important;
    padding: 0;
    min-height: auto;
    display: flex;
    align-items: stretch;
    margin: 0;
}
.project_img .card-inner{
    background: #ffffff; /* clean white card */
    border-radius: 10px;
    width: 100%;
    box-shadow: 0 12px 30px rgba(16,24,40,0.08);
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform .18s ease, box-shadow .18s ease, box-shadow .25s ease;
}
.project_img img{
    border-radius: 8px;
}
.project_link{
    position: static;
    display: block;
    margin-top: 12px;
}
.project_link-name{
    color: #0b66d0 !important;
    font-weight: 600;
}

.project_more{
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.project_more-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .85rem 1.4rem;
    border-radius: 999px;
    border: 2px solid #2196F3;
    background: #ffffff;
    color: #2196F3;
    font-weight: 700;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}

.project_more-link:hover{
    background: #2196F3;
    color: #FAFAFF;
    box-shadow: 0 14px 28px rgba(33,150,243,.18);
    transform: translateY(-2px);
}

/* ===== CONTACT =====*/
.contact_container{
    row-gap: 2rem;
}
.contact_info{
    display: grid;
    grid-template-columns: repeat(4, minmax(240px, 1fr));
    gap: 1.4rem;
    width: 100%;
}
.contact_item{
    padding: 1.1rem 1.15rem;
    border: 1px solid rgba(24, 105, 196, 0.12);
    border-radius: .75rem;
    background: rgba(255, 255, 255, 0.9);
    min-height: 165px;
}
.contact_subtitle{
    font-size: 1rem;
    color: #2196F3;
    margin-bottom: .75rem;
}
.contact_text{
    display: block;
    margin-bottom: 0;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.contact_inputs{
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 1rem;
}
.contact_input{
    width: 100%;
    padding: .8rem;
    outline: none;
    border: 1.5px solid #2A3B47;
    font-size: 1rem;
    margin-bottom: 2rem;
    border-radius: .5rem;
}
.contact_button{
    display: block;
    background-color: #2196F3;
    color: #FAFAFF;
    padding: .75rem 2.5rem;
    margin-left: auto;
    border-radius: .5rem;
    border: none;
    outline: none;
    font-size: 1rem;
    cursor: pointer;
}
/* Spatial-like project card styles (subtle glass + depth) */
.spatial-card{
    background: transparent !important; /* disable outer glass to avoid document-like panels */
    box-shadow: none;
    border: none;
    padding: 0;
}
.project_img .project_content h3{ color: #1690FF; }
.project_tech span{ background: rgba(23,138,255,0.12); color: #0b74d1; padding: 6px 10px; border-radius: 999px; margin-right: 8px; display: inline-block; font-size: 0.85rem; }

.resume_button {
    text-decoration: none;
    color: #fff;
    background-color: #2196F3;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s ease;
  }
  
  .resume_button:hover {
    background-color: gray;
    text-decoration: none;
  }

/* ===== FOOTER=====*/
.footer{
    background-color: #2A3B47;
}

.footer .credit {
    text-align: center;
    border-top: 0.1rem solid #222;
    color: #fff;
    padding: 1.5rem;
    padding-top: 1.5rem;
    margin-top: 1rem;
    font-size: 1rem;
  }
  
  .footer .credit span {
    color: #2196F3;
  }

/* ===== MEDIA QUERIES =====*/
/* For small devices */

@media screen and (min-width: 768px){
    body{
        margin: 0;
    }
    .section{
        padding-top: 4rem;
    }
    .section-title{
        margin-bottom: 3rem;
    }
    .section-title::after{
        width: 64px;
        top: 3rem;
    }

    .nav{
        height: calc(3rem + 1rem);
    }
    .nav_list{
        display: flex;
    }
    .nav_item{
        margin-left: 2rem;
        margin-bottom: 0;
    }
    .nav_link{
        color: #FAFAFF;
    }
    .nav_link:hover{
        color: #FAFAFF;
    }
    .active::after{
        background-color: #FAFAFF;
    }

    .home_container{
        height: 100vh;
        grid-template-rows: 1.7fr 1fr;
        row-gap: 0;
    }

    .about_container{
        grid-template-columns: 1fr;
        align-items: center;
        text-align: initial;
        padding:0;
    }
    .about_img{
        width: 250px;
        height: 250px;
    }
    .about_img img{
        width: 250px;
        height: 250px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 30px;
    }

    .skills_container{
        grid-template-columns: 1fr;
        align-items: center;
    }

    /* Explicit responsive columns: 2 columns on tablet, 3 on small desktop, 4 on large screens */
    .project_container{ grid-template-columns: repeat(2, 1fr); }
    @media screen and (min-width: 900px){
        .project_container{ grid-template-columns: repeat(3, 1fr); }
    }
    @media screen and (min-width: 1200px){
        .project_container{ grid-template-columns: repeat(4, 1fr); }
        /* Force consistent card height and limit visible featured projects to 16 (4x4) */
        .project_img .card-inner{ min-height: 260px; }
        /* If there are more than 16 project items, hide the extras from the Featured grid unless `.show-all` is set */
        .project_container:not(.show-all) > .project_img:nth-child(n+17){ display: none; }
    }

    .contact_container{
        grid-template-columns: 1fr;
        align-items: start;
    }
}

@media screen and (min-width: 1024px){
    .bd-grid{
        margin-left: auto;
        margin-right: auto;
    }
}

/* For tall screens on mobiles y desktop*/
@media screen and (min-height: 721px) {
    .home_container {
        height: 640px;
    }
}

/* Enhanced Project Card Styles */
/* Card inner content and typography for high-contrast look */
.project_content {
    padding: 0; /* moved padding to .card-inner */
}

.project_content h3 {
    color: #0b66d0;
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.project_content p {
    color: #4a5560;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 14px;
}

.project_tech {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.project_tech span {
    background: #eef7ff;
    color: #0b66d0;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid rgba(11,102,208,0.08);
}

.project_img:hover {
    transform: translateY(-6px);
}

/* subtle elevation on hover */
.project_img .card-inner:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 28px 50px rgba(16,24,40,0.14);
}

/* subtle badge hover */
.project_tech span:hover{
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(11,102,208,0.08);
}

/* Modal styles */
.modal{ position: fixed; inset: 0; display: grid; place-items: center; z-index: 2000; }
.modal.hidden{ display: none; }
.modal-overlay{ position: absolute; inset: 0; background: rgba(10,20,30,0.45); }
.modal-panel{ position: relative; background: white; padding: 22px; border-radius: 10px; width: min(720px, 92%); max-height: 80vh; overflow:auto; box-shadow: 0 30px 80px rgba(10,20,30,0.2); }
.modal-close{ position: absolute; right: 12px; top: 8px; border: none; background: transparent; font-size: 22px; cursor: pointer; }
.project_tag{ display:inline-block; background:#eef7ff; color:#0b66d0; padding:6px 10px; border-radius:999px; margin-right:8px; margin-bottom:6px; font-weight:600; }







/* Center skills section on page */
.skills_container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
}

.skills_box {
    text-align: center;
}

:root{
    --ui-bg: #edf3fb;
    --ui-card: #ffffff;
    --ui-border: rgba(24, 105, 196, 0.16);
    --ui-text: #1f2b3d;
    --ui-text-muted: #4f6078;
    --ui-primary: #1f89eb;
    --ui-primary-deep: #0f68bf;
    --ui-shadow: 0 24px 56px rgba(15, 41, 77, 0.12);
}

body.layout-story{
    background: radial-gradient(circle at 12% 15%, rgba(31, 137, 235, 0.18) 0%, rgba(31, 137, 235, 0.03) 30%, rgba(31, 137, 235, 0) 58%),
                radial-gradient(circle at 86% 12%, rgba(15, 104, 191, 0.2) 0%, rgba(15, 104, 191, 0.03) 34%, rgba(15, 104, 191, 0) 58%),
                var(--ui-bg);
    color: var(--ui-text);
}

body.layout-story .header{
    background: rgba(22, 121, 214, 0.88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

body.layout-story .logo,
body.layout-story .nav_link{
    color: #f9fcff;
}

body.layout-story .nav_link{
    font-weight: 700;
    letter-spacing: 0.01em;
}

body.layout-story .home{
    background: linear-gradient(140deg, #2294ef 0%, #0f68bf 74%);
}

body.layout-story .home_container{
    align-content: center;
    justify-items: center;
    text-align: center;
    row-gap: 1rem;
}

body.layout-story .home_title{
    font-family: 'Sora', sans-serif;
    font-size: clamp(3rem, 8vw, 5.6rem);
    line-height: 0.9;
}

body.layout-story .home_subtitle{
    color: #f5f9ff;
    font-size: clamp(1.15rem, 2.3vw, 1.7rem);
    font-weight: 700;
}

body.layout-story .section{
    padding-top: 4.3rem;
}

body.layout-story .section-title{
    font-family: 'Sora', sans-serif;
    text-align: left;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(1.8rem, 2.6vw, 2.3rem);
    color: #103b6e;
}

body.layout-story .section-title::after{
    left: 0;
    right: auto;
    width: 74px;
    height: .24rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #2ba0f7 0%, #0f68bf 100%);
}

body.layout-story .about_container,
body.layout-story .skills_container,
body.layout-story .project_container,
body.layout-story .contact_container{
    background: rgba(255,255,255,0.96);
    border: 1px solid var(--ui-border);
    border-radius: 24px;
    box-shadow: var(--ui-shadow);
    padding: 2rem;
}

body.layout-story .about_subtitle,
body.layout-story .skills_subtitle,
body.layout-story .contact_subtitle,
body.layout-story .project_content h3{
    color: var(--ui-primary-deep);
}

body.layout-story .about_text,
body.layout-story .project_content p,
body.layout-story .contact_text{
    color: var(--ui-text-muted);
}

body.layout-story .contact_info{
    grid-template-columns: repeat(4, minmax(240px, 1fr));
    gap: 1rem;
}

@media screen and (max-width: 1150px){
    .contact_info,
    body.layout-story .contact_info{
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }
}

body.layout-story .about_container{
    gap: 1.2rem;
}

body.layout-story .about_intro{
    padding-bottom: .3rem;
}

body.layout-story .about_tabs{
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: .25rem;
}

body.layout-story .about_tab{
    border: 1px solid rgba(31, 137, 235, 0.22);
    background: #f2f8ff;
    color: #0f4f8f;
    border-radius: 999px;
    padding: .58rem 1rem;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

body.layout-story .about_tab:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(22, 95, 168, .12);
}

body.layout-story .about_tab.is-active{
    background: linear-gradient(120deg, var(--ui-primary) 0%, var(--ui-primary-deep) 100%);
    color: #ffffff;
    border-color: transparent;
}

body.layout-story .about_panel{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

body.layout-story .about_panel[hidden]{
    display: none !important;
}

body.layout-story .about_panel:not([hidden]){
    display: grid;
}

body.layout-story .about_card{
    background: #f9fcff;
    border: 1px solid rgba(31, 137, 235, 0.14);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 10px 24px rgba(16, 68, 130, 0.08);
}

body.layout-story .about_card h3{
    margin: 0;
    color: #0d5ba9;
    font-size: 1.02rem;
    line-height: 1.35;
}

body.layout-story .about_card p{
    margin-top: .55rem;
    color: var(--ui-text-muted);
}

body.layout-story .about_meta{
    display: inline-block;
    margin-top: .35rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: #256fb8;
}

body.layout-story .skills_name{
    background: #edf6ff;
    color: var(--ui-primary-deep);
    border: 1px solid rgba(31, 137, 235, 0.2);
    border-radius: 999px;
    padding: .42rem .8rem;
    font-weight: 600;
}

body.layout-story .project_container{
    max-width: 1600px;
    gap: 16px;
    padding: 1rem;
}

body.layout-story .project_img .card-inner{
    border-radius: 16px;
    border: 1px solid rgba(31, 137, 235, 0.14);
    box-shadow: 0 16px 34px rgba(17, 53, 99, 0.08);
}

body.layout-story .project_img .card-inner:hover{
    transform: translateY(-6px);
    box-shadow: 0 22px 42px rgba(17, 53, 99, 0.14);
}

body.layout-story .project_tech span,
body.layout-story .project_tag{
    background: #eaf5ff;
    color: var(--ui-primary-deep);
    border-color: rgba(31, 137, 235, 0.16);
}

body.layout-story .project_link-name,
body.layout-story .project_more-link{
    color: var(--ui-primary-deep) !important;
}

body.layout-story .project_more-link{
    border-color: var(--ui-primary);
    background: #ffffff;
}

body.layout-story .project_more-link:hover{
    color: #ffffff !important;
    background: linear-gradient(120deg, var(--ui-primary) 0%, var(--ui-primary-deep) 100%);
}

body.layout-story .contact_input{
    border-color: rgba(24, 105, 196, 0.24);
    background: #f8fbff;
}

body.layout-story .contact_button,
body.layout-story .resume_button{
    background: linear-gradient(120deg, var(--ui-primary) 0%, var(--ui-primary-deep) 100%);
}

body.layout-story .footer{
    background: linear-gradient(120deg, #0f68bf 0%, #1f89eb 100%);
}

body.layout-story .footer .credit span{
    color: #ffffff;
}

@media screen and (max-width: 768px){
    body.layout-story .home_tagline{
        font-size: .98rem;
        padding: 0 .4rem;
    }

    body.layout-story .about_container,
    body.layout-story .skills_container,
    body.layout-story .project_container,
    body.layout-story .contact_container{
        padding: 1.2rem;
        border-radius: 18px;
    }

    body.layout-story .section-title{
        font-size: 1.55rem;
    }

    body.layout-story .about_panel{
        grid-template-columns: 1fr;
    }

    body.layout-story .about_tab{
        font-size: .84rem;
    }

    body.layout-story .contact_info,
    .contact_info{
        grid-template-columns: 1fr;
    }
}