/**
 * =========================================================
 * PERTECNICA HOMEPAGE ENGINE
 * INDUSTRIAL EXPERTISE SECTION
 * =========================================================
 *
 * DEPENDENCIES:
 * - tokens.css
 * - framework.css
 *
 * =========================================================
 */


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

.phe-industrial-expertise {
    position: relative;

    overflow: hidden;

    background: var(--phe-bg-white);
}


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

.phe-industrial-expertise__grid {
    display: grid;

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

    gap: var(--phe-space-lg);
}


/* =========================================================
   ITEM
========================================================= */

.phe-industrial-expertise__item {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 110px;

    padding:
        var(--phe-space-xl)
        var(--phe-space-lg);

    overflow: hidden;

    border-radius: var(--phe-radius-lg);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbff 100%
        );

    border:
        1px solid rgba(15, 23, 42, 0.05);

    box-shadow: var(--phe-shadow-sm);

    text-align: center;

    font-size: var(--phe-text-md);
    font-weight: var(--phe-font-semibold);

    line-height: var(--phe-line-normal);

    color: var(--phe-text-primary);

    transition: var(--phe-transition-base);
}


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

.phe-industrial-expertise__item:hover {
    transform: translateY(-4px);

    border-color:
        rgba(37, 99, 235, 0.14);

    box-shadow: var(--phe-shadow-lg);
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1024px) {

    .phe-industrial-expertise__grid {

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

    }

    .phe-industrial-expertise__item {
        min-height: 100px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 768px) {

    .phe-industrial-expertise__grid {
        grid-template-columns: 1fr;
    }

    .phe-industrial-expertise__item {

        min-height: auto;

        padding:
            var(--phe-space-lg)
            var(--phe-space-lg);

        font-size: var(--phe-text-sm);

        line-height: var(--phe-line-normal);
    }

}