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

/* @layer layout { */

  /* 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;
  }

  /**
   * CSS Columns.
   * Base classes apply at all sizes. Breakpoint variants (sm/md/lg/xl) apply
   * column-count only at the given breakpoint and above.
   */
  .msu-columns-2 {
    column-count: 2;
    column-gap: var(--msu-gap);
  }
  .msu-columns-3 {
    column-count: 3;
    column-gap: var(--msu-gap);
  }
  .msu-columns-4 {
    column-count: 4;
    column-gap: var(--msu-gap);
  }

  @media (min-width: 576px) {
    .msu-columns-sm-2 { column-count: 2; column-gap: var(--msu-gap); }
    .msu-columns-sm-3 { column-count: 3; column-gap: var(--msu-gap); }
    .msu-columns-sm-4 { column-count: 4; column-gap: var(--msu-gap); }
  }

  @media (min-width: 768px) {
    .msu-columns-md-2 { column-count: 2; column-gap: var(--msu-gap); }
    .msu-columns-md-3 { column-count: 3; column-gap: var(--msu-gap); }
    .msu-columns-md-4 { column-count: 4; column-gap: var(--msu-gap); }
  }

  @media (min-width: 992px) {
    .msu-columns-lg-2 { column-count: 2; column-gap: var(--msu-gap); }
    .msu-columns-lg-3 { column-count: 3; column-gap: var(--msu-gap); }
    .msu-columns-lg-4 { column-count: 4; column-gap: var(--msu-gap); }
  }

  @media (min-width: 1200px) {
    .msu-columns-xl-2 { column-count: 2; column-gap: var(--msu-gap); }
    .msu-columns-xl-3 { column-count: 3; column-gap: var(--msu-gap); }
    .msu-columns-xl-4 { column-count: 4; column-gap: var(--msu-gap); }
  }

  @media (min-width: 1400px) {
    .msu-columns-2xl-2 { column-count: 2; column-gap: var(--msu-gap); }
    .msu-columns-2xl-3 { column-count: 3; column-gap: var(--msu-gap); }
    .msu-columns-2xl-4 { column-count: 4; column-gap: var(--msu-gap); }
  }

  /**
  * 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,
  .content-grid > .breakout {
    grid-column: full-width;
  }

  /* 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;
    }

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

  /**
  * 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)
  } */

/* } */