/* ==== SITE GRID RAILS SYSTEM (Global) ==== */
/* This file should be loaded on every page for consistent layout */

/* Site grid rails (one time) - target actual HTML structure */
.site-content,
#content {
  --gutter: var(--wp--style--root--padding-left, 1rem);
  --max:    var(--wp--style--global--wide-size, 1280px);

  display: grid;
  grid-template-columns:
    [full-start]   minmax(var(--gutter), 1fr)
    [content-start] minmax(0, var(--max))
    [content-end]  minmax(var(--gutter), 1fr)
    [full-end];
}

/* By default, keep children on content rails */
.site-content > *,
#content > * { 
  grid-column: content-start / content-end; 
}

/* Let nested wrappers forward their children to the page grid */
.entry-content,
.wp-block-group.alignwide,
.wp-block-group,
.site-main,
#primary {
  display: contents; /* modern, widely supported; keeps DOM but removes box */
}

/* ===== LAYOUT UTILITIES ===== */

/* Full-bleed sections (break out of content rails to full viewport) */
.section--full {
  grid-column: full-start / full-end;
  width: 100%;
  max-width: none;
}

/* Boxed content containers (stay within content rails) */
.section__inner {
  grid-column: content-start / content-end;
  width: 100%;
  max-width: var(--wp--style--global--content-size, 720px);
  margin-inline: auto;
  padding-inline: var(--wp--style--root--padding-left, 1rem)
                  var(--wp--style--root--padding-right, 1rem);
  box-sizing: border-box;
}

/* Wide content containers */
.section__inner--wide {
  grid-column: content-start / content-end;
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1280px);
  margin-inline: auto;
  padding-inline: var(--wp--style--root--padding-left, 1rem)
                  var(--wp--style--root--padding-right, 1rem);
  box-sizing: border-box;
}


/* ===== Layout Utilities (opt-in, reusable) ===== */

/* A. Section background spans edge-to-edge (full width) */
.layout--full {
  grid-column: full-start / full-end;
}

/* B. Section constrained to content rails (boxed) */
.layout--boxed {
  grid-column: content-start / content-end;
}

/* C. Section background full, but inner boxed (common band pattern) */
.layout--full > .rail--content {
  grid-column: content-start / content-end;
}

/* Inner rail helper (place any child onto boxed rails) */
.rail--content {
  grid-column: content-start / content-end;
}

/* Optional: two equal columns utility (use anywhere) */
.grid--50-50 {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
}

/* Mobile stack helper */
@media (max-width: 768px) {
  .grid--stack-sm { grid-template-columns: 1fr; }
}

@supports (grid-template-columns: subgrid) {
  /* If the section itself needs children aligned to the same rails without wrappers */
  .use-subgrid {
    display: grid;
    grid-template-columns: subgrid;
  }
}