/* ================================================================
   Scrolling Images Component — Manual Scroll Rows
   Covers: Awards & Recognitions row · Patient Stories row
   Rows scroll only on arrow click (no auto-scroll animation).
   ================================================================ */


/* ─────────────────────────────────────────
   1. SECTION SHELL
   ───────────────────────────────────────── */
.achievements-section {
    overflow: hidden;
    padding-bottom: 0;
}

.achievements-section .section-desc {
    max-width: 560px;
    margin: 0 auto 40px;
    color: var(--gray-600, #6b7280);
}


/* ─────────────────────────────────────────
   2. MANUAL SCROLL ROW + SIDE ARROWS
   ───────────────────────────────────────── */
.scroll-track-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.scroll-track-controls .achievements-track-wrapper {
    flex: 1;
    min-width: 0;
}

/* Outer wrapper — manual horizontal scroll, native scrollbar hidden */
.achievements-track-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    width: 100%;
    padding: 8px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Fade the edges so partially-visible items trail off cleanly */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.achievements-track-wrapper::-webkit-scrollbar {
    display: none;
}

/* The row */
.achievements-track {
    display: flex;
    gap: 20px;
    width: max-content;
}

/* Side arrow buttons */
.scroll-arrow {
    flex-shrink: 0;
    /* Sit above any decorative section background that bleeds across a
       section edge, so those can never swallow the tap. */
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(var(--primary-rgb, 233,106,117), 0.25);
    color: #6E3D68;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.scroll-arrow i {
    font-size: 15px;
}

.scroll-arrow:hover {
    background: #6E3D68;
    color: #fff;
    box-shadow: 0 6px 20px rgba(110, 61, 104, 0.25);
}

.scroll-arrow:active {
    transform: scale(0.94);
}

.scroll-arrow:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
    box-shadow: none;
}

/* Row already fits entirely — hide the arrows rather than leaving
   disabled buttons that look clickable but do nothing. */
.scroll-track-controls--static .scroll-arrow {
    display: none;
}

/* ...and with nothing to scroll, centre the row instead of leaving it
   pinned left against dead space, and drop the edge fade, which would
   otherwise clip the first and last image for no reason. */
.scroll-track-controls--static .achievements-track {
    margin-left: auto;
    margin-right: auto;
}

.scroll-track-controls--static .achievements-track-wrapper {
    -webkit-mask-image: none;
    mask-image: none;
}

@media (max-width: 575.98px) {
    .scroll-track-controls {
        gap: 8px;
    }

    .scroll-arrow {
        width: 34px;
        height: 34px;
    }

    .scroll-arrow i {
        font-size: 12px;
    }
}


/* ─────────────────────────────────────────
   3. INDIVIDUAL IMAGE TILE
   ───────────────────────────────────────── */
.ach-item {
    flex-shrink: 0;
    width: 160px; /* 4:3 aspect ratio matching the image frames */
    height: 120px;
    border-radius: 12px; /* rounded rectangle corners */
    overflow: hidden;
    border: 2px solid rgba(var(--primary-rgb, 233,106,117), 0.15);
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ach-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 28px rgba(0,0,0,0.14);
}

.ach-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* fill the rectangle frame edge-to-edge */
    padding: 0; /* remove padding to match the image ratio perfectly */
}


/* ─────────────────────────────────────────
   4. PATIENT STORIES SECTION SPACING
   ───────────────────────────────────────── */
/* These two decorative images are positioned absolute with z-index:-1 and
   bottom:-20%, so they bleed up out of their own section. The Awards
   section above establishes no stacking context, so on narrow screens
   .testimonial-bg-02 was landing on top of the Awards row's arrow buttons
   and swallowing every tap — invisible, but still the hit-test winner.
   They are purely decorative (alt="bg"), so they should never be a target. */
.testimonial-bg-01,
.testimonial-bg-02 {
    pointer-events: none;
}

/* Spacing optimization for Patient Stories section containing only the scrolling track */
#stories-section.testimonial-section-ten {
    padding-bottom: 10px !important;
}

#stories-section.testimonial-section-ten .scroll-track-controls {
    margin-bottom: 0 !important;
}