@charset "UTF-8";
/* Ultimate Post Kit - Post Slider
 * Swiper based (the source widget used a different slider framework).
 * Section 1: swiper layout | Section 2: scoped utilities | Section 3: widget styles
 */
/* ============ 1. Swiper layout ============ */
.upk-post-slider {
  position: relative;
}

.upk-post-slider .upk-post-slider-main {
  inline-size: 100%;
  /* Matches the source slider default of a 16:9 stage */
  aspect-ratio: var(--upk-ps-ratio, 16/9);
  min-block-size: var(--upk-ps-min-height, auto);
  max-block-size: var(--upk-ps-max-height, none);
  overflow: hidden;
}

.upk-post-slider .upk-post-slider-main .swiper-wrapper {
  block-size: 100%;
}

.upk-post-slider .upk-post-slider-item {
  position: relative;
  overflow: hidden;
  block-size: 100%;
}

/* The slide image always covers its slide */
.upk-post-slider .upk-post-slider-item > img,
.upk-post-slider .upk-post-slider-item .upk-post-slider-image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.upk-post-slider .upk-post-slider-item .upk-position-cover > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

/* ============ 2. Scoped utilities (replaces the framework classes) ============ */
.upk-post-slider .upk-position-cover {
  position: absolute;
  inset: 0;
}

.upk-post-slider .upk-position-z-index {
  z-index: 1;
}

.upk-post-slider .upk-position-center {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: 100%;
  max-inline-size: 1170px;
}

.upk-post-slider .upk-post-slider-content-wrap {
  inline-size: 100%;
  max-inline-size: 1170px;
  box-sizing: border-box;
}

.upk-post-slider .upk-flex {
  display: flex;
}

.upk-post-slider .upk-flex-inline {
  display: inline-flex;
}

.upk-post-slider .upk-flex-middle {
  align-items: center;
}

.upk-post-slider .upk-text-left {
  text-align: start;
}

.upk-post-slider .upk-text-capitalize {
  text-transform: capitalize;
}

.upk-post-slider .upk-width-auto {
  inline-size: auto;
}

.upk-post-slider .upk-overflow-hidden {
  overflow: hidden;
}

.upk-post-slider .upk-border-circle {
  border-radius: 50%;
}

.upk-post-slider .upk-display-inline-block {
  display: inline-block;
}

.upk-post-slider .upk-margin-remove-bottom {
  margin-block-end: 0 !important;
}

.upk-post-slider .upk-margin-small-left {
  margin-inline-start: 10px;
}

.upk-post-slider .upk-margin-small-right {
  margin-inline-end: 10px;
}

.upk-post-slider .upk-background-primary {
  background: #1e87f0;
}

.upk-post-slider .upk-overlay-default {
  background: rgba(0, 0, 0, 0.35);
}

.upk-post-slider .upk-transform-origin-center {
  transform-origin: 50% 50%;
}

@media (max-width: 639px) {
  .upk-post-slider .upk-visible\@s {
    display: none !important;
  }
}
@media (max-width: 959px) {
  .upk-post-slider .upk-visible\@m {
    display: none !important;
  }
}
/* Blend modes */
.upk-post-slider .upk-blend-multiply {
  mix-blend-mode: multiply;
}

.upk-post-slider .upk-blend-screen {
  mix-blend-mode: screen;
}

.upk-post-slider .upk-blend-overlay {
  mix-blend-mode: overlay;
}

.upk-post-slider .upk-blend-darken {
  mix-blend-mode: darken;
}

.upk-post-slider .upk-blend-lighten {
  mix-blend-mode: lighten;
}

.upk-post-slider .upk-blend-color-dodge {
  mix-blend-mode: color-dodge;
}

.upk-post-slider .upk-blend-color-burn {
  mix-blend-mode: color-burn;
}

.upk-post-slider .upk-blend-hard-light {
  mix-blend-mode: hard-light;
}

.upk-post-slider .upk-blend-soft-light {
  mix-blend-mode: soft-light;
}

.upk-post-slider .upk-blend-difference {
  mix-blend-mode: difference;
}

.upk-post-slider .upk-blend-exclusion {
  mix-blend-mode: exclusion;
}

.upk-post-slider .upk-blend-hue {
  mix-blend-mode: hue;
}

.upk-post-slider .upk-blend-saturation {
  mix-blend-mode: saturation;
}

.upk-post-slider .upk-blend-color {
  mix-blend-mode: color;
}

