.saints-page{

    min-height:100vh;
    padding:150px 24px 72px;

}

.saints-panel{

    width:min(1120px, 100%);
    margin:auto;
    padding:clamp(28px, 5vw, 52px);
    border:1px solid var(--border);
    border-radius:var(--radius-large);
    background:rgba(8, 26, 44, .8);
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(14px);

}

.saints-loading,
.saints-error{

    margin:0;
    color:var(--text-muted);
    text-align:center;

}

.saints-header{

    max-width:700px;
    margin:0 auto 38px;
    text-align:center;

}

.saints-eyebrow,
.saint-category{

    margin:0 0 7px;
    color:var(--secondary);
    font-size:.78rem;
    letter-spacing:.12em;
    text-transform:uppercase;

}

.saints-header h1{

    margin:0;
    font-size:clamp(2.4rem, 6vw, 4rem);

}

.saints-header > p:last-child{

    margin:12px 0 0;
    color:var(--text-muted);
    line-height:1.7;

}

.saints-gallery{

    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;

}

.saint-card{

    position:relative;
    min-height:250px;
    overflow:hidden;
    padding:68px 24px 24px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:var(--radius-medium);
    background:linear-gradient(145deg, rgba(75,163,255,.14), rgba(2,11,22,.4) 58%);
    transition:transform var(--transition-fast), border-color var(--transition-normal), box-shadow var(--transition-normal);

}

.saint-card::after{

    position:absolute;
    right:-24px;
    bottom:-52px;
    width:150px;
    aspect-ratio:1;
    border:1px solid rgba(139,233,255,.12);
    border-radius:50%;
    box-shadow:inset 0 0 30px rgba(139,233,255,.06);
    content:"";
    pointer-events:none;

}

.saint-card:hover{

    transform:translateY(-4px);
    border-color:rgba(139,233,255,.36);
    box-shadow:0 16px 35px rgba(0,0,0,.18), 0 0 28px rgba(75,163,255,.13);

}

.saint-seal{

    position:absolute;
    top:20px;
    left:22px;
    display:grid;
    width:31px;
    aspect-ratio:1;
    place-items:center;
    border:1px solid rgba(139,233,255,.35);
    border-radius:50%;
    color:var(--secondary);
    font-size:.67rem;
    letter-spacing:.08em;

}

.saint-card h2{

    margin:0;
    font-size:1.35rem;

}

.saint-card h3{

    margin:9px 0 15px;
    color:var(--primary-light);
    font-size:.92rem;
    font-weight:normal;
    line-height:1.45;

}

.saint-card > p:last-child{

    position:relative;
    z-index:1;
    margin:0;
    color:var(--text-muted);
    font-size:.9rem;
    line-height:1.65;

}

@media (max-width:850px){

    .saints-gallery{

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

    }

}

@media (max-width:600px){

    .saints-page{

        padding:112px 12px 42px;

    }

    .saints-panel{

        padding:28px 18px;
        border-radius:var(--radius-medium);

    }

    .saints-gallery{

        grid-template-columns:1fr;

    }

    .saint-card{

        min-height:0;

    }

}