/* 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 */
        gap: 0 !important;              /* remove any flex gap */
        
        /* CRITICAL: Override height constraints that cause stretching */
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }

    /* every nested .col must become full‑width & gap‑free */
    #main-row .col,
    #main-row [class*="col-"] {
        flex:       0 0 auto !important;  /* Changed from 0 0 100% to auto to prevent stretching */
        flex-grow:  0 !important;
        flex-shrink: 0 !important;
        max-width:  100% !important;
        width:      100% !important;
        padding:    0 !important;
        margin:     0 !important;       /* remove all margins from columns */
        
        /* CRITICAL: Prevent columns from stretching vertically */
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }

    /* Add small gap between columns when stacked (like horizontal spacing) */
    #main-row > [class*="col-"] {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Add 8px gap between stacked columns (after first column) */
    #main-row > [class*="col-"]:not(:last-child) {
        margin-bottom: 8px !important;
    }

    /* Remove any gap from flex containers (d-flex flex-column) */
    #main-row .d-flex.flex-column {
        gap: 0 !important;
        row-gap: 0 !important;
        column-gap: 0 !important;
        
        /* Prevent flex containers from stretching */
        height: auto !important;
        min-height: auto !important;
        flex-grow: 0 !important;
    }

    /* Remove gaps from nested rows inside columns */
    #main-row .row {
        margin: 0 !important;
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
        gap: 0 !important;
    }

    /* Remove margins from nested columns inside rows */
    #main-row .row .col,
    #main-row .row [class*="col-"] {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Consistent small margin between cards only */
    #main-row .card {
        margin: 0 0 8px 0 !important;  /* reduced from 10px to 8px */
    }

    /* Remove margin from the last card in each column/container */
    #main-row > .col > .card:last-child,
    #main-row .row > .col > .card:last-child {
        margin-bottom: 0 !important;
    }

    /* Remove margin from the last card in nested containers */
    #main-row .d-flex.flex-column > .card:last-child {
        margin-bottom: 0 !important;
    }

    /* Keep bottom margin on last card in first column (News card) normal */
    /* The gap between News and Calendar comes from column margin-bottom */
    #main-row > .col:first-child > .card:last-child,
    #main-row > .col:first-child.d-flex.flex-column > .card:last-child {
        margin-bottom: 0 !important;  /* Remove card margin, use column margin instead */
    }

    /* Remove top margin from first card in second column (Calendar card) */
    #main-row > .col:last-child > .card:first-child,
    #main-row > .col:last-child.d-flex.flex-column > .card:first-child {
        margin-top: 0 !important;
    }

    /* Remove Bootstrap margin utilities that might add gaps */
    #main-row .mb-2,
    #main-row .mb-md-0 {
        margin-bottom: 0 !important;
    }

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

    /* Remove any flex-grow-1 gaps and prevent stretching */
    #main-row .flex-grow-1 {
        margin: 0 !important;
        flex-grow: 0 !important;  /* Disable flex-grow in portrait mode */
        height: auto !important;
        min-height: auto !important;
    }
    
    /* Override h-100 class that causes stretching */
    #main-row.h-100 {
        height: auto !important;
    }
    
    /* Ensure no flex-basis causes expansion */
    #main-row > .col[class*="col-"] {
        flex-basis: auto !important;
    }
}