/* assets/portrait.css */
@media (orientation: portrait), (max-aspect-ratio: 1/1) {

    /* 2‑column row becomes a single flex‑column stack */
    #main-row {
        display:        flex !important;
        flex-direction: column !important;
        flex-wrap:      nowrap !important;

        /* wipe Bootstrap gutter **in portrait only** */
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
        column-gap:     0 !important;
        row-gap:        0 !important;

        margin: 0 !important;          /* kill the row’s negative margins */
    }

    /* every nested .col must become full‑width & gap‑free */
    #main-row .col,
    #main-row [class*="col-"] {
        flex:       0 0 100% !important;
        max-width:  100% !important;
        width:      100% !important;
        padding:    0 !important;
    }

    /* 🔥 <── the crucial extra line – removes the vertical gutter */
    #main-row > [class*="col-"]        { margin-top: 0 !important; }

    /* give each card a bottom margin so blocks inside a column breathe */
    #main-row .card           { margin: 0 0 10px 0 !important; }

    /* …but remove that margin from the LAST card in the FIRST column */
    #main-row > .col:first-child > .card:last-child {
        margin-bottom: 0 !important;
    }

    /* hard‑override any inline margin Dash injects on the cards */
    #main-row .card[style]    { margin: 0 !important; }
}