/* =========================================================
   WinOLS Archive
   ========================================================= */

.winols-archive {

    position: relative;

    padding: 110px 20px;

    background: #06070d;

    color: #ffffff;

    overflow: hidden;

}


.winols-archive::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -220px;
    top: 20%;

    background: rgba(239,17,17,.06);

    filter: blur(120px);

    pointer-events: none;

}


.winols-archive-container {

    width: min(1180px, 100%);

    margin: 0 auto;

    position: relative;

    z-index: 1;

}


/* =========================================================
   Header
   ========================================================= */

.winols-archive-header {

    max-width: 720px;

    margin: 0 auto 55px;

    text-align: center;

}


.winols-archive-header .section-eyebrow {

    display: block;

    margin-bottom: 15px;

    color: #ef1111;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

}


.winols-archive-header h2 {

    margin: 0;

    font-size: clamp(32px, 4vw, 48px);

    line-height: 1.15;

}


.winols-archive-header h2 span {

    color: #ef1111;

}


.winols-archive-header p {

    max-width: 620px;

    margin: 20px auto 0;

    color: rgba(255,255,255,.55);

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   Main Card
   ========================================================= */

.winols-archive-card {

    position: relative;

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 16px;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.015)
        );

    overflow: hidden;

    box-shadow:
        0 25px 70px rgba(0,0,0,.25);

}


/* =========================================================
   Glow
   ========================================================= */

.winols-archive-glow {

    position: absolute;

    width: 500px;
    height: 250px;

    top: -150px;
    right: -100px;

    background: rgba(239,17,17,.08);

    filter: blur(90px);

    pointer-events: none;

}


/* =========================================================
   Main Information
   ========================================================= */

.winols-archive-main {

    display: grid;

    grid-template-columns: 300px 1fr;

    gap: 50px;

    padding: 55px 55px 45px;

    border-bottom: 1px solid rgba(255,255,255,.08);

}


.winols-archive-count {

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.winols-archive-count strong {

    color: #ef1111;

    font-size: clamp(52px, 6vw, 78px);

    font-weight: 700;

    line-height: .95;

    letter-spacing: -2px;

}


.winols-archive-count span {

    margin-top: 12px;

    color: rgba(255,255,255,.65);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

}


.winols-archive-text {

    align-self: center;

    max-width: 650px;

}


.winols-archive-text h3 {

    margin: 0 0 15px;

    font-size: 25px;

}


.winols-archive-text p {

    margin: 0;

    color: rgba(255,255,255,.55);

    font-size: 14px;

    line-height: 1.9;

}


/* =========================================================
   Features
   ========================================================= */

.winols-archive-features {

    display: grid;

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

}


.winols-archive-feature {

    position: relative;

    min-height: 190px;

    padding: 30px;

    border-right: 1px solid rgba(255,255,255,.08);

    transition:
        background .25s ease;

}


.winols-archive-feature:last-child {

    border-right: 0;

}


.winols-archive-feature:hover {

    background: rgba(239,17,17,.035);

}


.archive-number {

    display: block;

    margin-bottom: 25px;

    color: #ef1111;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


.winols-archive-feature h4 {

    margin: 0 0 12px;

    font-size: 17px;

}


.winols-archive-feature p {

    margin: 0;

    color: rgba(255,255,255,.48);

    font-size: 12px;

    line-height: 1.7;

}


/* =========================================================
   Bottom
   ========================================================= */

.winols-archive-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 28px 35px;

}


.archive-coverage {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.archive-coverage span {

    color: rgba(255,255,255,.35);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

}


.archive-coverage strong {

    color: rgba(255,255,255,.75);

    font-size: 12px;

    font-weight: 500;

}


.winols-archive-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-width: 210px;

    height: 44px;

    padding: 0 20px;

    color: #ffffff;

    background: #ef1111;

    border: 1px solid #ef1111;

    border-radius: 7px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 600;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;

}


.winols-archive-button span {

    font-size: 18px;

}


.winols-archive-button:hover {

    color: #ef1111;

    background: #ffffff;

    transform: translateY(-2px);

}


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

@media (max-width: 900px) {

    .winols-archive-main {

        grid-template-columns: 1fr;

        gap: 30px;

    }


    .winols-archive-features {

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

    }


    .winols-archive-feature:nth-child(2) {

        border-right: 0;

    }


    .winols-archive-feature:nth-child(-n+2) {

        border-bottom: 1px solid rgba(255,255,255,.08);

    }

}


@media (max-width: 600px) {

    .winols-archive {

        padding: 80px 15px;

    }


    .winols-archive-main {

        padding: 40px 25px;

    }


    .winols-archive-features {

        grid-template-columns: 1fr;

    }


    .winols-archive-feature {

        border-right: 0;

        border-bottom: 1px solid rgba(255,255,255,.08);

    }


    .winols-archive-feature:last-child {

        border-bottom: 0;

    }


    .winols-archive-bottom {

        flex-direction: column;

        align-items: flex-start;

        padding: 25px;

    }


    .winols-archive-button {

        width: 100%;

    }

}