/*========================================================================

TENET SOLUTIONS FRAMEWORK

--------------------------------------------------------------------------

Project     : Tenet Solutions Website
File        : resources.css
Author      : Tenet Solutions (Technical Partner & Solutions Architect)
Signature   : Designed & Engineered with Intent.

All Rights Reserved. Copyright 2026

========================================================================*/

.ts-resources-hero{

    position:relative;

    overflow:hidden;

    padding:170px 0 140px;

    background:
        linear-gradient(
            rgba(1,13,35,.88),
            rgba(1,13,35,.95)
        ),
        url("../images/resources/resources-bg.jpg")
        center center/cover
        no-repeat;

}

.ts-resources-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at top center,
            rgba(146,215,248,.10),
            transparent 48%
        );

    pointer-events:none;

}

.ts-resources-hero::after{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    right:-420px;

    top:-420px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(146,215,248,.08),
            transparent 72%
        );

    pointer-events:none;

}

.ts-resources-hero .container{

    position:relative;

    z-index:2;

}



/*==========================================================
    HERO CONTENT
==========================================================*/

.ts-resources-hero h1{

    color:#ffffff;

    margin:28px 0;

    line-height:1.15;

}

.ts-resources-hero p{

    max-width:620px;

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

    line-height:1.9;

    font-size:1.05rem;

}



/*==========================================================
    FEATURED RESOURCE
==========================================================*/

.ts-featured-resource{

    position:relative;

    overflow:hidden;

    padding:40px;

    border-radius:34px;

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(146,215,248,.12);

    backdrop-filter:blur(18px);

    box-shadow:
        0 35px 80px rgba(0,0,0,.35);

    transition:
        transform .35s,
        border-color .35s,
        box-shadow .35s;

}

.ts-featured-resource:hover{

    transform:translateY(-8px);

    border-color:rgba(146,215,248,.28);

}



/*==========================================================
    RESOURCE COVER
==========================================================*/

.ts-resource-cover{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    box-shadow:
        0 20px 45px rgba(0,0,0,.35);

}

.ts-resource-cover img{

    display:block;

    width:100%;

    transition:
        transform .8s ease;

}

.ts-featured-resource:hover
.ts-resource-cover img{

    transform:scale(1.04);

}



/*==========================================================
    BADGE
==========================================================*/

.ts-resource-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:20px;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(146,215,248,.12);

    color:#92d7f8;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}



/*==========================================================
    RESOURCE DETAILS
==========================================================*/

.ts-featured-resource h2{

    color:#ffffff;

    margin-bottom:22px;

    line-height:1.2;

}

.ts-featured-resource p{

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

    line-height:1.85;

    margin-bottom:26px;

}



/*==========================================================
    META
==========================================================*/

.ts-resource-meta{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:28px;

}

.ts-resource-meta span{

    padding:8px 18px;

    border-radius:999px;

    background:rgba(255,255,255,.06);

    color:#92d7f8;

    font-size:.82rem;

    font-weight:600;

}

/*==========================================================
    RESOURCE CATEGORIES
==========================================================*/

.ts-resource-categories{

    position:relative;

    padding:140px 0;

    background:
        radial-gradient(
            circle at top center,
            rgba(146,215,248,.06),
            transparent 48%
        ),
        #010d23;

}

.ts-resource-categories::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.015),
            transparent 28%
        );

    pointer-events:none;

}

.ts-resource-categories .container{

    position:relative;

    z-index:2;

}



/*==========================================================
    SECTION HEADING
==========================================================*/

.ts-resource-heading{

    text-align:center;

    margin-bottom:70px;

}

.ts-resource-heading h2{

    color:#ffffff;

    margin:24px 0;

}

.ts-resource-heading p{

    max-width:760px;

    margin:auto;

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

    line-height:1.9;

}



/*==========================================================
    GRID
==========================================================*/

.ts-resource-grid{

    display:grid;

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

    gap:32px;

}



