/**
 * Product Module: Customer Testimonials
 *
 * Flexible grid layout with position-based styling.
 * First item is larger, colors and typography determined by nth-child.
 * Partner logos with CSS filter for uniform appearance.
 *
 * Figma Node: 159-1204
 */

/* ==========================================================================
   SECTION CONTAINER
   ========================================================================== */

.workjam-testimonials {
    background: #F7F8FA;
    padding: 55px 20px;
}

.workjam-testimonials__clients {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    margin: 0 auto;
}

.workjam-testimonials__container {
    max-width: 1519px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 45px;
}

/* ==========================================================================
   SECTION TITLE
   ========================================================================== */

.workjam-testimonials__title {
    font-family: 'Avenir Next', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #121C66;
    line-height: normal;
    text-align: center;
    margin: 0;
}

/* ==========================================================================
   TESTIMONIALS GRID
   ========================================================================== */

.workjam-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
    justify-content: center;
    width: 100%;
    max-width: 1215px;
}

/* ==========================================================================
   TESTIMONIAL ITEMS - SIZE & LAYOUT
   ========================================================================== */

.testimonial-item {
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px;
    box-sizing: border-box;
    width: 100%;
}

/* First item is larger and spans 4 of 6 columns (66.67%) */
.testimonial-item:first-child {
    grid-column: span 4;
    min-height: 315px;
    padding: 32px 40px;
}

/* Second item spans 2 of 6 columns (33.33%) */
.testimonial-item:nth-child(2) {
    grid-column: span 2;
    min-height: 275px;
}

/* Default: Items 3+ span 2 of 6 columns each (33.33%) - for 5+ item scenarios */
.testimonial-item:nth-child(n+3) {
    grid-column: span 2;
    min-height: 275px;
}

/* ==========================================================================
   ADAPTIVE BOTTOM ROW LAYOUTS (3-4 ITEMS)
   ========================================================================== */

/* 4 items: Items 3 & 4 each span 3 of 6 columns (50% each) */
.testimonial-item:nth-child(3):nth-last-child(2),
.testimonial-item:nth-child(4):last-child {
    grid-column: span 3;
    max-width: none;
}

/* 3 items: Item 3 spans all 6 columns (100%) */
.testimonial-item:nth-child(3):last-child {
    grid-column: span 6;
    margin: 0 auto;
}

/* ==========================================================================
   POSITION-BASED BACKGROUND COLORS
   ========================================================================== */

.testimonial-item:nth-child(1) {
    background: #FC0;
}

.testimonial-item:nth-child(2) {
    background: #F7F8FA;
    height: 100%;
}

.testimonial-item:nth-child(4) {
    background: rgba(161, 161, 196, 0.45);
}

.testimonial-item:nth-child(5) {
    background: rgba(161, 161, 196, 0.45);
}

/* Video items use their poster as background */
.testimonial-item--video {
    background: transparent;
    padding: 0;
}

/* Image items use their image as background */
.testimonial-item--image {
    padding: 0;
}

/* ==========================================================================
   TEXT QUOTE STYLING
   ========================================================================== */

.testimonial-item__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.quote-text {
    font-family: 'Avenir Next', sans-serif;
    color: #121C66;
    line-height: normal;
    margin: 0;
}

/* Position-based typography */
.testimonial-item:nth-child(1) .quote-text {
    font-size: 24px;
    font-weight: 400;
}

.testimonial-item:nth-child(4) .quote-text {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
}

