/* Desktop: canvas wrapper inside the row */
.education__image-wrapper--left {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    min-height: 550px; /* Matched to script height */
}

#circuit-canvas {
    width: 100%;
    max-width: 600px;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(0, 102, 255, 0.1));
}

/* ── Mobile ≤900px ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    /* Section is the positioning anchor (JS moves the wrapper here) */
    .education {
        position: relative;
        overflow: hidden;
        padding-bottom: 60px;
    }

    /*
     * When JS moves .education__image-wrapper--left to be a direct child
     * of .education, these rules make it cover the entire section.
     */
    .education > .education__image-wrapper--left {
        position: absolute !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        min-height: unset !important;
        height: unset !important;
        margin-top: 0;
        z-index: 0;
        pointer-events: none;
        display: flex;
        align-items: stretch;
        overflow: hidden;
    }

    .education > .education__image-wrapper--left #circuit-canvas {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        display: block;
    }

    /* Content blocks sit above canvas */
    .education__content {
        position: relative;
        z-index: 1;
        background: var(--card-bg, rgba(15, 15, 30, 0.82)) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    /* Title above canvas */
    .education__title {
        position: relative;
        z-index: 1;
    }
}