/* ======================================================================
   page-section.testimonials

   Structure:
   .page-section.testimonials [.layout-slideshow|.layout-carousel|.layout-list|.layout-grid]
                              [.w_100|.w_66_c]
       .pad
           .container (12-col grid at 1024px+)
               .section-intro                          (optional)
               .items-container [.is-multiple .n*]
                   ::before                            (quote mark graphic)
                   .item [.has-image]
                       figure
                           blockquote > p
                           figcaption
                               img         (optional)
                               cite
                               span.position
                       a.item-link             (optional)
               .section-outro                          (optional)
   ====================================================================== */


/* ----------------------------------------------------------------------
   Base — mobile first
   ---------------------------------------------------------------------- */

.testimonials .item {
    display: flex;
    flex-flow: column;
}

.testimonials .item blockquote {
    margin: 0;
    padding: 0;
    border: none;
}

.testimonials figure {
    margin: 0;
    padding: var(--padding-section) 0 0 0;     /* top spacing only, sides align with grid */
}

.testimonials .item figcaption {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: .5em;
    margin-top: 1em;
}

.testimonials .item figcaption img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.testimonials .item figcaption cite {
    font-style: normal;
    font-weight: 600;
}

.testimonials .item figcaption .position {
    display: block;
    width: 100%;
    padding-left: calc(48px + .5em);    /* align under name when image present */
}

.testimonials .item:not(.has-image) figcaption .position {
    padding-left: 0;
}

.testimonials .item .item-link {
    display: inline-block;
    margin-top: 1em;
}


/* ----------------------------------------------------------------------
   Quote mark decoration — on items-container to avoid slick-list overflow
   ---------------------------------------------------------------------- */

.testimonials .items-container {
    position: relative;
}

.testimonials .items-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc( var(--padding-section) / -2 );
    width: 100px;
    height: 88px;
    background: no-repeat center center;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 67.78 59.47'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7B fill:%230b3b5b; opacity:.2; stroke-width:0px; %7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M2.25,0h27.44v19.73c0,7.94-.68,14.19-2.05,18.75-1.37,4.56-3.96,8.68-7.76,12.35-3.81,3.68-8.64,6.56-14.5,8.64L0,48.05c5.53-1.82,9.47-4.36,11.82-7.62,2.34-3.25,3.58-7.58,3.71-12.99H2.25V0ZM40.34,0h27.44v19.73c0,7.94-.7,14.19-2.1,18.75-1.4,4.56-4,8.68-7.81,12.35-3.81,3.68-8.61,6.56-14.4,8.64l-5.37-11.43c5.47-1.82,9.39-4.36,11.77-7.62,2.38-3.25,3.6-7.58,3.66-12.99h-13.18V0Z'/%3E%3C/svg%3E");
}

.testimonials.bg-darkblue .items-container::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 67.78 59.47'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7B fill:%23ffffff; opacity:.15; stroke-width:0px; %7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M2.25,0h27.44v19.73c0,7.94-.68,14.19-2.05,18.75-1.37,4.56-3.96,8.68-7.76,12.35-3.81,3.68-8.64,6.56-14.5,8.64L0,48.05c5.53-1.82,9.47-4.36,11.82-7.62,2.34-3.25,3.58-7.58,3.71-12.99H2.25V0ZM40.34,0h27.44v19.73c0,7.94-.7,14.19-2.1,18.75-1.4,4.56-4,8.68-7.81,12.35-3.81,3.68-8.61,6.56-14.4,8.64l-5.37-11.43c5.47-1.82,9.39-4.36,11.77-7.62,2.38-3.25,3.6-7.58,3.66-12.99h-13.18V0Z'/%3E%3C/svg%3E");
}


/* ----------------------------------------------------------------------
   List variation
   ---------------------------------------------------------------------- */

.testimonials .items-container.list {
    display: flex;
    flex-flow: column;
    gap: var(--gap-grid);
}


/* ----------------------------------------------------------------------
   Grid variation
   ---------------------------------------------------------------------- */

.testimonials .items-container.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-grid);
}



/* ----------------------------------------------------------------------
   Desktop (1024px) — 12-column grid on container
   ---------------------------------------------------------------------- */

@media screen and (min-width: 1024px) {

    /* 12-column grid on .container — full width at this breakpoint */
    .testimonials .container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: var(--gap-columns);
    }

    /* Default — full width */
    .testimonials .items-container   { grid-column: span 12; }
    .testimonials .section-intro,
    .testimonials .section-outro     { grid-column: span 12; }

    /* 66% centered width */
    .testimonials.w_66_c .items-container           { grid-column: 3 / span 8; }
    .testimonials.w_66_c .section-intro,
    .testimonials.w_66_c .section-outro             { grid-column: 3 / span 8; }

    /* Quote mark — larger on desktop */
    .testimonials .items-container::before {
        width: 160px;
        height: 140px;
    }

    /* 66% — nudge graphic further left into the margin space */
    .testimonials.w_66_c .items-container::before {
        left: calc( var(--padding-section) / -1 );
    }

    /* Grid — two columns */
    .testimonials .items-container.grid {
        grid-template-columns: 1fr 1fr;
    }

}


/* ----------------------------------------------------------------------
   Desktop (1280px)
   ---------------------------------------------------------------------- */

@media screen and (min-width: 1280px) {

    .testimonials .item figcaption cite {
        font-size: 1em;
        line-height: 1.15;
        font-weight: 300;
    }

    /* Grid — three columns when enough items */
    .testimonials .items-container.grid.n3,
    .testimonials .items-container.grid.n6 {
        grid-template-columns: 1fr 1fr 1fr;
    }

}