/* Grid */

.container-component {
  grid-area: comp;
}

.container-sidebar-left {
  grid-area: side-l;

  @media (--hiq-upper-font-range) {
    border-inline-end: 1px solid var(--hiq-sidebar-border-color);
  }
}

.container-sidebar-right {
  grid-area: side-r;

  @media (--hiq-upper-font-range) {
    border-inline-start: 1px solid var(--hiq-sidebar-border-color);
  }
}

.container-top-a,
.container-top-b,
.container-bottom-a,
.container-bottom-b,
.container-footer > div {
  display: grid;
  grid-gap: var(--hiq-grid-gutter);
  grid-template-columns: 1fr;

  @media (--hiq-lower-font-range) {
    grid-template-columns: 1fr 1fr;
  }

  @media (--hiq-upper-font-range) {
    grid-template-columns: repeat(auto-fit, minmax(23%, 1fr));
  }
}

.site-grid {
  display: grid;
  grid-template-areas:
    ". head head head head ."
    ". banner banner banner banner ."
    ". top-a top-a top-a top-a ."
    ". top-b top-b top-b top-b ."
    ". comp comp comp comp ."
    ". side-r side-r side-r side-r ."
    ". side-l side-l side-l side-l ."
    ". bot-a bot-a bot-a bot-a ."
    ". bot-b bot-b bot-b bot-b ."
    ". footer footer footer footer ."
    ". debug debug debug debug .";
  grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 270px)) [main-end] minmax(0, 1fr) [full-end];
  grid-gap: 0 var(--hiq-grid-gutter);

  &:not(.has-sidebar-left) .container-component {
    grid-column-start: main-start;
  }

  &:not(.has-sidebar-right) .container-component {
    grid-column-end: main-end;
  }

  > .full-width {
    grid-column: full-start / full-end;
  }

  @media (--hiq-upper-font-range) {
    grid-template-areas:
      ". head head head head ."
      ". banner banner banner banner ."
      ". top-a top-a top-a top-a ."
      ". top-b top-b top-b top-b ."
      ". side-l comp comp side-r ."
      ". bot-a bot-a bot-a bot-a ."
      ". bot-b bot-b bot-b bot-b ."
      ". footer footer footer footer ."
      ". debug debug debug debug .";
  }

  &.wrapper-fluid {
    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 25%)) [main-end] minmax(0, 1fr) [full-end];
  }
}

.container-header {
  grid-area: head;
}

.container-banner {
  grid-area: banner;
}

.container-top-a {
  grid-area: top-a;
}

.container-top-b {
  grid-area: top-b;
}

.container-main {
  grid-area: main;
}

.container-main-top {
  grid-area: main-t;
}

.container-main-bottom {
  grid-area: main-b;
}

.container-bradcrumbs {
  grid-area: bread;
}

.container-bottom-a {
  grid-area: bot-a;
}

.container-bottom-b {
  grid-area: bot-b;
}

.container-footer {
  grid-area: footer;
}

.system-debug {
  grid-area: debug;
}
