/**
 * CDSWerx Dynamic Link — Icon Layout Styles
 *
 * Applied via prefix_class on the native JetEngine Dynamic Link widget.
 *
 * SELECTOR RULE: match the layout class EXACTLY. Substring matchers such as
 * [class*="cdswerx-link-layout"][class*="-icon-left"] also match the responsive
 * classes (cdswerx-link-layout-tablet-icon-left), and because the base rules sit
 * outside any media query, a tablet- or mobile-only layout leaked to every
 * breakpoint. Fixed in 1.21.0 — do not reintroduce substring matching here.
 *
 * @since 1.1.0
 */

/* ==========================================================================
   LEGACY LAYOUTS — icon-left / icon-right / icon-above / icon-below.
   No longer offered in the panel as of 1.21.0: JetEngine's own Icon Position
   x Icon Orientation express all four. These rules are retained (and the
   prefix_class still emits the classes) so widgets already holding one of
   these saved values keep rendering exactly as before.
   ========================================================================== */

/* Icon Left Layout */
.cdswerx-link-layout-icon-left .jet-listing-dynamic-link__link {
    flex-direction: row !important;
}

.cdswerx-link-layout-icon-left .jet-listing-dynamic-link__icon {
    order: 1 !important;
}

.cdswerx-link-layout-icon-left .jet-listing-dynamic-link__label {
    order: 2 !important;
}

/* Icon Right Layout */
.cdswerx-link-layout-icon-right .jet-listing-dynamic-link__link {
    flex-direction: row !important;
}

.cdswerx-link-layout-icon-right .jet-listing-dynamic-link__icon {
    order: 2 !important;
}

.cdswerx-link-layout-icon-right .jet-listing-dynamic-link__label {
    order: 1 !important;
}

/* Icon Above Layout */
.cdswerx-link-layout-icon-above .jet-listing-dynamic-link__link {
    flex-direction: column !important;
}

.cdswerx-link-layout-icon-above .jet-listing-dynamic-link__icon {
    order: 1 !important;
}

.cdswerx-link-layout-icon-above .jet-listing-dynamic-link__label {
    order: 2 !important;
}

/* Icon Below Layout */
.cdswerx-link-layout-icon-below .jet-listing-dynamic-link__link {
    flex-direction: column !important;
}

.cdswerx-link-layout-icon-below .jet-listing-dynamic-link__icon {
    order: 2 !important;
}

.cdswerx-link-layout-icon-below .jet-listing-dynamic-link__label {
    order: 1 !important;
}

/* Spread Layout — the one arrangement JetEngine cannot express.
   Sets no `order`: JetEngine's Icon Position decides which edge the icon lands
   on, so the two controls compose instead of fighting. The module hides
   JetEngine's Icon Orientation and Icon Gap while Spread is on (see
   $spread_owned_controls), so the !important declarations here are not
   shadowing any control the user can still reach. align-items is left to
   JetEngine's own base stylesheet, which already centres the items. */
.cdswerx-link-layout-spread .jet-listing-dynamic-link {
    width: 100% !important;
}

.cdswerx-link-layout-spread .jet-listing-dynamic-link__link {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-self: stretch !important;
    width: 100% !important;
}

.cdswerx-link-layout-spread .jet-listing-dynamic-link__icon {
    flex-shrink: 0;
}

.cdswerx-link-layout-spread .jet-listing-dynamic-link__label {
    flex-grow: 1;
}

/* ========================================
   RESPONSIVE: Tablet (max-width: 1024px)
   ======================================== */
@media (max-width: 1024px) {
    /* Icon Left - Tablet */
    .cdswerx-link-layout-tablet-icon-left .jet-listing-dynamic-link__link {
        flex-direction: row !important;
    }
    .cdswerx-link-layout-tablet-icon-left .jet-listing-dynamic-link__icon {
        order: 1 !important;
    }
    .cdswerx-link-layout-tablet-icon-left .jet-listing-dynamic-link__label {
        order: 2 !important;
    }

    /* Icon Right - Tablet */
    .cdswerx-link-layout-tablet-icon-right .jet-listing-dynamic-link__link {
        flex-direction: row !important;
    }
    .cdswerx-link-layout-tablet-icon-right .jet-listing-dynamic-link__icon {
        order: 2 !important;
    }
    .cdswerx-link-layout-tablet-icon-right .jet-listing-dynamic-link__label {
        order: 1 !important;
    }

    /* Icon Above - Tablet */
    .cdswerx-link-layout-tablet-icon-above .jet-listing-dynamic-link__link {
        flex-direction: column !important;
    }
    .cdswerx-link-layout-tablet-icon-above .jet-listing-dynamic-link__icon {
        order: 1 !important;
    }
    .cdswerx-link-layout-tablet-icon-above .jet-listing-dynamic-link__label {
        order: 2 !important;
    }

    /* Icon Below - Tablet */
    .cdswerx-link-layout-tablet-icon-below .jet-listing-dynamic-link__link {
        flex-direction: column !important;
    }
    .cdswerx-link-layout-tablet-icon-below .jet-listing-dynamic-link__icon {
        order: 2 !important;
    }
    .cdswerx-link-layout-tablet-icon-below .jet-listing-dynamic-link__label {
        order: 1 !important;
    }

    /* Spread - Tablet (no `order`; JetEngine's Icon Position owns the side) */
    .cdswerx-link-layout-tablet-spread .jet-listing-dynamic-link {
        width: 100% !important;
    }
    .cdswerx-link-layout-tablet-spread .jet-listing-dynamic-link__link {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-self: stretch !important;
        width: 100% !important;
    }
    .cdswerx-link-layout-tablet-spread .jet-listing-dynamic-link__icon {
        flex-shrink: 0;
    }
    .cdswerx-link-layout-tablet-spread .jet-listing-dynamic-link__label {
        flex-grow: 1;
    }

    /* Editor preview fix for spread layout - Tablet */
    .elementor-editor-active .cdswerx-link-layout-tablet-spread .jet-listing-dynamic-link__link {
        width: 100% !important;
    }
}

