/* ============================================================
   NGP Featured — carousel container
   ============================================================ */
.ngp-featured {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    /* Container query : card widths are computed from THIS box, not from the track. */
    container-type: inline-size;
}
.ngp-featured *,
.ngp-featured *::before,
.ngp-featured *::after {
    box-sizing: inherit;
}

/* JS off / pre-boot fallback : native horizontal scroll, vertical page scroll preserved. */
.ngp-featured__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}
.ngp-featured.is-enhanced .ngp-featured__viewport {
    overflow: hidden;
}
.ngp-featured__viewport.is-dragging {
    cursor: grabbing;
}

.ngp-featured__track {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
    will-change: transform;
}

/* Pause on hover (CSS-driven, even if animation is JS-injected) */
.ngp-featured:hover .ngp-featured__track,
.ngp-featured__viewport.is-dragging .ngp-featured__track {
    animation-play-state: paused !important;
}

/* ============================================================
   Card — width pinned to the OUTER container (.ngp-featured), not the track.
   `cqi` = container query inline size of the nearest ancestor with container-type.
   ============================================================ */
.ngp-featured__card {
    list-style: none;
    margin: 0;
    padding: 10px;
    background: #F7F7F7;
    border-radius: 8px;
    flex: 0 0 calc((100cqi - 112px) / 8) !important; /* 8 cards desktop, 7 × 16px gap */
}

.ngp-featured__card-link {
    display: block;
    text-decoration: none;
    color: #232C35;
}

.ngp-featured__card-image {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #E5E5E5;
    border-radius: 8px;
}
.ngp-featured__card-image .ngp-featured__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ngp-featured__card-image .is-placeholder {
    position: absolute;
    inset: 0;
    background: #E5E5E5;
}

.ngp-featured__card-title {
    display: block;
    margin-top: 10px;
    font-family: "Bungee", sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #232C35;
    line-height: 1.3;
    text-align: center;
}

/* ============================================================
   Responsive : 8 desktop, 6 tablet (≤1024px), 4 mobile (≤768px)
   ============================================================ */
@container (max-width: 1024px) {
    .ngp-featured__card {
        flex: 0 0 calc((100cqi - 80px) / 6) !important; /* 6 cards, 5 × 16px gap */
    }
}
@container (max-width: 768px) {
    .ngp-featured__card {
        flex: 0 0 calc((100cqi - 48px) / 4) !important; /* 4 cards, 3 × 16px gap */
    }
}
/* Viewport-based fallback in case the container-query path is suppressed by a parent style */
@media (max-width: 1024px) {
    .ngp-featured__card {
        flex: 0 0 calc((100% - 80px) / 6) !important;
    }
}
@media (max-width: 768px) {
    .ngp-featured__card {
        flex: 0 0 calc((100% - 48px) / 4) !important;
    }
}

/* ============================================================
   Double-row variant — two tracks stacked, scrolling in opposite directions
   ============================================================ */
/* CSS Grid on the viewport gives the most predictable height when the parent is
   an Elementor flex container : explicit row tracks force the section to grow to
   fit both rows, even when ancestors set min-height:0 or align-items:stretch.
   !important defends against page builder overrides on mobile breakpoints. */
.ngp-featured--double {
    display: block !important;
    height: auto !important;
}
.ngp-featured--double .ngp-featured__viewport {
    display: grid !important;
    grid-template-rows: auto auto;
    gap: 16px;
    height: auto !important;
    align-content: start;
}

/* 6 cards per row on desktop (vs 8 on the single-row variant) */
.ngp-featured--double .ngp-featured__card {
    flex: 0 0 calc((100cqi - 80px) / 6) !important; /* 6 cards, 5 × 16px gap */
}
@container (max-width: 1024px) {
    .ngp-featured--double .ngp-featured__card {
        flex: 0 0 calc((100cqi - 64px) / 5) !important; /* 5 cards tablet */
    }
}
@container (max-width: 768px) {
    .ngp-featured--double .ngp-featured__card {
        flex: 0 0 calc((100cqi - 16px) / 2) !important; /* 2 cards mobile */
    }
}
@media (max-width: 1024px) {
    .ngp-featured--double .ngp-featured__card {
        flex: 0 0 calc((100% - 64px) / 5) !important;
    }
}
@media (max-width: 768px) {
    .ngp-featured--double .ngp-featured__card {
        flex: 0 0 calc((100% - 16px) / 2) !important;
    }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .ngp-featured__track {
        animation: none !important;
    }
}