/* ==========================================================================
   Single project – "Custom [Type] Trailer Design"
   Figma: DI5V1xJQF5lLhhkNHfUuSa / node 6755:17390 (1430 x 2909)
   Scoped to .single-project-section-design – must not leak to other sections.
   ========================================================================== */

/* The Figma frame is 1430 x 2909 with no padding of its own – the 140px rhythm
   between sections is owned by 00-base.css. main.css puts `padding: 30px 0` on
   every .single-project-section-content, so it has to be zeroed here. */
.single-project-section-content.single-project-section-design {
    padding: 0;
}

.single-project-section-design .single-project-section-content-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    width: 100%;
}

/* --------------------------------------------------------------------------
   Heading block (Figma 6777:8147 – column, gap 20, centered)
   -------------------------------------------------------------------------- */

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

/* Figma 6777:8148 – 228 x 40 with 30px/10px padding and the stroke drawn inside,
   so 9px/29px + a 1px border puts the text 30px/10px from the edge. The 20px
   line-height is the Figma text-node height; `normal` renders 19px and loses a
   pixel off the badge (and off everything below it). */
.single-project-section-design .single-project-design-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-weight: 400;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0;
    color: #7F7F7F;
    white-space: nowrap;
}

/* Figma 6777:8149 */
.single-project-section-design .single-project-section-content-title {
    width: 100%;
    margin: 0;
    font-family: Unbounded, sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: normal;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    color: #171B1C;
    overflow-wrap: break-word;
}

/* Figma 6777:8150 – 1430 x 22, one Montserrat 18 line, no space between paragraphs */
.single-project-section-design .single-project-design-lede,
.single-project-section-design .single-project-design-lede p {
    width: 100%;
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    letter-spacing: 0;
    text-align: center;
    color: #7F7F7F;
    overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Rows (Figma 6755:17394 – column, gap 20)
   -------------------------------------------------------------------------- */

.single-project-section-design .single-project-design-rows {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

/* Figma 6774:8057 – 1430 wide, padding 60/80, radius 25, shadow 0 0 17.5 5% */
.single-project-section-design .single-project-design-row {
    display: flex;
    align-items: center;
    gap: 40px;
    width: 100%;
    margin: 0;
    padding: 60px 80px;
    border-radius: 25px;
    background: #FFFFFF;
    box-shadow: 0 0 17.5px 0 rgba(0, 0, 0, 0.05);
}

/* Rows 2 and 4 in Figma put the image first */
.single-project-section-design .single-project-design-row:nth-child(even) {
    flex-direction: row-reverse;
}

/* Figma 6774:8058 – 600 wide, column, gap 18 */
.single-project-section-design .single-project-design-text {
    display: flex;
    flex: 1 1 600px;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    min-width: 0;
}

/* Figma 6774:8061 – Montserrat Medium 24 / normal */
.single-project-section-design .single-project-section-content-subtitle {
    width: 100%;
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: normal;
    letter-spacing: 0;
    color: #171B1C;
}

/* Figma 6774:8062 – Montserrat Regular 18 / normal, no space between paragraphs */
.single-project-section-design .single-project-design-copy {
    width: 100%;
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    letter-spacing: 0;
    color: #7F7F7F;
}

.single-project-section-design .single-project-design-copy p,
.single-project-section-design .single-project-design-copy li {
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #7F7F7F;
}

.single-project-section-design .single-project-design-copy ul,
.single-project-section-design .single-project-design-copy ol {
    margin: 0;
    padding-left: 20px;
}

.single-project-section-design .single-project-design-copy strong,
.single-project-section-design .single-project-design-copy b {
    font-weight: 500;
    color: #171B1C;
}

/* Figma 6774:8063 – 630 x 404, radius 20 */
.single-project-section-design .single-project-design-media {
    flex: 0 0 630px;
    width: 630px;
    height: 404px;
    border-radius: 20px;
    overflow: hidden;
}

.single-project-section-design .single-project-design-media-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: 20px;
    object-fit: cover;
    object-position: center;
}

/* No image supplied for the row: the copy takes the full 1270px inner width */
.single-project-section-design .single-project-design-row--no-media .single-project-design-text {
    flex: 1 1 100%;
}

/* --------------------------------------------------------------------------
   Below the 1430px design width
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1439px) {
    .single-project-section-design .single-project-design-row {
        gap: 30px;
        padding: 40px;
    }

    .single-project-section-design .single-project-design-text {
        flex: 1 1 auto;
    }

    .single-project-section-design .single-project-design-media {
        flex: 0 0 46%;
        width: 46%;
        height: auto;
        aspect-ratio: 630 / 404;
    }
}

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

    .single-project-section-design .single-project-design-row,
    .single-project-section-design .single-project-design-row:nth-child(even) {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 30px;
        border-radius: 20px;
    }

    .single-project-section-design .single-project-design-text {
        flex: 0 0 auto;
        width: 100%;
    }

    .single-project-section-design .single-project-design-media {
        order: -1;
        flex: 0 0 auto;
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .single-project-section-design .single-project-design-row,
    .single-project-section-design .single-project-design-row:nth-child(even) {
        gap: 18px;
        padding: 20px;
        border-radius: 16px;
    }

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