/* ==========================================================================
   Single project – "3D Wrap Design Visualization"
   Figma: DI5V1xJQF5lLhhkNHfUuSa / node 6796:13531
   Root column gap 50 (--space-between-heading-text-and-block), heading block
   1430 wide, slider row bleeds past the content column (725px cells = 705 + 20).
   Scoped to .single-project-section-7-1 – must not leak to other sections.
   ========================================================================== */

/* css/main.css still ships the superseded copy of this section
   (`padding: 225px 0 25px; margin-bottom: -200px`). Both are zeroed here so
   00-base.css stays the only owner of the space around the section – this is
   neutralising legacy declarations, not spacing of our own. */
.single-project-section-7-1 {
    /* Same full-bleed band as Final Project Results, so the two tracks match.
       Figma hangs this carousel off the 1430 column at x=-1450 and 2880 wide,
       i.e. it is meant to reach both edges of the viewport; the 1880 cap left a
       20px margin down each side that the mock does not have. */
    padding: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.single-project-section-7-1 .container-new {
    width: 100%;
}

/* Figma 6796:13531 – column, gap 50 */
.single-project-section-7-1 .single-project-section-7-1-wrap {
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100%;
}

/* --------------------------------------------------------------------------
   Heading block (Figma 6813:11246 – 1430 x 138, column, gap 18, centered)
   -------------------------------------------------------------------------- */

.single-project-section-7-1 .single-project-section-7-1-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
}

/* Figma 6813:11247 – 165 x 40, padding 10/30, stroke drawn inside,
   so 9px/29px + 1px border reproduces the same outer box. */
.single-project-section-7-1 .single-project-section-7-1-badge {
    display: inline-flex;
    align-items: center;
    padding: 9px 29px;
    border: 1px solid #ACACAC;
    border-radius: 36px;
    background: #FAFAFA;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: normal;
    color: #7F7F7F;
    white-space: nowrap;
}

/* Figma 6813:11248 – 1431 x 40, Unbounded Regular 32/40, uppercase, centered.
   Line-height is pinned in px: Chrome's `normal` for Unbounded is 38px, which
   shortens the heading block by 2px against the design. */
.single-project-section-7-1 .single-project-section-7-1-wrap-title {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: Unbounded, sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: normal;
    text-align: center;
    text-transform: uppercase;
    color: #171B1C;
    overflow-wrap: break-word;
}

/* Figma 6813:11249 – Montserrat Regular 18 / normal, centered */
.single-project-section-7-1 .single-project-section-7-1-lede {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: normal;
    text-align: center;
    color: #7F7F7F;
    overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Slider (Figma 6796:13535 – row of 725px cells, each 705px wide + 20px gap,
   500px tall, radius 32). The row runs past the 1430 column, so the swiper
   itself is not clipped – the section root does the clipping instead.
   -------------------------------------------------------------------------- */

.single-project-section-7-1 .single-project-section-7-1-wrap-slider {
    width: 100%;
}

.single-project-section-7-1 .single-project-section-7-1-wrap-slider .swiper {
    overflow: visible;
}

/* the mock's card is 705x500; the aspect-ratio below turns any other width
   into a taller card, so the width is pinned the way the results row pins it */
.single-project-section-7-1 .single-project-section-7-1-wrap-slider .swiper-slide {
    width: 705px;
}

/* Figma 6796:13539 */
.single-project-section-7-1 .single-project-section-7-1-wrap-slider-item {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
    border-radius: 32px;
}

/* button chrome reset — the trigger is no longer an anchor; both are matched so
   the rule holds either way */
.single-project-section-7-1 .single-project-section-7-1-wrap-slider-item a,
.single-project-section-7-1 .single-project-section-7-1-wrap-slider-item button {
    display: flex;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

/* dragging the track should not select the photo or lift it as a drag ghost */
.single-project-section-7-1 .single-project-section-7-1-wrap-slider {
    -webkit-user-select: none;
    user-select: none;
}

.single-project-section-7-1 .single-project-section-7-1-wrap-slider-item img {
    -webkit-user-drag: none;
    user-drag: none;
}

/* Figma 6796:13541 – 705 x 500. Expressed as a ratio rather than a fixed
   500px height so the card keeps the design's proportion at every slide width
   the swiper produces (the source photos are 3:2, so cover crops the sides –
   the same 106.38% horizontal scale the Figma frame uses). */
.single-project-section-7-1 .single-project-section-7-1-wrap-slider-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 705 / 500;
    object-fit: cover;
    object-position: center;
}

/* --------------------------------------------------------------------------
   Below the design width the swiper switches to slidesPerView "auto", so the
   slide width comes from CSS. The swiper's own breakpoint (footer-new.php) is
   1435, so these rules must stop at 1434 – at exactly 1435 the swiper is still
   laying out 2-up and a wider CSS slide throws its translate out of alignment.
   Heights follow from the 705:500 aspect-ratio above.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1434px) {
    .single-project-section-7-1 .single-project-section-7-1-wrap-slider .swiper-slide {
        width: 470px !important;
    }
}

/* Media queries resolve against the viewport minus the scrollbar, while the
   swiper reads window.innerWidth, so between the two there is a scrollbar-wide
   band where the carousel is still laying out 2-up but main.css's legacy
   `width: 535px !important` (max-width 1435) is already firing – which throws
   the track out of alignment. The container is a flat 960 across that band, so
   the 2-up width is (960 - 20) / 2. */
@media screen and (min-width: 1420px) and (max-width: 1435px) {
    .single-project-section-7-1 .single-project-section-7-1-wrap-slider .swiper-slide {
        width: 470px !important;
    }
}

@media screen and (max-width: 1023px) {
    .single-project-section-7-1 .single-project-section-7-1-wrap {
        gap: 30px;
    }

    .single-project-section-7-1 .single-project-section-7-1-wrap-slider .swiper-slide {
        width: 455px !important;
    }
}

@media screen and (max-width: 767px) {
    .single-project-section-7-1 .single-project-section-7-1-head {
        gap: 14px;
    }

    .single-project-section-7-1 .single-project-section-7-1-badge {
        padding: 9px 20px;
        white-space: normal;
        text-align: center;
    }

    .single-project-section-7-1 .single-project-section-7-1-wrap-title {
        font-size: 24px;
        line-height: 30px;
    }

    .single-project-section-7-1 .single-project-section-7-1-lede {
        font-size: 16px;
        line-height: 20px;
    }

    .single-project-section-7-1 .single-project-section-7-1-wrap-slider .swiper-slide {
        width: 360px !important;
    }

    .single-project-section-7-1 .single-project-section-7-1-wrap-slider-item {
        border-radius: 24px;
    }
}

/* the shared .gst-slider-nav discs anchor to this track */
.single-project-section-7-1 .single-project-section-7-1-wrap-slider {
    position: relative;
}