/*==========================================================
    RESOURCE CARD
==========================================================*/

.ts-resource-card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    padding:42px;

    border-radius:30px;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(146,215,248,.10);

    backdrop-filter:blur(18px);

    transition:

        transform .35s,

        border-color .35s,

        background .35s,

        box-shadow .35s;

}

.ts-resource-card:hover{

    transform:translateY(-10px);

    background:

        rgba(146,215,248,.05);

    border-color:

        rgba(146,215,248,.28);

    box-shadow:

        0 28px 60px rgba(0,0,0,.30);

}



/*==========================================================
    LIGHT OVERLAY
==========================================================*/

.ts-resource-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

        linear-gradient(

            135deg,

            rgba(146,215,248,.08),

            transparent 70%

        );

    opacity:0;

    transition:.35s;

}

.ts-resource-card:hover::before{

    opacity:1;

}

.ts-resource-card>*{

    position:relative;

    z-index:2;

}



/*==========================================================
    ICON
==========================================================*/

.ts-resource-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    width:72px;

    height:72px;

    margin-bottom:30px;

    border-radius:22px;

    background:

        rgba(146,215,248,.10);

    color:#92d7f8;

    font-size:1.8rem;

    transition:

        transform .35s,

        background .35s;

}

.ts-resource-card:hover

.ts-resource-icon{

    transform:translateY(-5px);

    background:

        rgba(146,215,248,.18);

}



/*==========================================================
    CONTENT
==========================================================*/

.ts-resource-content h3{

    color:#ffffff;

    margin-bottom:20px;

    line-height:1.3;

    transition:.35s;

}

.ts-resource-card:hover

.ts-resource-content h3{

    color:#92d7f8;

}



/*==========================================================
    RESOURCE LIST
==========================================================*/

.ts-resource-content ul{

    margin:0;

    padding:0;

    list-style:none;

}

.ts-resource-content li{

    position:relative;

    padding-left:26px;

    margin-bottom:18px;

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

    line-height:1.7;

    transition:

        color .30s,

        transform .30s;

}

.ts-resource-content li:last-child{

    margin-bottom:0;

}

.ts-resource-content li::before{

    content:"";

    position:absolute;

    left:0;

    top:11px;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#92d7f8;

}

.ts-resource-content li:hover{

    transform:translateX(5px);

    color:#ffffff;

}



/*==========================================================
    LINK
==========================================================*/

.ts-resource-content a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:35px;

    color:#92d7f8;

    font-weight:600;

    text-decoration:none;

    transition:

        gap .30s,

        color .30s;

}

.ts-resource-content a i{

    transition:transform .30s;

}

.ts-resource-content a:hover{

    gap:16px;

    color:#ffffff;

}

.ts-resource-content a:hover i{

    transform:translateX(4px);

}

/*==========================================================
    FEATURED DOWNLOADS
==========================================================*/

.ts-featured-downloads{

    position:relative;

    padding:140px 0;

    background:
        radial-gradient(
            circle at top center,
            rgba(146,215,248,.05),
            transparent 48%
        ),
        #010d23;

}

.ts-featured-downloads .container{

    position:relative;

    z-index:2;

}

.ts-download-grid{

    display:grid;

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

    gap:34px;

}



/*==========================================================
    DOWNLOAD CARD
==========================================================*/

.ts-download-card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    padding:42px;
	
	height: 100%;

    border-radius:30px;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(146,215,248,.10);

    backdrop-filter:blur(18px);

    transition:

        transform .35s,

        border-color .35s,

        background .35s,

        box-shadow .35s;

}

.ts-download-card:hover{

    transform:translateY(-10px);

    background:

        rgba(146,215,248,.05);

    border-color:

        rgba(146,215,248,.28);

    box-shadow:

        0 28px 60px rgba(0,0,0,.30);

}



/*==========================================================
    DOWNLOAD HEADER
==========================================================*/

.ts-download-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:26px;

}

.ts-download-header img{

    width:52px;

    height:auto;

}

