/* === Chart wrapper === */
.chart-maker {
    max-width: 720px;
    /* Split margin to ensure 'auto' isn't overridden by vertical margin rules */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 1rem;
    margin-bottom: 1rem;

    display: flex;
    justify-content: center;
    width: 100%; /* Ensure it tries to fill up to max-width */
}

/* === Canvas === */
.chart-maker__canvas {
    display: block;
    width: 100%;
    height: auto;
}

/* === Chart rows (side-by-side layout) === */
.chart-row {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Ensure stacking on very small screens */
}

/* 1. Target specifically the charts so <p> tags don't participate in flex sizing */
.chart-row > .chart-maker {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
    width: 100%;
    min-width: 300px; /* Prevent charts from getting too squished */
}

/* 2. Hide the ghost <p> and <br> tags added by WordPress */
.chart-row > br,
.chart-row > p:empty {
    display: none;
}

/* === Responsive === */
@media (max-width: 768px) {
    .chart-row {
        flex-direction: column;
        align-items: center;
    }

    .chart-row > * {
        width: 100%;
    }
}

.entry-full.max-w-764 {
    margin-left: auto;
    margin-right: auto;
}