/* ------------------------------------------------------------------
   Single project – "Related [Type] Trailer Projects" cards
   Figma node 6736:2959 (1920 frame, 1430 content column).

   parts/single-page-project-block-2.php shares its class names with
   parts/single-page-project-block-12.php, so every rule here is scoped to
   body.single-project and cannot restyle the other templates.
   Vertical spacing between sections is owned by css/project/00-base.css,
   so the section itself carries no outer padding.
   ------------------------------------------------------------------ */

body.single-project .single-page-project-block-2 {
    padding: 0;
    overflow: hidden;
}

/* Figma 6736:2961 – column, 20px between the heading row and the slider. */
body.single-project .single-page-project-block-2-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

/* Figma 6736:2962 – full-width heading row, 40px tall, holding only the H2. */
body.single-project .single-page-project-block-2-wrap-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    margin: 0;
    flex-wrap: nowrap;
}

/* Figma 6777:8121 – Unbounded 400/32 in a 40px line box (1.25), letter-spacing 0.
   Chrome's own "normal" leading for Unbounded is 1.1875, which would make the
   heading row 38px and pull the whole slider up 2px. */
body.single-project h2.single-page-project-block-2-wrap-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #171B1C;
    font-family: Unbounded;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: normal;
    text-transform: uppercase;
    word-break: break-word;
}

/* Figma 6736:2966 – 35px of head room above the slide row; the arrows are
   pulled up out of it and into the heading row. */
body.single-project .single-page-project-block-2-wrap-slider {
    position: relative;
    width: 100%;
    padding-top: 35px;
}

body.single-project .single-page-project-block-2-wrap-slider-prev,
body.single-project .single-page-project-block-2-wrap-slider-next {
    position: absolute;
    top: -59px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    border-radius: 10px;
    background: #FF6B00;
    cursor: pointer;
}

body.single-project .single-page-project-block-2-wrap-slider-prev {
    right: 75px;
    transform: rotate(180deg);
}

body.single-project .single-page-project-block-2-wrap-slider-next {
    right: 0;
}

body.single-project .single-page-project-block-2-wrap-slider-prev svg,
body.single-project .single-page-project-block-2-wrap-slider-next svg {
    display: block;
    width: 23px;
    height: 15px;
}

body.single-project .single-page-project-block-2-wrap-slider .swiper-button-disabled {
    background: #FAFAFA;
}

body.single-project .single-page-project-block-2-wrap-slider .swiper-button-disabled svg path {
    fill: #7F7F7F;
}

/* 705 + 20 + 705 = 1430, so Swiper's slidesPerView:2 / spaceBetween:20 resolves
   to exactly 705px slides. The row used to be left unclipped so the third card
   bled out to the viewport edge, but Figma has Clip Content on for this block
   (6736:2959): the track ends with the 1430 column and the next card is cut at
   its edge rather than trailing across the gutter. */
body.single-project .single-page-project-block-2-wrap-slider .swiper {
    overflow: hidden;
}

body.single-project .single-page-project-block-2-wrap-slider .swiper-slide {
    height: auto;
}

/* Figma 6736:3007 – card */
body.single-project .single-page-project-block-2-wrap-slider-item {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    height: 100%;
    border: 1px solid #D0D0D0;
    border-radius: 46px;
    background: #FAFAFA;
    overflow: hidden;
}

body.single-project .single-page-project-block-2-wrap-slider-image {
    display: block;
    width: 100%;
    line-height: 0;
}

body.single-project .single-page-project-block-2-wrap-slider-image img {
    display: block;
    width: 100%;
    height: 375px;
    object-fit: cover;
    object-position: center;
}

/* Figma 6736:3009 / 6736:3010 */
body.single-project h3.single-page-project-block-2-wrap-slider-title {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 39px 35px 10px;
    color: #171B1C;
    font-family: Montserrat;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: normal;
    word-break: break-word;
}

body.single-project .single-page-project-block-2-wrap-slider-title a {
    color: inherit;
    text-decoration: none;
}

body.single-project .single-page-project-block-2-wrap-slider-title a:hover {
    color: #FF6B00;
}

/* Figma 6736:3011 – pills, 5px apart horizontally */
body.single-project .single-page-project-block-2-wrap-slider-categories {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    /* the row wraps on narrow cards and had no row-gap, so the chips touched */
    gap: 10px 5px;
    width: 100%;
    padding: 0 35px 35px;
}

/* Figma 6736:3012 – 176x39.13 pill, label inset 24px/8.5px, stroke drawn inside
   the frame. The CSS border does take a pixel on each side, and Figma's 22px
   text box is 0.88px taller than the 21.12px CSS line box, so the padding is the
   Figma inset minus the border and minus half the line-box difference. That
   lands the pill on 39.13px tall / text+48 wide with the glyphs where Figma
   puts them. */
