/**
 * =========================================================
 * PERTECNICA HOMEPAGE ENGINE
 * STATS STRIP SECTION
 * =========================================================
 *
 * DEPENDENCIES:
 * - tokens.css
 * - framework.css
 *
 * =========================================================
 */


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

.phe-stats-strip {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #0f172a 0%,
            #111827 100%
        );
}


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

.phe-stats-strip__grid {
    display: grid;

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

    gap: var(--phe-space-3xl);
}


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

.phe-stats-strip__item {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding-right: var(--phe-space-xl);
}


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

.phe-stats-strip__item:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 10px;
    right: 0;

    width: 1px;
    height: 70%;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0)
        );
}


/* =========================================================
   NUMBER
========================================================= */

.phe-stats-strip__number {
    margin-bottom: var(--phe-space-md);

    font-size: clamp(2.2rem, 4vw, 3.4rem);

    font-weight: var(--phe-font-bold);

    line-height: 1;
    letter-spacing: -0.03em;

    color: #ffffff;
}


/* =========================================================
   LABEL
========================================================= */

.phe-stats-strip__label {
    max-width: 180px;

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

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

    color: rgba(255, 255, 255, 0.72);
}


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

@media (max-width: 1024px) {

    .phe-stats-strip__grid {

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

        row-gap: var(--phe-space-3xl);
        column-gap: var(--phe-space-2xl);
    }

    .phe-stats-strip__item:nth-child(2)::after {
        display: none;
    }

}


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

@media (max-width: 768px) {

    .phe-stats-strip__grid {
        grid-template-columns: 1fr;

        gap: var(--phe-space-2xl);
    }

    .phe-stats-strip__item {
        padding-right: 0;
    }

    .phe-stats-strip__item::after {
        display: none;
    }

    .phe-stats-strip__number {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .phe-stats-strip__label {
        max-width: 100%;

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

}