.testimonial-item:nth-child(5) .quote-text {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

/* Adaptive styling: Apply 4th child styles to 3rd when in 4-item scenario */
.testimonial-item:nth-child(3):nth-last-child(2) {
    background: rgba(161, 161, 196, 0.45);
}

.testimonial-item:nth-child(3):nth-last-child(2) .quote-text {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
}

/* Ensure 4th child in 4-item scenario matches styling */
.testimonial-item:nth-child(4):last-child {
    background: rgba(161, 161, 196, 0.45);
}

.testimonial-item:nth-child(4):last-child .quote-text {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
}

/* Apply consistent styling to 3rd child when it's the only item in row 2 (3-item scenario) */
.testimonial-item:nth-child(3):last-child {
    background: rgba(161, 161, 196, 0.45);
}

.testimonial-item:nth-child(3):last-child .quote-text {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
}

/* ==========================================================================
   TESTIMONIAL FOOTER (AUTHOR + LINK)
   ========================================================================== */

.testimonial-footer {
    display: flex;
    align-items: center;
}

/* When no link - center the author */
.testimonial-footer:not(.has-link) {
    justify-content: center;
    text-align: center;
}

.testimonial-item:nth-child(1) .testimonial-footer:not(.has-link) {
    justify-content: flex-start;
}

/* When link exists - author left, link right */
.testimonial-footer.has-link {
    justify-content: space-between;
}

.author-name {
    font-family: 'Avenir Next', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #121C66;
    line-height: normal;
    margin: 0;
    max-width: 384px;
}

.testimonial-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: #121C66;
    border: none;
    font-family: 'Avenir Next', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
    border-radius: 500px;
    transition: all 0.2s ease;
}

.testimonial-link:hover {
    background: #0D1449;
    transform: scale(1.02);
    color: #fff;
}

.testimonial-link svg {
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   IMAGE TESTIMONIAL
   ========================================================================== */

.testimonial-item__image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.testimonial-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 19.807px;
    border: 2px solid #2B388F;
}

.testimonial-image img {
    width: 100%;
    height: 100%;
    max-width: 385px;
    object-fit: cover;
}

/* ==========================================================================
   VIDEO TESTIMONIAL
   ========================================================================== */

