/* Project page – Reviews / client testimonial (single/project/single-project-section-10.php) */

/* main.css forces padding-top/bottom:30px !important on .single-project-section-10-wrap.
   Figma node 6761:21344 is 1430x634 with no vertical padding – the 140px section rhythm
   is owned by css/project/00-base.css, so the legacy padding has to be zeroed here. */
.project-reviews .project-reviews__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.project-reviews .project-reviews__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
}

/* Badge = Figma instance 6812:11120, 190x40 with an inside 1px stroke and the label
   sitting at 30/10 from the outer edge, so the CSS border eats 1px of that inset. */
.project-reviews .project-reviews__badge {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    padding: 9px 29px;
    border: 1px solid #ACACAC;
    border-radius: 36px;
    background: #FAFAFA;
    color: #7F7F7F;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: normal;
    white-space: nowrap;
}

/* Figma H2 style: Unbounded 400/32, line box 1.25em (40px), letterSpacing 0.
   Figma takes Unbounded's vertical metrics from OS/2 win (1.25em) while Chrome uses
   hhea (1.1875em), so a plain line-height:1.25 leaves the glyphs 3px high inside the
   same 40px box. padding-top + line-height below keep the box at 1.25em and drop the
   baseline onto Figma's. Both are em-based, so they hold at every breakpoint. */
.project-reviews .project-reviews__title {
    width: 100%;
    margin: 0;
    padding: 0.1875em 0 0;
    color: #171B1C;
    font-family: 'Unbounded', sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.0625;
    letter-spacing: normal;
    text-align: center;
    text-transform: uppercase;
}

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

.project-reviews .project-reviews__card {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    padding: 50px 80px;
    border-radius: 30px;
    background: #FFFFFF;
    box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.1);
}

.project-reviews .project-reviews__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    flex: 0 0 auto;
    width: 615px;
    height: 346px;
}

.project-reviews .project-reviews__quote-wrap {
    width: 100%;
}

/* Neither a photo nor a video: the placeholder avatar stays, but as a circle
   on a plain panel. Stretched to fill the 615x346 slot it was cropped top and
   bottom into a shape that read as a broken image. */
.project-reviews .project-reviews__media--empty {
    display: grid;
    place-items: center;
    background: #F1F1F1;
}

.project-reviews .project-reviews__media > .project-reviews__avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
}

/* The body is a fixed 346 tall, so a long review used to run straight out of
   the card. It is clamped to 9 lines instead and "Learn more" opens the rest;
   max-height is the same 9 lines in em, so paragraph margins cannot push the
   clamp past the box either. Same treatment as the Success Stories quote. */
