/* ==========================================================================

   Hubase Elementor widgets — carousel + gallery

   Card visuals come from hubase-frontend.css (+ generated overrides);

   this file only handles widget layout and controls.

   ========================================================================== */



/* ============ Carousel ============ */



.hubase-carousel {

    position: relative;

}

.hubase-carousel__viewport {

    overflow: hidden;

    touch-action: pan-y;

    cursor: grab;

}

.hubase-carousel__viewport.is-dragging {

    cursor: grabbing;

    user-select: none;

}

/* The track also carries the archive wrapper class (e.g. .hubase-archive-grid)

   so cards inherit their exact archive styling; these rules re-assert the

   carousel layout over the wrapper's flex-wrap grid / column list rules. */

.hubase-carousel .hubase-carousel__track {

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    align-items: stretch;

    will-change: transform;

}

.hubase-carousel .hubase-carousel__slide {

    flex: 0 0 auto;

    min-width: 0;

    display: flex;

    flex-direction: column;

}

/* Cards fill the slide (equal height across the carousel), overriding the

   archive's per-card width rules (e.g. width: calc(50% - 20px)). */

.hubase-carousel .hubase-carousel__slide > article {

    flex: 1 1 auto;

    width: 100%;

    max-width: 100%;

    margin: 0;

    box-sizing: border-box;

}

.hubase-carousel__viewport.is-dragging .hubase-carousel__slide img {

    pointer-events: none;

}



/* Arrows */

.hubase-carousel__arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 42px;

    height: 42px;

    padding: 0;

    border: 1px solid rgba(0, 0, 0, 0.12);

    border-radius: 50%;

    background: #fff;

    color: #333;

    cursor: pointer;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    transition: opacity 0.2s ease, background-color 0.2s ease;

}

.hubase-carousel__arrow:disabled {

    opacity: 0.35;

    cursor: default;

}

.hubase-carousel__arrow::before {

    content: '';

    display: block;

    width: 9px;

    height: 9px;

    border-top: 2px solid currentColor;

    border-right: 2px solid currentColor;

}

.hubase-carousel__arrow--prev {

    inset-inline-start: -14px;

}

.hubase-carousel__arrow--next {

    inset-inline-end: -14px;

}

/* Chevron directions: prev points to inline-start, next to inline-end. */

.hubase-carousel__arrow--prev::before {

    transform: rotate(-135deg);

    margin-inline-start: 3px;

}

.hubase-carousel__arrow--next::before {

    transform: rotate(45deg);

    margin-inline-end: 3px;

}

[dir="rtl"] .hubase-carousel__arrow--prev::before {

    transform: rotate(45deg);

    margin-inline-start: 0;

    margin-inline-end: 3px;

}

[dir="rtl"] .hubase-carousel__arrow--next::before {

    transform: rotate(-135deg);

    margin-inline-end: 0;

    margin-inline-start: 3px;

}



/* Dots */

.hubase-carousel__dots {

    display: flex;

    justify-content: center;

    gap: 8px;

    margin-top: 18px;

}

.hubase-carousel__dot {

    width: 9px;

    height: 9px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.2);

    cursor: pointer;

    transition: background-color 0.2s ease, transform 0.2s ease;

}

.hubase-carousel__dot.is-active {

    background: var(--hubase-primary, #0073aa);

    transform: scale(1.25);

}



/* ============ Gallery ============ */



/* The grid also carries the archive wrapper class (e.g. .hubase-archive-grid)

   so cards inherit their exact archive styling; these rules re-assert the

   gallery's grid layout over the wrapper's flex rules. */

.hubase-el-gallery .hubase-el-gallery__grid {

    display: grid;

    grid-template-columns: repeat(var(--hubase-el-cols, 3), minmax(0, 1fr));

    gap: var(--hubase-el-row-gap, 40px) var(--hubase-el-col-gap, 20px);

    align-items: stretch;

}

/* Cards fill their grid cell (equal height per row), overriding the

   archive's per-card width rules (e.g. width: calc(50% - 20px)). */

.hubase-el-gallery .hubase-el-gallery__grid > article {

    width: 100%;

    max-width: 100%;

    height: 100%;

    margin: 0;

    box-sizing: border-box;

}

.hubase-el-gallery__more {

    display: flex;

    justify-content: center;

    margin-top: 32px;

}

.hubase-el-gallery__btn {

    padding: 10px 28px;

    border: 0;

    border-radius: 4px;

    background: var(--hubase-primary, #0073aa);

    color: #fff;

    font-size: 15px;

    cursor: pointer;

    transition: opacity 0.2s ease, background-color 0.2s ease;

}

.hubase-el-gallery__btn.is-loading {

    opacity: 0.6;

    pointer-events: none;

}



/* ============ Shared ============ */



/* Generic fallback card (content types without a card part). */

.hubase-el-card .hubase-archive-card__image {

    display: block;

    overflow: hidden;

    border-radius: 5px;

    aspect-ratio: 4 / 3;

}

.hubase-el-card .hubase-archive-card__image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.hubase-el-card .hubase-archive-card__body {

    padding: 15px 0;

}



/* "Show tags" toggle off — hide the category/tag chips on cards. Applied on

   the widget root, so it also covers cards appended by the AJAX load-more. */

.hubase-el--no-tags .hubase-archive-card__terms,

.hubase-el--no-tags .hubase-cs-card__tags,

.hubase-el--no-tags .hubase-service-card__tags,

.hubase-el--no-tags .hubase-solution-card__tags {

    display: none;

}



/* Editor-only placeholder. */

.hubase-el-empty {

    padding: 24px;

    text-align: center;

    border: 1px dashed #c3c4c7;

    border-radius: 6px;

    color: #787878;

    font-size: 14px;

}