/* ========================================
   RESPONSIVE: Mobile (max-width: 767px)
   ======================================== */
@media (max-width: 767px) {
    /* Icon Left - Mobile */
    .cdswerx-link-layout-mobile-icon-left .jet-listing-dynamic-link__link {
        flex-direction: row !important;
    }
    .cdswerx-link-layout-mobile-icon-left .jet-listing-dynamic-link__icon {
        order: 1 !important;
    }
    .cdswerx-link-layout-mobile-icon-left .jet-listing-dynamic-link__label {
        order: 2 !important;
    }

    /* Icon Right - Mobile */
    .cdswerx-link-layout-mobile-icon-right .jet-listing-dynamic-link__link {
        flex-direction: row !important;
    }
    .cdswerx-link-layout-mobile-icon-right .jet-listing-dynamic-link__icon {
        order: 2 !important;
    }
    .cdswerx-link-layout-mobile-icon-right .jet-listing-dynamic-link__label {
        order: 1 !important;
    }

    /* Icon Above - Mobile */
    .cdswerx-link-layout-mobile-icon-above .jet-listing-dynamic-link__link {
        flex-direction: column !important;
    }
    .cdswerx-link-layout-mobile-icon-above .jet-listing-dynamic-link__icon {
        order: 1 !important;
    }
    .cdswerx-link-layout-mobile-icon-above .jet-listing-dynamic-link__label {
        order: 2 !important;
    }

    /* Icon Below - Mobile */
    .cdswerx-link-layout-mobile-icon-below .jet-listing-dynamic-link__link {
        flex-direction: column !important;
    }
    .cdswerx-link-layout-mobile-icon-below .jet-listing-dynamic-link__icon {
        order: 2 !important;
    }
    .cdswerx-link-layout-mobile-icon-below .jet-listing-dynamic-link__label {
        order: 1 !important;
    }

    /* Spread - Mobile (no `order`; JetEngine's Icon Position owns the side) */
    .cdswerx-link-layout-mobile-spread .jet-listing-dynamic-link {
        width: 100% !important;
    }
    .cdswerx-link-layout-mobile-spread .jet-listing-dynamic-link__link {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-self: stretch !important;
        width: 100% !important;
    }
    .cdswerx-link-layout-mobile-spread .jet-listing-dynamic-link__icon {
        flex-shrink: 0;
    }
    .cdswerx-link-layout-mobile-spread .jet-listing-dynamic-link__label {
        flex-grow: 1;
    }

    /* Editor preview fix for spread layout - Mobile */
    .elementor-editor-active .cdswerx-link-layout-mobile-spread .jet-listing-dynamic-link__link {
        width: 100% !important;
    }
}

/* Editor preview fix for spread layout */
.elementor-editor-active .cdswerx-link-layout-spread .jet-listing-dynamic-link__link {
    width: 100% !important;
}

/* ==========================================================================
   Link Text Underline
   ========================================================================== */

/* Keyframe animations for draw effect */
@keyframes cds-animate-underline-from-left {
    0% {
        transform: scaleX(1);
        transform-origin: right;
    }
    37% {
        transform: scaleX(0);
        transform-origin: right;
    }
    38% {
        transform: scaleX(0);
        transform-origin: left;
    }
    100% {
        transform: scaleX(1);
        transform-origin: left;
    }
}

@keyframes cds-animate-underline-from-right {
    0% {
        transform: scaleX(1);
        transform-origin: left;
    }
    37% {
        transform: scaleX(0);
        transform-origin: left;
    }
    38% {
        transform: scaleX(0);
        transform-origin: right;
    }
    100% {
        transform: scaleX(1);
        transform-origin: right;
    }
}

/* Label needs relative positioning for the underline pseudo-element */
.cdswerx-link-uline-yes .jet-listing-dynamic-link__label {
    position: relative;
}

/* Underline pseudo-element — visible when enable control adds .cdswerx-link-uline-yes class */
.cdswerx-link-uline-yes .jet-listing-dynamic-link__label:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transition: background-color .25s ease-in-out, width .36s cubic-bezier(.51, .5, .07, .99);
    backface-visibility: hidden;
}

/* Default hover: shrink underline to zero (unless draw animation is active) */
.cdswerx-link-uline-yes:not([class*="cdswerx-link-uldraw-yes"]) .jet-listing-dynamic-link__link:hover .jet-listing-dynamic-link__label:after {
    width: 0;
}

/* Draw effect — overflow hidden on label for clean animation */
.cdswerx-link-uldraw-yes .jet-listing-dynamic-link__label {
    overflow: hidden;
}

/* Draw animation: left alignment */
.cdswerx-link-uldraw-yes.cdswerx-link-ulpos-left .jet-listing-dynamic-link__link:hover .jet-listing-dynamic-link__label:after {
    animation: cds-animate-underline-from-left .7s cubic-bezier(.45, .29, 0, .82) forwards;
}

/* Draw animation: right alignment */
.cdswerx-link-uldraw-yes.cdswerx-link-ulpos-right .jet-listing-dynamic-link__link:hover .jet-listing-dynamic-link__label:after {
    animation: cds-animate-underline-from-right .7s cubic-bezier(.45, .29, 0, .82) forwards;
}