/**
 * Home page slider (partials/home-slider.php).
 *
 * Reproduces the former Revolution Slider layout: layers sit on a 1920×820 grid that scales down
 * with the slider width (never up) and stays centred on wider screens. --u is one grid pixel.
 * The responsive overrides in browser.css (.slider-title, .slider-btn, ...) still apply on top.
 */
#home-slider {
   container-type: inline-size;
}

.hs {
   --u: min(1px, 100cqw / 1920);
   --ox: calc((100cqw - 1920 * var(--u)) / 2);
   --ease: cubic-bezier(0.645, 0.045, 0.355, 1);
   position: relative;
   overflow: hidden;
   height: round(calc(820 * var(--u)), 1px);
}

/* Slides */
.hs-slide {
   position: absolute;
   inset: 0;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s, visibility 0s 0.3s;
}

.hs-slide.is-active {
   z-index: 1;
   opacity: 1;
   visibility: visible;
   transition: opacity 0.3s;
}

.hs-bg {
   position: absolute;
   inset: 0;
   width: 100%;
   max-width: none;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

/* Layers */
.hs-layer {
   position: absolute;
   left: calc(var(--ox) + round(down, var(--x, 0) * var(--u), 1px));
   top: round(down, calc(var(--y, 0) * var(--u)), 1px);
   margin: 0;
}

.hs-box {
   width: calc(var(--w) * var(--u));
   height: calc(var(--h) * var(--u));
}

.hs-box .hs-img {
   display: block;
   width: 100%;
   max-width: none;
   height: 100%;
}

.hs-center {
   left: round(down, calc(50% - var(--w) * var(--u) / 2), 1px);
   top: round(down, calc(((820 - var(--h)) / 2 + var(--voff)) * var(--u)), 1px);
}

.hs-bottom {
   top: auto;
   bottom: 0;
   left: 0;
   width: 100%;
   height: round(calc(var(--h) * var(--u)), 1px);
}

.hs-vcenter {
   top: round(down, calc((410 + var(--voff)) * var(--u)), 1px);
   translate: 0 -50%;
}

.hs-text {
   padding: 0;
   background: transparent;
   color: #fff;
   font-size: round(calc(var(--fs) * var(--u)), 1px);
   font-weight: 400;
   line-height: round(calc(var(--lh) * var(--u)), 1px);
   white-space: nowrap;
}

.hs .slider-title {
   font-family: 'Bebas Neue', sans-serif;
}

.hs .slider-subtitle {
   font-family: 'Brandon Grotesque', sans-serif;
}

.hs-shadow {
   text-shadow: 2px 2px 5px #333;
}

.hs .slider-overlay {
   background-color: rgba(0, 0, 0, 0.6);
}

.hs .slider-btn {
   display: block;
   padding: round(calc(13 * var(--u)), 1px) round(calc(22 * var(--u)), 1px);
   border-radius: 30px;
   background-color: rgb(3, 106, 47);
   color: #fff;
   font-family: 'Bebas Neue', sans-serif;
   font-size: round(calc(30 * var(--u)), 1px);
   font-weight: 400;
   line-height: round(calc(17 * var(--u)), 1px);
   text-decoration: none;
   text-transform: uppercase;
   white-space: nowrap;
}

.hs .slider-btn:hover,
.hs .slider-btn:focus {
   background-color: rgb(0, 150, 64);
   color: #fff;
}

/* Revolution Slider level visibility: tablet 481–778px, mobile ≤480px */
@media (min-width: 481px) and (max-width: 778px) {
   .hs .hs-v-t0 {
      display: none;
   }
}

@media (max-width: 480px) {
   .hs .hs-v-m0 {
      display: none;
   }
}

/* Revolution Slider stopped centring the button once the browser.css overrides kick in. */
@media (max-width: 1024px) {
   .hs-vcenter {
      translate: none;
   }
}

/* Arrows */
.hs-arrow {
   position: absolute;
   z-index: 2;
   top: 50%;
   width: 50px;
   height: 50px;
   margin: -25px 0 0;
   padding: 0;
   border: 0;
   border-radius: 0;
   background: transparent;
   color: #fff;
   line-height: 0;
   cursor: pointer;
   -webkit-appearance: none;
   appearance: none;
}

.hs-prev {
   left: 20px;
}

.hs-next {
   right: 20px;
}

.hs-arrow svg {
   width: 50px;
   height: 50px;
   fill: none;
   stroke: currentColor;
   stroke-width: 2.2;
   stroke-linecap: round;
   stroke-linejoin: round;
   transition: opacity 0.3s;
}

.hs-arrow:hover svg,
.hs-arrow:focus svg {
   opacity: 0.75;
}

/* Layer animations */
.is-active .hs-up {
   animation: hs-up 0.6s var(--d) var(--ease) both;
}

.is-active .hs-fade {
   animation: hs-fade 0.3s var(--d) var(--ease) both;
}

.is-active .hs-right {
   animation: hs-right 0.6s var(--d) var(--ease) both;
}

.is-active.is-leaving .hs-layer {
   animation: hs-out 0.3s var(--ease) forwards;
}

@keyframes hs-up {
   from {
      opacity: 0;
      transform: translateY(calc(50 * var(--u)));
   }
}

@keyframes hs-fade {
   from {
      opacity: 0;
   }
}

@keyframes hs-right {
   from {
      transform: translateX(100cqw);
   }
}

@keyframes hs-out {
   to {
      opacity: 0;
   }
}

@media (prefers-reduced-motion: reduce) {
   .hs-slide,
   .hs .hs-layer {
      animation: none !important;
      transition: none !important;
   }
}