/* ==========================================
   GPIR Architecture Library
========================================== */

#architecture-library{

    position:relative;

    padding:120px 0;

    background:#F8FAFC;

    overflow:hidden;

}

.architecture-header{

    max-width:860px;

    margin:0 auto 70px;

    text-align:center;

}

.architecture-header .section-label{

    display:inline-block;

    background:var(--color-primary);

    color:var(--hero-navy);

    padding:8px 18px;

    border-radius:30px;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:22px;

}

.architecture-header h2{

    margin:18px 0 22px;

    font-size:var(--fs-section-heading);

    line-height:1.15;

    color:var(--hero-navy);
}

.architecture-header p{

    max-width:760px;

    margin:0 auto;

    font-size:18px;

    line-height:1.9;

    color:var(--hero-light-body);

}

.architecture-card h3{

    padding:0 28px;

    margin:0;

    font-size:var(--fs-card-heading);

    color:var(--hero-navy);

}

.architecture-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(320px,1fr));

    gap:32px;

    margin-top:60px;

}

.architecture-card{

    display:flex;

    flex-direction:column;

    background:var(--color-white);

    border-radius:22px;

    overflow:hidden;

    border:1px solid rgba(18,50,91,.08);

    transition:.35s ease;

    box-shadow:

        0 10px 25px rgba(0,0,0,.06);

}

.architecture-card:hover{

    transform:translateY(-6px);

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

    box-shadow:

        0 30px 60px rgba(18,50,91,.20);

}


.architecture-card img{

    width:100%;

    height:220px;

    object-fit:contain;

    padding:24px;

    background:#F6F8FB;

}


.architecture-card p{

    color:var(--hero-light-body);

    font-size:var(--fs-body-sm);

    line-height:1.8;

    text-align:justify;

    text-align-last:left;

    padding:0 28px;

    margin:18px 0;

    flex-grow:1;

}

.architecture-card a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin:24px 28px 28px;

    font-weight:700;

    color:var(--hero-navy);

    text-decoration:none;

    border-top:1px solid rgba(18,50,91,.08);

    padding-top:18px;

    transition:.3s ease;

}


.architecture-card a:hover{

    color:var(--color-primary);

}

.architecture-card::before{

    content:"";

    display:block;

    height:4px;

    background:var(--color-primary);

}

.architecture-content{

    display:flex;

    flex-direction:column;

    flex:1;

}

/* ==========================================
   Architecture Badge
========================================== */

.architecture-badge{

    display:inline-flex;

    align-items:center;

    margin:24px 28px 12px;

    padding:8px 16px;

    background:rgba(212,175,55,.12);

    color:var(--hero-navy);

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

/* ==========================================
   Responsive
========================================== */

@media (max-width:1200px){

    .architecture-grid{

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

    }

}

@media (max-width:768px){

    #architecture-library{

        padding:60px 0;

    }

    .architecture-header{

        margin-bottom:50px;

    }

    .architecture-header h2{

        font-size:2rem;

    }

    .architecture-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

    .architecture-card img{

        height:200px;

    }

}