.project-reviews .project-reviews__quote {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #7F7F7F;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
    quotes: none;
    display: -webkit-box;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
    max-height: 10.8em;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.project-reviews .project-reviews__more {
    display: none;
    margin: 0;
    padding: 10px 0 0;
    border: 0;
    background: none;
    color: #171B1C;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s ease;
}

.project-reviews .project-reviews__more:hover {
    color: #FF6B00;
}

.project-reviews .project-reviews__more:focus-visible {
    outline: 2px solid #FF6B00;
    outline-offset: 2px;
}

.project-reviews .project-reviews__quote-wrap.is-clamped .project-reviews__more {
    display: block;
}

.project-reviews .project-reviews__quote::before,
.project-reviews .project-reviews__quote::after {
    content: none;
}

.project-reviews .project-reviews__quote p {
    margin: 0 0 1.2em;
    color: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.project-reviews .project-reviews__quote p:last-child {
    margin-bottom: 0;
}

.project-reviews .project-reviews__author {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    width: 100%;
    text-align: right;
}

.project-reviews .project-reviews__author-name {
    color: #171B1C;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
}

.project-reviews .project-reviews__author-role {
    color: #7F7F7F;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-style: italic;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: normal;
}

.project-reviews .project-reviews__media {
    position: relative;
    flex: 0 0 auto;
    width: 615px;
    height: 346px;
    border-radius: 16px;
    overflow: hidden;
}

.project-reviews .project-reviews__media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.project-reviews .project-reviews__play {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    padding: 22px 20.5px 22px 23.5px;
    border-radius: 36px;
    background: rgba(23, 27, 28, 0.6);
    transition: background 0.3s;
}

.project-reviews .project-reviews__play:hover {
    background: rgba(23, 27, 28, 0.8);
}

.project-reviews .project-reviews__play img {
    display: block;
    width: 28px;
    height: 28px;
}

@media screen and (max-width: 1439px) {
    .project-reviews .project-reviews__inner {
        gap: 40px;
    }
    .project-reviews .project-reviews__title {
        font-size: 26px;
    }
    .project-reviews .project-reviews__lead {
        font-size: 16px;
        line-height: 20px;
    }
    .project-reviews .project-reviews__card {
        gap: 30px;
        padding: 40px;
    }
    .project-reviews .project-reviews__body {
        flex: 1 1 0;
        width: auto;
        height: auto;
        gap: 30px;
    }
    .project-reviews .project-reviews__quote {
        font-size: 18px;
    }
    .project-reviews .project-reviews__media {
        flex: 1 1 0;
        width: auto;
        height: auto;
        aspect-ratio: 615 / 346;
    }
}

@media screen and (max-width: 1023px) {
    .project-reviews .project-reviews__inner {
        gap: 30px;
    }
    .project-reviews .project-reviews__head {
        gap: 14px;
    }
    .project-reviews .project-reviews__card {
        flex-direction: column;
        align-items: stretch;
        gap: 25px;
        padding: 30px;
    }
    .project-reviews .project-reviews__body,
    .project-reviews .project-reviews__media {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .project-reviews .project-reviews__badge {
        padding: 7px 23px;
        font-size: 14px;
        line-height: 18px;
    }
    .project-reviews .project-reviews__title {
        font-size: 22px;
    }
    .project-reviews .project-reviews__lead {
        font-size: 14px;
        line-height: 18px;
    }
    .project-reviews .project-reviews__card {
        gap: 20px;
        padding: 25px;
        border-radius: 23px;
    }
    .project-reviews .project-reviews__quote {
        font-size: 16px;
    }
    .project-reviews .project-reviews__author-name {
        font-size: 18px;
    }
    .project-reviews .project-reviews__author-role {
        font-size: 14px;
    }
    .project-reviews .project-reviews__play {
        width: 56px;
        height: 56px;
        padding: 17px 16px 17px 18px;
        border-radius: 28px;
    }
    .project-reviews .project-reviews__play img {
        width: 22px;
        height: 22px;
    }
}

/* Poster and play button; the dialog itself is the shared landing popup. */
.project-reviews__play {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.project-reviews__poster {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

/* Full-quote dialog. The shared card gives its text column horizontal padding
   only and centres it vertically, which works for Success Stories because an
   80px avatar and a short quote never fill the card. A full review does, so it
   ran into the 27px corners top and bottom. Full height and top padding equal
   to the close button's own inset put the name level with it whatever the
   quote's length; border-box keeps the 90 left gutter from pushing the text
   under that button. Scoped to this dialog - Success Stories is untouched. */
.project-reviews .project-reviews__popup .home-section-2-wrap-item-open-wrap-right {
    box-sizing: border-box;
    height: 100%;
    padding-block: 40px;
    justify-content: center;
}

/* The component's text slot carries a 40 bottom padding for the button row
   this dialog has not got. Against the column's own 40 that made the gap
   below the quote twice the one above it, so a centred column read as sitting
   high. The column's padding is the only one now. */
.project-reviews .project-reviews__popup .home-section-2-wrap-item-open-wrap-text {
    padding-bottom: 0;
}

/* the quote arrives as wpautop markup, outside the card's own paragraph rule,
   so it would run together as one block */
.project-reviews .project-reviews__popup .home-section-2-wrap-item-open-wrap-text p {
    margin: 0 0 1.2em;
}

.project-reviews .project-reviews__popup .home-section-2-wrap-item-open-wrap-text p:last-child {
    margin-bottom: 0;
}

/* the close button moves to a 22px inset below 1440, so the name follows it */
@media screen and (max-width: 1439px) {
    .project-reviews .project-reviews__popup .home-section-2-wrap-item-open-wrap-right {
        padding-block: 22px;
    }
}