/* ===========================================================
   V I N D F A L L – L A Y O U T
   Global page & article grid system
   =========================================================== */

/* -----------------------------------------------------------
   App main container (page grid)
   ----------------------------------------------------------- */

#app-main {
    display: grid;
    grid-template-columns: repeat(var(--columns, 1), 1fr);
    gap: var(--grid-gap, 24px);
    width: 100%;
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    padding: var(--page-padding, 24px);

}

    /* -----------------------------------------------------------
   Articles (grid items)
   ----------------------------------------------------------- */

    #app-main > article {
        min-width: 0; /* Prevent overflow in grid items */
    }

/* -----------------------------------------------------------
   Full-width articles (e.g. hero)
   ----------------------------------------------------------- */

.full-width-article {
    grid-column: 1 / -1;
}

/* -----------------------------------------------------------
   Nested grids (explicit opt-in)
   ----------------------------------------------------------- */
/* These elements manage their own internal layout
   and should NOT affect the main grid */

.card-grid,
.table-block,
.image-block,
.hero-block {
    width: 100%;
}

/* -----------------------------------------------------------
   Mobile override
   ----------------------------------------------------------- */

@media (max-width: 900px) {
    #app-main {
        grid-template-columns: 1fr !important;
        padding: var(--page-padding-mobile, 16px);
        gap: var(--grid-gap-mobile, 16px);
        padding-top: calc( var(--header-height-mobile, 00px) + var(--page-padding-mobile, 0px) );
    }
}