/******************************************************************************
 *
 * Statistik
 *
 ******************************************************************************/

.statistics-page {

    max-width: 1100px;
    margin: 0 auto;

}


/******************************************************************************
 * Statistik-menu
 ******************************************************************************/

.statistics-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap: 20px;

}


/******************************************************************************
 * Statistik-kort
 ******************************************************************************/

.statistics-menu-card {

    display: flex;

    align-items: center;

    gap: 18px;

    min-height: 130px;

    color: var(--text);

    text-decoration: none;

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition);

}

.statistics-menu-card:hover {

    transform: translateY(-2px);

    background: var(--surface-hover);

    border-color: var(--primary);

}


/******************************************************************************
 * Ikon
 ******************************************************************************/

.statistics-menu-icon {

    width: 58px;

    height: 58px;

    flex: 0 0 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: rgba(27,120,208,.15);

    color: var(--primary-hover);

    font-size: 25px;

}


/******************************************************************************
 * Tekst
 ******************************************************************************/

.statistics-menu-content {

    flex: 1;

}

.statistics-menu-content h2 {

    margin: 0 0 5px;

    font-size: 20px;

}

.statistics-menu-content p {

    margin: 0;

    color: var(--text-muted);

    font-size: 14px;

    line-height: 1.5;

}


/******************************************************************************
 * Pil
 ******************************************************************************/

.statistics-menu-arrow {

    color: var(--text-muted);

    font-size: 16px;

}

.statistics-menu-card:hover .statistics-menu-arrow {

    color: var(--primary-hover);

}