/* =============================================================================
 * Embla Carousel — shared styles for the homepage carousels
 * -----------------------------------------------------------------------------
 * Slide WIDTH is set here in CSS (not in JS). Embla measures it with a
 * ResizeObserver and recalculates snaps automatically, so the same JS works
 * for every breakpoint. Reuse this for all three widgets — just wrap each one
 * in the .embla / .embla__viewport / .embla__container / .embla__slide markup.
 * ========================================================================== */

.embla {
    position: relative;
    --embla-gap: 0.75rem;          /* matches your old .featured-news-container gap */
}

.embla__viewport {
    overflow: hidden;
}

.embla__container {
    display: flex;
    touch-action: pan-y pinch-zoom;            /* lets the page scroll vertically while dragging */
    margin-left: calc(var(--embla-gap) * -1);  /* gap compensation (paired with slide padding) */
    max-width: 85dvw;
}

.cat-embla__container {
    display: flex;
    touch-action: pan-y pinch-zoom;
    margin-left: -4px;
}

.embla__slide {
    flex: 0 0 36%; /* DESKTOP: 3 visible */
    min-width: 0;
    padding-left: var(--embla-gap);
}

/* TABLET: 2.5 visible — the half-card invites the swipe */
@media (max-width: 992px) {
    .embla__slide { flex: 0 0 40%; }
}

/* MOBILE: 1.5 visible */
@media (max-width: 576px) {
    .embla__slide { flex: 0 0 60%; }
    
}

/* -----------------------------------------------------------------------------
 * Make the EXISTING featured card fill its slide.
 * Scoped under .embla (specificity 0,2,0) so it beats the standalone
 * .featured-news-card rules — including the mobile min/max-width overrides —
 * without needing !important.
 * ------------------------------------------------------------------------- */
.embla .featured-news-card {
    max-width: none;
    min-width: 0;
    width: 100%;
    height: 300px;
}
/* ---- Arrows ---------------------------------------------------------------- */
.embla__prev,
.embla__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--jj-first, #3ba095);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6;
    /*box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);*/
    border: 1px solid white;
    transition: background 0.2s ease;
}

.embla__prev:hover,
.embla__next:hover { background: #317e76; }

.embla__prev:focus-visible,
.embla__next:focus-visible { outline: 2px solid #041e45; outline-offset: 2px; }

.embla__prev { left: -8px; }
.embla__next { right: -8px; }

/* ---- Dots ------------------------------------------------------------------ */
.embla__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1rem;
}

.embla__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #a0abf05c;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.embla__dot--selected {
    background: var(--jj-first, #3ba095);
    transform: scale(1.25);
}

/* On touch / small screens, hide arrows — swipe + dots take over */
@media (max-width: 768px) {
    .embla__prev,
    .embla__next { display: none; }
}

/* Respect reduced-motion preferences 
@media (prefers-reduced-motion: reduce) {
    .embla__container { scroll-behavior: auto; }
}*/

/* =============================================================================
 * Library category strip — 5.5 cards desktop | 3.5 tablet | 2.5 mobile
 * ========================================================================== */

.category-embla {
    --embla-gap: 1.25rem;
    max-width: 95dvw;
    margin: 0 auto 30px;
}

/* DESKTOP: 5.5 visible  (100 / 5.5 = 18.182%) */
.category-embla .embla__slide { flex: 0 0 14.182%; }

/* TABLET: 3.5 visible  (100 / 3.5 = 28.571%) */
@media (max-width: 992px) {
    .category-embla .embla__slide { flex: 0 0 15%; }
}

/* TABLET: 3.5 visible  (100 / 3.5 = 28.571%) */
@media (max-width: 780px) {
    .category-embla .embla__slide { flex: 0 0 18%; }
}

/* MOBILE: 2.5 visible  (100 / 2.5 = 40%) */
@media (max-width: 576px) {
    .category-embla .embla__slide { flex: 0 0 24%; }
}

/* MOBILE: 2.5 visible  (100 / 2.5 = 40%) */
@media (max-width: 480px) {
    .category-embla .embla__slide { flex: 0 0 30%; }
}

/* MOBILE: 2.5 visible  (100 / 2.5 = 40%) */
@media (max-width: 380px) {
    .category-embla .embla__slide { flex: 0 0 37%; }
}

/* Let the slide flex-basis drive the width.
 * The standalone .category-item rule sets min-width:100px, which would fight
 * Embla's measurement — neutralise it inside the carousel. */
.category-embla .category-item {
    min-width: 0;
    width: 100%;
}

/* =============================================================================
 * Ebay Carousel strip 
 * ========================================================================== */
.ebay-embla .embla__slide { flex: 0 0 28.5% ;}

@media (max-width: 768px) {
    .ebay-embla .embla__slide {   flex: 0 0 35.15% !important;}
}
@media (max-width: 576px) {
    .ebay-embla .embla__slide {   flex: 0 0 61% !important;}
}

/* =============================================================================
 * Ebay Carousel strip 
 * ========================================================================== */
.collection-embla .embla__slide { flex: 0 0 31% !important;}

@media (max-width: 768px) {
    .embla.collection-embla {  max-width: 83dvw;   min-width: 0;}     
}
@media (max-width: 576px) {
    .collection-embla .embla__slide{ flex: 0 0 47% !important;}
    .embla .featured-news-card {  height: 270px;}
}