/* --------------------------------- */
/* Testimonial Slider Block          */
/* Shared styles: frontend + editor  */
/*                                   */
/* Layout:                           */
/*   .ts-block__slide                */
/*     .ts-block__inner (grid)       */
/*       .ts-block__image-col        */
/*         img (cover)               */
/*         ::after = dark wash       */
/*       .ts-block__content-col      */
/*         — overlaid via grid stack */
/*                                   */
/* Both image-col and content-col    */
/* share grid-column: 1 /            */
/* grid-row: 1 so they occupy the    */
/* same cell.                        */
/*                                   */
/* Height is driven by content-col.  */
/* All slides match the tallest via  */
/* align-items: stretch on the       */
/* swiper-wrapper flex container.    */
/* --------------------------------- */


/* --------------------------------- */
/* Swiper wrapper                    */
/* --------------------------------- */
.ts-block {
    position: relative;
    width: 100%;
}

/* --------------------------------- */
/* Force all slides to match the     */
/* tallest slide height.             */
/*                                   */
/* .swiper-wrapper is already a flex */
/* container. align-items: stretch   */
/* forces all slide children to the  */
/* height of the tallest member.     */
/* --------------------------------- */
.ts-block .swiper-wrapper {
    align-items: stretch;
}

.ts-block .swiper-slide {
    width: min( calc( 100vw - 200px ), 900px );
    height: auto;
}


/* --------------------------------- */
/* Slide inner wrapper               */
/*                                   */
/* Single-cell grid.                 */
/* Both children placed in cell 1/1  */
/* so content drives the height and  */
/* the image fills whatever height   */
/* the content produces.             */
/*                                   */
/* height: 100% fills the full       */
/* height of the swiper-slide which  */
/* is stretched to match the tallest */
/* slide via align-items: stretch    */
/* on the swiper-wrapper.            */
/*                                   */
/* aspect-ratio removed entirely.    */
/* --------------------------------- */
.ts-block__inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.ts-block__link:hover,
.ts-block__link:focus {
    text-decoration: none;
    color: inherit;
}

.testimonial-slider-more-arrow {
    text-align: right;
}

.testimonial-slider-more-arrow svg {
    width: 40px;
}


/* --------------------------------- */
/* Image column                      */
/*                                   */
/* Placed in grid cell 1 / 1.        */
/* position: relative required so    */
/* the ::after wash pseudo-element   */
/* has a containing block to fill.   */
/* --------------------------------- */
.ts-block__image-col {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    overflow: hidden;
}

.ts-block__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* --------------------------------- */
/* Dark wash                         */
/*                                   */
/* position: absolute fills the      */
/* image-col which is position:      */
/* relative. Sits above the image    */
/* but below the content-col which   */
/* is later in source order.         */
/* --------------------------------- */
.ts-block__image-col::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba( 0, 0, 0, 0.5 );
    pointer-events: none;
}


/* --------------------------------- */
/* Placeholder when no image is set  */
/* --------------------------------- */
.ts-block__image-placeholder {
    width: 100%;
    height: 100%;
    background: #333;
}


/* --------------------------------- */
/* Content column                    */
/*                                   */
/* Same grid cell as image-col.      */
/* Source order places it on top     */
/* of the image without z-index.     */
/*                                   */
/* position: relative establishes    */
/* a stacking context above the      */
/* image-col layer.                  */
/*                                   */
/* flex column with space-between    */
/* distributes content top to bottom */
/* within the full slide height.     */
/* --------------------------------- */
.ts-block__content-col {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 3rem;
    color: #fff;
}


/* --------------------------------- */
/* Quote                             */
/*                                   */
/* blockquote margin/border reset.   */
/* max-width constrains line length  */
/* on wide slides.                   */
/* --------------------------------- */
.ts-block__quote {
    margin-top: 3rem;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1rem;
    padding: 0;
    border: none;
    font-size: 1.5rem;
    line-height: 2rem;
    max-width: 60ch;
    color: #fff;
}


/* --------------------------------- */
/* Author attribution                */
/* --------------------------------- */
.ts-block__author {
    line-height: 1.25rem;
    color: #fff;
    margin-top: 1rem;
}

.ts-block__author-name {
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
}

.ts-block__author-title,
.ts-block__author-org {
    font-size: 1rem;
    color: #fff;
}


/* --------------------------------- */
/* Empty state                       */
/* --------------------------------- */
.ts-block__empty {
    padding: 2rem;
    border: 2px dashed #ccc;
    color: #999;
}


/* --------------------------------- */
/* Editor inspector styles           */
/* (post picker UI)                  */
/* --------------------------------- */
.ts-picker {
    font-size: 13px;
}

.ts-picker__help {
    font-size: 12px;
    color: #757575;
    font-style: italic;
    margin-bottom: 0.75rem;
}

.ts-picker__selected-list,
.ts-picker__results-list {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.ts-picker__selected-item {
    display: flex;
    justify-content: space-between;
    padding: 0.375rem 0;
    border-bottom: 1px solid #e0e0e0;
    gap: 0.5rem;
}

.ts-picker__selected-title {
    flex: 1;
    font-size: 12px;
}

.ts-picker__result-item {
    padding: 0.25rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.ts-picker__no-results {
    font-size: 12px;
    color: #888;
    font-style: italic;
}

.ts-picker__remove-btn {
    flex-shrink: 0;
}

@media (max-width: 768px) {

    .ts-block .swiper-slide {
        width: min(calc(100vw - 100px), 900px);
    }

    .ts-block__quote {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

}