/* Key figures row (webinar-landing/stats.php). */

.rd-wl-stats {
    /* Figma: 72 top, 40 bottom */
    padding-block: calc(var(--rd-spacing-xx-lg) + var(--rd-spacing-x-sm)) var(--rd-spacing-lg);
}

.rd-wl-stats dl {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: var(--rd-spacing-lg);
    margin: 0;
}

.rd-wl-stats dl > div {
    display: flex;
    align-items: center;
    gap: var(--rd-spacing-big);
    padding: var(--rd-spacing-xx-big) var(--rd-spacing-xxx-big);
    border: 1px solid var(--rd-gray-300);
    border-radius: var(--rd-wl-radius-card);
    box-shadow: var(--rd-wl-shadow-card);
    color: var(--rd-wl-dark);
    line-height: normal;
}

.rd-wl-stats dt {
    font-size: var(--rd-fontsize-7);
    font-weight: 800;
    line-height: normal;
}

.rd-wl-stat-note {
    display: block;
    font-size: var(--rd-fontsize-4);
    font-weight: var(--rd-fontweights-open-sans-2);
    color: var(--rd-gray-500);
    line-height: normal;
    margin-top: var(--rd-spacing-xx-sm);
}

/* The value comes after the label in the markup (dt before dd) but shows first. */
.rd-wl-stats dd {
    order: -1;
    margin: 0;
    color: var(--rd-wl-accent-secondary);
    font-size: var(--rd-wl-fontsize-figure);
    font-weight: 800;
    line-height: 60px;
}

.rd-wl-stats .rd-wl-stat-highlight {
    background: var(--rd-wl-accent-strong);
    border-color: var(--rd-wl-accent-strong);
    color: var(--rd-font-light);
}

.rd-wl-stat-highlight dd {
    color: var(--rd-wl-accent-light);
}

.rd-wl-stat-highlight .rd-wl-stat-note {
    color: inherit;
}

.rd-wl-stat-label-short {
    display: none;
}

@media (max-width: 1100px) {
    .rd-wl-stats dl {
        gap: var(--rd-spacing-x-big);
    }

    .rd-wl-stats dl > div {
        padding: var(--rd-spacing-md);
    }

    .rd-wl-stats dt {
        font-size: var(--rd-fontsize-5);
    }

    .rd-wl-stats dd {
        font-size: var(--rd-fontsize-14);
        line-height: 1;
    }
}

@media (max-width: 760px) {
    .rd-wl-stats {
        padding-block: var(--rd-spacing-x-big) 0;
    }

    .rd-wl-stats dl {
        gap: var(--rd-spacing-md);
    }

    .rd-wl-stats dl > div {
        flex-direction: column;
        justify-content: center;
        gap: 0;
        padding: var(--rd-spacing-sm) var(--rd-spacing-xx-sm);
        text-align: center;
        border-radius: var(--rd-borderradius-border-lg);
        box-shadow: none;
    }

    .rd-wl-stats dt {
        font-size: var(--rd-fontsize-2);
        font-weight: var(--rd-fontweights-open-sans-0);
    }

    .rd-wl-stats dd {
        font-size: var(--rd-fontsize-11);
        line-height: 1.32;
    }

    .rd-wl-stat-note,
    .rd-wl-stat-label-long {
        display: none;
    }

    .rd-wl-stat-label-short {
        display: inline;
    }
}