/*
Title: synara.css
Author: Tango Hunter
Date Created: 7/27/26
Description: Style Sheet for the SYNARA Profile
*/


/* INTRO */

.intro{
    display:grid;
    grid-template-columns: 300px minmax(0,1fr);
    gap:4rem;
    align-items:center;
    margin-bottom:3rem;
}

.intro-image{
    text-align:center;
}

.intro-image img{
    width:100%;
    max-width:340px;
    filter: drop-shadow(0 0 18px rgba(0,255,120,.35));
    margin-top:-60px;
}

.intro-content{
    background:var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius:16px;
    padding:2rem;
    box-shadow:var(--shadow);
}


/* FEATURES */

.feature-grid{
    display:grid;
    grid-template-columns: repeat( auto-fit, minmax(280px,1fr));
    gap:2rem;
}

.feature-icon{
    font-size:3rem;
    margin-bottom:1rem;
}


/* WORKFLOW */

.workflow-container{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:1rem;
}

.workflow-step{
    flex:1;
    min-width:220px;
    padding:2rem;
    text-align:center;
    box-shadow:var(--shadow);
}

.step-number{
    width:60px;
    height:60px;
    margin:auto;
    margin-bottom:1.5rem;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.5rem;
    font-weight:bold;
}

.workflow-arrow{
    font-size:2rem;
    color:var(--accent);
    align-self:center;
}

.workflow-note{
    margin-top:2rem;
    text-align:center;
    color:var(--accent);
    font-size:1.1rem;
}

/* TECHNOLOGY */

.technology-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap:2rem;
}

.technology-card{
    padding:2rem;
    text-align:center;
    box-shadow:var(--shadow);
}


.technology-card img{
    width:70px;
    height:70px;
    object-fit:contain;
    margin-bottom:1rem;
}


/* DESIGN PRINCIPLES */

.principles-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap:2rem;
}

.principle-card{
    padding:2rem;
    box-shadow:var(--shadow);
}


/* GET STARTED */

.resources{
    margin-bottom:6rem;
}

.resources-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
    gap:2rem;
}

.resource-card{
    display:flex;
    flex-direction:column;
    text-align:center;
    padding:2rem;
}

.resource-icon{
    font-size:3rem;
    margin-bottom:1rem;
}

.resource-card h3{
    margin-bottom:1rem;
}

.resource-card p{
    flex:1;
    margin-bottom:2rem;
}

.legal-link {
    color: var(--accent-main);
    font-size: 1.25rem;
    text-decoration:none;
}

.legal-link:hover{
    text-decoration:underline;
}

.resource-card .disabled{
    opacity:.55;
    pointer-events:none;
    cursor:default;
}


/* RESPONSIVE DESIGN */

@media(max-width:1100px){

    .workflow-arrow{
        display:none;
    }

}

@media(max-width:950px){

    .intro{
        grid-template-columns:1fr;
        text-align:center;
    }


    .intro-image img{
        display:none;
    }

}

@media(max-width:768px){

    .feature-grid,
    .technology-grid,
    .principles-grid{
        grid-template-columns:1fr;
    }

    .workflow-container{
        flex-direction:column;
    }

    .workflow-step{
        width:100%;
    }

}

@media(max-width:480px){

    .intro-content{
        padding:1.5rem;
    }

    .feature-card,
    .technology-card,
    .principle-card,
    .workflow-step{
        padding:1.5rem;
    }

}