.page-node-type-intranet {

  container: intranet-page / inline-size;

  &:has(.intranet-sidebar-menu) {
    section.left .region {
      margin-left: auto;
    }
  }


  main {
    display: block;
  }

  .dom-page-content-container {
    &:has(.dom-intranet-sidebar-container :is(.menu, .intranet-sidebar-menu )) {
      display: grid;
      grid-template-columns: 4fr 1fr;
    }
  }

  .region-sidebar-second nav > ul.menu > li.menu-item--expanded {
    padding-inline: 0;
  }

  .dom-intranet-sidebar-container {
    border-left: solid 1px var(--color-uw-gray-blue);
    max-height: fit-content;
  }

  .layout-sidebar-second {
    margin-block: 0 4rem;
    padding-left: 3rem;

    .menu-item a {
      color: var(--color-uw-blue);
    }
  }

  .intranet-sidebar-menu {
    grid-column: 3;
    padding: 0 2rem 6rem 3rem;
    height: fit-content;
    margin-top: 4rem;


    /* This class is given via the display settings within the Sidebar Content Block */

    .sidebar-menu-headline {
      margin-bottom: 1rem;
      font-size: 3.2rem;
      font-weight: 600;
      line-height: 1.2;
      font-family: var(--font-headline), 'serif';

      & + div {
        margin-bottom: 2rem;
      }
    }


    :where(.intranet-sidebar-menu-links) {
      display: flex;
      flex-flow: column;
      gap: 1rem;
    }

    :where(.intranet-sidebar-menu-links-wrapper) {
      display: flex;
      flex-flow: column;
      gap: 4rem;
    }
  }


  .dom-intranet-content-wrapper {
    display: block;

    &:has(.intranet-sidebar-menu-wrapper) {
      display: grid;
      grid-template-columns: 6vw 5fr 1.5fr;
    }

    & > * {
      grid-column: 2;
      grid-row: 1;
    }


    #block-dom-content,
    #block-dom-content > article {
      display: block !important;
    }

    > div.region-content {
      grid-column: 2;
    }


  }

  .region-footer {
    background: var(--intranet-region-footer-color);
    color: var(--color-primary-white);

  }

}


@media screen and (max-width: 1300px) {
  .page-node-type-intranet {
    main {
      display: flex;
      flex-flow: column;
    }

    .dom-page-content-container {
      &:has(.dom-intranet-sidebar-container :is(.menu, .intranet-sidebar-menu )) {
        display: flex;
        flex-flow: column;

        .dom-page-content-wrapper {
          order: 2;
        }

        .intranet-sidebar-menu {
          padding-inline: 4vw;
        }
      }
    }

  }
}


.paragraph--type--calendar-view-block {
  .viewsreference--view-title {
    display: none;
  }

  .cta {
    text-align: right;
  }
}


