/**
 * Provides a simple grid system.
 *
 * This is transitional. Many components define their own grids, and when they
 * are modified, the grid should be moved over here.
 *
 * Selectors anticipate that it's easier to add a class to views wrappers than
 * it is to add one to the .rows element.
 *
 * "1 column" grids are a quick way to make use of row-gap on an element's
 * children.
 */

.g {
  /* Our "minimal" view. */
  & > .rows,
  /* Not a view page: the grid is the outermost element. */
  &:not(.view-plugin-block, .view-plugin-page),
  /* A view page or block: the grid is the results. */
  &:where(.view-plugin-block, .view-plugin-page) .full__main-content .rows {
    column-gap: var(--dcc-layout-grid-mobile-column-gap);
    display: grid;
    grid-auto-rows: var(--dcc-layout-grid-auto-rows);
    row-gap: var(--dcc-layout-grid-mobile-row-gap);
    width: 100%;
  }

  &:where(.g1, .g2, .g3, .g4):not(.view-plugin-block, .view-plugin-page),
  &:where(.g1, .g2, .g3, .g4) > .rows,
  &:where(.g1, .g2, .g3, .g4):where(.view-plugin-block, .view-plugin-page) .full__main-content .rows {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  /* Set some variables in grid-contexts */
  &:where(.g1, .g2, .g3, .g4) {
    --dcc-layout-grid-column-width: calc((100vw - 2 * var(--ls-outer-padding-inline)));
  }
}

@media screen and (min-width: 40rem) {
  .g {
    &.g1:not(.view-plugin-block, .view-plugin-page),
    &.g1 > .rows,
    &.g1:where(.view-plugin-block, .view-plugin-page) .full__main-content .rows {
      row-gap: var(--dcc-layout-grid-tablet-row-gap);
    }

    &:where(.g2, .g3, .g4):not(.view-plugin-block, .view-plugin-page),
    &:where(.g2, .g3, .g4) > .rows,
    &:where(.g2, .g3, .g4):where(.view-plugin-block, .view-plugin-page) .full__main-content .rows {
      column-gap: var(--dcc-layout-grid-tablet-column-gap);
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 1fr;
      row-gap: var(--dcc-layout-grid-tablet-row-gap);
    }

    &:where(.g1, .g2, .g3, .g4) {
      --dcc-layout-grid-column-width: calc((
        (100vw - 2 * var(--ls-outer-padding-inline)) - var(--dcc-layout-grid-tablet-column-gap)
      ) / 2);
    }
  }
}

@media screen and (min-width: 64rem) {
  .g {
    &.g1:not(.view-plugin-block, .view-plugin-page),
    &.g1 > .rows,
    &.g1:where(.view-plugin-block, .view-plugin-page) .full__main-content .rows {
      row-gap: var(--dcc-layout-grid-desktop-row-gap);
    }

    &:where(.g2, .g3):not(.view-plugin-block, .view-plugin-page),
    &:where(.g2, .g3) > .rows,
    &:where(.g2, .g3):where(.view-plugin-block, .view-plugin-page) .full__main-content .rows {
      column-gap: var(--dcc-layout-grid-desktop-column-gap);
      row-gap: var(--dcc-layout-grid-desktop-row-gap);
    }

    &.g3:not(.view-plugin-block,.view-plugin-page),
    &.g3 > .rows,
    &.g3:where(.view-plugin-block, .g3.view-plugin-page) .full__main-content .rows {
      grid-template-columns: repeat(3, 1fr);
    }

    &.g4:not(.view-plugin-block, .view-plugin-page),
    &.g4 > .rows,
    &.g4:where(.view-plugin-block, .view-plugin-page) .full__main-content .rows {
      column-gap: var(--dcc-layout-grid-desktop-dense-column-gap);
      grid-template-columns: repeat(4, 1fr);
      row-gap: var(--dcc-layout-grid-desktop-dense-row-gap);
    }

    &:where(.g1, .g2, .g3) {
      --dcc-layout-grid-column-width: calc(
      (
        min(var(--dcc-content-width-500), 100vw - 2 * var(--ls-outer-padding-inline))
        - 2 * var(--dcc-layout-grid-desktop-column-gap)
      ) / 3);
    }

    &.g4 {
      --dcc-layout-grid-column-width: calc(
      (
        min(var(--dcc-content-width-500), 100vw - 2 * var(--ls-outer-padding-inline))
        - 2 * var(--dcc-layout-grid-desktop-dense-column-gap)
      ) / 4);
    }
  }
}