/**
 * Vex Elementor Widgets - Custom Styles
 *
 * This file contains widget-specific overrides and enhancements.
 * The main Vex theme styles are inherited automatically.
 */

/* Widget-specific adjustments if needed */
.vex-elementor-widget {
    position: relative;
}

/* Ensure animations work properly in Elementor editor */
.elementor-editor-active .is-waypoint {
    opacity: 1;
    transform: none;
}

/* Albums Widget - Break out of Elementor container for fullscreen horizontal layout */
.elementor-widget-vex-albums .elementor-widget-container {
    overflow: visible !important;
}

/* Remove Elementor section padding when albums widget is present */
.elementor-widget-vex-albums {
    margin: 0 !important;
    padding: 0 !important;
}

.elementor-widget-vex-albums .elementor-widget-container > div {
    margin: 0 !important;
    padding: 0 !important;
}

/* Albums Widget - Horizontal Scroll Layout */
.vex-albums-widget .content--horizontal {
    position: relative !important;
    height: 100vh !important;
    min-height: 600px !important;
    width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

.vex-albums-widget .content--horizontal .fs {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.vex-albums-widget #fs-scroll.fs-scroll--h {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.vex-albums-widget #fs-scroll__content {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    white-space: nowrap !important;
    text-align: left !important;
    min-width: 100% !important;
}

.vex-albums-widget .albums-grid.grid-albums-horizontal {
    display: inline-block !important;
    white-space: nowrap !important;
}

/* Ensure last album is fully visible */
.vex-albums-widget #fs-scroll__content::after {
    content: '' !important;
    display: inline-block !important;
    width: 1px !important;
    height: 1px !important;
}

/* Mobile adjustments */
@media only screen and (max-width: 768px) {
    .vex-albums-widget #fs-scroll__content {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

@media only screen and (max-width: 479px) {
    .vex-albums-widget #fs-scroll__content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .vex-albums-widget .content--horizontal {
        min-height: 500px;
    }
}

/* ================================================================
   Gallery Widget Styles
   ================================================================ */

/* Remove Elementor padding for gallery widget */
.elementor-widget-vex-gallery {
    margin: 0 !important;
    padding: 0 !important;
}

.elementor-widget-vex-gallery .elementor-widget-container {
    overflow: visible !important;
}

.elementor-widget-vex-gallery .elementor-widget-container > div {
    margin: 0 !important;
    padding: 0 !important;
}

