/**
 * CDSWerx Interactive Links Widget
 *
 * Adapted from Qi Interactive Links CSS.
 * BEM naming: .cdswerx-interactive-links__*
 *
 * @package CDSWerx_Widget_Library
 * @since   2.13.0
 */

/* ═══════════════════════════════════════════════════════════════
   BASE / SHARED
   ═══════════════════════════════════════════════════════════════ */

.cdswerx-interactive-links {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    vertical-align: top;
    visibility: hidden;
}

.cdswerx-interactive-links.cdswerx--init {
    visibility: visible;
}

.cdswerx-interactive-links.cdswerx-interactive-links--full-height {
    height: 100vh;
}

.admin-bar .cdswerx-interactive-links.cdswerx-interactive-links--full-height {
    height: calc(100vh - 32px);
}

/* ── Items container ── */

.cdswerx-interactive-links__items {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

/* ── Single item (anchor) ── */

.cdswerx-interactive-links__item {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: auto;
    color: #111;
    margin: 0.6em 0;
}

/* ── Title ── */

.cdswerx-interactive-links__title {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0; /* Reset default heading margin so spacing is controlled (matches Section); works regardless of heading tag */
    font-family: inherit;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-size: 39px;
    line-height: 1.19048em;
    transition: color 0.2s ease-out;
    z-index: 2;
}

@media only screen and (max-width: 680px) {
    .cdswerx-interactive-links__title {
        font-size: 36px;
    }
}

/* ── Inner title (underline pseudo-element host) ── */

.cdswerx-interactive-links__inner-title {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.cdswerx-interactive-links__inner-title:after {
    content: "";
    position: absolute;
    left: 0;
    width: 0;
    height: 2px;
    background-color: currentColor;
    transition: width 0.3s ease;
}

.cdswerx-interactive-links__inner-title:hover:after {
    width: 100%;
}

/* Underline position */
.cdswerx-hover--underline .cdswerx-interactive-links__inner-title:after {
    bottom: 0;
}

/* Line-through position */
.cdswerx-hover--line-through .cdswerx-interactive-links__inner-title:after {
    top: 50%;
    transform: translateY(-50%);
}

/* Active item → show underline */
.cdswerx-interactive-links .cdswerx--active.cdswerx-interactive-links__item .cdswerx-interactive-links__inner-title:after {
    width: 100%;
}

/* Title Hover Style: None (#112) — no line in any state, hover or active.
   `content: none` rather than height/width 0: the thickness / colour controls write
   onto this same :after at equal-or-higher specificity and would resurrect a
   dimension-based hide. Removing the box removes every writer's target. */
.cdswerx-hover--none .cdswerx-interactive-links__inner-title:after {
    content: none;
}

/* ── Text ── */

.cdswerx-interactive-links__text {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════
   IMAGES
   ═══════════════════════════════════════════════════════════════ */

.cdswerx-interactive-links__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    overflow: hidden; /* required for border-radius to clip background-image */
    transition: opacity 0s 0.45s;
}

.cdswerx-interactive-links__image.cdswerx-background {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cdswerx-interactive-links__image.cdswerx-background img {
    display: none;
}

.cdswerx-interactive-links__image.cdswerx--active {
    opacity: 1;
    z-index: 5;
    transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT: STANDARD
   ═══════════════════════════════════════════════════════════════ */

.cdswerx-interactive-links.cdswerx-interactive-links--standard {
    justify-content: center;
    text-align: center;
}

.cdswerx-interactive-links--standard .cdswerx-interactive-links__images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cdswerx-interactive-links--standard .cdswerx-interactive-links__items {
    width: 40%;
    justify-content: center;
}

/* Images on top — unset z-index so images layer above titles */
.cdswerx-standard-images-on-top--yes .cdswerx-interactive-links--standard .cdswerx-interactive-links__items {
    z-index: unset;
}

/* Standard image positioning */
.cdswerx-interactive-links--standard .cdswerx-interactive-links__image {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.35s ease-out;
}

.cdswerx-interactive-links--standard .cdswerx-interactive-links__image.cdswerx-position--left {
    left: 0;
    width: 30%;
}

.cdswerx-interactive-links--standard .cdswerx-interactive-links__image.cdswerx-position--right {
    left: auto;
    right: 0;
    width: 30%;
}

.cdswerx-interactive-links--standard .cdswerx-interactive-links__image img {
    position: relative;
}

/* Standard: Hide images responsive */
@media only screen and (max-width: 768px) {
    .cdswerx-standard-hide-under--768 .cdswerx-interactive-links--standard .cdswerx-interactive-links__images {
        display: none;
    }
}

@media only screen and (max-width: 680px) {
    .cdswerx-standard-hide-under--680 .cdswerx-interactive-links--standard .cdswerx-interactive-links__images {
        display: none;
    }
    .cdswerx-split-hide-under--680 .cdswerx-interactive-links--standard .cdswerx-interactive-links__items {
        width: 100%;
    }
}

@media only screen and (max-width: 480px) {
    .cdswerx-standard-hide-under--480 .cdswerx-interactive-links--standard .cdswerx-interactive-links__images {
        display: none;
    }
    .cdswerx-split-hide-under--480 .cdswerx-interactive-links--standard .cdswerx-interactive-links__items {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT: INLINE  (side-by-side columns like Split, horizontal text wrap)
   ═══════════════════════════════════════════════════════════════ */

.cdswerx-interactive-links.cdswerx-interactive-links--inline {
    align-items: stretch;
    text-align: left;
}

.cdswerx-interactive-links--inline .cdswerx-interactive-links__images {
    position: relative;
    flex: 1;
}

.cdswerx-interactive-links--inline .cdswerx-interactive-links__items {
    width: 40%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    margin: 0 -20px;
    padding: 60px 5%;
}

.cdswerx-interactive-links--inline .cdswerx-interactive-links__item {
    position: relative;
    flex: 1;
    flex-grow: 0;
    margin: 0 !important;
}

.cdswerx-interactive-links--inline .cdswerx-interactive-links__title {
    white-space: nowrap;
    padding: 0 20px;
}

/* Separator character (set via control selector) */
.cdswerx-interactive-links--inline .cdswerx-interactive-links__title:before {
    position: absolute;
    right: 0;
    transform: translateX(50%);
}

.cdswerx-interactive-links--inline .cdswerx-interactive-links__text {
    padding: 0 20px;
}

/* Inline image (flex column display like Split) */
.cdswerx-interactive-links--inline .cdswerx-interactive-links__image:not(.cdswerx-background) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cdswerx-interactive-links--inline .cdswerx-interactive-links__image:not(.cdswerx-background) img {
    max-height: 100%;
    object-fit: contain;
}

/* Inline: Hide images responsive */
@media only screen and (max-width: 680px) {
    .cdswerx-inline-hide-under--680 .cdswerx-interactive-links--inline .cdswerx-interactive-links__images {
        display: none;
    }
    .cdswerx-inline-hide-under--680 .cdswerx-interactive-links--inline .cdswerx-interactive-links__items {
        width: 100%;
    }
}

@media only screen and (max-width: 480px) {
    .cdswerx-inline-hide-under--480 .cdswerx-interactive-links--inline .cdswerx-interactive-links__images {
        display: none;
    }
    .cdswerx-inline-hide-under--480 .cdswerx-interactive-links--inline .cdswerx-interactive-links__items {
        width: 100%;
    }
}

/* Inline: Responsive stacking */
@media only screen and (max-width: 768px) {
    .cdswerx-inline-stack--yes .cdswerx-interactive-links--inline {
        flex-direction: column !important;
    }
    .cdswerx-inline-stack--yes .cdswerx-interactive-links--inline .cdswerx-interactive-links__items {
        width: 100%;
        padding: 40px 5%;
    }
    .cdswerx-inline-stack--yes .cdswerx-interactive-links--inline .cdswerx-interactive-links__images {
        flex: none;
        width: 100%;
        min-height: 250px;
    }
    /* Image above content on mobile */
    .cdswerx-inline-mobile-image--above.cdswerx-inline-stack--yes .cdswerx-interactive-links--inline .cdswerx-interactive-links__images {
        order: -1;
    }
    /* Image below content on mobile */
    .cdswerx-inline-mobile-image--below.cdswerx-inline-stack--yes .cdswerx-interactive-links--inline .cdswerx-interactive-links__images {
        order: 1;
    }
    .cdswerx-inline-mobile-image--below.cdswerx-inline-stack--yes .cdswerx-interactive-links--inline .cdswerx-interactive-links__items {
        order: -1;
    }
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT: BACKGROUND
   ═══════════════════════════════════════════════════════════════ */

.cdswerx-interactive-links--background .cdswerx-interactive-links__images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.cdswerx-interactive-links--background .cdswerx-interactive-links__items {
    width: 40%;
    justify-content: center;
    align-items: flex-start;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT: SPLIT
   ═══════════════════════════════════════════════════════════════ */

.cdswerx-interactive-links.cdswerx-interactive-links--split {
    align-items: stretch;
}

.cdswerx-interactive-links--split .cdswerx-interactive-links__images {
    position: relative;
    flex: 1;
}

.cdswerx-interactive-links--split .cdswerx-interactive-links__items {
    width: 40%;
    justify-content: center;
    align-items: flex-start;
    padding: 150px 10%;
}

.cdswerx-interactive-links--split .cdswerx-interactive-links__image:not(.cdswerx-background) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cdswerx-interactive-links--split .cdswerx-interactive-links__image:not(.cdswerx-background) img {
    max-height: 100%;
    object-fit: contain;
}

/* Split: Hide images responsive */
@media only screen and (max-width: 680px) {
    .cdswerx-split-hide-under--680 .cdswerx-interactive-links--split .cdswerx-interactive-links__images {
        display: none;
    }
    .cdswerx-split-hide-under--680 .cdswerx-interactive-links--split .cdswerx-interactive-links__items {
        width: 100%;
    }
}

@media only screen and (max-width: 480px) {
    .cdswerx-split-hide-under--480 .cdswerx-interactive-links--split .cdswerx-interactive-links__images {
        display: none;
    }
    .cdswerx-split-hide-under--480 .cdswerx-interactive-links--split .cdswerx-interactive-links__items {
        width: 100%;
    }
}

/* Split: Responsive stacking */
@media only screen and (max-width: 768px) {
    .cdswerx-split-stack--yes .cdswerx-interactive-links--split {
        flex-direction: column !important;
    }
    .cdswerx-split-stack--yes .cdswerx-interactive-links--split .cdswerx-interactive-links__items {
        width: 100%;
        padding: 40px 5%;
    }
    .cdswerx-split-stack--yes .cdswerx-interactive-links--split .cdswerx-interactive-links__images {
        flex: none;
        width: 100%;
        min-height: 250px;
    }
    /* Image above content on mobile */
    .cdswerx-split-mobile-image--above.cdswerx-split-stack--yes .cdswerx-interactive-links--split .cdswerx-interactive-links__images {
        order: -1;
    }
    /* Image below content on mobile */
    .cdswerx-split-mobile-image--below.cdswerx-split-stack--yes .cdswerx-interactive-links--split .cdswerx-interactive-links__images {
        order: 1;
    }
    .cdswerx-split-mobile-image--below.cdswerx-split-stack--yes .cdswerx-interactive-links--split .cdswerx-interactive-links__items {
        order: -1;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SUBTITLE
   ═══════════════════════════════════════════════════════════════ */

.cdswerx-interactive-links__subtitle {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    transition: color 0.2s ease-out;
}

.cdswerx-interactive-links__subtitle--above {
    /* sits above title — spacing controlled by style controls */
}

.cdswerx-interactive-links__subtitle--below {
    /* sits below title — spacing controlled by style controls */
}

/* ═══════════════════════════════════════════════════════════════
   TITLE LINK
   ═══════════════════════════════════════════════════════════════ */

.cdswerx-interactive-links__title-link {
    color: inherit;
}

.cdswerx-interactive-links__title-link:hover {
    color: inherit;
}

/* ═══════════════════════════════════════════════════════════════
   TEXT (WYSIWYG)
   ═══════════════════════════════════════════════════════════════ */

.cdswerx-interactive-links__text {
    display: block;
}

.cdswerx-interactive-links__text p:last-child {
    margin-bottom: 0;
}

/* List / marker BASE styles for this widget's WYSIWYG content live in the shared
   stylesheet assets/css/wysiwyg-content.css (handle cdswerx-wysiwyg-content,
   loaded as a dependency of this file). Rendered markup carries the generic
   `cds-wysiwyg*` hooks next to the BEM classes (WYSIWYG_List_Styles_Trait).
   The duplicate copies (and the legacy `--marker-icon` alias) were removed after
   #87. The rules BELOW are retained on purpose: this widget's deliberate
   deviations for the marker span / icon-row alignment, keyed to the BEM class so
   they override the shared baseline (same specificity, later in the cascade). */

.cdswerx-interactive-links__text--icon-marker li {
    display: flex;
    align-items: flex-start;
}

.cdswerx-interactive-links__list-marker {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 0.5em;
    line-height: inherit;
}

.cdswerx-interactive-links__list-marker svg {
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTON
   ═══════════════════════════════════════════════════════════════ */

.cdswerx-interactive-links__button {
    display: inline-block;
    margin-top: 15px;
}

/* ═══════════════════════════════════════════════════════════════
   CURSOR
   ═══════════════════════════════════════════════════════════════ */

/* All items get pointer for hover image interaction */
.cdswerx-interactive-links__item {
    cursor: pointer;
}