/* All selectors are scoped under .loenews-slider so generic class names
   (.nav-item, .progress-bar, .slider-container, ...) can never collide with
   theme/framework styles such as Bootstrap on the same page. */

.loenews-slider {
    --loenews-text-white: #ffffff;
    --loenews-bg-dark: #0a0a0a;
}

/* Ensure global box-sizing doesn't break things, but Elementor usually handles this. */
.loenews-slider * {
    box-sizing: border-box;
}

.loenews-slider.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 0 20px 0;
}

/* Fullscreen background layer (server-rendered for first paint).
   Fixed to the viewport so the image covers the whole screen, while the
   slider content stays within its normal column. width/height:100% use the
   viewport box, so there is no 100vw horizontal-scrollbar issue. */
.loenews-slider .loenews-bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Behind all page content, but above the body/page background so it stays
       visible in the hero. Page elements no longer end up hidden behind it. */
    overflow: hidden;
    pointer-events: none;
    background-color: #000;
    /* Fallback while images load or when a slide has no background */
    contain: paint;
    transition: opacity 0.3s ease;
}

/* Hidden by JS when the slider is scrolled out of view, so the fixed layer
   does not sit behind the rest of the page. (No JS = stays visible, never blank.) */
.loenews-slider .loenews-bg-layer.is-hidden {
    opacity: 0;
}

/* Slider Content */
.loenews-slider .slider-content {
    position: relative;
    z-index: 10;
    width: 100%;
    /* Max Width is set dynamically via Elementor control */
    margin: auto;
}

/* Static page H1 (SEO): rendered once above the panels and never touched by
   JS while the slider rotates. */
.loenews-slider .loenews-page-h1 {
    color: var(--loenews-text-white);
    margin: 0 0 24px;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

/* Two columns: the stacked text panels on the left, the slider image on the
   right. The image is shared by all slides and rendered once, outside the
   panels, so it is truly static: slide transitions can never move it or show
   two copies. Flex (not grid) so the text simply takes the full width when
   the image column is absent (.no-image) or hidden (display:none through the
   "Hide Image on Mobile" switch or Style > Image > Visibility). */
.loenews-slider .slider-body {
    display: flex;
    align-items: center;
    gap: 50px;
}

/* Every slide is server-rendered in its own panel so all copy stays in the
   DOM (SEO). The panels are stacked in the same grid cell: the tallest slide
   defines the content height, so nothing shifts between slides. Hidden panels
   use visibility (not display:none) so they stay measurable and can animate. */
.loenews-slider .slider-panels {
    display: grid;
    flex: 1 1 0%;
    min-width: 0;
}

.loenews-slider .slide-panel {
    grid-area: 1 / 1;
    display: grid;
    align-items: center;
    min-width: 0;
    visibility: hidden;
    pointer-events: none;
    /* Keep the outgoing panel visible until its text has animated out. */
    transition: visibility 0s linear 0.45s;
}

.loenews-slider .slide-panel.is-active {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s;
}

.loenews-slider .text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.loenews-slider .image-col {
    flex: 1 1 0%;
    min-width: 0;
}

/* Optional link wrapper around the slider image. The anchor is sized exactly
   like the image box (the Elementor width control targets the anchor when the
   link exists, and the inner image always fills it), so only the image itself
   is clickable — alignment is handled by .image-col's justify-content. */
.loenews-slider .slide-image-link {
    display: block;
    width: 100%;
    line-height: 0;
}

/* height:auto guards against theme img rules; the box always follows the
   image's aspect ratio. The opacity/filter pins keep theme link-hover rules
   (a:hover img { opacity/filter ... }) from tinting the image now that it can
   sit inside an <a>. */
.loenews-slider .slide-image,
.loenews-slider .slide-image-link:hover .slide-image,
.loenews-slider .slide-image-link:focus .slide-image {
    width: 100%;
    height: auto;
    opacity: 1;
    filter: none;
}

.loenews-slider .slide-title {
    font-family: 'Oswald', sans-serif;
    font-size: 4rem;
    /* Default if not overridden */
    font-weight: 700;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 30px;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.loenews-slider .btn-details {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--loenews-text-white);
    font-size: 0.9rem;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 20px;
    margin-bottom: 30px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    background: rgba(0, 0, 0, 0.3);
    width: fit-content;
    backface-visibility: hidden;
}

.loenews-slider .btn-details.btn-icon-left {
    flex-direction: row-reverse;
}

.loenews-slider .btn-details .btn-details-label {
    line-height: 1;
}

.loenews-slider .btn-details .btn-details-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.loenews-slider .btn-details .btn-details-icon i {
    font-size: 0.8rem;
    line-height: 1;
}

.loenews-slider .btn-details:hover {
    background: var(--loenews-text-white);
    color: var(--loenews-bg-dark);
}

.loenews-slider .slide-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: #cccccc;
    max-width: 500px;
}

