/* =========================================================
   PROJECTS BLOCK — BEM
   Light bg | Centered header | 3-col portrait cards
   Image: rounded + dark arrow btn top-right | Title + desc below
   ========================================================= */

.smartfix-projects {
    background: var(--sf-bg-light);
    padding: var(--sf-padding-section) 0;
}

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

.smartfix-projects__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    margin-bottom: 48px;
    padding: 0 80px;
}

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

.smartfix-projects__headline {
    font-family: var(--sf-font-heading);
    font-weight: 700;
    font-size: var(--sf-fs-h2);
    line-height: 1.12;
    color: var(--sf-text-dark);
    margin: 0;
    max-width: 800px;
}

.smartfix-projects__headline .sf-highlight {
    color: var(--sf-color-primary);
}

.smartfix-projects__sub {
    font-family: var(--sf-font-body);
    font-size: var(--sf-fs-body);
    line-height: var(--sf-lh-body);
    color: var(--sf-text-muted);
    margin: 0;
    max-width: 860px;
}

.smartfix-projects__sub p {
    margin: 0;
}

/* =========================================================
   SLIDER
   --sf-proj-per-view is fractional on purpose: the partial
   card at the right edge is what signals there is more to
   scroll to. 3.5 / 2.5 / 1.25 by breakpoint — keep in sync
   with projectsPerView() in assets/js/main.js, which rounds
   down to whole cards when deciding how far a page advances.
   ========================================================= */

.smartfix-projects {
    --sf-proj-per-view: 3.5;
    --sf-proj-gap: 24px;
}

.smartfix-projects__grid {
    margin: 0 80px;
}

.smartfix-projects__track {
    display: flex;
    gap: var(--sf-proj-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

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

/* =========================================================
   EACH CARD — a fixed fraction of the track so N.5 are visible
   ========================================================= */

.smartfix-projects__item {
    flex: 0 0 calc(
        (100% - var(--sf-proj-gap) * (var(--sf-proj-per-view) - 1))
        / var(--sf-proj-per-view)
    );
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Image wrap: fixed height (not an aspect ratio, which made the
   card scale wildly with column width — very tall in one column on
   tablet, short on desktop). Combined with object-fit:cover below,
   every card frames its photo identically at any width. ── */
.smartfix-projects__img-wrap {
    position: relative;
    height: 460px;
    border-radius: 16px;
    overflow: hidden;
}

.smartfix-projects__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 16px;
    transition: transform 0.5s ease;
}

.smartfix-projects__item:hover .smartfix-projects__img,
.smartfix-projects__item:focus-within .smartfix-projects__img {
    transform: scale(1.05);
}

/* ── Arrow button: green 101×100 circle SVG, inset top-right ── */
.smartfix-projects__arrow {
    position: absolute;
    top: 12px;
    right: 12px;
    width: clamp(40px, 4vw, 50px);
    display: block;
    text-decoration: none;
    z-index: 1;
    background: none;
    border: 0;
    border-radius: 100px;
    padding: 0;
    cursor: pointer;
}

.smartfix-projects__arrow svg {
    display: block;
    width: 100%;
    height: auto;
}

.smartfix-projects__arrow circle {
    transition: fill 0.25s ease;
}

.smartfix-projects__arrow:hover circle,
.smartfix-projects__arrow:focus-visible circle {
    fill: var(--sf-text-dark);
}

.smartfix-projects__arrow:focus-visible {
    outline: 2px solid var(--sf-text-white);
    outline-offset: 2px;
    border-radius: 50%;
}

/* ── Title + desc below image ── */
.smartfix-projects__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.smartfix-projects__title {
    font-family: var(--sf-font-heading);
    font-weight: 700;
    font-size: 20px;
    color: var(--sf-text-dark);
    margin: 0;
    line-height: 1.25;
}

.smartfix-projects__desc {
    font-family: var(--sf-font-body);
    font-size: var(--sf-fs-body);
    line-height: var(--sf-lh-body);
    color: var(--sf-text-muted);
    margin: 0;
}

.smartfix-projects__desc p {
    margin: 0;
}

/* =========================================================
   SLIDER CONTROLS — reuses .smartfix-gallery__nav/__dot, but
   sits on the light section background here, so the dark/light
   colour scheme flips (same treatment as testimonials).
   ========================================================= */

.smartfix-projects__controls {
    margin-top: 32px;
}

.smartfix-projects__controls .smartfix-gallery__nav {
    border-color: rgba(0, 0, 0, 0.18);
    color: var(--sf-text-dark);
}

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

.smartfix-projects__controls .smartfix-gallery__dot {
    background: rgba(0, 0, 0, 0.18);
}

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

/* =========================================================
   VIEW ALL CTA — centered below grid
   ========================================================= */

.smartfix-projects__cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

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

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

    .smartfix-projects__img-wrap {
        height: 400px;
    }
}

@media (max-width: 1024px) {
    .smartfix-projects {
        --sf-proj-per-view: 2.5;
    }

    .smartfix-projects__header {
        padding: 0 20px;
    }

    .smartfix-projects__grid {
        margin: 0 20px;
    }

    .smartfix-projects__img-wrap {
        height: 340px;
    }
}

@media (max-width: 767px) {
    .smartfix-projects {
        --sf-proj-per-view: 1.25;
    }
}

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

    .smartfix-projects__header {
        margin-bottom: 28px;
    }

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

    .smartfix-projects {
        --sf-proj-gap: 12px;
    }

    .smartfix-projects__img-wrap {
        height: 260px;
    }
}