.ts-download-header span{

    padding:8px 16px;

    border-radius:999px;

    background:rgba(146,215,248,.10);

    color:#92d7f8;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}



/*==========================================================
    DOWNLOAD CONTENT
==========================================================*/

.ts-download-card h3{

    color:#ffffff;

    margin-bottom:20px;

    line-height:1.3;

}

.ts-download-card p{

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

    line-height:1.8;

    margin-bottom:30px;

    flex-grow:1;

}



/*==========================================================
    DOWNLOAD META
==========================================================*/

.ts-download-meta{

    display:flex;

    gap:14px;

    flex-wrap:wrap;

    margin-bottom:28px;

}

.ts-download-meta span{

    padding:8px 16px;

    border-radius:999px;

    background:rgba(255,255,255,.05);

    color:#92d7f8;

    font-size:.82rem;

    font-weight:600;

}



/*==========================================================
    BUSINESS TOOLS
==========================================================*/

.ts-business-tools{

    position:relative;

    padding:140px 0;

    background:
        radial-gradient(
            circle at top center,
            rgba(146,215,248,.05),
            transparent 48%
        ),
        #010d23;

}

.ts-business-tools .container{

    position:relative;

    z-index:2;

}

.ts-tools-grid{

    display:grid;

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

    gap:34px;

}



/*==========================================================
    TOOL CARD
==========================================================*/

.ts-tool-card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    height:100%;

    padding:42px;

    border-radius:30px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(146,215,248,.10);

    transition:
        transform .35s,
        border-color .35s,
        background .35s,
        box-shadow .35s;

}

.ts-tool-card:hover{

    transform:translateY(-10px);

    background:rgba(146,215,248,.05);

    border-color:rgba(146,215,248,.28);

    box-shadow:
        0 28px 60px rgba(0,0,0,.35);

}



/*==========================================================
    TOOL ICON
==========================================================*/

.ts-tool-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    width:76px;

    height:76px;

    margin-bottom:28px;

    border-radius:24px;

    background:rgba(146,215,248,.10);

    color:#92d7f8;

    font-size:2rem;

    transition:
        transform .35s,
        background .35s;

}

.ts-tool-card:hover .ts-tool-icon{

    transform:rotate(-5deg) scale(1.05);

    background:rgba(146,215,248,.18);

}



/*==========================================================
    TOOL BADGE
==========================================================*/

.ts-tool-badge{

    display:inline-flex;

    align-self:flex-start;

    margin-bottom:22px;

    padding:8px 16px;

    border-radius:999px;

    background:rgba(146,215,248,.10);

    color:#92d7f8;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}



/*==========================================================
    TOOL CONTENT
==========================================================*/

.ts-tool-card h3{

    color:#ffffff;

    margin-bottom:18px;

}

.ts-tool-card p{

    flex-grow:1;

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

    line-height:1.85;

    margin-bottom:30px;

}



/*==========================================================
    TOOL LINK
==========================================================*/

.ts-tool-card a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#92d7f8;

    font-weight:600;

    text-decoration:none;

    transition:
        color .30s,
        gap .30s;

}

.ts-tool-card a:hover{

    gap:16px;

    color:#ffffff;

}

.ts-tool-card a i{

    transition:transform .30s;

}

.ts-tool-card a:hover i{

    transform:translateX(4px);

}

/*==========================================================
    NEWSLETTER
==========================================================*/

.ts-resource-newsletter{

    position:relative;

    padding:140px 0 90px;

    background:
        radial-gradient(
            circle at top center,
            rgba(146,215,248,.06),
            transparent 48%
        ),
        #010d23;

}

.ts-newsletter-panel{

    position:relative;

    overflow:hidden;

    padding:70px;

    border-radius:34px;

    text-align:center;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(146,215,248,.12);

    backdrop-filter:blur(18px);

    box-shadow:
        0 35px 80px rgba(0,0,0,.35);

}

.ts-newsletter-panel::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(146,215,248,.08),
            transparent 70%
        );

    pointer-events:none;

}

