/**
 * @file
 * Layout HSF theme.
 */

.layout-nav {
  padding-top: env(safe-area-inset-top);
}

.layout-container {
  box-sizing: border-box;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.layout-main {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 50px 20px 0;
  min-height: calc(100vh - 740px);
}

.layout-row {
}
.layout-row--main-column {
  width: 335px;
  margin-left: auto;
  margin-right: auto;
}
.layout-row--full-height {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}
.layout-row--full-width {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  padding-left: 0;
  padding-right: 0;
}

.layout-footer {
  margin-top: 90px;
  padding-bottom: env(safe-area-inset-bottom);
}

@media all and (min-width: 735px) {
  .layout-main {
    padding-left: 30px;
    padding-right: 30px;
  }
  .layout-row--main-column {
    width: 715px;
  }
}

@media all and (min-width: 1200px) {
  .layout-main {
    width: 1185px;
    padding-left: 45px;
    padding-right: 45px;
    min-height: calc(100vh - 460px);
  }
  .layout-row--main-column {
    width: 1095px;
  }
}

.block-page-title-block {
  margin: 50px 0 25px;
}

/*
 * List item layout.
 */
.views-row + .views-row .list-item {
  margin-top: 50px;
  padding-top: 50px;
}
.views-row + .views-row .list-item::before {
  position: relative;
  display: block;
  z-index: 10;
  left: 0;
  top: -50px;
  width: 100%;
  border-top: 1px solid rgba(0, 0, 0, .1);
  content: '';
}
@media all and (min-width: 735px) {
  .list-item {
    clear: right;
  }
  .list-item__image {
    float: right;
    margin-left: 45px;
  }
  .list-item__text {
    overflow: hidden;
  }
  .list-item__text h2 {
    margin-top: 0;
  }
}

/*
 * Simple columns: 335px wide, as many as fit.
 */
.columns {
  columns: 335px;
  column-gap: 45px;
  gap: 45px;
}
.columns .node,
.columns .paragraph,
.columns .views-row {
  page-break-inside: avoid;
  break-inside: avoid-column;
  display:table;
  margin-bottom: 50px;
}

/*
 * Two column flex (when space allows) layout.
 */
.two-columns {
  display: flex;
  flex-direction: column;
}
.two-columns__first,
.two-columns .two-columns__second {
  flex: 0 0 auto;
  width: 335px;
  margin-left: auto;
  margin-right: auto;
}
.two-columns .two-columns__first {
  padding-bottom: 50px;
}

@media all and (min-width: 735px) {
  .two-columns--narrow {
    margin-left: auto;
    margin-right: auto;
    width: 715px;
    flex-direction: row;
  }
  .two-columns .two-columns__first,
  .two-columns .two-columns__second {
    width: 715px;
  }
  .two-columns--narrow .two-columns__first,
  .two-columns--narrow .two-columns__second {
    width: 335px;
  }
  .two-columns--narrow .two-columns__second {
    margin-left: 45px;
  }
}

@media all and (min-width: 1200px) {
  .two-columns {
    flex-direction: row;
  }
  .two-columns--narrow {
    width: 1095px;
  }
  .two-columns--narrow .two-columns__first,
  .two-columns .two-columns__first {
    width: 335px;
    padding-bottom: 0;
  }
  .two-columns--narrow .two-columns__second,
  .two-columns .two-columns__second {
    margin-left: 45px;
    width: 715px;
  }
}


/*
 * Two column (when space allows) grid layout.
 */
.two-column-grid,
.view--two-column-grid .view-content {
  display: grid;
  grid-template-columns: 335px;
  grid-template-rows: auto;
  grid-gap: 45px;
  gap: 45px;
  width: 335px;
  margin-left: auto;
  margin-right: auto;
}

@media all and (min-width: 735px) {
  .two-column-grid,
  .view--two-column-grid .view-content {
    grid-template-columns: repeat(2, 335px);
    width: 715px;
  }
  .two-column-grid__left {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  .two-column-grid__right {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
  .two-column-grid p:first-child {
    margin-top: 0;
  }
}


/*
 * Three column (when space allows) grid layout.
 */
.three-column-grid,
.infinite-scroll-three-column-grid .views-infinite-scroll-content-wrapper {
  display: grid;
  grid-template-columns: 335px;
  grid-template-rows: auto;
  grid-gap: 50px 45px;
  gap: 50px 45px;
  width: 335px;
  margin-left: auto;
  margin-right: auto;
}
.three-column-grid.clearfix::after,
.infinite-scroll-three-column-grid .views-infinite-scroll-content-wrapper.clearfix::after {
  display: none;
}

@media all and (min-width: 735px) {
  .three-column-grid,
  .infinite-scroll-three-column-grid .views-infinite-scroll-content-wrapper {
    grid-template-columns: repeat(2, 335px);
    width: 715px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media all and (min-width: 1200px) {
  .three-column-grid,
  .infinite-scroll-three-column-grid .views-infinite-scroll-content-wrapper {
    grid-template-columns: repeat(3, 335px);
    width: 1095px;
    margin-left: auto;
    margin-right: auto;
  }
}