/*Blocks Grid - Phase 2 */
/*New grid system for gutenberg blocks without margins*/



/* =========================================================
   BASE GRID SYSTEM (12-column)
   ========================================================= */

.has-gutenberg-blocks main .grid-container,
.has-gutenberg-blocks main .grid-solo {
    width: 100%;
    gap: 0;
}

/* Prevent overflow */
/* .has-gutenberg-blocks main .grid-container > *,
.has-gutenberg-blocks main .grid-solo > * {
    min-width: 0;
} */

/* =====================================================
   GUTENBERG MODE: GRID APPLIES TO INNER CONTAINER
   ================================================== */

/* Add grid-inner-container class OR auto applies to wp inner containers in group blocks */
.has-gutenberg-blocks main .grid-container > .wp-block-group__inner-container,
.has-gutenberg-blocks main .grid-container > .grid-inner-container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    width: 100%;
    gap: 0;
}

/* ================================================
   SOLO MODE: DIRECT GRID (no inner container)
   =============================================== */

.has-gutenberg-blocks main .grid-solo {
    --grid-columns: 12;

    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));

    width: 100%;
    gap: 0;
}

/* ==============================
   COLUMN COUNT UTILITIES
   =========================== */

.has-gutenberg-blocks main .util-columns-1  { --grid-columns: 1; }
.has-gutenberg-blocks main .util-columns-2  { --grid-columns: 2; }
.has-gutenberg-blocks main .util-columns-3  { --grid-columns: 3; }
.has-gutenberg-blocks main .util-columns-4  { --grid-columns: 4; }
.has-gutenberg-blocks main .util-columns-5  { --grid-columns: 5; }
.has-gutenberg-blocks main .util-columns-6  { --grid-columns: 6; }
.has-gutenberg-blocks main .util-columns-7  { --grid-columns: 7; }
.has-gutenberg-blocks main .util-columns-8  { --grid-columns: 8; }
.has-gutenberg-blocks main .util-columns-9  { --grid-columns: 9; }
.has-gutenberg-blocks main .util-columns-10 { --grid-columns: 10; }
.has-gutenberg-blocks main .util-columns-11 { --grid-columns: 11; }
.has-gutenberg-blocks main .util-columns-12 { --grid-columns: 12; }

/* ==================
   SPAN SYSTEM
   ================ */

/* Default is span 12 unless span class is used */
.has-gutenberg-blocks main .grid-container > .wp-block-group__inner-container > *:not(
    [class*="span-"],
    .grid-one-half,
    .grid-one-third,
    .grid-two-thirds,
    .grid-full-width
),
.has-gutenberg-blocks main .grid-container > .grid-inner-container > *:not(
    [class*="span-"],
    .grid-one-half,
    .grid-one-third,
    .grid-two-thirds,
    .grid-full-width
) {
    grid-column: span 12;
}

.has-gutenberg-blocks main .span-1  { grid-column: span 1; }
.has-gutenberg-blocks main .span-2  { grid-column: span 2; }
.has-gutenberg-blocks main .span-3  { grid-column: span 3; }
.has-gutenberg-blocks main .span-4  { grid-column: span 4; }
.has-gutenberg-blocks main .span-5  { grid-column: span 5; }
.has-gutenberg-blocks main .span-6  { grid-column: span 6; }
.has-gutenberg-blocks main .span-7  { grid-column: span 7; }
.has-gutenberg-blocks main .span-8  { grid-column: span 8; }
.has-gutenberg-blocks main .span-9  { grid-column: span 9; }
.has-gutenberg-blocks main .span-10 { grid-column: span 10; }
.has-gutenberg-blocks main .span-11 { grid-column: span 11; }
.has-gutenberg-blocks main .span-12 { grid-column: span 12; }

/* ==========================
   SEMANTIC HELPERS
   ======================== */

.has-gutenberg-blocks main .grid-one-half {
    grid-column: span 6;
}

.has-gutenberg-blocks main .grid-one-third {
    grid-column: span 4;
}

.has-gutenberg-blocks main .grid-two-thirds {
    grid-column: span 8;
}

/* Universal full width */
.has-gutenberg-blocks main .grid-full-width {
    grid-column: 1 / -1;
}

/* =========================================================
   MOBILE STACKING
   ========================================================= */

@media (max-width: 767px) {

    .has-gutenberg-blocks main .span-1,
    .has-gutenberg-blocks main .span-2,
    .has-gutenberg-blocks main .span-3,
    .has-gutenberg-blocks main .span-4,
    .has-gutenberg-blocks main .span-5,
    .has-gutenberg-blocks main .span-6,
    .has-gutenberg-blocks main .span-7,
    .has-gutenberg-blocks main .span-8,
    .has-gutenberg-blocks main .span-9,
    .has-gutenberg-blocks main .span-10,
    .has-gutenberg-blocks main .span-11,
    .has-gutenberg-blocks main .grid-one-half,
    .has-gutenberg-blocks main .grid-one-third,
    .has-gutenberg-blocks main .grid-two-thirds {
        grid-column: span 12;
    }
}

/* =========================================================
   FULL WIDTH BREAKOUT (ESCAPES BOOTSTRAP CONTAINER)
   ========================================================= */

.has-gutenberg-blocks main .grid-breakout {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    /* Safari + mobile overflow protection */
    overflow-x: clip;
}

/* Fallback for older Safari */
@supports not (overflow: clip) {
    .has-gutenberg-blocks main .grid-breakout {
        overflow-x: hidden;
    }
}

/* =========================
   GRID DISABLE / RESET
   ========================= */

.has-gutenberg-blocks main .grid-disable {
    display: block !important;
}

/* Disable Gutenberg inner grid behavior */
.has-gutenberg-blocks main .grid-disable > .wp-block-group__inner-container {
    display: block !important;
}

/* Disable solo grid mode */
.has-gutenberg-blocks main .grid-solo.grid-disable {
    display: block !important;
}

/* Remove grid column behavior from children */
.has-gutenberg-blocks main .grid-disable [class*="span-"],
.has-gutenberg-blocks main .grid-disable .grid-one-half,
.has-gutenberg-blocks main .grid-disable .grid-one-third,
.has-gutenberg-blocks main .grid-disable .grid-two-thirds,
.has-gutenberg-blocks main .grid-disable .grid-full-width {
    grid-column: auto !important;
}