.testimonial-item__video {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.testimonial-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.video-poster {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-poster::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(217, 217, 217, 0.6);
    border-radius: 20px;
}

.play-button {
    position: relative;
    z-index: 2;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s ease;
}

.play-button:hover {
    transform: scale(1.1);
}

.play-button svg circle {
    transition: all 0.3s ease;
}

.play-button:hover svg circle {
    fill: rgba(255, 255, 255, 0.6);
}

/* Hover anywhere on video container triggers play button hover state */
.testimonial-item__video:hover .play-button {
    transform: scale(1.1);
}

.testimonial-item__video:hover .play-button svg circle {
    fill: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   PARTNER LOGOS SECTION
   ========================================================================== */

.workjam-testimonials__partners {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
}

.clients__title {
    font-family: 'Avenir Next', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #2B388F;
    line-height: normal;
    text-align: center;
    margin: 0;
}

.clients__logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    max-width: 1224px;
}

.client-logo {
    height: 89px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 16%;
}

.client-logo img {
    height: auto;
    max-height: 89px;
    width: 100%;
    object-fit: contain;
    /* Greyscale filter for uniform appearance */
    filter: grayscale(1) opacity(0.85);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Tablet - 980px */
@media (max-width: 980px) {
    .workjam-testimonials {
        padding: 40px 20px;
    }

    .workjam-testimonials__container {
        gap: 40px;
    }

    .workjam-testimonials__title {
        font-size: 40px;
    }

    .workjam-testimonials__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        max-width: 820px;
    }

    /* Reset all items to default spanning for 2-column grid */
    .testimonial-item:first-child {
        grid-column: span 2;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 280px;
    }

    .testimonial-item:nth-child(2),
    .testimonial-item:nth-child(n+3) {
        grid-column: span 1;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 260px;
    }

    .testimonial-image img {
        width: 100%;
        height: auto;
    }

    .clients__logos {
        gap: 32px;
        flex-wrap: wrap;
    }

    .client-logo {
        height: 75px;
        flex: 1 1 25%;
    }

    .client-logo img {
        max-height: 75px;
    }

    /* Adaptive layout for 3-4 items at tablet breakpoint (2 columns) */
    /* 3 items: Item 3 takes full width */
    .testimonial-item:nth-child(3):last-child {
        grid-column: span 2;
        max-width: 100%;
    }

    /* 4 items: Items 3 & 4 each take 50% (already handled by 2-col grid) */
    .testimonial-item:nth-child(3):nth-last-child(2),
    .testimonial-item:nth-child(4):last-child {
        grid-column: span 1;
    }
}

/* Tablet Portrait - 768px */
@media (max-width: 768px) {
    .workjam-testimonials {
        padding: 35px 20px;
    }

    .workjam-testimonials__container {
        gap: 35px;
    }

    .workjam-testimonials__title {
        font-size: 36px;
    }

    .workjam-testimonials__grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 500px;
    }

    /* All items take full width in single-column layout */
    .testimonial-item:first-child,
    .testimonial-item:nth-child(2),
    .testimonial-item:nth-child(n+3) {
        grid-column: span 1;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .testimonial-item:first-child {
        min-height: 240px;
        padding: 28px 32px;
    }

    .testimonial-item.testimonial-item--video.type-video {
        padding: 0;
        aspect-ratio: 6 / 4;
    }

    .testimonial-item:nth-child(2),
    .testimonial-item:nth-child(n+3) {
        min-height: 220px;
    }

    .testimonial-item:nth-child(1) .quote-text {
        font-size: 20px;
    }

    .testimonial-item:nth-child(4) .quote-text {
        font-size: 20px;
    }

    .testimonial-image img {
        width: 100%;
        height: auto;
    }

    .testimonial-link {
        padding: 12px;
        font-size: 15px;
    }

    .clients__logos {
        gap: 24px;
    }

    .client-logo {
        height: 65px;
    }

    .client-logo img {
        max-height: 65px;
    }
}

/* Mobile - 600px */
@media (max-width: 600px) {
    .workjam-testimonials {
        padding: 30px 20px;
    }

    .workjam-testimonials__container {
        gap: 30px;
    }

    .workjam-testimonials__title {
        font-size: 32px;
    }

    .workjam-testimonials__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* All items reset to single column */
    .testimonial-item:first-child,
    .testimonial-item:nth-child(2),
    .testimonial-item:nth-child(n+3) {
        grid-column: span 1;
        width: 100%;
        height: auto;
        min-height: 200px;
        padding: 24px;
    }

    .testimonial-item__content {
        gap: 20px;
    }

    .testimonial-item:nth-child(1) .quote-text {
        font-size: 18px;
    }

    .testimonial-item:nth-child(4) .quote-text {
        font-size: 18px;
    }

    .testimonial-item:nth-child(5) .quote-text {
        font-size: 14px;
    }

    .author-name {
        font-size: 14px;
        max-width: 280px;
    }

    .testimonial-link {
        padding: 10px;
        font-size: 14px;
    }

    .testimonial-link svg {
        width: 16px;
        height: 16px;
    }

    .testimonial-image img {
        width: 100%;
        height: auto;
    }

    .play-button svg {
        width: 60px;
        height: 60px;
    }

    .clients__logos {
        gap: 20px;
    }

    .client-logo {
        height: 60px;
    }

    .client-logo img {
        max-height: 60px;
    }
}

/* Small Mobile - 400px */
@media (max-width: 400px) {
    .workjam-testimonials {
        padding: 24px 16px;
    }

    .workjam-testimonials__container {
        gap: 24px;
    }

    .workjam-testimonials__title {
        font-size: 28px;
    }

    .workjam-testimonials__grid {
        gap: 16px;
    }

    .testimonial-item:first-child,
    .testimonial-item:nth-child(2),
    .testimonial-item:nth-child(n+3) {
        min-height: 180px;
        padding: 20px;
    }

    .testimonial-item__content {
        gap: 16px;
    }

    .testimonial-item:nth-child(1) .quote-text {
        font-size: 16px;
    }

    .testimonial-item:nth-child(4) .quote-text {
        font-size: 16px;
    }

    .testimonial-item:nth-child(5) .quote-text {
        font-size: 13px;
    }

    .author-name {
        font-size: 13px;
        max-width: 100%;
    }

    .testimonial-footer.has-link {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .testimonial-link {
        padding: 8px 12px;
        font-size: 13px;
        align-self: flex-start;
    }

    .play-button svg {
        width: 50px;
        height: 50px;
    }

    .clients__title {
        font-size: 14px;
    }

    .clients__logos {
        gap: 16px;
    }

    .client-logo {
        height: 50px;
    }

    .client-logo img {
        max-height: 50px;
    }
}