/* --- base / mobile-first ------------------------ */

.example {
    position: relative;
    min-height: 400px;
}


.example .method-section h3 {
    display: none;
}

.method-section .desc {
    display: none;
}

.example header {
    margin: 0;
    padding: 0;
    margin-bottom: -0.1rem;
}

.example main {
    display: flex;
    align-items: center;
    justify-content: center;

    /* mobile layout = stacked with border */
    flex-direction: column;
    border: 4px solid var(--pico-primary-border);
}

.tab1,
.tab2 {
    transition: 0.15s;
    width: 100%;
}

/* MOBILE TAB LOGIC (show one pane at a time) */
/* hide tab1 if its radio isn't checked */
.example:not(:has([class$="_tab1_tab"]:checked)) .tab1 {
    display: none;
}
/* hide tab2 if its radio isn't checked */
.example:not(:has([class$="_tab2_tab"]:checked)) .tab2 {
    display: none;
}

/* when tab1 is checked, ensure tab1 is shown */
.example:has([class$="_tab1_tab"]:checked) .tab1 {
    display: block;
}

/* when tab2 is checked, ensure tab2 is shown and centered */
.example:has([class$="_tab2_tab"]:checked) .tab2 {
    display: flex;
    align-items: center;
    justify-content: center;
}

label[role="button"] {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    margin: 0;
}

label:not(:has(input[type="radio"]:checked)) {
    opacity: 0.5;
}

form {
    margin: 0;
    padding: 0;
}

pre.minh15,
code.minh15 {
    min-height: 15rem;
}

/* --- desktop / wider screens --------------------- */
@media (min-width: 576px) {
    .example .property-section h3 {
        display: block;
    }

    .example .method-section h3 {
        display: block;
    }

    .desc {
        display: block;
    }
    
    /* hide the tab header — no tabs on desktop */
    .example header {
        display: none;
    }

    /* lay out side by side at desktop */
    .example main {
        flex-direction: row;
        align-items: stretch;
        justify-content: stretch;
        gap: 1rem;

        /* remove the chunky border in desktop mode */
        border-style: solid;
        border-color: transparent;
        transition: 0.25s;
    }

    /* force both panes visible at desktop */
    .tab1,
    .tab2 {
        display: block !important;
        width: 50%;
    }

    /* let code panel stretch */
    .tab1 pre,
    .tab1 code {
        height: 100%;
        box-sizing: border-box;
    }

    /* center demo nicely */
    .tab2 {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tab2 iframe {
        width: 100%;
        height: 100%;
        min-height: 280px;
    }
}