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

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

.gtea-cards {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ── Grid ───────────────────────────────────────────────────────────────────── */

.gtea-cards__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
}

/* Tilt animation: isolate the widget as a stacking context so card z-index
 * values are resolved within the widget and do not interact with the page. */
.gtea-cards[data-gtea-anim="tilt_cards"] {
    isolation: isolate;
}

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

.gtea-cards__item {
    display: flex;
    flex-direction: column;
    /* transition-duration is set via Elementor control; declare which props animate */
    transition-property: background-color, border-color, box-shadow, backdrop-filter, transform;
    transition-timing-function: ease;
}

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

.gtea-cards__item-icon {
    display: flex;
    /* Default: shrink to icon size, positioned at the start of the card.
     * Elementor's icon_align_h control overrides align-self per breakpoint. */
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    transition-property: color, fill, background-color, border-color, box-shadow, backdrop-filter;
    transition-timing-function: ease;
}

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

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

.gtea-cards__item-title {
    margin: 0;
    /* Flex container so justify-content / align-items controls work.
     * flex-wrap: wrap preserves text wrapping for multi-word titles.
     * align-self: stretch keeps the title at full card width by default;
     * overridden by Elementor's title_align_h control (align-self). */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-self: stretch;
    transition-property: color, background-color, border-color, box-shadow, backdrop-filter;
    transition-timing-function: ease;
}

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

.gtea-cards__item-description {
    /* Column flex: inner HTML elements (p, ul…) stack naturally as before.
     * justify-content aligns blocks along the column (vertical).
     * align-items aligns blocks along the cross axis (horizontal).
     * align-self positions the description box within the card.
     * All three are driven by Elementor's description_align_h/v controls. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    transition-property: color, background-color, border-color, box-shadow, backdrop-filter;
    transition-timing-function: ease;
}

/* ── CTAs container ─────────────────────────────────────────────────────────── */

.gtea-cards__item-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: center;
}

/* ── CTA base styles (mirrors .gtea-cta pattern) ────────────────────────────── */

.gtea-cards__cta-primary,
.gtea-cards__cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    text-decoration: none;
    cursor: pointer;
    position: relative;
}

.gtea-cards__cta-primary__label,
.gtea-cards__cta-secondary__label {
    /* typography driven by Elementor style controls */
}

.gtea-cards__cta-primary__icon-wrap,
.gtea-cards__cta-secondary__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.gtea-cards__cta-primary__icon-wrap svg,
.gtea-cards__cta-secondary__icon-wrap svg {
    width: 16px;
    height: 16px;
}

.gtea-cards__cta-primary__icon-clip,
.gtea-cards__cta-secondary__icon-clip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.gtea-cards__cta-primary__icon,
.gtea-cards__cta-secondary__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Clone icon: fills __icon-clip, initially out-of-view to the left.
 * Without this, the clone is visible at rest and the slide has no start position. */
.gtea-cards__cta-primary__icon--clone,
.gtea-cards__cta-secondary__icon--clone {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-110%);
}

/* ── CTA icon animation: slide ───────────────────────────────────────────── */
/*
 * Mirrors widget-cta.css slide animation but scoped to the cards BEM roots.
 * overflow: hidden is on __icon-clip so padding/border on the wrap do not
 * widen the clip region.
 * Duration driven by --gtea-icon-anim-duration set by Elementor control.
 */

.gtea-cards__cta-primary__icon-wrap--anim-slide .gtea-cards__cta-primary__icon-clip,
.gtea-cards__cta-secondary__icon-wrap--anim-slide .gtea-cards__cta-secondary__icon-clip {
    overflow: hidden;
}

.gtea-cards__cta-primary__icon-wrap--anim-slide .gtea-cards__cta-primary__icon:not(.gtea-cards__cta-primary__icon--clone),
.gtea-cards__cta-secondary__icon-wrap--anim-slide .gtea-cards__cta-secondary__icon:not(.gtea-cards__cta-secondary__icon--clone) {
    transition: transform var(--gtea-icon-anim-duration, 300ms) cubic-bezier(0.4, 0, 0.2, 1);
}

