/* ======================================================================
   page-section.hero

   Fullwidth variant:
   section.page-section.hero.hero-slider.fullwidth
       .items-container[.slider][.nN]
           .item[.css_class]
               .wrap
                   .image-wrap                     (bg via CSS vars)
                       video                       (optional)
                   .pad
                       .container
                           .content-wrap

   In-container variant:
   section.page-section.hero.hero-slider.in-container
       .pad
           .container
               .items-container[.slider][.nN]
                   .item[.css_class]
                       .wrap
                           .image-wrap             (bg via CSS vars)
                               video               (optional)
                           .content-wrap
   ====================================================================== */


/* ----------------------------------------------------------------------
   Base — mobile first
   ---------------------------------------------------------------------- */

section.page-section.hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: var(--padding-content) 0;
    z-index: 10;
}

.page-section.hero.fullwidth {
    padding: 0;
}

.hero .items-container {
    position: relative;
    width: 100%;
}

.hero .item {
    position: relative;
    width: 100%;
}

.hero .wrap {
    position: relative;
    width: 100%;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
}

/* Flex-column chain: .wrap → .pad → .container → .content-wrap
   Each intermediate wrapper stretches so .content-wrap fills the
   full height of .wrap, regardless of variant (fullwidth / in-container). */
.hero .wrap > .pad,
.hero .wrap > .pad > .container {
    flex: 1;
    display: flex;
    flex-direction: column;
}


/* --- Image wrap — fills the wrap, sits behind content --- */

.hero .image-wrap {
    position: absolute;
    inset: 0;
    z-index: 100;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: var(--bg-mobile);			/* populated from inline css */
    background-position: var(--bg-mobile-pos);	/* populated from inline css */
    background-color: transparent;
    overflow: hidden;
}

.hero .image-wrap video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--bg-mobile-pos);	/* populated from inline css */
}

.page-section.fullwidth.hero .image-wrap img,
.page-section.fullwidth.hero .image-wrap video {
    min-width: 1200px;
}


/* --- Content wrap — sits above image, stretches to fill .wrap --- */

.page-section.hero .content-wrap {
    position: relative;
    z-index: 110;
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    width: 100%;
    max-width: unset;
    min-height: 580px;
    max-height: 720px;
    margin: 0 auto;
    padding: 0;
    padding-bottom: var(--padding-content);
}

.page-section.hero .content {
    max-width: var(--content-wrap-max-width);
}


/* --- In-container variant --- */

.page-section.hero.in-container {
    padding-bottom: 0;
}

.page-section.hero.in-container .content-wrap {
    width: 100%;
    min-height: 200px;
    max-height: unset;
    padding: var(--padding-content);
}

.page-section.hero.in-container .image-wrap {
    border-radius: var(--border-radius);
    overflow: hidden;
}

.page-section.hero.in-container .items-container {
    grid-gap: 0;
}


/* --- Text colors --- */

.hero .content *,
.hero .light-text .content * {
    color: var(--palette-salt-white);
    border-color: var(--palette-salt-white);
}

/* hero light-text — white button outline */
.hero .item a.button-primary,
.hero .item a.button-secondary {
    color: var(--palette-salt-white);
    border-color: var(--palette-salt-white);
}

/* hero light-text — filled white on hover */
.hero .item a.button-primary:hover,
.hero .item a.button-secondary:hover {
    color: var(--palette-flint-dark);
    border-color: var(--palette-salt-white);
    background: var(--palette-salt-white);
}

.hero .dark-text .content * {
    color: var(--palette-flint-dark);
}


/* --- Gradient overlay --- */

.hero .item.overlay .image-wrap::after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
    content: "";
    background: rgb(11,59,91, .25);
    background: linear-gradient(195deg, rgb(11,59,91, 0), rgb(11,59,91, .5) 80%);
    mix-blend-mode: darken;
}


/* --- Slick slider overrides --- */

.hero .slick-slider {
    margin-bottom: 0;
	padding-bottom: 0;
}

.hero .slick-autoplay-toggle-button {
    display: none;
}

.hero .slick-prev,
.hero .slick-next {
    position: absolute;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
	visibility: hidden;	/* hide on smallest screens */
}

@media screen and (min-width: 768px) {
	
	.page-section.hero .slick-prev,
	.page-section.hero .slick-next {
		visibility: visible;
	}
	.page-section.hero .slick-prev{
		margin-left: 16px;
	}
	.page-section.hero .slick-next{
		margin-right: 16px;
	}
	
}

.page-section.hero .slick-dots {
    left: auto;
    right: 0;
	padding: 12px var(--padding-content);
}





/* ----------------------------------------------------------------------
   Desktop (1024px)
   ---------------------------------------------------------------------- */

@media screen and (min-width: 1024px) {

    .page-section.hero .content-wrap {
        aspect-ratio: 4/2;
    }

}

@media screen and (min-width: 1280px) {
	
	.page-section.hero .slick-prev:focus .slick-prev-icon,
	.page-section.hero .slick-prev:active .slick-prev-icon{
		margin-left: -32px;
	}
	.page-section.hero .slick-next-icon,
	.page-section.hero .slick-next:focus .slick-next-icon,
	.page-section.hero .slick-next:active .slick-next-icon{
		margin-right: -32px;
		margin-left: auto;
	}
	
}

@media screen and (min-width: 1600px) {
	
	.page-section.hero .slick-prev-icon,
	.page-section.hero .slick-next-icon {
		width: 32px;
		height: 32px;
		border-width: 0 8px 8px 0;
	}
	.page-section.hero .slick-prev-icon,
	.page-section.hero .slick-prev:focus .slick-prev-icon,
	.page-section.hero .slick-prev:active .slick-prev-icon{
		margin-left: -12px;
	}
	.page-section.hero .slick-next-icon,
	.page-section.hero .slick-next:focus .slick-next-icon,
	.page-section.hero .slick-next:active .slick-next-icon{
		margin-right: -12px;
		margin-left: auto;
	}
	
}



/* ----------------------------------------------------------------------
   Desktop (1280px)
   ---------------------------------------------------------------------- */

@media screen and (min-width: 1280px) {

    /* Switch to desktop image/video */
    .hero .image-wrap {
        background-image: var(--bg-desktop);
        background-position: var(--bg-desktop-pos);
    }

    .hero .image-wrap video {
        object-position: var(--bg-desktop-pos);
    }

    /* In-container variation */
    .hero.in-container .wrap {
        overflow: hidden;
    }

    .page-section.hero .content {
        max-width: 940px;
    }

    /* Slick overrides */
	
	/*
    .hero .slick-dots {
        bottom: var(--padding-content);
    }
	*/

    .hero .slick-prev,
    .hero .slick-next {
        z-index: 2;
    }

    .hero .slick-prev {
        left: var(--padding-content);
    }

    .hero .slick-next {
        right: var(--padding-content);
    }

}