/**
 * Stats Bar Block Styles
 * 
 * Styles for the VH: Stats Bar block on the frontend
 */

/* Stats Bar Layout */
.vh-stats-bar,
.vh-stats-bar-editor {
    width: 100%;
    background-color: #0D0D0D;
    color: #F2EEE5;
    padding: 32px 0;
    font-family: 'Inter', sans-serif;
}

.vh-stats-bar .container {
    padding: 0 20px;
}

.stats-bar-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
}

/* Text Section */
.stats-bar-text {
    text-align: left;
    font-size: 15px;
    line-height: 1.5;
    text-transform: uppercase;
    max-width: 485px;
    font-weight: 400;
}

/* Statistics Section */
.stats-bar-statistics {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: flex-start;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid rgba(242, 238, 229, 0.2);
    width: 100%;
}

.stat-label {
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.stat-value {
    font-size: 28px;
    font-weight: 300;
    line-height: 1.3;
}

/* Button Section */
.stats-bar-button {
    margin-top: 16px;
    width: 100%;
}

.stats-bar-button .btn {
    white-space: nowrap;
    width: 100%;
    text-align: center;
}

/* Responsive styles */
@media (min-width: 1024px) {    
    .stats-bar-content {
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 32px;
    }

    .vh-stats-bar .container {
        padding: 0 40px;
    }
    
    .stats-bar-text {
        flex: 1;
    }
    
    .stats-bar-statistics {
        gap: 32px;
        padding-left: 32px;
        padding-top: 0;
        border-top: none;
        border-left: 1px solid rgba(242, 238, 229, 0.2);
        width: auto;
    }

    .stats-bar-button {
        margin-top: 0;
        margin-left: auto;
        width: auto;
    }

    .stats-bar-button .btn {
        width: auto;
    }
}