.gtea-cards__cta-primary__icon-wrap--anim-slide .gtea-cards__cta-primary__icon--clone,
.gtea-cards__cta-secondary__icon-wrap--anim-slide .gtea-cards__cta-secondary__icon--clone {
    transition: transform var(--gtea-icon-anim-duration, 300ms) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover trigger */
.gtea-cards__cta-primary:hover .gtea-cards__cta-primary__icon-wrap--anim-slide.gtea-cards__cta-primary__icon-wrap--on-hover .gtea-cards__cta-primary__icon:not(.gtea-cards__cta-primary__icon--clone),
.gtea-cards__cta-secondary:hover .gtea-cards__cta-secondary__icon-wrap--anim-slide.gtea-cards__cta-secondary__icon-wrap--on-hover .gtea-cards__cta-secondary__icon:not(.gtea-cards__cta-secondary__icon--clone) {
    transform: translateX(110%);
}

.gtea-cards__cta-primary:hover .gtea-cards__cta-primary__icon-wrap--anim-slide.gtea-cards__cta-primary__icon-wrap--on-hover .gtea-cards__cta-primary__icon--clone,
.gtea-cards__cta-secondary:hover .gtea-cards__cta-secondary__icon-wrap--anim-slide.gtea-cards__cta-secondary__icon-wrap--on-hover .gtea-cards__cta-secondary__icon--clone {
    transform: translateX(0);
}

/* Focus trigger */
.gtea-cards__cta-primary:focus .gtea-cards__cta-primary__icon-wrap--anim-slide.gtea-cards__cta-primary__icon-wrap--on-focus .gtea-cards__cta-primary__icon:not(.gtea-cards__cta-primary__icon--clone),
.gtea-cards__cta-secondary:focus .gtea-cards__cta-secondary__icon-wrap--anim-slide.gtea-cards__cta-secondary__icon-wrap--on-focus .gtea-cards__cta-secondary__icon:not(.gtea-cards__cta-secondary__icon--clone) {
    transform: translateX(110%);
}

.gtea-cards__cta-primary:focus .gtea-cards__cta-primary__icon-wrap--anim-slide.gtea-cards__cta-primary__icon-wrap--on-focus .gtea-cards__cta-primary__icon--clone,
.gtea-cards__cta-secondary:focus .gtea-cards__cta-secondary__icon-wrap--anim-slide.gtea-cards__cta-secondary__icon-wrap--on-focus .gtea-cards__cta-secondary__icon--clone {
    transform: translateX(0);
}

/* ── Title gradient animation ────────────────────────────────────────────────── */

@keyframes gteaCardsTitleWordSweep {
    from {
        background-position:   0%   center;
        -webkit-mask-position: 100% center;
                mask-position: 100% center;
    }
    to {
        background-position:   100% center;
        -webkit-mask-position: 0%   center;
                mask-position: 0%   center;
    }
}

.gtea-cards__item-title--gradient {
    --cards-title-from: #ffffff;
    --cards-title-to:   #cccccc;
}

.gtea-cards__item-title--gradient .gtea-cards__title-word {
    display: inline-block;
    vertical-align: baseline;

    -webkit-text-fill-color: transparent;
    color: transparent;

    background-image: linear-gradient(
        to right,
        var(--cards-title-from) 50%,
        var(--cards-title-to)   50%
    );
    background-size:         200% 100%;
    background-position:     0% center;
    -webkit-background-clip: text;
            background-clip: text;

    -webkit-mask-image: linear-gradient(
        to right,
        black 0%, black 40%,
        rgba(0, 0, 0, 0.7) 44%,
        rgba(0, 0, 0, 0.15) 48%,
        transparent 50%, transparent 100%
    );
            mask-image: linear-gradient(
        to right,
        black 0%, black 40%,
        rgba(0, 0, 0, 0.7) 44%,
        rgba(0, 0, 0, 0.15) 48%,
        transparent 50%, transparent 100%
    );
    -webkit-mask-size: 200% 100%;
            mask-size: 200% 100%;
    -webkit-mask-position: 100% center;
            mask-position: 100% center;
}

.gtea-cards__item-title--gradient .gtea-cards__title-space {
    display: inline;
    color: transparent;
}

.gtea-cards__item-title--gradient .gtea-cards__title-word--active {
    animation-name:            gteaCardsTitleWordSweep;
    animation-timing-function: ease-out;
    animation-fill-mode:       forwards;
}

.gtea-cards__item-title--gradient .gtea-cards__title-word--revealed {
    -webkit-mask-image:      none;
            mask-image:      none;
    background:              none;
    -webkit-background-clip: border-box;
            background-clip: border-box;
    -webkit-text-fill-color: var(--cards-title-to, #cccccc);
    color:                   var(--cards-title-to, #cccccc);
}

.gtea-cards__item-title--gradient .gtea-cards__title-space--visible {
    color: var(--cards-title-to, #cccccc);
}