/**
 * @file
 * Layout styles for the MSU Extension theme.
 */

 /* move this into the msu-page component */
/* .page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "breadcrumbs" "tabs" "main" "sidebar_first" "sidebar_second" "footer";
} */
/* .user-logged-in {
  grid-template-areas: "header" "breadcrumbs" "tabs" "main" "sidebar_first" "sidebar_second" "footer";
} */

/* Aspect Ratios */
.aspect-ratio--16x9 {
  aspect-ratio: 16 / 9;
}
.aspect-ratio--9x16 {
  aspect-ratio: 9 / 16;
}
.aspect-ratio--4x3 {
  aspect-ratio: 4 / 3;
}
.aspect-ratio--3x4 {
  aspect-ratio: 3 / 4;
}
.aspect-ratio--square {
  aspect-ratio: 1 / 1;
}

/**
 * Layout Builder
 */
.layout-builder {
  padding: 0;
}
/* Revert Layout Builder Blocks to not have a background... */
.layout-builder-block {
  background-color: revert;
  padding: 0;
}
/* Positions "Save layout", "Discard changes", etc. onto the grid */
#node-page-layout-builder-form {
  grid-column: content;
}

/* Fix Layout Builder Add buttons within flex containers, such as on
   /admin/structure/types/manage/news/display/full/layout. */
.layout-builder__add-block {
  flex: 1 0 100%;
}

/**
 * Container
 */
.container {
  /* max-width: 1320px; */
  /* margin: 0 auto; */
  /* padding: 0 0.75rem; */
  grid-column: content;
}

/**
 * Header
 */
/* .site-header {
  background-color: rgba(93, 23, 37, 0.98);
  background-image: linear-gradient(to right, #4f131f, #6b1b2b 50%, #4f131f);
  backdrop-filter: blur(8px);
  color: var(--msu-white);
  position: sticky;
  top: var(--drupal-displace-offset-top, 0px);
  z-index: 1;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
} */

/**
 * Main
 */
.main-wrapper {
  position: relative;
  z-index: 0;
}

/* article.node--view-mode-full,
.full-width {
  display: grid;
  grid-template-columns: var(--msu-grid);
  gap: var(--msu-gap);
} */

/* msu-grid-full not currently used */
.msu-grid-full {
  display: grid;
  grid-template-columns: var(--msu-grid-full);
  gap: 0 var(--msu-gap);
}

.content-grid {
  display: grid;
  grid-template-columns: var(--msu-grid);
  gap: 0 var(--msu-gap);
}

.content-grid > * {

}

@media (min-width: 768px) {



}


/**
 * Layout Builder Sections
 */
/* One Column Section */
.layout--onecol {
  /* grid-column: content; */
}
.layout--onecol .layout__region {
  /* width: 100%; */
  grid-column: content;
}

/* Two Column Section */
.layout--twocol-section {
  /* display: flex;
  flex-wrap: wrap; */
  /* display: grid;
  gap: var(--msu-gap); */
  grid-column: content;
}
/* @supports (grid-template-columns: subgrid) {
  .layout--twocol-section {
    grid-template-columns: subgrid;
  }
}

@supports not (grid-template-columns: subgrid) {
  .layout--twocol-section {
    display: contents;
  }
} */

/* .layout--twocol-section > .layout__region {
  flex: 0 1 100%;
} */

@media screen and (min-width: 40em) {
  /* .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--first,
  .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--second {
    flex: 0 1 50%;
  } */
  .layout--twocol-section.layout--twocol-section--50-50 {
    /* grid-template-columns: 1fr 1fr; */
  }

  /* .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--first,
  .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--second {
    flex: 0 1 33%;
  } */

  /* .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--second,
  .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first {
    flex: 0 1 67%;
  } */

  .layout--twocol-section.layout--twocol-section--33-67 .layout__region--first {
    grid-column: content-start / span 4;
  }

  .layout--twocol-section.layout--twocol-section--33-67 .layout__region--second {
    grid-column: span 8;
  }

  .layout--twocol-section.layout--twocol-section--67-33 .layout__region--first {
    grid-column: content-start / span 8;
  }

  .layout--twocol-section.layout--twocol-section--67-33 .layout__region--second {
    grid-column: span 4;
  }

  .layout--twocol-section.layout--twocol-section--25-75 .layout__region--first {
    grid-column: content-start / span 3;
  }

  .layout--twocol-section.layout--twocol-section--25-75 .layout__region--second {
    grid-column: span 9;
  }

  .layout--twocol-section.layout--twocol-section--75-25 .layout__region--first {
    grid-column: content-start / span 9;
  }

  .layout--twocol-section.layout--twocol-section--75-25 .layout__region--second {
    grid-column: span 3;
  }
}