/* Gallery Widget - Horizontal Scroll Layout */
.vex-gallery-widget .content--horizontal {
    position: relative !important;
    height: 100vh !important;
    min-height: 600px !important;
    width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

.vex-gallery-widget .content--horizontal .fs {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.vex-gallery-widget #fs-scroll.fs-scroll--h {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.vex-gallery-widget #fs-scroll__content {
    position: absolute !important;
    left: 0 !important;
    text-align: left !important;
    min-width: 100% !important;
}

.vex-gallery-widget .gallery-grid {
    display: inline-block !important;
    white-space: nowrap !important;
}

/* Gallery scroll items should be inline */
.vex-gallery-widget .gallery-grid .scroll-item {
    display: inline-block !important;
    vertical-align: top !important;
    white-space: normal !important;
}

/* Mobile adjustments for gallery */
@media only screen and (max-width: 768px) {
    .vex-gallery-widget .content--horizontal {
        min-height: 500px !important;
    }
}

@media only screen and (max-width: 479px) {
    .vex-gallery-widget .content--horizontal {
        min-height: 400px !important;
    }
}

/* ================================================================
   Albums Widget - Single Page Grid Layout
   ================================================================ */

/* Single Page Grid - Viewport-fitted grid with all albums visible */
.vex-albums-widget .albums-grid.grid-single-page {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: center !important;
    width: 100vw !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    padding: 10vh 2vw !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Desktop: Dynamic columns based on album count */
@media only screen and (min-width: 1025px) {
    .vex-elementor-widget .grid-single-page .scroll-item {
        width: calc((100vw - 4vw) / var(--desktop-divisor)) !important;
        height: calc((100vw - 4vw) / var(--desktop-divisor)) !important;
        max-width: calc((100vh - 20vh) / var(--desktop-row-divisor)) !important;
        max-height: calc((100vh - 20vh) / var(--desktop-row-divisor)) !important;
        margin: 0.5vh 0.5vw !important;
    }
}

/* Tablet: Dynamic columns based on album count */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .vex-elementor-widget .grid-single-page .scroll-item {
        width: calc((100vw - 4vw) / var(--tablet-divisor)) !important;
        height: calc((100vw - 4vw) / var(--tablet-divisor)) !important;
        max-width: calc((100vh - 20vh) / var(--tablet-row-divisor)) !important;
        max-height: calc((100vh - 20vh) / var(--tablet-row-divisor)) !important;
        margin: 0.5vh 0.5vw !important;
    }
}

/* Mobile: Dynamic columns based on album count */
@media only screen and (max-width: 767px) {
    .vex-elementor-widget .grid-single-page .scroll-item {
        width: calc((100vw - 4vw) / var(--mobile-divisor)) !important;
        height: calc((100vw - 4vw) / var(--mobile-divisor)) !important;
        max-width: calc((100vh - 20vh) / var(--mobile-row-divisor)) !important;
        max-height: calc((100vh - 20vh) / var(--mobile-row-divisor)) !important;
        margin: 0.5vh 0.5vw !important;
    }
}

/* Small Mobile: Same as mobile but tighter margins */
@media only screen and (max-width: 479px) {
    .vex-elementor-widget .grid-single-page .scroll-item {
        margin: 0.3vh 0.3vw !important;
    }
}

/* Hide album titles when option is enabled */
.vex-albums-widget.hide-titles .mod-title {
    display: none !important;
}

/* ================================================================
   Gallery Widget - Single Page Grid (Scattered) Layout
   ================================================================ */

/* Container takes full viewport */
.gallery-single-page-grid {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    padding: 5vh 5vw !important;
    box-sizing: border-box !important;
}

/* Scattered container - absolute positioning for true scattering */
.gallery-scattered-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

/* Base size for scattered items - absolute positioning with random coordinates */
.gallery-scattered-item {
    position: absolute !important;
    top: var(--y-pos) !important;
    left: var(--x-pos) !important;
}

/* Apply size variations using CSS variables and data attributes */
.gallery-single-page-grid .gallery-scattered-item[data-size-factor="0.8"] {
    width: calc(var(--desktop-base, 18vw) * 0.8) !important;
    height: calc(var(--desktop-base, 18vw) * 0.8 * 0.67) !important;
}

.gallery-single-page-grid .gallery-scattered-item[data-size-factor="0.9"] {
    width: calc(var(--desktop-base, 18vw) * 0.9) !important;
    height: calc(var(--desktop-base, 18vw) * 0.9 * 0.67) !important;
}

.gallery-single-page-grid .gallery-scattered-item[data-size-factor="1.0"] {
    width: var(--desktop-base, 18vw) !important;
    height: calc(var(--desktop-base, 18vw) * 0.67) !important;
}

.gallery-single-page-grid .gallery-scattered-item[data-size-factor="1.1"] {
    width: calc(var(--desktop-base, 18vw) * 1.1) !important;
    height: calc(var(--desktop-base, 18vw) * 1.1 * 0.67) !important;
}

.gallery-single-page-grid .gallery-scattered-item[data-size-factor="1.2"] {
    width: calc(var(--desktop-base, 18vw) * 1.2) !important;
    height: calc(var(--desktop-base, 18vw) * 1.2 * 0.67) !important;
}

/* Ensure images fill containers */
.gallery-scattered-item .gallery__item,
.gallery-scattered-item .gallery__item-inner,
.gallery-scattered-item .ithumb__inner,
.gallery-scattered-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Apply shadows to ithumb element - shadows will animate with ithumb opacity */
.gallery-scattered-item .ithumb {
    width: 100% !important;
    height: 100% !important;
    transition: box-shadow 0.3s ease !important;
    /* Realistic photo drop shadow - darker and bolder for visibility */
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.20),     /* Contact shadow - darker, close to photo */
        0 6px 16px rgba(0, 0, 0, 0.25),    /* Mid-range shadow - more pronounced */
        0 12px 32px rgba(0, 0, 0, 0.30) !important;  /* Ambient shadow - deeper depth */
}

/* Hover effect - lift photo off table with enhanced shadow */
.gallery-scattered-item:hover {
    transform: scale(1.05);
    z-index: 10 !important;
}

/* Enhanced shadow on ithumb when parent is hovered */
.gallery-scattered-item:hover .ithumb {
    /* Deeper, more dramatic shadow when lifted - photo rising off table */
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.25),
        0 16px 40px rgba(0, 0, 0, 0.32),
        0 24px 60px rgba(0, 0, 0, 0.38) !important;
}

