/* =========================================================
   VOIP.GE — EQUIPMENT CARDS
   Clean Technical Design
   ========================================================= */


/* =========================================================
   EQUIPMENT SECTION
   ========================================================= */

.equipment-section {
    position: relative;
}



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

.equipment-grid {

    display: grid;

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

    gap: 22px;

    margin-top: 48px;

}



/* =========================================================
   EQUIPMENT CARD
   ========================================================= */

.equipment-card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 465px;

    padding: 24px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #111f32 0%,
            #0f1c2e 52%,
            #0d1929 100%
        );

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

    border-radius:
        16px;

    text-decoration:
        none;

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

}



/* =========================================================
   IMPORTANT
   No pseudo-element glow.
   No circles.
   No arcs.
   ========================================================= */

.equipment-card::before,
.equipment-card::after {

    content:
        none;

}



/* =========================================================
   HOVER
   ========================================================= */

.equipment-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(57,184,255,.28);

    background:
        linear-gradient(
            145deg,
            #14263d 0%,
            #112137 52%,
            #0f1d30 100%
        );

    box-shadow:
        0 16px 38px
        rgba(0,0,0,.24);

}



/* =========================================================
   CARD TOP
   ========================================================= */

.equipment-card-top {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        38px;

}



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

.equipment-icon {

    width:
        36px;

    height:
        36px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        9px;

    background:
        linear-gradient(
            135deg,
            #159ee8 0%,
            #4a7df0 55%,
            #635bff 100%
        );

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        900;

    letter-spacing:
        .02em;

    box-shadow:
        0 4px 12px
        rgba(21,158,232,.12);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}



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

.equipment-icon-wide {

    width:
        44px;

    font-size:
        11px;

    letter-spacing:
        .04em;

}



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

.equipment-card:hover .equipment-icon {

    transform:
        translateY(-1px);

    box-shadow:
        0 6px 16px
        rgba(21,158,232,.20);

}



/* =========================================================
   EQUIPMENT TYPE
   ========================================================= */

.equipment-type {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        23px;

    padding:
        3px 8px;

    border:
        1px solid
        rgba(57,184,255,.12);

    border-radius:
        6px;

    background:
        rgba(21,158,232,.045);

    color:
        #82cfff;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .09em;

    white-space:
        nowrap;

}



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

.equipment-card h2 {

    position:
        relative;

    z-index:
        2;

    margin:
        29px 0 13px;

    color:
        var(--text);

    font-size:
        23px;

    font-weight:
        750;

    line-height:
        1.2;

    letter-spacing:
        -.015em;

}



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

.equipment-card > p {

    position:
        relative;

    z-index:
        2;

    margin:
        0;

    color:
        var(--text-secondary);

    font-size:
        15px;

    line-height:
        1.72;

}



/* =========================================================
   FEATURES
   ========================================================= */

.equipment-features {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        24px;

}



/* =========================================================
   FEATURE TAG
   ========================================================= */

.equipment-features span {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        25px;

    padding:
        4px 8px;

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

    border-radius:
        6px;

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

    color:
        #aebdce;

    font-size:
        10px;

    font-weight:
        600;

    line-height:
        1.2;

    white-space:
        nowrap;

}



/* =========================================================
   CARD FOOTER
   ========================================================= */

.equipment-card-footer {

    position:
        relative;

    z-index:
        2;

    margin-top:
        auto;

    padding-top:
        28px;

}



/* =========================================================
   REQUEST BUTTON
   ========================================================= */

.equipment-card-footer .button-primary {

    width:
        100%;

    min-height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 14px;

    border:
        1px solid
        rgba(57,184,255,.12);

    border-radius:
        9px;

    background:
        linear-gradient(
            135deg,
            #159ee8,
            #258bd0
        );

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        750;

    text-decoration:
        none;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}



.equipment-card-footer .button-primary:hover {

    transform:
        translateY(-1px);

    background:
        linear-gradient(
            135deg,
            #39b8ff,
            #159ee8
        );

    box-shadow:
        0 7px 18px
        rgba(21,158,232,.18);

}



/* =========================================================
   CATALOG CARD
   ========================================================= */

.equipment-catalog-card {

    background:
        linear-gradient(
            145deg,
            #151f35 0%,
            #121d31 52%,
            #181b39 100%
        );

    border-color:
        rgba(99,91,255,.18);

}



.equipment-catalog-card:hover {

    background:
        linear-gradient(
            145deg,
            #19253d 0%,
            #151f36 52%,
            #1c2044 100%
        );

    border-color:
        rgba(99,91,255,.34);

}



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

.equipment-catalog-card .equipment-icon {

    background:
        linear-gradient(
            135deg,
            #635bff,
            #397ce8
        );

}



/* =========================================================
   CORPORATE CTA
   ========================================================= */

.equipment-cta-section {

    padding-top:
        20px;

}



.equipment-cta {

    padding:
        42px;

    background:
        linear-gradient(
            135deg,
            #111f32,
            #0f1d30
        );

}



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

.equipment-cta h2 {

    margin:
        0 0 14px;

    font-size:
        clamp(26px, 3vw, 36px);

    line-height:
        1.2;

}



/* =========================================================
   CTA TEXT
   ========================================================= */

.equipment-cta p:not(.section-label) {

    max-width:
        850px;

    color:
        var(--text-secondary);

    font-size:
        16px;

    line-height:
        1.75;

}



/* =========================================================
   CTA BUTTONS
   ========================================================= */

.equipment-cta .hero-buttons {

    margin-top:
        26px;

}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1150px) {

    .equipment-grid {

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

    }


    .equipment-card {

        min-height:
            440px;

    }

}



/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 760px) {

    .equipment-grid {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .equipment-card {

        min-height:
            auto;

    }


    .equipment-card-footer {

        margin-top:
            26px;

    }


    .equipment-cta {

        padding:
            30px 24px;

    }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .equipment-grid {

        margin-top:
            35px;

    }


    .equipment-card {

        padding:
            22px;

        border-radius:
            14px;

    }


    .equipment-card h2 {

        margin-top:
            26px;

        font-size:
            22px;

    }


    .equipment-card > p {

        font-size:
            15px;

        line-height:
            1.7;

    }


    .equipment-features {

        margin-top:
            20px;

    }


    .equipment-cta {

        padding:
            28px 20px;

    }

}