/* Three Column Section */
.layout--threecol-section {
  /* display: flex;
  flex-wrap: wrap; */
  /* display: grid;
  gap: var(--msu-gap); */
}

/* .layout--threecol-section > .layout__region {
  flex: 0 1 100%;
} */

@media screen and (min-width: 40em) {
  /* .layout--threecol-section--25-50-25 > .layout__region--first,
  .layout--threecol-section--25-50-25 > .layout__region--third,
  .layout--threecol-section--25-25-50 > .layout__region--first,
  .layout--threecol-section--25-25-50 > .layout__region--second,
  .layout--threecol-section--50-25-25 > .layout__region--second,
  .layout--threecol-section--50-25-25 > .layout__region--third {
    flex: 0 1 25%;
  } */

  .layout--threecol-section--25-50-25 {
    grid-template-columns: 1fr 2fr 1fr;
  }

  .layout--threecol-section--25-25-50 {
    grid-template-columns: 1fr 1fr 2fr;
  }

  .layout--threecol-section--50-25-25 {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .layout--threecol-section--33-34-33 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 40em) {
  .content-grid.layout--fourcol-section .layout__region--first {
    grid-column: content-start / span 3;
   }
  .content-grid.layout--fourcol-section .layout__region--second,
  .content-grid.layout--fourcol-section .layout__region--third,
  .content-grid.layout--fourcol-section .layout__region--fourth {
    grid-column: span 3;
  }
}

/* this sets all child content to span 12 columns, centered */
/* .content-grid > :not(.breakout, .full-width, .full-bleed),
.content-grid > .layout--onecol.full-width > .layout__region {
  grid-column: content;
} */

.content-grid > .full-width > .layout__region:first-child,
.content-grid.full-width > .layout__region:first-child {
  grid-column-start: content-start;
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
  grid-column: content;
}

.content-grid > .breakout {
  grid-column: breakout;
}

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

.content-grid > .narrow {
  grid-column: narrow;
  grid-column: ;
}

/* If the browser supports subgrid */
/* @supports (grid-template-columns: subgrid) {
  .content-grid > .full-width {
    grid-column: full-width;
    display: grid;
    grid-template-columns: subgrid;
  }
} */

/* Fallback for browsers that don't support subgrid */
/* @supports not (grid-template-columns: subgrid) {
  .content-grid > .full-width {
    grid-column: full-width;
    display: contents;
  }
} */

@media (min-width: 992px) {
  .content-grid > .article--meta {
    grid-column: 4 / span 10;
  }

  .article--body > .article--content {
    grid-column: 6 / span 6;
  }
}

@media (min-width: 1200px) {
  .main-wrapper {
    /* display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto; */
  }
  .main-wrapper .site-main {
    /* grid-column: span 12; */
    grid-column: full-width;
  }
  .main-wrapper.has-sidebars .site-main {
    /* grid-area: main; */
    order: 2;
    grid-column: span 6;
  }
  .main-wrapper.has-sidebar-first .site-main,
  .main-wrapper.has-sidebar-second .site-main {
    order: 2;
    grid-column: span 9;
  }
  .main-wrapper.has-sidebar-first .layout-sidebar-first,
  .main-wrapper.has-sidebars .layout-sidebar-first {
    /* grid-area: sidebar_first; */
    order: 1;
    grid-column: span 3;
  }
  .main-wrapper.has-sidebar-second .layout-sidebar-second,
  .main-wrapper.has-sidebars .layout-sidebar-second {
    /* grid-area: sidebar_second; */
    order: 3;
    grid-column: span 3;
  }
}

/**
 * Frontpage
 */

/* Upcoming Events */
.upcoming-events > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  /* Make this a grid of 4 columns using CSS grid */
  /* grid-template-columns: repeat(4, 1fr); */
  grid-template-columns: var(--msu-grid-12);
  gap: var(--msu-gap);
}
.upcoming-events > ul > li {
  grid-column: span 12;
}

@media only screen and (min-width: 992px) {
  .upcoming-events > ul > li {
    grid-column: span 6;
  }
}

@media only screen and (min-width: 1200px) {
  .upcoming-events > ul > li {
    grid-column: span 3;
  }
}

/**
 * Footer
 */
/* .site-footer {
  background-color: var(--msu-black);
  color: var(--msu-white);
  --footer-link-color: var(--msu-white, #fff)
} */