/* 1. Main Wrapper & Container */
.slider-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 3rem;
    overflow: hidden;
    /* margin-top: 1rem; */
}

.slider-container {
    position: relative;
    width: 100%;
    background-color: #000;
    aspect-ratio: 16 / 9;   /* remove inline height, use ratio instead */
    height: auto !important; /* override any inline style Hugo injects */
}

.slider-container2 {
    position: relative;
    width: 100%;
    /* aspect-ratio: 16 / 9; */
    /* ← change to whatever ratio your images are */
    background-color: #000;
    /* remove the fixed height — let aspect-ratio drive it */
}

/* 2. Individual Slides */
.slider-slide {
    position: absolute;
    inset: 0;
    /* replaces top/left/width/height */
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.slider-slide:hover .tile {
    transform: translateX(-100vw);
    opacity: 0;
}

.slider-slide.is-active {
    opacity: 1;
    z-index: 2;
}

.slider-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* fills the box, crops edges — no letterbox */
    display: block;
}

.slider-slide3 img {
    /* width: 100%; */
    /* height: 0; */
    /* object-fit: cover; */
    /* object-fit: contain; */
    /* object-fit:fill */
    /* Ensures images fill the space without stretching */
}

/* 3. Caption Overlay */
.caption {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 3;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    background-color: #000000;
    width: 100%;
    border-radius: 1px;
    padding-left: 2rem;
}

.caption h3 {
    margin: 0;
    font-size: 2rem;
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

    /* Remove background and box styling */
    background: none;
    border: none;
    padding: 0;
    outline: none;
    /* Style the Arrow Symbol */
    color: rgb(69, 69, 69);
    /* White with slight transparency */
    font-size: 1rem;
    /* Make them large and clear */
    cursor: pointer;
    transition: color 0.3s, transform 0.2s;

    /* Prevent text selection when clicking fast */
    user-select: none;
}

.arrow:hover {
    color: rgba(255, 255, 255, 1);
    /* Pure white on hover */
    transform: translateY(-50%) scale(1.1);
    /* Slight pop effect */
}

/* Precise Positioning */
.prev {
    left: 20px;
}

.next {
    right: 20px;
}

/* 5. Navigation Dots */
.slider-dots {
    position: absolute;
    bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 10;
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, transform 0.2s;
}

.slider-dot.is-active {
    background: #fff;
    transform: scale(1.2);
}

.feature-title {
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    margin: 0;
    background-color: #2694d9;
}



.tile-container {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.tile {
    background-image: var(--bg-img);
    background-size: 1000% 1000%;
    background-position: calc(var(--x) * (100% / 9)) calc(var(--y) * (100% / 9));

    /* Default state: Shattered/Moved Left */
    transform: translateX(-120%);
    opacity: 0;

    /* Smooth transition back to place */
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.7s ease;
    /* Staggered delay based on X-axis (left to right) */
    transition-delay: calc(var(--x) * 0.04s + var(--y) * 0.01s);
}

/* Trigger the "Move Left" effect */
/* You can trigger this on hover, or by adding a .shatter class via JS */
.tile-container:hover .tile {
    transform: translateX(-150%);
    opacity: 0;
}

/* When the parent slide gets 'is-active' from your JS */
.slider-slide.is-active .tile {
    transform: translateX(0);
    opacity: 1;
}

/* Optional: When a slide is leaving, shatter it faster */
.slider-slide:not(.is-active) .tile {
    transition-delay: 0s;
    /* Move all at once or different pattern when exiting */
    transform: translateX(120%);
    /* Move out to the right */
    opacity: 0;
}

.slider-media-wrap {
    position: absolute;
    inset: 0;
    display: flex;
}

.slider-iframe,
.slider-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
}