.intranet-calendar {
  container: intranet-events / inline-size;

  .intranet-events-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4rem;
    row-gap: 8rem;
    justify-content: center;
    align-items: flex-end;
    margin-block: 2rem 8rem;


    .intranet-event-container {
      height: 100%;
      display: grid;
      grid-template-rows: 1fr 5fr;
      max-width: 40rem;
    }

    .event-series-label {
      text-align: center;
      background: var(--color-uw-gray-darker);
      color: var(--color-primary-white);
      position: relative;
      justify-self: center;
      padding: 1rem 1.5rem;
      border-radius: 0.5rem;
      font-weight: 600;
      text-transform: uppercase;
      transform: translateY(0.5rem);
      font-size: 1.4rem;
      width: calc(90% - 3rem);
      letter-spacing: 1px;
    }

    .single-intranet-event {
      border-radius: 1rem;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
      display: flex;
      flex-flow: column;
      height: 100%;
      grid-row: 2;
      position: relative;
      min-height: 26rem;
      z-index: 1;
      min-width: 34.3rem; /* This is to support a max of 4 lines of text in the intranet-event-title at all times */
      background: var(--color-primary-white);


      .single-intranet-event-wrapper {
        margin: 3rem 2rem 0 2rem;
        display: grid;
        grid-template-rows: 8rem 1fr;
        gap: 2rem;

      }

      .event-time {
        padding-bottom: 0.5rem;
      }

      .intranet-event-title {
        font-size: 1.7rem;
        text-decoration: none;
        line-height: 1.1;
        display: inline-block;
        font-weight: 800;
      }

      .date-box {

        display: flex;
        flex-flow: column;
        width: fit-content;
        justify-content: center;
        align-items: center;
        align-self: flex-start;
        transform: translateX(-4rem);

        &::before {
          content: '';
          position: absolute;
          display: block;
          width: 1.9rem;
          background: var(--color-uw-dark-red);
          height: 1rem;
          left: 0;
          z-index: 0;
          transform: translate(0.1rem, -3.4rem);
          clip-path: polygon(100% 100%, 0% 100%, 100% 0);
          border-bottom-left-radius: 0.5rem;
        }

        .date-box-info {
          color: var(--color-primary-white);
          background: var(--color-uw-red);
          border-radius: 0.5rem;
          padding: 0.5rem 1rem;
          position: relative;
          z-index: 1;


          & > .month {
            font-weight: 400;
            font-size: 1.6rem;
            text-align: center;
            line-height: 1.1;
          }


          & > .day {
            font-size: 3.8rem;
            font-weight: 800;
            line-height: 0.9;
          }

        }


      }

      .online-link > a {
        display: flex;
        flex-flow: row;
        gap: 0.4rem;
        padding-top: 1rem;
        align-items: center;
      }

      .location-icon {
        svg {
          display: inline-block;
          width: auto;
          margin-right: 0.2rem;
        }

        &.online svg {
          height: 1.7rem;
          margin-top: 0.5rem;
        }

        &.building svg {
          height: 3rem;
          margin-left: 0.3rem;
          margin-top: 0.2rem;
        }
      }

      .outside-link-icon svg {
        display: inline-block;
        line-height: 0;
        height: 1.5rem;

        & path {
          fill: var(--color-uw-blue);
        }
      }

      .intranet-event-details {
        font-size: 1.8rem;
        color: var(--color-primary-black);
        display: grid;
        grid-template-columns: 4rem auto;
        align-items: center;
        padding-bottom: 2rem;
      }

      .event-time + .event-locations {
        padding-top: 1rem;
        border-top: solid var(--color-uw-gray-blue) 1px;
        line-height: 1.2;
      }

      .in-person-location {
        padding-block: 1rem;
        display: flex;
        flex-flow: row;
        align-items: flex-start;
        gap: 0.5rem;
      }


      .event-type {
        justify-self: baseline;
        align-self: flex-end;
        margin-top: auto;
        padding: 0.5rem 3rem 0.5rem 2rem;
        text-transform: uppercase;
        font-weight: 600;
        width: calc(100% - 5rem);
        font-size: 1.4rem;
        text-align: right;
        border-bottom-right-radius: 1rem;
        border-bottom-left-radius: 1rem;
        letter-spacing: 1px;

        &.administration {
          background: rgba(94, 5, 197, 0.4);
        }

        &.education {
          background: rgba(197, 5, 12, 0.4);
        }

        &.research {
          background: rgb(97, 124, 54, 0.4);
        }
        
        &.faculty&.affairs {
          background: rgb(30, 0, 0, 0.4);
        }
        
        &.wellness {
          background: rgb(0, 25, 100, 0.4);
        }
      }

      .is-accredited {
        position: absolute;
        bottom: 0;
        z-index: 2;
        font-size: 1.4rem;
        font-weight: 800;
        text-transform: uppercase;
        transform: translate(-1.5rem, 2rem);
        padding: 0.5rem 2rem;
        background: #A3A7A8;
        border-bottom-right-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
        letter-spacing: 1px;

        &::before {
          content: '';
          position: absolute;
          display: block;
          width: 1.5rem;
          background: var(--color-uw-gray-darker);
          height: 1rem;
          left: 0;
          transform: translateY(-1.5rem);
          clip-path: polygon(100% 100%, 0% 100%, 100% 0);
        }


      }


    }
  }
}

@container intranet-page (width < 147rem) {
  .page-node-type-intranet:has(.dom-intranet-sidebar-container) {
    .dom-intranet-content-wrapper {
      .intranet-events-wrapper {
        grid-template-columns: 1fr 1fr;
      }
    }
  }
}

@container intranet-page (width < 130rem) {
  .page-node-type-intranet {
    .dom-intranet-content-wrapper {

      &:has(.intranet-sidebar-menu-wrapper) {
        display: flex;
        flex-flow: column;
      }


      & > .intranet-sidebar-menu {
        order: 2 !important;

        :where(.intranet-sidebar-menu-links-wrapper) {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 2rem;
        }

      }
    }
  }
}

@container intranet-page (width < 75rem) {
  .page-node-type-intranet {
    .dom-intranet-content-wrapper {
      & > .intranet-sidebar-menu {
        border-left: none;
        padding-inline: var(--mobile-inline-padding);

        :where(.intranet-sidebar-menu-links-wrapper) {
          display: flex;
          flex-flow: column;
          gap: 4rem;

        }

      }
    }
  }
}


@container intranet-events (width < 115rem ) {
  .intranet-calendar {

    .intranet-events-wrapper {
      grid-template-columns: 1fr 1fr;
    }
  }
}

@container intranet-page (width < 80rem) {
  .page-node-type-intranet:has(.dom-intranet-sidebar-container) {
    .dom-intranet-content-wrapper {
      .intranet-events-wrapper {
        grid-template-columns: 1fr;
      }
    }
  }
}


@container intranet-events (width < 72rem ) {
  .intranet-calendar {
    .intranet-events-wrapper {
      grid-template-columns: 1fr;
      row-gap: 2rem;

      .single-intranet-event {
        .single-intranet-event-wrapper {
          grid-template-rows: auto 1fr;
        }
      }
    }
  }
}


@container intranet-page (width < 45rem) {
  .page-node-type-intranet {
    .paragraph--type--calendar-view-block {
      padding-inline: var(--mobile-inline-padding);
    }
    .dom-intranet-content-wrapper {
      .single-intranet-event {
        min-width: unset;
      }
    }
  }
}