/************

Explaining the grid system:

Taken from Kevin Powell's video re: a new way to use grid, where he defines full-width gridlines and content-width gridlines (which I call parcel). The whole page uses the .grid class which defines that basic grid. Then every direct child (.grid > *) gets placed on the "parcel" column, so that the content is constrained to the parcel.

The idea from Kevin Powell is that then you can define each div/container to live on the full-width or the parcel column (by using .full-width, see .grid > .full-width. The magic happens when you put a class of "full-width grid" on a div; that creates a full-width div but the content inside that div (direct children) gets placed back on the parcel (because of .grid > * ). Works great when there's no div-itis.

The problem with using this in Drupal is that the region and block system doesn't really allow for a clean use of the system, because the divs for regions can be direct children of the page wrapper (.grid), but the blocks within the regions aren't necessarily direct children.

So I've hacked it a bit. The following is needed to make this work.

- The page.html.twig and/or region--[foo].html.twig templates need additional classes of 'full-width' and 'grid' to allow for them to be full-width (e.g. full-colour backgrounds).
- These classes need to live as direct parents of Regions. (If I apply .full-width.grid to the Region itself, then the Block children will be assigned the parcel-width because they are .grid > * // In addition, to allow a Region to be a grid with columns (e.g. region--footer-top), I need to wrap the Region variable in page.html.twig with a div but not with a class of .grid (e.g. footer-top-wrapper).
- The Region needs to be further defined as a grid to allow the Blocks within it to function as a grid, for responsive design, etc. (TODO: really, all Regions should probably be display: grid; - need to experiment with this)
- The layout.css file has all the high-level (down to Region level) grid  definitions.
- The Blocks placed within a region may also need classes applied. This is most easily accomplished with the Block Class module (I'm investigating Fences module for this as well.)
- I've defined a Block Type as "Columns" for up to four blocks that will act as a responsive grid (the Block Class is .block--columns), and the CSS is defined in block.css

I'm also experimenting with helper classes vs direct styling. I don't want to "bootstrapify", but it makes sense to follow DRY. So some styling can/should be done via helper classes and Block Class module.

************/


html,
body {
  height: 100%;
}

/* Basic CSS Grid */

.page-wrapper {
  min-height: 100vh;
  container: c-page-wrapper / inline-size;
}

.grid {
  --content-width: clamp(8em, 92cqi, var(--bkpt-lg));
  
  display: grid;
  align-items: start;
  grid-template-columns: [full-width-start] minmax(var(--spc-lg), 1fr) [parcel-start] var(--content-width) [parcel-end] minmax(var(--spc-lg), 1fr) [full-width-end];
}

.page-wrapper.grid {
  grid-template-rows: auto 1fr auto;
}

.grid > * {
  container: c-parcel / inline-size;
  grid-column: parcel;
}

.grid > .full-width {
  grid-column: full-width;
}

/* Initially, all regions are the whole width by default */

/* Make the Regions a grid by default too */
header,
.region,
.main-content,
.node__content {
  display: grid;
  gap: var(--spc); 
}

/* Header content is centred to start */
header {
  justify-content: center;
  justify-items: center;
  align-items: center;
}

.region--content,
.node__content {
  gap: 0;
}

.region--sidebar {
  align-content: start;
}

.footer-top-wrapper {
  padding-block-end: var(--spc);
}

@container c-parcel (min-width: 42rem) {

  header {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }
  .main-content.with-sidebar {
    grid-template-columns: 3fr 1fr;
  }

}

@container c-parcel (min-width: 48rem) {
  
  .region--footer-top {
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  }
  .region--footer-bottom {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  }
  
}

@container c-parcel (min-width: 80em) {
  
  .main-content.with-sidebar {
    grid-template-columns: 4fr 2fr;
  }  

}