/* Slider Wrapper Configurations */
.vet-slider-wrapper {
    position: relative;
    width: 100%;
    margin-top: 10px; /* Space at the very top */
    padding-top: 115px; /* Leaves clear overhead space for the raised hexagons */
}

/* Hexagonal Navigation Bar - Hover spacing preserved, raised 5px above main window */
.vet-hex-nav {
    position: absolute;
    top: 0; 
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
    height: 110px;         
    align-items: center;   
}

/* Main Display Box - Cutout removed, restored to a clean flat square window */
.vet-slider-container {
    position: relative;
    width: 100%;
    height: 400px; /* Locked height parameter */
    margin-top: 5px; /* Pushes window 5px DOWN from the navigation container boundary */
    overflow: hidden;
    background: #ffffff; /* Clean white base for transparent PNGs */
    z-index: 1;
    
    /* Straight 1px medium gray border layout */
    border: 1px solid #70757a; 
    box-sizing: border-box;
}

/* Hexagon Outer Frame (1px OUTSIDE Black Edge) */
.vet-hex-btn {
    position: relative;
    width: 100px; 
    height: 100px; 
    background: #000000; 
    border: none;
    padding: 0;
    cursor: pointer;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: transform 0.3s ease, filter 0.3s ease;
    
    /* Default subtle drop shadow */
    filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.15));
}

/* Middle Layer (6px Yellow Stripe and 1px INSIDE Black Edge) */
.vet-hex-btn::before {
    content: '';
    position: absolute;
    top: 1px;  
    left: 1px; 
    width: 98px;  
    height: 98px; 
    background: #e6b800; /* Stays deep yellow even when active */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 1;
    transition: background 0.3s ease;
}

/* FIX: Removed the yellow inner stripe change so it stays yellow */
.vet-hex-btn.active::before {
    background: #e6b800; 
}

/* FIX: Injects a vibrant purple outer glow tracking the hexagon path dynamically */
.vet-hex-btn.active {
    filter: drop-shadow(0px 0px 8px rgba(122, 41, 122, 0.85));
}

/* Inner Hexagon Container */
.vet-hex-inner {
    position: absolute;
    top: 8px;  
    left: 8px; 
    width: 84px;  
    height: 84px; 
    background: #ffffff; 
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2; 
}

.vet-hex-inner img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.vet-hex-btn:hover,
.vet-hex-btn.active {
    transform: scale(1.05);
}

/* Full Bleed Slides converted to Flexbox Layout */
.vet-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; 
    opacity: 0;
    visibility: hidden;
    will-change: opacity;
    transition: opacity 1200ms cubic-bezier(0.4, 0, 0.2, 1), visibility 1200ms;
    z-index: 1;

    /* FIX: Enable flex layout to align columns side-by-side */
    display: flex;
    align-items: stretch;
}

/* 25% Left Column Settings */
.vet-slide-image-col {
    flex: 0 0 30%;
    width: 30%;
    max-width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Forces the equipment image to safely size inside the 30% boundaries */
.vet-slide-image-col img {
    max-width: 100%;
    max-height: 90%;
    object-fit: contain;
}

/* 70% Right Column Settings */
.vet-slide-text-col {
    flex: 0 0 70%;
    width: 70%;
    max-width: 70%;
    display: flex;
    align-items: center; /* Vertically centers text content within the 400px window */
    padding: 40px;
    box-sizing: border-box;
}

/* Wrapper wrapper for HTML tags formatting */
.vet-slide-text-content {
    width: 100%;
}

/* Default typographical layout handling for your theme inside the text box */
.vet-slide-text-content h2 {
    margin-top: 0;
    margin-bottom: 15px;
}

.vet-slide-text-content p {
    margin-bottom: 0;
    line-height: 1.6;
}

/* Active visible slide layer layout overrides */
.vet-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    display: flex; /* Ensures flex engine is sustained during active transitions */
}

.vet-slide.fading-out {
    opacity: 0;
    visibility: visible;
    z-index: 3;
    display: flex;
}

/* ==========================================================================
   Mobile Responsive Adjustments (Screens 768px and wider/smaller)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* 1. Allow the wrapper to expand naturally */
    .vet-slider-wrapper {
        padding-top: 90px; /* Reduced top gap for smaller hexagons */
    }

    /* 2. Make the navigation bar wrap or scroll smoothly instead of breaking */
    .vet-hex-nav {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        gap: 6px; /* Tighten up spacing */
        height: 85px;
        padding: 0 10px;
        box-sizing: border-box;
    }

    /* 3. Scale down the Hexagonal Buttons so all 5 fit across a phone screen */
    .vet-hex-btn {
        width: 65px; 
        height: 65px;
    }

    /* Middle border layer sizing updates for 65px button footprint */
    .vet-hex-btn::before,
    .vet-hex-btn.active::before {
        width: calc(100% - 2px);
        height: calc(100% - 2px);
    }

    /* Inner thumbnail container sizing updates */
    .vet-hex-inner {
        top: 5px;
        left: 5px;
        width: calc(100% - 10px);
        height: calc(100% - 10px);
    }

    /* 4. Release locked parameters on main display window */
    .vet-slider-container {
        height: auto; /* Let the box grow tall enough to hold all text comfortably */
        min-height: 450px; 
    }

    /* 5. Transform 25/75 Side-by-Side Flex Layout into a clean Stacked Layout */
    .vet-slide,
    .vet-slide.active,
    .vet-slide.fading-out {
        flex-direction: column; /* Image on top, text down below */
        align-items: center;
    }

    /* Stacked Image Section: 100% width footprint */
    .vet-slide-image-col {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        height: 180px; /* Fixed height envelope for the equipment graphics */
        padding: 15px 15px 5px 15px;
    }

    .vet-slide-image-col img {
        max-height: 100%;
    }

    /* Stacked Text Section: 100% width footprint */
    .vet-slide-text-col {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        padding: 15px 20px 25px 20px; /* Comfortable reading buffers */
        text-align: center; /* Centers headings and copy text for an editorial look */
    }
}