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

TENET SOLUTIONS FRAMEWORK

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

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

All Rights Reserved. Copyright 2026

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

.ts-industries{

    position:relative;

    overflow:hidden;

    padding:140px 0;

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

}

.ts-industries::before{

    content:"";

    position:absolute;

    inset:0;

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

    pointer-events:none;

}

.ts-industries .container{

    position:relative;

    z-index:2;

}



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

.ts-industries h2{

    color:#ffffff;

    margin:24px 0;

}

.ts-industries p{

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

    line-height:1.9;

}



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

.ts-industries-grid{

    display:grid;

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

    gap:28px;

    margin-top:80px;

}



/*==========================================================
    INDUSTRY CARD
==========================================================*/

.ts-industry-card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:42px 30px;

    border-radius:28px;

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

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

    backdrop-filter:blur(14px);

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

}

.ts-industry-card:hover{

    transform:translateY(-8px);

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

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

    box-shadow:
        0 22px 50px rgba(0,0,0,.28);

}



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

.ts-industry-card i{

    display:flex;

    justify-content:center;

    align-items:center;

    width:74px;

    height:74px;

    margin-bottom:24px;

    border-radius:22px;

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

    color:#92d7f8;

    font-size:1.8rem;

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

}

.ts-industry-card:hover i{

    transform:translateY(-4px);

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

}



/*==========================================================
    TITLE
==========================================================*/

.ts-industry-card h4{

    color:#ffffff;

    margin-bottom:18px;

    line-height:1.5;

}



/*==========================================================
    DESCRIPTION
==========================================================*/

.ts-industry-card p{

    margin:0;

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

    font-size:.95rem;

    line-height:1.8;

}



/*==========================================================
    MICRO INTERACTION
==========================================================*/

.ts-industry-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

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

    opacity:0;

    transition:opacity .35s ease;

}

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

    opacity:1;

}

.ts-industry-card>*{

    position:relative;

    z-index:2;

}

/*==========================================================
    FOOTNOTE
==========================================================*/

.ts-industries-footer{

    max-width:900px;

    margin:80px auto 0;

    padding:36px 42px;

    text-align:center;

    border-radius:28px;

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

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

    backdrop-filter:blur(14px);

}

.ts-industries-footer p{

    margin:0;

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

    line-height:1.9;

}

.ts-industries-footer strong{

    color:#92d7f8;

    font-weight:700;

}



/*==========================================================
    MICRO INTERACTIONS
==========================================================*/

.ts-industry-card{

    cursor:default;

    user-select:none;

}

.ts-industry-card h4{

    transition:
        color .35s ease,
        transform .35s ease;

}

.ts-industry-card:hover h4{

    color:#92d7f8;

    transform:translateY(-2px);

}

.ts-industry-card p{

    transition:
        color .35s ease;

}

.ts-industry-card:hover p{

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

}



/*==========================================================
    CARD REFINEMENTS
==========================================================*/

.ts-industry-card{

    min-height:285px;

}

.ts-industry-card i{

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

}



/*==========================================================
    SECTION DIVIDERS
==========================================================*/

.ts-industries{

    border-top:
        1px solid rgba(146,215,248,.08);

    border-bottom:
        1px solid rgba(146,215,248,.08);

}



/*==========================================================
    ACCESSIBILITY
==========================================================*/

.ts-industry-card:focus-visible{

    outline:none;

    border-color:#92d7f8;

    box-shadow:

        0 0 0 3px rgba(146,215,248,.18);

}



/*==========================================================
    TEXT SELECTION
==========================================================*/

.ts-industries ::selection{

    background:#92d7f8;

    color:#010d23;

}



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

@media(max-width:1199px){

    .ts-industries-grid{

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

    }

}

@media(max-width:991px){

    .ts-industries{

        padding:100px 0;

    }

    .ts-industries-grid{

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

        gap:24px;

    }

    .ts-industries-footer{

        margin-top:60px;

        padding:32px;

    }

}

@media(max-width:767px){

    .ts-industries-grid{

        grid-template-columns:1fr;

    }

    .ts-industry-card{

        min-height:auto;

        padding:34px 24px;

    }

    .ts-industries-footer{

        padding:28px 24px;

        border-radius:22px;

    }

}