/* ==========================================================
   VIREXIS — PATHOLOGY EDITORIAL SYSTEM V1
   ========================================================== */

.vx-pathology{
    background:#f4f6f7;
    color:#12242a;
}

.vx-pathology__article{
    width:100%;
}

.vx-pathology__hero{
    min-height:620px;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    background:#0b1c21;
}

.vx-pathology__hero-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:90px clamp(32px,7vw,110px);
}

.vx-pathology__eyebrow,
.vx-pathology-archive__eyebrow{
    margin-bottom:22px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#65dce9;
}

.vx-pathology__zone{
    margin-bottom:18px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(220,240,244,.62);
}

.vx-pathology__title{
    max-width:700px;
    margin:0;
    font-size:clamp(48px,6vw,92px);
    line-height:.94;
    font-weight:500;
    letter-spacing:-.045em;
    color:#fff;
}

.vx-pathology__intro{
    max-width:620px;
    margin:30px 0 0;
    font-size:18px;
    line-height:1.7;
    color:rgba(235,247,249,.72);
}

.vx-pathology__hero-image{
    position:relative;
    min-height:620px;
    margin:0;
    overflow:hidden;
}

.vx-pathology__hero-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(11,28,33,.2),
        transparent 40%
    );
}

.vx-pathology__hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.vx-pathology__body{
    width:min(1180px,calc(100% - 48px));
    margin:0 auto;
    padding:90px 0;
}

.vx-pathology__content{
    max-width:820px;
    margin:0 auto;
}

.vx-pathology__content > *{
    margin-top:0;
    margin-bottom:28px;
}

.vx-pathology__content h2{
    margin-top:72px;
    font-size:34px;
    line-height:1.15;
    letter-spacing:-.025em;
}

.vx-pathology__content h3{
    margin-top:50px;
    font-size:23px;
    line-height:1.25;
}

.vx-pathology__content p,
.vx-pathology__content li{
    font-size:17px;
    line-height:1.8;
    color:#42545a;
}

.vx-pathology__content strong{
    color:#12242a;
}

.vx-pathology__content img{
    width:100%;
    height:auto;
    display:block;
    margin:50px 0;
}

.vx-pathology__footer{
    padding:55px max(32px,7vw);
    background:#0b1c21;
}

.vx-pathology__footer-label{
    margin-bottom:15px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.16em;
    color:#65dce9;
}

.vx-pathology__footer p{
    max-width:820px;
    margin:0;
    font-size:12px;
    line-height:1.7;
    color:rgba(225,240,243,.56);
}


/* ==========================================================
   ARCHIVE
   ========================================================== */

.vx-pathology-archive{
    background:#f4f6f7;
    min-height:70vh;
}

.vx-pathology-archive__hero{
    padding:120px max(32px,7vw) 90px;
    background:#0b1c21;
    color:#fff;
}

.vx-pathology-archive__hero h1{
    margin:0;
    font-size:clamp(48px,7vw,88px);
    line-height:.95;
    letter-spacing:-.045em;
    font-weight:500;
}

.vx-pathology-archive__hero p{
    max-width:680px;
    margin:28px 0 0;
    font-size:18px;
    line-height:1.7;
    color:rgba(235,247,249,.7);
}

.vx-pathology-archive__grid{
    width:min(1250px,calc(100% - 48px));
    margin:0 auto;
    padding:80px 0 110px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.vx-pathology-card{
    background:#fff;
    border:1px solid rgba(18,36,42,.08);
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.vx-pathology-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 45px rgba(18,36,42,.08);
}

.vx-pathology-card__image{
    display:block;
    aspect-ratio:16/10;
    overflow:hidden;
}

.vx-pathology-card__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
}

.vx-pathology-card:hover
.vx-pathology-card__image img{
    transform:scale(1.035);
}

.vx-pathology-card__content{
    padding:30px;
}

.vx-pathology-card__zone{
    margin-bottom:14px;
    font-size:9px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#3bbdcc;
}

.vx-pathology-card h2{
    margin:0;
    font-size:27px;
    line-height:1.1;
    letter-spacing:-.025em;
}

.vx-pathology-card h2 a{
    color:#12242a;
    text-decoration:none;
}

.vx-pathology-card p{
    margin:18px 0 24px;
    font-size:14px;
    line-height:1.7;
    color:#65777c;
}

.vx-pathology-card__link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:9px;
    font-weight:700;
    letter-spacing:.14em;
    text-decoration:none;
    color:#12242a;
}

.vx-pathology-card__link span{
    color:#35bfce;
}

.vx-pathology-archive__empty{
    grid-column:1/-1;
    padding:80px;
    text-align:center;
    background:#fff;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:900px){

    .vx-pathology__hero{
        grid-template-columns:1fr;
    }

    .vx-pathology__hero-content{
        padding:80px 28px 60px;
    }

    .vx-pathology__hero-image{
        min-height:420px;
    }

    .vx-pathology__body{
        width:min(100% - 36px,820px);
        padding:65px 0;
    }

    .vx-pathology-archive__hero{
        padding:90px 28px 65px;
    }

    .vx-pathology-archive__grid{
        grid-template-columns:1fr;
        width:min(100% - 36px,650px);
        padding:55px 0 80px;
    }
}

@media (max-width:600px){

    .vx-pathology__title{
        font-size:48px;
    }

    .vx-pathology__intro{
        font-size:16px;
    }

    .vx-pathology__content p,
    .vx-pathology__content li{
        font-size:16px;
    }

    .vx-pathology__footer{
        padding:45px 25px;
    }
}