/* =========================================================
   GALLERY BLOCK — BEM
   Dark bg | Centered header | Full-width fan-rotation image strip
   ========================================================= */

.smartfix-gallery {
    background: var(--sf-bg-dark-1);
    padding: var(--sf-padding-section) 0;
    overflow: hidden;
}

/* =========================================================
   CENTERED HEADER
   ========================================================= */

.smartfix-gallery__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    margin-bottom: 56px;
    padding: 0 90px;
}

.smartfix-gallery__tag {
    font-size: 13px;
    letter-spacing: 0.12em;
}

.smartfix-gallery__headline {
    font-family: var(--sf-font-heading);
    font-weight: 700;
    font-size: var(--sf-fs-h2);
    line-height: 1.1;
    color: var(--sf-text-white);
    margin: 0;
    max-width: 760px;
}

.smartfix-gallery__headline-line2 {
    display: block;
    color: var(--sf-color-primary);
}

.smartfix-gallery__sub {
    font-family: var(--sf-font-body);
    font-size: var(--sf-fs-body);
    line-height: var(--sf-lh-body);
    color: var(--sf-text-white-72);
    margin: 0;
    max-width: 680px;
}

.smartfix-gallery__sub p {
    margin: 0;
}

/* =========================================================
   CONCAVE BOWL STRIP
   ========================================================= */

/* Wrapper: overflow hidden to clip images, inset shadow for L/R dark fade */
.smartfix-gallery__strip-wrap {
    position: relative;
    overflow: hidden;
    margin: 0 80px 8px;
    box-shadow:
        inset 100px 0 80px var(--sf-bg-dark-1),
        inset -100px 0 80px var(--sf-bg-dark-1);
}

/* TOP dark ellipse — curves DOWN into the image (concave top) */
.smartfix-gallery__strip-wrap::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -8%;
    width: 116%;
    height: 155px;
    background: var(--sf-bg-dark-1);
    border-radius: 0 0 50% 50%;
    z-index: 3;
    pointer-events: none;
}

/* BOTTOM dark ellipse — curves UP into the image (concave bottom) */
.smartfix-gallery__strip-wrap::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -8%;
    width: 116%;
    height: 155px;
    background: var(--sf-bg-dark-1);
    border-radius: 50% 50% 0 0;
    z-index: 3;
    pointer-events: none;
}

/* Inner row — horizontal scroll-snap carousel track.
   --sf-gal-per-view controls visible items: 5 / 4 / 3 / 2 by breakpoint
   (keep in sync with galleryPerView() in assets/js/main.js). The
   per-project modal reuses this strip markup but shows one image at a
   time — see .smartfix-project-modal in blocks/projects.css. */
.smartfix-gallery {
    --sf-gal-per-view: 5;
    --sf-gal-gap: 15px;
}

.smartfix-gallery__strip {
    display: flex;
    gap: var(--sf-gal-gap);
    align-items: stretch;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.smartfix-gallery__strip::-webkit-scrollbar {
    display: none;
}

/* Each slide: fixed fraction of the track so N items are visible */
.smartfix-gallery__slide {
    flex: 0 0 calc((100% - var(--sf-gal-gap) * (var(--sf-gal-per-view) - 1)) / var(--sf-gal-per-view));
    scroll-snap-align: start;
    overflow: hidden;
    margin: 0;
    cursor: pointer;
}

.smartfix-gallery__img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: opacity 0.25s ease;
}

.smartfix-gallery__slide:hover .smartfix-gallery__img {
    opacity: 0.85;
}

/* =========================================================
   CAROUSEL CONTROLS — prev | dots | next, centered row
   ========================================================= */

.smartfix-gallery__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 28px;
    padding: 0 20px;
}

.smartfix-gallery__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: var(--sf-text-white);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.smartfix-gallery__nav:hover,
.smartfix-gallery__nav:focus-visible {
    background: var(--sf-color-primary);
    border-color: var(--sf-color-primary);
    color: var(--sf-text-white);
}

.smartfix-gallery__nav:focus-visible {
    outline: 2px solid var(--sf-text-white);
    outline-offset: 2px;
}

.smartfix-gallery__nav[disabled] {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.smartfix-gallery__nav svg {
    display: block;
    flex-shrink: 0;
}

.smartfix-gallery__dots {
    display: flex;
    align-items: center;
    gap: 10px;
}

.smartfix-gallery__dot {
    width: 9px;
    height: 9px;
    border-radius: 100px;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: background-color 0.25s ease, width 0.25s ease;
}

.smartfix-gallery__dot--active {
    background: var(--sf-color-primary);
    width: 24px;
}

.smartfix-gallery__dot:focus-visible {
    outline: 2px solid var(--sf-color-primary);
    outline-offset: 2px;
}

/* =========================================================
   CAPTION BELOW STRIP
   ========================================================= */

.smartfix-gallery__caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 32px;
    min-height: 52px;
    padding: 0 90px;
}

.smartfix-gallery__caption-title {
    font-family: var(--sf-font-heading);
    font-weight: 700;
    font-size: 20px;
    color: var(--sf-text-white);
    margin: 0;
    text-align: center;
}

.smartfix-gallery__caption-sub {
    font-family: var(--sf-font-body);
    font-size: var(--sf-fs-body);
    color: var(--sf-text-white-72);
    margin: 0;
    text-align: center;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1439px) {
    .smartfix-gallery {
        --sf-gal-per-view: 4;
    }
}

@media (max-width: 1280px) {
    .smartfix-gallery__headline {
        font-size: clamp(30px, 4vw, var(--sf-fs-h2));
    }

    .smartfix-gallery__img {
        height: 340px;
    }
}

@media (max-width: 1023px) {
    .smartfix-gallery {
        --sf-gal-per-view: 3;
    }
}

@media (max-width: 767px) {
    .smartfix-gallery {
        --sf-gal-per-view: 2;
    }
}

@media (max-width: 834px) {
    .smartfix-gallery {
        padding: 48px 0;
    }

    .smartfix-gallery__header,
    .smartfix-gallery__caption {
        padding: 0 20px;
    }

    .smartfix-gallery__headline {
        font-size: 26px;
    }

    .smartfix-gallery__strip-wrap::before {
        height: 60px;
        top: -36px;
    }

    .smartfix-gallery__strip-wrap::after {
        height: 60px;
        bottom: -36px;
    }

    .smartfix-gallery__strip-wrap {
        box-shadow:
            inset 40px 0 40px var(--sf-bg-dark-1),
            inset -40px 0 40px var(--sf-bg-dark-1);
    }

    .smartfix-gallery__img {
        height: 220px;
    }
}

@media (max-width: 480px) {
    .smartfix-gallery__strip-wrap {
        border-radius: 50% / 14px;
        margin: 0 20px 8px;
    }

    .smartfix-gallery__img {
        height: 240px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .smartfix-gallery__strip {
        scroll-behavior: auto;
    }

    .smartfix-gallery__img,
    .smartfix-gallery__nav,
    .smartfix-gallery__dot {
        transition: none;
    }
}

@media (max-width: 375px) {
    .smartfix-gallery__header,
    .smartfix-gallery__caption {
        padding: 0 16px;
    }
}

/* Primary + WhatsApp CTA row — centered under header */
.smartfix-gallery__cta-group {
    justify-content: center;
}