/* =============================================================================
   Widget: Cards List
   BEM root: .gtea-cards-list
   ============================================================================= */

/* ── Container ──────────────────────────────────────────────────────────────── */

.gtea-cards-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 16px;
}

/* ── Card item ──────────────────────────────────────────────────────────────── */

.gtea-cards-list__item {
    display: flex;
    flex-direction: column;
    position: relative;      /* anchor for __floating-cta */
    width: 100%;
    text-decoration: none;   /* reset when card is <a> */
    color: inherit;
    cursor: pointer;

    transition-property: background-color, border-color, box-shadow, backdrop-filter;
    transition-timing-function: ease;
}

/* ── Inner row: horizontal layout of components ─────────────────────────────── */

.gtea-cards-list__item-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    width: 100%;
}

/* ── Icon ───────────────────────────────────────────────────────────────────── */

.gtea-cards-list__item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition-property: color, fill, background-color, border-color, box-shadow, backdrop-filter;
    transition-timing-function: ease;
}

.gtea-cards-list__item-icon svg,
.gtea-cards-list__item-icon i {
    display: block;
}

/* ── Text label ─────────────────────────────────────────────────────────────── */

.gtea-cards-list__item-text {
    flex-shrink: 0;
    transition-property: color, background-color, border-color, box-shadow, backdrop-filter;
    transition-timing-function: ease;
}

/* ── Title ──────────────────────────────────────────────────────────────────── */

.gtea-cards-list__item-title {
    margin: 0;
    transition-property: color, background-color, border-color, box-shadow, backdrop-filter;
    transition-timing-function: ease;
}

/* ── Description ────────────────────────────────────────────────────────────── */

.gtea-cards-list__item-description {
    transition-property: color, background-color, border-color, box-shadow, backdrop-filter;
    transition-timing-function: ease;
}

/* ── Inline CTA ─────────────────────────────────────────────────────────────── */

.gtea-cards-list__item-cta {
    flex-shrink: 0;
}

/* ── Floating CTA ───────────────────────────────────────────────────────────── */
/*
 * Follows cursor via JS transform: translate(x, y).
 * Hidden by default (opacity 0, pointer-events none).
 * Revealed by JS adding .--visible after the position is already set,
 * preventing any flash at the wrong coordinates on initial card entry.
 * Positioned relative to the card (position: absolute on parent).
 * translate(-50%, -50%) centres the element on the target point.
 */

.gtea-cards-list__floating-cta {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;

    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    user-select: none;

    opacity: 0;
    transform: translate(-50%, -50%);
    transition-property: opacity, background-color, border-color, box-shadow, color;
    transition-duration: 250ms;
    transition-timing-function: ease;

    /* z-index above card content */
    z-index: 10;
}

/* Icon above label: stack vertically */
.gtea-cards-list__floating-cta--above {
    flex-direction: column;
}

/*
 * Visible state — added by JS in mousemove (after position is updated)
 * and removed in mouseleave for fade out.
 */
.gtea-cards-list__floating-cta--visible {
    opacity: 1;
}

.gtea-cards-list__floating-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gtea-cards-list__floating-cta-label {
    white-space: nowrap;
}

/* ── Elementor editor: static centred preview ───────────────────────────────── */
/*
 * When JS detects Elementor editor mode, it adds .--editor to the widget.
 * All floating CTAs within are shown centred on their card so the user
 * can edit styles without needing to hover.
 */

.gtea-cards-list--editor .gtea-cards-list__floating-cta {
    position: absolute;   /* explicit — not inherited from base rule */
    opacity: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    transition: none;
}

/* ── Mobile / tablet: static CTA at bottom ──────────────────────────────────── */
/*
 * When .gtea-cards-list--cta-last is active AND viewport is ≤ 1024px,
 * the floating CTA becomes a static element at the bottom of the card.
 * JS hides cursor-follow behaviour at these widths.
 */

@media (max-width: 1024px) {
    .gtea-cards-list--cta-last .gtea-cards-list__item {
        flex-direction: column;
    }

    .gtea-cards-list--cta-last .gtea-cards-list__floating-cta {
        position: static;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        align-self: flex-start;
        transition: none;
    }
}

/* ── CTA inside a link-card: focus animation ─────────────────────────────────── */
/*
 * When the card is rendered as <a> (because the CTA has a Link), the inline CTA
 * is a <span class="gtea-cta"> — it cannot receive :focus itself.
 * These rules mirror widget-cta.css's :focus selectors by targeting the card
 * anchor's :focus state instead, so icon-slide animation still works on keyboard nav.
 */

.gtea-cards-list__item:focus .gtea-cta__icon-wrap--anim-slide.gtea-cta__icon-wrap--on-focus .gtea-cta__icon:not(.gtea-cta__icon--clone) {
    transform: translateX(110%);
}

.gtea-cards-list__item:focus .gtea-cta__icon-wrap--anim-slide.gtea-cta__icon-wrap--on-focus .gtea-cta__icon--clone {
    transform: translateX(0);
}

/* ── Per-device visibility utilities ────────────────────────────────────────── */
/*
 * Applied by PHP to each component wrapper when the corresponding
 * per-device visibility switch is set to Hide.
 * display:none removes the element from flow so it leaves no gap.
 *
 * Breakpoints match Elementor's defaults:
 *   Desktop  ≥ 1025 px
 *   Tablet   768 px – 1024 px
 *   Mobile   ≤ 767 px
 */

@media (min-width: 1025px) {
    .gtea-cards-list__hide-desktop {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .gtea-cards-list__hide-tablet {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .gtea-cards-list__hide-mobile {
        display: none !important;
    }
}