/* Bottom Navigation Wrapper (In Flow) */
.loenews-slider .slider-nav-fixed-wrapper {
    position: relative;
    /* Changed from fixed to flow naturally */
    display: block;
    z-index: 20;
    /* Bottom/Left/Right removed. Margin handled by PHP control */
}

/* Bottom Navigation (Inner Content) */
.loenews-slider .slider-nav {
    position: relative;
    /* Reset from fixed */
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 10px;
    gap: 30px;
}

/* Nav items are real <button> elements for keyboard accessibility;
   reset the native button styling. */
.loenews-slider .nav-item {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    flex: 1;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.loenews-slider .nav-item:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    opacity: 1;
}

.loenews-slider .nav-item.active {
    opacity: 1;
}

.loenews-slider .nav-number {
    font-family: 'Roboto Condensed';
    font-size: 3.5rem;
    font-weight: 300;
    margin-bottom: 20px;
    display: block;
}

.loenews-slider .loenews-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.loenews-slider .loenews-bg-image.active {
    opacity: 1;
}

/* The per-slide <picture>/<img> fills its layer and behaves like the old
   background-size:cover / background-position:center. */
.loenews-slider .loenews-bg-image picture {
    display: block;
    width: 100%;
    height: 100%;
}

.loenews-slider .loenews-bg-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.loenews-slider .progress-track {
    display: block;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    position: relative;
}

.loenews-slider .progress-bar {
    display: block;
    position: absolute;
    top: -1px;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: var(--loenews-text-white);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0s linear;
    will-change: transform;
}

.loenews-slider .progress-bar::after {
    content: '';
    position: absolute;
    right: 0;
    top: -5px;
    width: 1px;
    height: 13px;
    background-color: var(--loenews-text-white);
}

/* Slide transitions are pure CSS driven by the .is-active class — JS never
   rewrites text or links. The panels themselves keep opacity:1; only the text
   children animate: outgoing text transitions out (0.4s), incoming text
   animates in after a matching delay, mirroring the old JS timing. The slider
   image lives outside the panels (see .slider-body) and never animates. */
.loenews-slider .slide-panel .slide-title,
.loenews-slider .slide-panel .slide-desc,
.loenews-slider .slide-panel .btn-details {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.4s ease-in, transform 0.4s ease-in;
    backface-visibility: hidden;
}

.loenews-slider .slide-panel.is-active .slide-title,
.loenews-slider .slide-panel.is-active .slide-desc,
.loenews-slider .slide-panel.is-active .btn-details {
    opacity: 1;
    transform: none;
    transition: none;
    animation: loenews-slide-in 0.8s ease-out 0.4s backwards;
}

/* Keep the hover feedback on the active slide's button, and stagger the
   entrance like the old JS did (title 0s, button +0.05s, desc +0.1s). */
.loenews-slider .slide-panel.is-active .btn-details {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    animation-delay: 0.45s;
}

.loenews-slider .slide-panel.is-active .slide-desc {
    animation-delay: 0.5s;
}

@keyframes loenews-slide-in {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .loenews-slider .slide-title {
        font-size: 3rem;
    }
}

/* 767px matches Elementor's mobile breakpoint, so the widget's responsive
   settings (button visibility, alignment, widths) and this layout switch
   together — tablets like the iPad mini (768px) keep the desktop layout. */
@media (max-width: 767px) {

    /* Mobile layout: the text keeps the left column, the static image
       narrows to 30% on the right. */
    .loenews-slider .slider-body {
        gap: 20px;
    }

    .loenews-slider .image-col {
        flex: 0 0 30%;
    }

    /* "Hide Image on Mobile" switch: drop the image column; the text panels
       then take the full width on their own. Specificity (5 classes) and
       !important beat the Elementor Visibility control, which prints
       `display: flex !important` for .image-col. */
    .loenews-slider .slider-content.loenews-image-hidden-mobile .slider-body .image-col {
        display: none !important;
    }

    /* Long title words may not fit beside the image; wrap them instead of
       overflowing the column. */
    .loenews-slider .slide-title {
        overflow-wrap: break-word;
    }

    .loenews-slider.slider-container {
        padding: 5% 20px;
    }

    .loenews-slider .nav-number {
        font-size: 2rem;
    }
}

/* Respect the user's motion preference: no sliding/fading animations, panels
   swap instantly. Autoplay is also disabled in JS for the same media query. */
@media (prefers-reduced-motion: reduce) {

    .loenews-slider .slide-panel,
    .loenews-slider .slide-panel .slide-title,
    .loenews-slider .slide-panel .slide-desc,
    .loenews-slider .slide-panel .btn-details,
    .loenews-slider .loenews-bg-image,
    .loenews-slider .loenews-bg-layer,
    .loenews-slider .progress-bar,
    .loenews-slider .nav-item {
        transition: none !important;
        animation: none !important;
    }
}

.loenews-slider.slider-container .btn-details .btn-details-icon svg {
    width: 7px;
    fill: currentColor;
}