/* ==========================================================================
   Widget: Icon Cards Carousel
   BEM root: .gtea-icon-cards-carousel
   ========================================================================== */

/* ── Root ─────────────────────────────────────────────────────────── */
.gtea-icon-cards-carousel {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* ── Viewport — Embla viewport ───────────────────────────────────── */
.gtea-icon-cards-carousel__viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

/* ── Edge fade — left/right gradient overlays ────────────────────── */
/* Widths and colors come from the Edge fade controls (CSS vars set   */
/* on the root and inherited here). Default width 0 = no fade.        */
.gtea-icon-cards-carousel__viewport::before,
.gtea-icon-cards-carousel__viewport::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
}

.gtea-icon-cards-carousel__viewport::before {
    left: 0;
    width: var(--gtea-icc-fade-start, 0px);
    background: linear-gradient(to right, var(--gtea-icc-fade-color-start, transparent), transparent);
}

.gtea-icon-cards-carousel__viewport::after {
    right: 0;
    width: var(--gtea-icc-fade-end, 0px);
    background: linear-gradient(to left, var(--gtea-icc-fade-color-end, transparent), transparent);
}

/* ── Container — Embla container ─────────────────────────────────── */
.gtea-icon-cards-carousel__container {
    display: flex;
    flex-direction: row;
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
}

/* ── Slide — Embla slide ─────────────────────────────────────────── */
/* flex-basis is set by Elementor responsive selector (calc 100%/N).  */
.gtea-icon-cards-carousel__slide {
    flex: 0 0 calc(100% / 3);
    max-width: calc(100% / 3);
    min-width: 0;
    box-sizing: border-box;
    /* Flex column so the card is a flex item: this lets the card's     */
    /* Margin control (incl. bottom) reserve space inside the slide.   */
    /* With the old `height:100%` the card filled the whole slide and   */
    /* the bottom margin had no room, so it collapsed and the card's    */
    /* box-shadow got clipped by the viewport's overflow:hidden.        */
    display: flex;
    flex-direction: column;
}

/* ── Card ────────────────────────────────────────────────────────── */
.gtea-icon-cards-carousel__card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    box-sizing: border-box;
}

/* ── Card body ───────────────────────────────────────────────────── */
/* Wraps header-row, content, image-wrapper and cta-wrap so a body    */
/* padding control can pad the text area independently. The image    */
/* breaks out of the body horizontal padding via negative margins so  */
/* it keeps the full card width.                                      */
.gtea-icon-cards-carousel__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    box-sizing: border-box;
}

.gtea-icon-cards-carousel__body .gtea-icon-cards-carousel__image-wrapper {
    margin-left: calc(-1 * var(--icc-body-pl, 0px));
    margin-right: calc(-1 * var(--icc-body-pr, 0px));
    width: calc(100% + var(--icc-body-pl, 0px) + var(--icc-body-pr, 0px));
    max-width: calc(100% + var(--icc-body-pl, 0px) + var(--icc-body-pr, 0px));
}

/* ── Header row (icon + badge) ───────────────────────────────────── */
.gtea-icon-cards-carousel__header-row {
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Layout modifiers — driven by the 'header_layout' control */
.gtea-icon-cards-carousel__header-row--row {
    flex-direction: row;
}

.gtea-icon-cards-carousel__header-row--row-reverse {
    flex-direction: row-reverse;
}

.gtea-icon-cards-carousel__header-row--column {
    flex-direction: column;
    align-items: flex-start;
}

.gtea-icon-cards-carousel__header-row--column-reverse {
    flex-direction: column-reverse;
    align-items: flex-start;
}

/* ── Icon ────────────────────────────────────────────────────────── */
.gtea-icon-cards-carousel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    line-height: 1;
}

.gtea-icon-cards-carousel__icon svg,
.gtea-icon-cards-carousel__icon img {
    display: block;
}

/* ── Badge ───────────────────────────────────────────────────────── */
.gtea-icon-cards-carousel__badge {
    display: inline-block;
    box-sizing: border-box;
    line-height: 1;
}

/* ── Content ─────────────────────────────────────────────────────── */
.gtea-icon-cards-carousel__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-sizing: border-box;
}

/* ── Title ───────────────────────────────────────────────────────── */
.gtea-icon-cards-carousel__title {
    margin: 0;
    box-sizing: border-box;
}

/* ── Description ─────────────────────────────────────────────────── */
.gtea-icon-cards-carousel__desc {
    margin: 0;
    box-sizing: border-box;
}

/* ── Card image ───────────────────────────────────────────────────── */
.gtea-icon-cards-carousel__image-wrapper {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.gtea-icon-cards-carousel__image {
    display: block;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    transition: all 300ms ease-in-out;
}

/* ── CTA wrap ────────────────────────────────────────────────────── */
.gtea-icon-cards-carousel__cta-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    box-sizing: border-box;
}

/* ── CTA links — base blocks rendered by GteaHelperCta ──────────── */
/* gtea-icc-cta-1 / gtea-icc-cta-2 are short alias blocks for the   */
/* helper; they mirror the .gtea-cta pattern from widget-cta.css.    */
.gtea-icc-cta-1,
.gtea-icc-cta-2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
}

