.keen-slider:not([data-keen-slider-disabled]){-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;align-content:flex-start;display:flex;overflow:hidden;position:relative;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;user-select:none;-khtml-user-select:none;width:100%}.keen-slider:not([data-keen-slider-disabled]) .keen-slider__slide{min-height:100%;overflow:hidden;position:relative;width:100%}.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-reverse]{flex-direction:row-reverse}.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-v]{flex-wrap:wrap}
/* ***
* Mixin:	Respond To
* Description: 	Provides a simple mixin for handling canonical responsive breakpoints on the site
* Warning:      This mixin needs to match the corresponding mixin from the theme
* ***/
.wp-block-heading-ticker {
  overflow: hidden;
}
.wp-block-heading-ticker ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.wp-block-heading-ticker ul li.swiper-slide {
  margin: 0;
  overflow: hidden;
  padding: 0;
  white-space: nowrap;
}

/* ***
* Target/Focus:	Post Card
* Description: 	Some helpful styling
* ***/
.post {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.post__image {
  aspect-ratio: 3/2;
  width: 100%;
}
.post__image img {
  height: 100% !important;
  width: 100% !important;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (min-width: 782px) {
  .wp-block-post-collection.layout-desktop--grid .wp-block-post-collection__inner-container {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
  }
  .wp-block-post-collection.layout-desktop--grid .wp-block-post-collection__inner-container[data-desktop-cols="1"] {
    grid-template-columns: 100%;
  }
  .wp-block-post-collection.layout-desktop--grid .wp-block-post-collection__inner-container[data-desktop-cols="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .wp-block-post-collection.layout-desktop--grid .wp-block-post-collection__inner-container[data-desktop-cols="3"] {
    grid-template-columns: repeat(3, 1fr);
  }
  .wp-block-post-collection.layout-desktop--grid .wp-block-post-collection__inner-container[data-desktop-cols="4"] {
    grid-template-columns: repeat(4, 1fr);
  }
  .wp-block-post-collection.layout-desktop--grid .wp-block-post-collection__inner-container[data-desktop-cols="5"] {
    grid-template-columns: repeat(5, 1fr);
  }
  .wp-block-post-collection.layout-desktop--grid .wp-block-post-collection__inner-container[data-desktop-cols="6"] {
    grid-template-columns: repeat(6, 1fr);
  }
  .wp-block-post-collection.layout-desktop--bento .wp-block-post-collection__inner-container {
    display: grid;
    gap: var(--wp--preset--spacing--md);
    grid-template-rows: 1fr 1fr 30%;
    grid-template-columns: 2fr 1fr 1fr 2fr;
  }
  .wp-block-post-collection.layout-desktop--bento .post:first-child {
    grid-column: 1/span 2;
    grid-row: 1/span 2;
  }
  .wp-block-post-collection.layout-desktop--bento .post:nth-child(2) {
    grid-column: 3/span 2;
    grid-row: 1;
  }
  .wp-block-post-collection.layout-desktop--bento .post:nth-child(3) {
    grid-column: 3/span 2;
    grid-row: 2;
  }
  .wp-block-post-collection.layout-desktop--bento .post:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
  }
  .wp-block-post-collection.layout-desktop--bento .post:nth-child(5) {
    grid-column: 2/span 2;
    grid-row: 3;
  }
  .wp-block-post-collection.layout-desktop--bento .post:nth-child(6) {
    grid-column: 4;
    grid-row: 3;
  }
}
@media (max-width: 781px) {
  .wp-block-post-collection.layout-mobile--grid .wp-block-post-collection__inner-container {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
  }
  .wp-block-post-collection.layout-mobile--grid .wp-block-post-collection__inner-container[data-mobile-cols="1"] {
    grid-template-columns: 100%;
  }
  .wp-block-post-collection.layout-mobile--grid .wp-block-post-collection__inner-container[data-mobile-cols="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .wp-block-post-collection.layout-mobile--grid .wp-block-post-collection__inner-container[data-mobile-cols="3"] {
    grid-template-columns: repeat(3, 1fr);
  }
  .wp-block-post-collection.layout-mobile--grid .wp-block-post-collection__inner-container[data-mobile-cols="4"] {
    grid-template-columns: repeat(4, 1fr);
  }
  .wp-block-post-collection.layout-mobile--grid .wp-block-post-collection__inner-container[data-mobile-cols="5"] {
    grid-template-columns: repeat(5, 1fr);
  }
  .wp-block-post-collection.layout-mobile--grid .wp-block-post-collection__inner-container[data-mobile-cols="6"] {
    grid-template-columns: repeat(6, 1fr);
  }
}

/*
 * Reset WordPress's own Post Template layout (List view's flex layout,
 * or Grid view's CSS grid + multi-row wrapping) so Keen Slider has full
 * control of the container. Without this, WordPress's `display: grid`
 * (or `display: flex; flex-wrap: wrap`) fights with Keen Slider's own
 * `display: flex` layout, producing multiple wrapped rows instead of a
 * single horizontal track.
 *
 * High specificity + !important is intentional here: WordPress's layout
 * block support generates these rules dynamically per block instance, so
 * we can't rely on source order alone to win.
 */
ul.wp-block-post-template.is-style-carousel {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap !important;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Keen Slider absolutely-positions/sizes slides itself; neutralize any
 * grid/flex sizing WordPress may have applied to the <li> items. */
ul.wp-block-post-template.is-style-carousel > li.wp-block-post {
  flex: none;
  margin: 0;
}

/* --- Prev/next arrow buttons, injected by carousel.js --- */
.ksql-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ksql-arrow:hover,
.ksql-arrow:focus-visible {
  background: rgba(0, 0, 0, 0.85);
}

.ksql-arrow svg {
  width: 20px;
  height: 20px;
}

.ksql-arrow--prev {
  left: 12px;
}

.ksql-arrow--next {
  right: 12px;
}