.upk-post-slider .upk-blend-luminosity {
  mix-blend-mode: luminosity;
}

/* Ken Burns */
@keyframes upk-post-slider-kenburns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
.upk-post-slider .upk-animation-kenburns {
  animation-name: upk-post-slider-kenburns;
  animation-duration: 15s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

.upk-post-slider .upk-animation-reverse {
  animation-direction: reverse;
  animation-timing-function: ease-in;
}

/* ============ 3. Thumbnail pagination (linked thumbs swiper) ============ */
/* Class names differ from the source markup (swiper slides instead of list
   items), so the source's thumbnav rules are re-pointed here. */
.upk-post-slider .upk-post-slider-thumbs {
  inline-size: 100%;
}

/* The divider line is drawn on the container (the swiper clips its own overflow) */
.upk-post-slider .upk-post-slider-pagination::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 20px;
  block-size: 3px;
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

.upk-post-slider .upk-post-slider-pagination-slide {
  inline-size: auto;
  max-inline-size: 25%;
  cursor: pointer;
}

.upk-post-slider .upk-post-slider-pagination-slide .upk-post-slider-pagination-item {
  border-block-start: 3px solid transparent;
  padding-block-start: 15px;
  transition: all 300ms cubic-bezier(0.13, 0.27, 0.39, 1);
  opacity: 0.7;
  box-sizing: border-box;
}

.upk-post-slider .upk-post-slider-pagination-slide:hover .upk-post-slider-pagination-item {
  opacity: 1;
}

.upk-post-slider .upk-post-slider-pagination-slide.swiper-slide-thumb-active .upk-post-slider-pagination-item {
  border-block-start-color: #ffffff;
  opacity: 1;
}

.upk-post-slider .upk-post-slider-pagination-item a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.upk-post-slider .upk-post-slider-pagination .upk-post-slider-thumb-wrap {
  display: inline-flex;
  flex-shrink: 0;
}

.upk-post-slider .upk-post-slider-pagination .upk-post-slider-thumb-wrap img {
  inline-size: 64px;
  block-size: 64px;
  object-fit: cover;
}

.upk-post-slider .upk-post-slider-pagination-slide .thumb-title-default-skin,
.upk-post-slider .upk-post-slider-pagination-slide span {
  font-weight: 600;
  line-height: 1;
  font-size: 14px;
  color: #fff;
  margin-block: 0;
}

.upk-post-slider .upk-post-slider-pagination-slide .upk-post-slider-date {
  font-weight: 400;
  opacity: 0.8;
  text-transform: uppercase;
  font-size: 11px;
}

/* Strip placement follows the source: in-flow on small screens, overlaid above */
.upk-post-slider .upk-post-slider-pagination {
  position: relative;
  max-inline-size: 1170px;
  inline-size: 100%;
  inset-block-end: 3px;
  margin-block-start: 0;
  margin-block-end: 15px;
  padding-inline: 20px;
  box-sizing: border-box;
  z-index: 2;
}

@media (min-width: 768px) {
  .upk-post-slider .upk-post-slider-pagination {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    margin-block-end: 30px;
    padding-inline: 50px;
  }
  .upk-post-slider .upk-post-slider-pagination::before {
    inset-inline: 50px;
  }
  .upk-post-slider .upk-post-slider-pagination-slide .upk-post-slider-pagination-item {
    padding-block-start: 30px;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .upk-post-slider .upk-post-slider-pagination-slide .upk-post-slider-pagination-item {
    padding-block-start: 20px;
  }
}
/* ============ 4. Widget styles (ported) ============ */
.upk-post-slider-thumbnail {
  overflow: hidden;
}

.upk-post-slider-thumbnail img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.upk-post-slider .upk-post-slider-item .upk-grid {
  block-size: 100%;
}

.upk-post-slider .upk-post-slider-item > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.upk-post-slider-content-wrap {
  max-inline-size: 1170px;
  inline-size: 100%;
  padding-inline: 30px;
}

.upk-post-slider-content-wrap .upk-post-slider-content {
  max-inline-size: 950px;
  display: inline-block;
}

.upk-post-slider-tag-wrap span {
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 8px;
}

.upk-post-slider-tag-wrap span a {
  color: #fff;
}

.upk-post-slider-tag-wrap span + span {
  margin-inline-start: 0;
}

.upk-post-slider-title {
  margin-block-start: 10px;
  line-height: 1;
  font-size: 1.4rem;
  color: #fff;
  font-weight: 600;
  display: inline-block;
}

.upk-post-slider-text {
  margin-block-start: 15px;
  font-size: 0.65rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}

.upk-post-slider-text p {
  margin: 0;
}

.upk-post-slider-meta {
  margin-block-start: 5px;
}

.upk-post-slider-meta span {
  text-transform: capitalize;
  color: rgba(246, 251, 255, 0.55);
}

.upk-post-slider-meta .upk-author {
  margin-inline-end: 3px;
}

.upk-post-slider-button-wrap {
  margin-block-start: 15px;
}

.upk-post-slider-button svg {
  inline-size: 1em;
  block-size: 1em;
}

.upk-author img {
  vertical-align: top;
}

/* Pagination */
.upk-post-slider-pagination {
  max-inline-size: 1170px;
  inline-size: 100%;
  inset-block-end: 3px;
  margin-block-start: 0;
  position: relative !important;
  margin-block-end: 15px;
  padding-inline: 20px;
}

.upk-post-slider-pagination .upk-thumbnav {
  border-block-start: 3px solid rgba(255, 255, 255, 0.5);
  margin-inline-start: 0;
}

.upk-post-slider-pagination .upk-thumbnav li:first-child {
  padding-inline-start: 0;
}

.upk-post-slider-pagination .upk-post-slider-thumb-wrap {
  display: inline-flex;
  flex-shrink: 0;
}

.upk-post-slider-pagination .upk-post-slider-thumb-wrap img {
  inline-size: 64px;
  block-size: 64px;
  object-fit: cover;
}

.upk-post-slider-pagination li .upk-post-slider-pagination-item {
  border-block-start: 3px solid transparent;
  padding-block-start: 15px;
  transition: all 300ms cubic-bezier(0.13, 0.27, 0.39, 1);
  opacity: 0.7;
}

.upk-post-slider-pagination li.upk-active .upk-post-slider-pagination-item {
  border-block-start-color: #ffffff;
  opacity: 1;
}

.upk-post-slider-pagination li .thumb-title-default-skin,
.upk-post-slider-pagination li span {
  font-weight: 600;
  line-height: 1;
  font-size: 14px;
  color: #fff;
}

.upk-post-slider-pagination li .upk-post-slider-date {
  font-weight: 400;
  opacity: 0.8;
  text-transform: uppercase;
  font-size: 11px;
}

/* ===== Skins ===== */
.skin-vast .upk-post-slider-text {
  color: rgba(0, 0, 0, 0.7);
}

.skin-vast .upk-post-slider-text p {
  margin: 0;
}

.skin-vast .upk-post-slider-text p + p {
  margin-block-start: 15px;
}

.skin-vast .upk-post-slider-title {
  color: #444;
}

.skin-vast .upk-post-slider-meta span {
  color: rgba(136, 136, 136, 0.55);
}

.skin-vast .upk-post-slider-navigation a {
  color: #fff;
  transition: all 0.3s ease;
}

.skin-vast .upk-post-slider-navigation a svg {
  inline-size: 1em;
}

.skin-vega .upk-post-slider-title {
  font-size: 1.2rem;
  line-height: 1.2;
}

.skin-vega .upk-post-slider-title:hover {
  text-decoration: underline;
}

.skin-vega .upk-post-slider-text {
  color: #999;
}

.skin-vega .upk-post-slider-content {
  padding-block-start: 15px;
  padding-inline: 20px;
  padding-block-end: 70px;
}

.skin-vega .upk-post-slider-navigation-inner {
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.skin-vega .upk-post-slider-navigation-inner a {
  padding: 10px 15px;
  font-size: 12px;
  font-weight: 700;
  color: #999;
  background-color: #222;
  text-align: center;
  transition: background-color 300ms ease-out;
  position: relative;
}

.skin-vega .upk-post-slider-navigation-inner a svg {
  block-size: 10px;
  inline-size: auto;
}

.skin-vega .upk-post-slider-navigation-inner a svg polyline {
  stroke: #999;
}

.skin-vega .upk-post-slider-navigation-inner a span {
  margin-inline: 5px;
}

.skin-vega .upk-post-slider-navigation-inner a:hover {
  background-color: #fff;
  color: #222;
}

.skin-vega .upk-post-slider-navigation-inner a:hover svg polyline {
  stroke: #222;
}

.skin-vega .upk-post-slider-navigation-inner a:first-child::after {
  content: "";
  inline-size: 1px;
  block-size: 100%;
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  background-color: rgba(255, 255, 255, 0.1);
}

.skin-vega .upk-post-slider-thumbnail {
  transform: translateZ(0);
}

.skin-vega .upk-post-slider-thumbnail img {
  block-size: 100%;
  object-fit: cover;
}

.skin-vega .upk-post-slider-button {
  font-size: 12px;
  font-weight: 700;
  color: #aaa;
  text-transform: uppercase;
}

.skin-vega .upk-post-slider-button:hover {
  color: #fff;
}

.skin-vega .upk-post-slider-thumbnail ~ div {
  background-color: #222;
  overflow: hidden;
}

/* ===== Responsive ===== */
@media (min-width: 768px) {
  .upk-post-slider-content-wrap {
    padding-inline: 50px;
  }
  .upk-post-slider-tag-wrap span {
    padding: 2px 6px;
    font-size: 11px;
  }
  .upk-post-slider-tag-wrap span + span {
    margin-inline-start: 5px;
  }
  .upk-post-slider-title {
    font-size: 2.2rem;
  }
  .upk-post-slider-text {
    font-size: 1rem;
    line-height: 1.6;
  }
  .upk-post-slider-text p {
    inline-size: 80%;
    display: inline-block;
  }
  .upk-post-slider-meta {
    margin-block-start: 20px;
  }
  .upk-post-slider-button-wrap {
    margin-block-start: 20px;
  }
  .upk-post-slider-pagination {
    inset-block-end: 0;
    position: absolute !important;
    margin-block-end: 30px;
    padding-inline: 50px;
  }
  .upk-post-slider .upk-post-slider-pagination::before {
    inset-inline: 50px;
  }
  .upk-post-slider-pagination li .upk-post-slider-pagination-item {
    padding-block-start: 30px;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .upk-post-slider-content-wrap {
    padding-inline: 30px;
    padding-block-end: 70px;
  }
  .upk-post-slider-pagination li .upk-post-slider-pagination-item {
    padding-block-start: 20px;
  }
}
@media (min-width: 1024px) {
  .upk-post-slider .upk-post-slider-title {
    font-size: 2.625rem;
  }
  .skin-vast .upk-post-slider-title {
    font-size: 2rem;
    line-height: 1;
  }
}
/* ============ 5. Responsive refinements ============ */
/* Long headlines never spill out of the stage */
.upk-post-slider .upk-post-slider-title,
.upk-post-slider .upk-post-slider-text {
  overflow-wrap: break-word;
}

/* Thumb strip: swipeable, and wide enough to stay readable at each size.
   (The source wraps these onto several rows; a single scrollable row keeps
   the slider compact on small screens.) */
.upk-post-slider .upk-post-slider-pagination-slide {
  max-inline-size: 25%;
}

@media (max-width: 1023px) {
  .upk-post-slider .upk-post-slider-pagination-slide {
    max-inline-size: 40%;
  }
}
@media (max-width: 767px) {
  .upk-post-slider .upk-post-slider-pagination-slide {
    max-inline-size: 70%;
  }
  /* Keep enough stage height for the overlaid headline on phones */
  .upk-post-slider .upk-post-slider-main {
    min-block-size: var(--upk-ps-min-height, 320px);
  }
  .upk-post-slider .upk-post-slider-pagination {
    padding-inline: 20px;
  }
}
@media (max-width: 479px) {
  .upk-post-slider .upk-post-slider-main {
    min-block-size: var(--upk-ps-min-height, 280px);
  }
  .upk-post-slider .upk-post-slider-pagination::before {
    inset-inline: 20px;
  }
  .upk-post-slider .upk-post-slider-pagination .upk-post-slider-thumb-wrap img {
    inline-size: 52px;
    block-size: 52px;
  }
  .upk-post-slider .upk-post-slider-pagination-slide .upk-post-slider-pagination-item {
    padding-block-start: 12px;
  }
}
/* ============ 6. Skin utilities & navigation ============ */
/* Layout helpers used by the Vast / Vega skins */
.upk-post-slider .upk-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.upk-post-slider .upk-grid-collapse {
  gap: 0;
}

.upk-post-slider .upk-width-1-2 {
  inline-size: 50%;
  box-sizing: border-box;
}

@media (min-width: 960px) {
  .upk-post-slider .upk-width-1-3\@m {
    inline-size: 33.3333%;
    box-sizing: border-box;
  }
  .upk-post-slider .upk-width-2-3\@m {
    inline-size: 66.6667%;
    box-sizing: border-box;
  }
}
.upk-post-slider .upk-margin-remove {
  margin: 0 !important;
}

.upk-post-slider .upk-padding-large {
  padding: 40px;
}

@media (min-width: 1200px) {
  .upk-post-slider .upk-padding-large {
    padding: 70px;
  }
}
.upk-post-slider .upk-background-muted {
  background: #f8f8f8;
}

/* Navigation — the source used anchors, this markup uses buttons/divs */
.upk-post-slider .upk-post-slider-navigation .upk-navigation-prev,
.upk-post-slider .upk-post-slider-navigation .upk-navigation-next {
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  z-index: 2;
}

.upk-post-slider .upk-post-slider-navigation .swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Vast: arrows sit on the image, so CSS can center them without JS */
.upk-post-slider.skin-vast .upk-post-slider-navigation .upk-navigation-prev,
.upk-post-slider.skin-vast .upk-post-slider-navigation .upk-navigation-next {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: #fff;
  transition: all 0.3s ease;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  z-index: 2;
}

.upk-post-slider.skin-vast .upk-post-slider-navigation .upk-navigation-prev {
  inset-inline-start: 10px;
}

.upk-post-slider.skin-vast .upk-post-slider-navigation .upk-navigation-next {
  inset-inline-end: 10px;
}

.upk-post-slider.skin-vast .upk-post-slider-navigation svg {
  inline-size: 1em;
  block-size: auto;
}

/* Vega: labelled prev/next pair pinned to the content column */
.upk-post-slider.skin-vega .upk-post-slider-navigation {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  z-index: 2;
}

.upk-post-slider.skin-vega .upk-post-slider-navigation-inner {
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.upk-post-slider.skin-vega .upk-post-slider-navigation-inner .upk-navigation-prev,
.upk-post-slider.skin-vega .upk-post-slider-navigation-inner .upk-navigation-next {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  font-size: 12px;
  font-weight: 700;
  color: #999;
  background-color: #222;
  text-align: center;
  transition: background-color 300ms ease-out;
  position: relative;
  box-sizing: border-box;
}

.upk-post-slider.skin-vega .upk-post-slider-navigation-inner svg {
  block-size: 10px;
  inline-size: auto;
}

.upk-post-slider.skin-vega .upk-post-slider-navigation-inner svg polyline {
  stroke: #999;
}

.upk-post-slider.skin-vega .upk-post-slider-navigation-inner .upk-slider-nav-text {
  margin-inline: 5px;
}

.upk-post-slider.skin-vega .upk-post-slider-navigation-inner .upk-navigation-prev:hover,
.upk-post-slider.skin-vega .upk-post-slider-navigation-inner .upk-navigation-next:hover {
  background-color: #fff;
  color: #222;
}

.upk-post-slider.skin-vega .upk-post-slider-navigation-inner .upk-navigation-prev:hover svg polyline,
.upk-post-slider.skin-vega .upk-post-slider-navigation-inner .upk-navigation-next:hover svg polyline {
  stroke: #222;
}

.upk-post-slider.skin-vega .upk-post-slider-navigation-inner .upk-navigation-prev::after {
  content: "";
  inline-size: 1px;
  block-size: 100%;
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  background: rgba(255, 255, 255, 0.1);
}

/* Vast / Vega stages size to their own content instead of the default ratio */
.upk-post-slider.skin-vast .upk-post-slider-main {
  aspect-ratio: auto;
  min-block-size: 0;
}

.upk-post-slider.skin-vast .upk-post-slider-item {
  block-size: auto;
}

/* Vast image stage: height is optional via Slider Image Height control */
.upk-post-slider.skin-vast .upk-post-slider-thumbnail {
  position: relative;
  overflow: hidden;
}

/* Vega keeps the ratio stage, so its columns fill the slide height */
.upk-post-slider.skin-vega .upk-post-slider-item,
.upk-post-slider.skin-vega .upk-post-slider-item > .upk-grid,
.upk-post-slider.skin-vega .upk-post-slider-thumbnail,
.upk-post-slider.skin-vega .upk-post-slider-thumbnail > div {
  block-size: 100%;
}

.upk-post-slider.skin-vast .upk-post-slider-item > img,
.upk-post-slider.skin-vega .upk-post-slider-item > img {
  position: static;
}

.upk-post-slider.skin-vast .upk-post-slider-thumbnail img,
.upk-post-slider.skin-vega .upk-post-slider-thumbnail img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  vertical-align: top;
}