@media (max-width: 375px) {
    .smartfix-projects {
        padding: 40px 0;
    }

    .smartfix-projects__header {
        padding: 0 16px;
    }

    .smartfix-projects__grid {
        margin: 0 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .smartfix-projects__img,
    .smartfix-projects__arrow circle {
        transition: none;
    }

    .smartfix-projects__item:hover .smartfix-projects__img,
    .smartfix-projects__item:focus-within .smartfix-projects__img {
        transform: none;
    }
}

/* =========================================================
   PER-PROJECT GALLERY MODAL
   Reuses .smartfix-gallery__strip / __nav / __dot styling —
   only the dialog chrome (backdrop, panel, title, close) is
   defined here.
   ========================================================= */

.smartfix-project-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.smartfix-project-modal[hidden] {
    display: none;
}

.smartfix-project-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 18, 18, 0.82);
}

.smartfix-project-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--sf-bg-dark-1);
    border-radius: var(--sf-card-radius);
    padding: 32px 32px 40px;
}

.smartfix-project-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    border-radius: 50%;
    color: var(--sf-text-white);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.smartfix-project-modal__close:hover,
.smartfix-project-modal__close:focus-visible {
    background: rgba(255, 255, 255, 0.18);
}

/* Explicit size — some 3rd-party plugin/theme CSS on the page resets bare
   svg width to auto inside flex containers, collapsing an unsized box. */
.smartfix-project-modal__close svg {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.smartfix-project-modal__title {
    font-family: var(--sf-font-heading);
    font-weight: 700;
    font-size: var(--sf-fs-h4);
    color: var(--sf-text-white);
    margin: 0 48px 24px 0;
}

/* One image per slide at every size — the modal is a lightbox, not a
   contact sheet. Overrides the 5/4/3/2 breakpoint ladder the homepage
   gallery strip uses (assets/css/blocks/gallery.css); keep in sync with
   the modal carousel's perView in assets/js/main.js. */
.smartfix-project-modal {
    --sf-gal-per-view: 1;
    --sf-gal-gap: 0px;
}

.smartfix-project-modal__strip-wrap {
    margin: 0;
    /* The homepage gallery's curved top/bottom fade ellipses and side
       inset shadows are sized for a full-bleed multi-image strip — with a
       single image filling the box they'd just darken its own edges. */
    box-shadow: none;
    border-radius: 12px;
}

.smartfix-project-modal__strip-wrap::before,
.smartfix-project-modal__strip-wrap::after {
    display: none;
}

/* Contain, not cover — the whole photo should be visible when it's the
   only one on screen, letterboxed against the panel background. */
.smartfix-project-modal .smartfix-gallery__img {
    height: min(62vh, 560px);
    object-fit: contain;
    /* Letterbox in the panel's own colour so portrait shots don't get
       hard black pillars either side. */
    background: var(--sf-bg-dark-1);
}

.smartfix-project-modal .smartfix-gallery__slide {
    cursor: default;
}

.smartfix-project-modal .smartfix-gallery__slide:hover .smartfix-gallery__img {
    opacity: 1;
}

@media (max-width: 767px) {
    .smartfix-project-modal__panel {
        padding: 24px 16px 32px;
    }

    .smartfix-project-modal__strip-wrap {
        box-shadow:
            inset 20px 0 30px var(--sf-bg-dark-1),
            inset -20px 0 30px var(--sf-bg-dark-1);
    }
}