.ts-newsletter-panel>*{

    position:relative;

    z-index:2;

}

.ts-newsletter-panel h2{

    margin:26px 0;

    color:#ffffff;

}

.ts-newsletter-panel p{

    max-width:760px;

    margin:0 auto 40px;

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

    line-height:1.9;

}



/*==========================================================
    NEWSLETTER FORM
==========================================================*/

.ts-newsletter-form{

    margin-bottom:35px;

}

.ts-newsletter-form input{

    width:100%;

    padding:18px 22px;

    border:none;

    border-radius:14px;

    background:rgba(255,255,255,.07);

    color:#ffffff;

    outline:none;

    transition:
        border-color .30s,
        background .30s,
        box-shadow .30s;

}

.ts-newsletter-form input::placeholder{

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

}

.ts-newsletter-form input:focus{

    background:rgba(255,255,255,.10);

    box-shadow:
        0 0 0 3px rgba(146,215,248,.18);

}

.ts-newsletter-features{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:28px;

    color:#92d7f8;

    font-weight:600;

}

.ts-newsletter-features i{

    margin-right:8px;

}



/*==========================================================
    FINAL CTA
==========================================================*/

.ts-resource-cta{

    position:relative;

    padding:90px 0 160px;

    background:#010d23;
	
	border-top: 1px solid rgba(146,215,248,.12);

}

.ts-resource-cta h2{

    color:#ffffff;

    margin:24px 0;

}

.ts-resource-cta p{

    max-width:760px;

    margin:auto;

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

    line-height:1.9;

}

.ts-resource-cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:45px;

}



/*==========================================================
    GLOBAL CARD ANIMATION
==========================================================*/

.ts-resource-card,
.ts-download-card,
.ts-tool-card,
.ts-featured-resource{

    position:relative;

}

.ts-resource-card::after,
.ts-download-card::after,
.ts-tool-card::after,
.ts-featured-resource::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:3px;

    background:#92d7f8;

    transition:width .45s ease;

}

.ts-resource-card:hover::after,
.ts-download-card:hover::after,
.ts-tool-card:hover::after,
.ts-featured-resource:hover::after{

    width:100%;

}



/*==========================================================
    BUTTON POLISH
==========================================================*/

.ts-btn-primary,
.ts-btn-outline{

    transition:
        transform .30s,
        box-shadow .30s;

}

.ts-btn-primary:hover,
.ts-btn-outline:hover{

    transform:translateY(-3px);

    box-shadow:
        0 16px 35px rgba(146,215,248,.15);

}



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

@media (max-width:1200px){

    .ts-resource-grid{

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

    }

    .ts-download-grid{

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

    }

}

@media (max-width:992px){

    .ts-resources-hero{

        padding:130px 0 90px;

        text-align:center;

    }

    .ts-featured-resource{

        margin-top:60px;

    }

    .ts-tools-grid{

        grid-template-columns:1fr;

    }

    .ts-newsletter-panel{

        padding:55px 40px;

    }

}

@media (max-width:768px){

    .ts-resource-grid,

    .ts-download-grid{

        grid-template-columns:1fr;

    }

    .ts-featured-resource{

        padding:30px;

    }

    .ts-newsletter-panel{

        padding:45px 30px;

    }

    .ts-newsletter-features{

        flex-direction:column;

        gap:14px;

    }

}

@media (max-width:576px){

    .ts-resources-hero{

        padding:120px 0 80px;

    }

    .ts-resource-card,

    .ts-download-card,

    .ts-tool-card{

        padding:30px;

    }

    .ts-newsletter-panel{

        padding:36px 24px;

        border-radius:24px;

    }

    .ts-resource-meta{

        gap:10px;

    }

    .ts-resource-cta-buttons{

        flex-direction:column;

        align-items:stretch;

    }

    .ts-btn-primary,

    .ts-btn-outline{

        width:100%;

        justify-content:center;

    }

}