/* Tablet adjustments */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .gallery-single-page-grid .gallery-scattered-item[data-size-factor="0.8"] {
        width: calc(var(--tablet-base, 25vw) * 0.8) !important;
        height: calc(var(--tablet-base, 25vw) * 0.8 * 0.67) !important;
    }

    .gallery-single-page-grid .gallery-scattered-item[data-size-factor="0.9"] {
        width: calc(var(--tablet-base, 25vw) * 0.9) !important;
        height: calc(var(--tablet-base, 25vw) * 0.9 * 0.67) !important;
    }

    .gallery-single-page-grid .gallery-scattered-item[data-size-factor="1.0"] {
        width: var(--tablet-base, 25vw) !important;
        height: calc(var(--tablet-base, 25vw) * 0.67) !important;
    }

    .gallery-single-page-grid .gallery-scattered-item[data-size-factor="1.1"] {
        width: calc(var(--tablet-base, 25vw) * 1.1) !important;
        height: calc(var(--tablet-base, 25vw) * 1.1 * 0.67) !important;
    }

    .gallery-single-page-grid .gallery-scattered-item[data-size-factor="1.2"] {
        width: calc(var(--tablet-base, 25vw) * 1.2) !important;
        height: calc(var(--tablet-base, 25vw) * 1.2 * 0.67) !important;
    }

    .gallery-scattered-container {
        gap: 1.5vw 1.5vw !important;
    }
}

/* Mobile adjustments */
@media only screen and (max-width: 767px) {
    .gallery-single-page-grid {
        padding: 3vh 3vw !important;
    }

    .gallery-single-page-grid .gallery-scattered-item[data-size-factor="0.8"] {
        width: calc(var(--mobile-base, 35vw) * 0.8) !important;
        height: calc(var(--mobile-base, 35vw) * 0.8 * 0.67) !important;
    }

    .gallery-single-page-grid .gallery-scattered-item[data-size-factor="0.9"] {
        width: calc(var(--mobile-base, 35vw) * 0.9) !important;
        height: calc(var(--mobile-base, 35vw) * 0.9 * 0.67) !important;
    }

    .gallery-single-page-grid .gallery-scattered-item[data-size-factor="1.0"] {
        width: var(--mobile-base, 35vw) !important;
        height: calc(var(--mobile-base, 35vw) * 0.67) !important;
    }

    .gallery-single-page-grid .gallery-scattered-item[data-size-factor="1.1"] {
        width: calc(var(--mobile-base, 35vw) * 1.1) !important;
        height: calc(var(--mobile-base, 35vw) * 1.1 * 0.67) !important;
    }

    .gallery-single-page-grid .gallery-scattered-item[data-size-factor="1.2"] {
        width: calc(var(--mobile-base, 35vw) * 1.2) !important;
        height: calc(var(--mobile-base, 35vw) * 1.2 * 0.67) !important;
    }

    .gallery-scattered-container {
        gap: 1vw 1vw !important;
    }
}

/* Small mobile - uses same variables as mobile */
@media only screen and (max-width: 479px) {
    .gallery-single-page-grid {
        padding: 2vh 2vw !important;
    }

    .gallery-scattered-container {
        gap: 0.8vw 0.8vw !important;
    }
}

/* ================================================================
   MCW Fullpage Compatibility
   Overrides to ensure widgets display properly in fullpage sections
   ================================================================ */

/* Ensure body overflow doesn't hide widget content */
body.fp-enabled {
    overflow: visible !important;
}

/* Allow fullpage sections to handle their own overflow */
.fp-enabled .fp-section {
    overflow: visible !important;
}

/* Ensure Vex widgets are visible in fullpage sections */
.fp-enabled .vex-elementor-widget {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure animations work in fullpage sections - handled by JS but CSS backup */
.fp-enabled .is-waypoint.done .img,
.fp-enabled .done.fx-scale .img,
.fp-enabled .fx-scale.done .img,
.fp-enabled .done .fx-scale .img,
.fp-enabled .done.fx-scale-from-right .img,
.fp-enabled .fx-scale-from-right.done .img,
.fp-enabled .done .fx-scale-from-right .img {
    opacity: 1 !important;
    transform: scaleX(1) translateX(0) !important;
}

/* Ensure ithumb images are visible */
.fp-enabled .ithumb .img,
.fp-enabled .ithumb img {
    opacity: 1 !important;
}

/* Prevent fullpage from hiding scroll containers */
.fp-enabled #fs-scroll,
.fp-enabled .content--horizontal,
.fp-enabled .fs-scroll--h {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* ============================================
   FAILSAFE: Ensure animations complete in fullpage
   These rules work even if body classes are missing
   ============================================ */

/* Failsafe for fx-scale animations */
.fp-enabled .fx-scale.done .img,
body.fp-enabled .fx-scale.done .img {
    opacity: 1 !important;
    transform: scaleY(1) translateY(0) !important;
}

/* Failsafe for fx-scale-from-right animations */
.fp-enabled .fx-scale-from-right.done .img,
body.fp-enabled .fx-scale-from-right.done .img {
    opacity: 1 !important;
    transform: scaleX(1) translateX(0) !important;
}

/* Failsafe for fx-scale-from-left animations */
.fp-enabled .fx-scale-from-left.done .img,
body.fp-enabled .fx-scale-from-left.done .img {
    opacity: 1 !important;
    transform: scaleX(1) translateX(0) !important;
}