/**
 * Archihub — Professionals Grid Carousel
 *
 * Converts .wr-freelancers-grid-wrapper.ah4-grid from a static CSS Grid
 * into a Swiper.js horizontal scroll carousel.
 *
 * Scope: only elements inside .archihub-professionals-swiper — zero bleed
 * onto other grid widgets or the existing ah4-card internals.
 *
 * @since      1.8.3
 * @version    1.8.3 — Rewritten: pre-init clamping, slide width fix, arrow fix.
 */

/* ─── Pre-init: hide overflow while JS hasn't run yet ───────────────────── */

/*
 * Before JS runs, Elementor's inline style="display:grid; grid-template-columns:repeat(4,1fr)"
 * would cause cards to wrap into rows. We neutralise that here.
 *
 * IMPORTANT: we do NOT set a width or flex-shrink here — we let cards keep
 * their natural width. overflow:hidden on the wrapper clips anything that
 * overflows. Once Swiper boots it takes full control of widths via its own
 * inline styles on each .swiper-slide.
 *
 * Scoped to .ah4-grid — no other grid widget is affected.
 */
.ah4-grid .wr-freelancers-grid-items {
    display: flex !important;       /* override Elementor's inline display:grid  */
    flex-wrap: nowrap !important;   /* single row — no wrapping at all           */
    overflow: hidden;               /* clip cards that overflow before Swiper    */
}

/* ─── Swiper outer container ─────────────────────────────────────────────── */

.ah4-grid .archihub-professionals-swiper {
    overflow: hidden;   /* Swiper's own clip boundary */
    width: 100%;
    position: relative; /* required for absolute-positioned arrows */
    outline: none;
}

/* ─── Swiper wrapper (post-init) ─────────────────────────────────────────── */

.ah4-grid .wr-freelancers-grid-items.swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    overflow: visible;  /* Swiper parent clips — wrapper must not clip */
    /* Neutralise any grid-template-columns Workreap may inject */
    grid-template-columns: unset !important;
}

/* Hide scrollbar on the swiper track (all browsers) */
.ah4-grid .archihub-professionals-swiper .swiper-wrapper {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.ah4-grid .archihub-professionals-swiper .swiper-wrapper::-webkit-scrollbar {
    display: none;
}

/* ─── Individual slide ───────────────────────────────────────────────────── */

/*
 * Swiper sets explicit width on each .swiper-slide via inline style.
 * height:auto + align-items:stretch on the wrapper gives equal card heights.
 */
.ah4-grid .archihub-professionals-swiper .swiper-slide {
    height: auto;
    box-sizing: border-box;
    /* Prevent any inherited min-width from collapsing the slide */
    min-width: 0;
    flex-shrink: 0;
}

.ah4-grid .archihub-professionals-swiper .swiper-slide .wr-freelancers-grid-item.ah4-card {
    height: 100%;
}

/* ─── Navigation arrows ──────────────────────────────────────────────────── */

/*
 * Arrows are always rendered in the DOM (Swiper needs them to exist).
 * On mobile/tablet we hide them — swipe gesture is the interaction.
 * On desktop (≥1024px) we show them as circular buttons.
 *
 * Position: absolute, vertically centred within the swiper container.
 * The wrapper gets horizontal padding on desktop to prevent arrows
 * from overlapping the first/last card.
 */
.archihub-professionals-swiper .swiper-button-prev,
.archihub-professionals-swiper .swiper-button-next {
    display: none;
}

@media (min-width: 1024px) {
    .archihub-professionals-swiper .swiper-button-prev,
    .archihub-professionals-swiper .swiper-button-next {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
        cursor: pointer;
        /* Swiper sets --swiper-navigation-color; override with theme colour */
        --swiper-navigation-color: var(--themecolor, #12cdd4);
        --swiper-navigation-size: 18px;
        transition: background 0.2s ease, box-shadow 0.2s ease;
        /* Ensure Swiper's own margin:auto doesn't mis-position them */
        margin-top: 0;
    }

    .archihub-professionals-swiper .swiper-button-prev:hover,
    .archihub-professionals-swiper .swiper-button-next:hover {
        background: var(--themecolor, #12cdd4);
        --swiper-navigation-color: #fff;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    }

    .archihub-professionals-swiper .swiper-button-prev {
        left: 4px;
    }
    .archihub-professionals-swiper .swiper-button-next {
        right: 4px;
    }
}

/* ─── Disabled arrow state ───────────────────────────────────────────────── */

.archihub-professionals-swiper .swiper-button-prev.swiper-button-disabled,
.archihub-professionals-swiper .swiper-button-next.swiper-button-disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* ─── Wrapper padding — make room for the arrows on desktop ─────────────── */

@media (min-width: 1024px) {
    .ah4-grid .wr-freelancers-grid-wrapper {
        padding-left: 32px;
        padding-right: 32px;
    }
}