body.single-project .single-page-project-block-2-wrap-slider-categories-item {
    box-sizing: border-box;
    padding: 7.94px 23px 8.07px;
    border: 1px solid #D0D0D0;
    border-radius: 13px;
    background: #FFFFFF;
    color: #171B1C;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 21.12px;
    letter-spacing: normal;
    white-space: nowrap;
}

/* Figma 6736:3003 – size badge, pinned 35px in from the top-right of the card */
body.single-project .single-page-project-block-2-wrap-slider-size {
    position: absolute;
    top: 35px;
    right: 35px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid #D0D0D0;
    border-radius: 46px;
    background: #FFFFFF;
    color: #171B1C;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 21.12px;
    letter-spacing: normal;
    text-align: center;
}

/* ---- Below the 1430 design column: the design only covers 1920, so the
        smaller tiers keep the site's existing step-downs with the new
        colours, borders and type. ---- */

@media screen and (max-width: 1435px) {
    body.single-project h2.single-page-project-block-2-wrap-title {
        font-size: 30px;
    }

    body.single-project .single-page-project-block-2-wrap-slider {
        padding-top: 25px;
    }

    body.single-project .single-page-project-block-2-wrap-slider-prev,
    body.single-project .single-page-project-block-2-wrap-slider-next {
        width: 46px;
        height: 46px;
        top: -43px;
    }

    body.single-project .single-page-project-block-2-wrap-slider-prev {
        right: 51px;
    }

    body.single-project .single-page-project-block-2-wrap-slider-prev svg,
    body.single-project .single-page-project-block-2-wrap-slider-next svg {
        width: 20px;
        height: 13px;
    }

    body.single-project .single-page-project-block-2-wrap-slider-item {
        border-radius: 32px;
    }

    body.single-project .single-page-project-block-2-wrap-slider-image img {
        height: 265px;
    }

    body.single-project h3.single-page-project-block-2-wrap-slider-title {
        padding: 32px 32px 10px;
        font-size: 23px;
    }

    body.single-project .single-page-project-block-2-wrap-slider-categories {
        padding: 0 32px 32px;
    }

    body.single-project .single-page-project-block-2-wrap-slider-categories-item {
        padding: 8px 13px;
        border-radius: 10px;
        font-size: 14px;
        line-height: 132%;
    }

    body.single-project .single-page-project-block-2-wrap-slider-size {
        top: 24px;
        right: 24px;
        width: 46px;
        height: 46px;
        font-size: 14px;
    }
}

@media screen and (max-width: 1023px) {
    body.single-project h2.single-page-project-block-2-wrap-title {
        font-size: 23px;
    }

    body.single-project .single-page-project-block-2-wrap-slider-prev,
    body.single-project .single-page-project-block-2-wrap-slider-next {
        width: 36px;
        height: 36px;
        top: -34px;
        border-radius: 8px;
    }

    body.single-project .single-page-project-block-2-wrap-slider-prev {
        right: 41px;
    }

    body.single-project .single-page-project-block-2-wrap-slider-prev svg,
    body.single-project .single-page-project-block-2-wrap-slider-next svg {
        width: 18px;
        height: 12px;
    }

    body.single-project .single-page-project-block-2-wrap-slider-item {
        border-radius: 23px;
    }

    body.single-project .single-page-project-block-2-wrap-slider-image img {
        height: 215px;
    }

    body.single-project h3.single-page-project-block-2-wrap-slider-title {
        padding: 24px 24px 15px;
        font-size: 18px;
    }

    body.single-project .single-page-project-block-2-wrap-slider-categories {
        gap: 5px;
        padding: 0 24px 24px;
    }

    body.single-project .single-page-project-block-2-wrap-slider-categories-item {
        padding: 6px 13px;
        font-size: 12px;
    }

    body.single-project .single-page-project-block-2-wrap-slider-size {
        top: 24px;
        right: 24px;
        width: 36px;
        height: 36px;
        font-size: 12px;
    }
}

@media screen and (max-width: 767px) {
    body.single-project h2.single-page-project-block-2-wrap-title {
        text-align: center;
    }

    body.single-project .single-page-project-block-2-wrap-slider {
        padding-top: 62px;
    }

    body.single-project .single-page-project-block-2-wrap-slider-prev,
    body.single-project .single-page-project-block-2-wrap-slider-next {
        top: 13px;
    }

    body.single-project .single-page-project-block-2-wrap-slider-prev {
        right: calc(50% + 3px);
    }

    body.single-project .single-page-project-block-2-wrap-slider-next {
        right: auto;
        left: calc(50% + 3px);
    }

    body.single-project .single-page-project-block-2-wrap-slider .swiper-slide {
        width: 350px;
    }

    body.single-project h3.single-page-project-block-2-wrap-slider-title {
        font-size: 16px;
    }
}