/* Single project – "Frequently Asked Questions About This Trailer" (Figma 6746:12338).
   Scoped under .single-project-section-faq. The accordion keeps the legacy
   .lp-section-17-wrap-right-item* hooks so the global toggle script still drives it,
   which is why the rules below restate every legacy declaration they replace. */

/* Figma 6877:11219 is 1920 wide at x=0 — the card runs the full frame, it is not
   inset by 20 a side. It carries a 32px radius and clips its content. */
.single-project-section-faq {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 80px 0;
    border-radius: 32px;
    overflow: hidden;
    background: #FFFFFF;
}

.single-project-section-faq > .container-new {
    width: 100%;
}

/* The three stacked groups — heading, accordion, actions — sit 50px apart in
   Figma, the same rhythm the Outcome card uses. */
.single-project-section-faq .single-project-section-faq-wrap {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 50px;
    box-sizing: border-box;
    width: 100%;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

/* --- Heading block ---------------------------------------------------- */

/* Figma puts the heading column and the accordion on the same 1030 measure,
   not on the 1430 page column the other sections use. */
.single-project-section-faq .single-project-section-faq-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 1030px;
}

/* Figma draws the pill 95x40 with an inside stroke, so the 1px border sits
   within the box: 9px/29px padding plus the border reproduces it in CSS. */
.single-project-section-faq .single-project-section-faq-overview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    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;
}

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

.single-project-section-faq .single-project-section-faq-subtitle {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: normal;
    color: #7F7F7F;
    text-align: center;
}

/* --- Accordion -------------------------------------------------------- */

.single-project-section-faq .single-project-section-faq-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    width: 100%;
    max-width: none;
}

/* 1030 wide with 23px between rows, per Figma. The list used to sit on a 768
   column with 14px rows, which is what made the block read as cramped against
   the 1430 heading above it — the heading now shares the 1030 measure. */
.single-project-section-faq .single-project-section-faq-items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 23px;
    box-sizing: border-box;
    width: 1030px;
    max-width: 100%;
}

.single-project-section-faq .single-project-section-faq-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 0;
    border-bottom: 1px solid #ACACAC;
}

/* Figma's 1px rule sits inside the row box (63px closed / 145px open), so the
   border replaces the last pixel of padding rather than adding to it. */
.single-project-section-faq .lp-section-17-wrap-right-item-active.single-project-section-faq-item {
    padding-bottom: 22px;
}

.single-project-section-faq .single-project-section-faq-summary {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 20px 44px 20px 0;
    cursor: pointer;
}

.single-project-section-faq .single-project-section-faq-question {
    margin: 0;
    padding: 0;
    font-family: Montserrat, sans-serif;
    font-size: 23px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: normal;
    /* the mock gives closed questions the same ink as the open one */
    color: #171B1C;
    text-transform: none;
    overflow-wrap: break-word;
}

/* Figma draws the marker as a 9px square with 2px bottom/right strokes rotated
   inside a 12.728px (9 x sqrt2) box, so it is CSS geometry rather than an icon. */
.single-project-section-faq .single-project-section-faq-chevron {
    position: absolute;
    top: calc(50% - 1.81px);
    right: 6.14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12.728px;
    height: 12.728px;
    transform: translateY(-50%);
}

.single-project-section-faq .single-project-section-faq-chevron svg {
    display: none;
}

.single-project-section-faq .single-project-section-faq-chevron::before {
    content: "";
    flex: none;
    box-sizing: border-box;
    width: 9px;
    height: 9px;
    border-right: 2px solid #7F7F7F;
    border-bottom: 2px solid #7F7F7F;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
}

.single-project-section-faq .lp-section-17-wrap-right-item-active .single-project-section-faq-chevron {
    top: calc(50% + 1.79px);
    transform: translateY(-50%);
}

.single-project-section-faq .lp-section-17-wrap-right-item-active .single-project-section-faq-chevron::before {
    border-right-color: #171B1C;
    border-bottom-color: #171B1C;
    transform: rotate(-135deg);
}

.single-project-section-faq .single-project-section-faq-answer {
    box-sizing: border-box;
    width: 100%;
    padding: 0;
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: normal;
    color: #7F7F7F;
    overflow-wrap: break-word;
}

.single-project-section-faq .single-project-section-faq-answer p {
    margin: 0 0 16px;
}

.single-project-section-faq .single-project-section-faq-answer p:last-child {
    margin-bottom: 0;
}

/* --- Actions ---------------------------------------------------------- */

.single-project-section-faq .single-project-section-faq-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 45px;
    width: 100%;
    padding-top: 0;
}

/* Flex wrappers: an inline-level <a> inside a block div inherits the line-box
   strut, which pads the secondary link past its Figma 18px height. */
.single-project-section-faq .single-project-section-faq-action-primary,
.single-project-section-faq .single-project-section-faq-action-secondary {
    display: flex;
    align-items: center;
}

.single-project-section-faq .single-project-section-faq-action-primary a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 13px 40px;
    border: 0;
    border-radius: 13px;
    background: #171B1C;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: normal;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.25s ease;
}

.single-project-section-faq .single-project-section-faq-action-primary a:hover {
    border: 0;
    background: #171B1C;
    color: #FFFFFF;
    opacity: 0.85;
}

.single-project-section-faq .single-project-section-faq-action-secondary a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: Montserrat, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: normal;
    color: #171B1C;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.25s ease;
}

.single-project-section-faq .single-project-section-faq-action-secondary a::after {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    background: url("../../assets/img/project/faq-external-link.svg") no-repeat center center;
    background-size: 15px 15px;
}

.single-project-section-faq .single-project-section-faq-action-secondary a:hover {
    background: none;
    color: #171B1C;
    opacity: 0.85;
}

/* --- Adaptation below the 1430px design column ------------------------- */

@media screen and (max-width: 1023px) {
    .single-project-section-faq {
        padding: 60px 0;
    }
}

@media screen and (max-width: 767px) {
    .single-project-section-faq {
        padding: 40px 0;
        border-radius: 20px;
    }

    .single-project-section-faq .single-project-section-faq-wrap,
    .single-project-section-faq .single-project-section-faq-body {
        gap: 30px;
    }

    .single-project-section-faq .single-project-section-faq-head {
        gap: 14px;
    }

    .single-project-section-faq .single-project-section-faq-overview {
        padding: 7px 21px;
        font-size: 14px;
        line-height: 18px;
    }

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

    .single-project-section-faq .single-project-section-faq-summary {
        padding-right: 32px;
    }

    .single-project-section-faq .single-project-section-faq-question {
        font-size: 16px;
        line-height: 20px;
    }

    .single-project-section-faq .single-project-section-faq-answer {
        font-size: 14px;
        line-height: 18px;
    }

    .single-project-section-faq .single-project-section-faq-actions {
        flex-direction: column;
        gap: 16px;
    }

    .single-project-section-faq .single-project-section-faq-action-primary,
    .single-project-section-faq .single-project-section-faq-action-secondary,
    .single-project-section-faq .single-project-section-faq-action-primary a,
    .single-project-section-faq .single-project-section-faq-action-secondary a {
        width: 100%;
    }

    .single-project-section-faq .single-project-section-faq-action-secondary a {
        justify-content: center;
    }
}