/* Icon wrap */
.gtea-icc-cta-1__icon-wrap,
.gtea-icc-cta-2__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.gtea-icc-cta-1__icon-wrap svg,
.gtea-icc-cta-2__icon-wrap svg {
    width: 16px;
    height: 16px;
}

/* Icon clip — rendered only when an animation type is active */
.gtea-icc-cta-1__icon-clip,
.gtea-icc-cta-2__icon-clip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

/* Primary and clone icons */
.gtea-icc-cta-1__icon,
.gtea-icc-cta-2__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gtea-icc-cta-1__icon--clone,
.gtea-icc-cta-2__icon--clone {
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
}

/* Animation: slide — clip overflow */
.gtea-icc-cta-1__icon-wrap--anim-slide .gtea-icc-cta-1__icon-clip,
.gtea-icc-cta-2__icon-wrap--anim-slide .gtea-icc-cta-2__icon-clip {
    overflow: hidden;
}

/* Animation: slide — transitions */
.gtea-icc-cta-1__icon-wrap--anim-slide .gtea-icc-cta-1__icon:not(.gtea-icc-cta-1__icon--clone),
.gtea-icc-cta-2__icon-wrap--anim-slide .gtea-icc-cta-2__icon:not(.gtea-icc-cta-2__icon--clone) {
    transition: transform var(--gtea-icon-anim-duration, 300ms) cubic-bezier(0.4, 0, 0.2, 1);
}

.gtea-icc-cta-1__icon-wrap--anim-slide .gtea-icc-cta-1__icon--clone,
.gtea-icc-cta-2__icon-wrap--anim-slide .gtea-icc-cta-2__icon--clone {
    transition: transform var(--gtea-icon-anim-duration, 300ms) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover trigger */
.gtea-icc-cta-1:hover .gtea-icc-cta-1__icon-wrap--anim-slide.gtea-icc-cta-1__icon-wrap--on-hover .gtea-icc-cta-1__icon:not(.gtea-icc-cta-1__icon--clone),
.gtea-icc-cta-2:hover .gtea-icc-cta-2__icon-wrap--anim-slide.gtea-icc-cta-2__icon-wrap--on-hover .gtea-icc-cta-2__icon:not(.gtea-icc-cta-2__icon--clone) {
    transform: translateX(110%);
}

.gtea-icc-cta-1:hover .gtea-icc-cta-1__icon-wrap--anim-slide.gtea-icc-cta-1__icon-wrap--on-hover .gtea-icc-cta-1__icon--clone,
.gtea-icc-cta-2:hover .gtea-icc-cta-2__icon-wrap--anim-slide.gtea-icc-cta-2__icon-wrap--on-hover .gtea-icc-cta-2__icon--clone {
    transform: translateX(0);
}

/* Focus trigger */
.gtea-icc-cta-1:focus .gtea-icc-cta-1__icon-wrap--anim-slide.gtea-icc-cta-1__icon-wrap--on-focus .gtea-icc-cta-1__icon:not(.gtea-icc-cta-1__icon--clone),
.gtea-icc-cta-2:focus .gtea-icc-cta-2__icon-wrap--anim-slide.gtea-icc-cta-2__icon-wrap--on-focus .gtea-icc-cta-2__icon:not(.gtea-icc-cta-2__icon--clone) {
    transform: translateX(110%);
}

.gtea-icc-cta-1:focus .gtea-icc-cta-1__icon-wrap--anim-slide.gtea-icc-cta-1__icon-wrap--on-focus .gtea-icc-cta-1__icon--clone,
.gtea-icc-cta-2:focus .gtea-icc-cta-2__icon-wrap--anim-slide.gtea-icc-cta-2__icon-wrap--on-focus .gtea-icc-cta-2__icon--clone {
    transform: translateX(0);
}

/* ── Navigation container — Carousel controls bar ────────────────── */
/* Structure and base styles mirror the Testimonials Carousel so the    */
/* shared "Carousel controls" / "Carousel dots" style controls apply.   */
.gtea-icon-cards-carousel__nav {
    box-sizing: border-box;
    width: 100%;
}

/* ── Carousel controls ───────────────────────────────────────────── */
.gtea-icon-cards-carousel .embla__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
}

.gtea-icon-cards-carousel .embla__buttons {
    display: flex;
    gap: 8px;
    box-sizing: border-box;
}

.gtea-icon-cards-carousel .embla__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    box-sizing: border-box;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.gtea-icon-cards-carousel .embla__button:disabled,
.gtea-icon-cards-carousel .embla__button[aria-disabled="true"] {
    opacity: 0.3;
    cursor: default;
}

.gtea-icon-cards-carousel .embla__button svg {
    display: block;
    pointer-events: none;
}

/* ── Carousel dots ───────────────────────────────────────────────── */
.gtea-icon-cards-carousel .embla__dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    box-sizing: border-box;
}

.gtea-icon-cards-carousel .embla__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 200ms ease, border-color 200ms ease, width 200ms ease, height 200ms ease;
}