/**
 * Dataviz section styles — Sector 134
 */

.dataviz {
    max-width: 1200px;
    margin-inline: auto;
    padding: clamp(24px, 17.143px + 2.143vw, 48px);
}

.dataviz__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Filter buttons ── */
.dataviz__filters {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 6.857px + 0.357vw, 12px);
    justify-content: center;
    margin-bottom: clamp(16px, 11.429px + 1.429vw, 32px);
}

.dataviz__btn {
    padding: clamp(4px, 2.857px + 0.357vw, 8px) clamp(8px, 5.143px + 0.893vw, 18px);
    border: 1px solid var(--wp--preset--color--black);
    border-radius: 4px;
    background: transparent;
    font-family: var(--wp--preset--font-family--body-font);
    font-size: clamp(14px, 12.857px + 0.357vw, 18px);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--wp--preset--color--black);
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.02em;
}

.dataviz__btn:hover {
    background: var(--wp--preset--color--black);
    color: var(--wp--preset--color--white);
}

.dataviz__btn--active {
    background: var(--wp--preset--color--lilac-dark);
    border-color: var(--wp--preset--color--lilac-dark);
    color: var(--wp--preset--color--white);
}

.dataviz__btn--active:hover {
    background: var(--wp--preset--color--lilac-dark);
    border-color: var(--wp--preset--color--lilac-dark);
}

/* ── Chart container: horizontal scroll when content overflows ── */
.dataviz__chart {
    width: 100%;
    min-height: 320px;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: clamp(16px, 11.429px + 1.429vw, 32px);
}

.dataviz__chart::-webkit-scrollbar {
    height: 6px;
}

.dataviz__chart::-webkit-scrollbar-thumb {
    background: var(--wp--preset--color--lilac-light, #c7bdf9);
    border-radius: 3px;
}

.dataviz__chart svg {
    display: block;
    /* width is set dynamically by JS */
}

/* ── Group labels ── */
.dataviz__group-label {
    font-family: var(--wp--preset--font-family--body-font, inherit);
    font-size: 14px;
    font-weight: 600;
    fill: var(--wp--preset--color--black);
    text-anchor: middle;
}

.dataviz__group-count {
    font-family: var(--wp--preset--font-family--body-font, inherit);
    font-size: 12px;
    font-weight: 400;
    fill: var(--wp--preset--color--black);
    text-anchor: middle;
}

/* ── Legend ── */
.dataviz__legend {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 24px;
    font-size: 0.82rem;
    color: var(--wp--preset--color--black);
}

.dataviz__legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.dataviz__legend-dot--id {
    background: var(--wp--preset--color--lilac-light);
}

.dataviz__legend-dot--no-id {
    background: var(--wp--preset--color--green-light);
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .dataviz__legend {
        flex-direction: column;
        gap: 8px;
    }
}