/* =========================================================
   Template Columns & Grid Layout
   ========================================================= */

.template-layout-grid.is-layout-flow > li {
    margin-block-start: 0;
}

/* ---------------------------------------------------------
   Column count utilities (shared by columns + grid)
   --------------------------------------------------------- */

.template-columns-1 { --template-columns: 1; }
.template-columns-2 { --template-columns: 2; }
.template-columns-3 { --template-columns: 3; }
.template-columns-4 { --template-columns: 4; }
.template-columns-5 { --template-columns: 5; }
.template-columns-6 { --template-columns: 6; }
.template-columns-7 { --template-columns: 7; }
.template-columns-8 { --template-columns: 8; }
.template-columns-9 { --template-columns: 9; }
.template-columns-10 { --template-columns: 10; }


/* ---------------------------------------------------------
   Columns Layout (CSS Columns)
   --------------------------------------------------------- */

/* Not on post templates already using the core grid layout: column-gap
   would override the grid's own gap (2em instead of the block gap). */
.template-layout-columns:not(.is-layout-grid) {
    column-count: var(--template-columns, 1);
    column-gap: 2em;
}

/* Prevent nested lists from inheriting columns */
.template-layout-columns li > ul,
.template-layout-columns li > ol {
    column-count: 1 !important;
}


/* ---------------------------------------------------------
   Grid Layout (CSS Grid)
   --------------------------------------------------------- */

.template-layout-grid {
    display: grid;
    grid-template-columns: repeat(var(--template-columns, 1), minmax(0, 1fr));
    gap: var(--wp--style--block-gap, 2em);
}

.template-layout-grid.template-grid-flow-column {
    grid-auto-flow: column;
    grid-auto-rows: min-content;
}

/* ---------------------------------------------------------
   Responsive: collapse to single column on mobile
   --------------------------------------------------------- */

@media screen and (max-width: 767px) {

    .template-layout-columns {
        column-count: 1 !important;
    }

    .template-layout-grid {
        grid-template-columns: 1fr !important;
        grid-auto-flow: row !important;
    }

}