/* Testimonial — classes/widgets/Testimonial/testimonial.php
   vw on the 1440 canvas like hero.css; px from 1024 down.
   The Columns control writes --tst-cols-set, never --tst-cols: Elementor's
   selector carries two classes and would outrank the breakpoints below. */

.tst {
    --tst-bg: #ffffff;
    --tst-ink: #111827;
    --tst-body: #4b5563;
    --tst-card: #e8d9b826;
    --tst-line: #e5ded2;
    --tst-star: #e8b64a;
    --tst-star-off: rgba(17, 24, 39, .14);
    --tst-yellow: #e8b64a;
    --tst-cols: var(--tst-cols-set, 3);
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 5.56vw 80px;
    background: var(--tst-bg);
}

.tst *,
.tst *::before,
.tst *::after {
    box-sizing: border-box;
}

.tst__head {
    margin: 0 auto 3.6vw;
    text-align: center;
}

.tst__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8vw;
    margin: 0 0 1.2vw;
}

.tst__eyebrow-dash {
    flex: 0 0 auto;
    width: 1.75vw;
    height: max(2px, .14vw);
    background: var(--tst-ink);
}

.tst__eyebrow-text {
    font-size: max(12px, .94vw);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tst-ink);
}

.tst__title {
    max-width: 44vw;
    margin: 0 auto 1.1vw;
    font-size: max(32px, 3.9vw);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.01em;
    color: var(--tst-ink);
}

.tst__lead {
    max-width: 40vw;
    margin: 0 auto;
    font-size: max(15px, 1.25vw);
    line-height: 1.55;
    color: var(--tst-body);
}

.tst__lead p {
    margin: 0 0 1em;
}

.tst__lead p:last-child {
    margin-bottom: 0;
}

.tst--head-left .tst__head {
    text-align: left;
}

.tst--head-left .tst__eyebrow {
    justify-content: flex-start;
}

.tst--head-left .tst__title,
.tst--head-left .tst__lead {
    margin-inline: 0;
}

/* `stretch`, not `start`: every tile in a row settles on the same height, so
   an image sits flush with the review cards beside it instead of running past
   them. It is also what finally gives .tst__author's `margin-top: auto`
   something to push against — the author lines across a row now share a
   baseline rather than each card ending wherever its quote does. */
.tst__grid {
    display: grid;
    grid-template-columns: repeat(var(--tst-cols), minmax(0, 1fr));
    align-items: stretch;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tst__item {
    display: flex;
}

/* the card or tile fills the row height the grid handed its <li> */
.tst__card,
.tst__media {
    flex: 1 1 auto;
    min-width: 0;
}

.tst__item--span2 {
    grid-column: span 2;
}

.tst__card {
    display: flex;
    flex-direction: column;
    padding: 2.6vw;
    border-radius: 1.5vw;
    background: var(--tst-card);
}

.tst__stars {
    display: flex;
    margin-bottom: 1.5vw;
}

.tst__star {
    width: max(15px, 1.45vw);
    height: max(15px, 1.45vw);
    color: var(--tst-star);
}

.tst__star--off {
    color: var(--tst-star-off);
}

.tst__star svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.tst__text {
    margin: 0 0 2vw;
    font-size: max(14px, 1.05vw);
    line-height: 1.6;
    color: var(--tst-body);
}

.tst__author {
    display: flex;
    align-items: center;
    gap: .9vw;
    margin-top: auto;
    padding-top: 1.4vw;
    border-top: 1px solid var(--tst-line);
}

.tst__avatar {
    flex: 0 0 auto;
    width: max(34px, 3.1vw);
    height: max(34px, 3.1vw);
    overflow: hidden;
    border-radius: 50%;
    background: var(--tst-line);
}

.tst__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tst__who {
    min-width: 0;
}

.tst__name {
    display: block;
    font-size: max(14px, 1.15vw);
    font-weight: 700;
    line-height: 1.3;
    color: var(--tst-ink);
}

.tst__role {
    display: block;
    font-size: max(12px, .95vw);
    line-height: 1.4;
    color: var(--tst-body);
}

/* Media tile
   No aspect-ratio here: a ratio-derived height is what made the tile overshoot
   the review cards next to it. The height comes from the grid row instead, and
   .tst__poster's object-fit crops the photo into whatever shape that is. The
   ratio is still honoured in the two cases where there is no card height to
   match — see the :has() rule below and the one-column breakpoint. */
.tst__media {
    position: relative;
    overflow: hidden;
    border-radius: 1.5vw;
    background: var(--tst-card);
    /* a tile that lands alone in a row has no sibling to take a height from,
       so this keeps it from collapsing. Deliberately well under a review card,
       so it can never be the thing that sets a shared row's height. */
    min-height: 180px;
}

/* nothing but tiles in the grid, so there is no review card setting the row
   height — the tile's own ratio is all there is to shape it */
.tst__grid:not(:has(.tst__item--review)) .tst__media {
    aspect-ratio: var(--tst-media-ratio, 1.22);
}

/* The poster is positioned rather than left in flow, for the same reason the
   ratio came off: while the grid sizes a row, an <img> at `height: 100%`
   inside an auto-height parent falls back to its own natural height, so a
   portrait photo would set the row by itself — the exact overshoot this is
   meant to remove. Out of flow it contributes nothing and simply fills
   whatever height the row settles on. The <a> wrapper the image link renders
   has to be stretched with it, or the click target would collapse. */
.tst__media > a {
    position: absolute;
    inset: 0;
    display: block;
}

.tst__poster {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tst__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(48px, 4.2vw);
    height: max(48px, 4.2vw);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--tst-ink);
    cursor: pointer;
    transition: transform .25s ease, background-color .25s ease;
}

.tst__play:hover,
.tst__play:focus {
    background: #fff;
    transform: translate(-50%, -50%) scale(1.06);
}

.tst__play svg {
    width: 38%;
    height: 38%;
    fill: currentColor;
}

.tst__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.tst__media.is-playing .tst__poster,
.tst__media.is-playing .tst__play {
    display: none;
}

.tst__actions {
    display: flex;
    justify-content: center;
    margin-top: 3vw;
}

.tst__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7vw;
    padding: 1.15vw 2.2vw;
    border: 0;
    border-radius: .56vw;
    background: var(--tst-yellow);
    font-size: max(15px, 1.35vw);
    font-weight: 600;
    line-height: 1;
    color: var(--tst-ink);
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.tst__btn:hover,
.tst__btn:focus {
    background: var(--tst-ink);
    color: #fff;
    transform: translateY(-2px);
}

.tst__btn svg {
    width: max(14px, 1.1vw);
    height: max(14px, 1.1vw);
    fill: currentColor;
}

/* Entrance — held at frame one by assets/css/reveal.css */
@media (prefers-reduced-motion: no-preference) {

    .tst--animated .tst__eyebrow,
    .tst--animated .tst__title,
    .tst--animated .tst__lead,
    .tst--animated .tst__item,
    .tst--animated .tst__actions {
        animation: tst-up .7s cubic-bezier(.22, 1, .36, 1) both;
    }

    .tst--animated .tst__eyebrow { animation-delay: .08s; }
    .tst--animated .tst__title { animation-delay: .16s; }
    .tst--animated .tst__lead { animation-delay: .24s; }
    .tst--animated .tst__item:nth-child(1) { animation-delay: .30s; }
    .tst--animated .tst__item:nth-child(2) { animation-delay: .36s; }
    .tst--animated .tst__item:nth-child(3) { animation-delay: .42s; }
    .tst--animated .tst__item:nth-child(4) { animation-delay: .48s; }
    .tst--animated .tst__item:nth-child(5) { animation-delay: .54s; }
    .tst--animated .tst__item:nth-child(6) { animation-delay: .60s; }
    .tst--animated .tst__item:nth-child(n+7) { animation-delay: .66s; }
    .tst--animated .tst__actions { animation-delay: .74s; }
}

@keyframes tst-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 1024px) {

    .tst {
        --tst-cols: 2;
        padding: 56px 32px;
    }

    .tst__head {
        margin-bottom: 32px;
    }

    .tst__eyebrow {
        gap: 10px;
        margin-bottom: 14px;
    }

    .tst__eyebrow-dash {
        width: 24px;
    }

    .tst__eyebrow-text {
        font-size: 13px;
    }

    .tst__title {
        max-width: none;
        margin-bottom: 12px;
        font-size: 40px;
    }

    .tst__lead {
        max-width: 52ch;
        font-size: 17px;
    }

    .tst__grid {
        gap: 20px;
    }

    .tst__card,
    .tst__media {
        border-radius: 16px;
    }

    .tst__card {
        padding: 24px;
    }

    .tst__stars {
        gap: 4px;
        margin-bottom: 14px;
    }

    .tst__star {
        width: 17px;
        height: 17px;
    }

    .tst__text {
        margin-bottom: 20px;
        font-size: 16px;
    }

    .tst__author {
        gap: 12px;
        padding-top: 16px;
    }

    .tst__avatar {
        width: 40px;
        height: 40px;
    }

    .tst__name {
        font-size: 16px;
    }

    .tst__role {
        font-size: 13px;
    }

    .tst__play {
        width: 56px;
        height: 56px;
    }

    .tst__actions {
        margin-top: 32px;
    }

    .tst__btn {
        gap: 8px;
        padding: 16px 26px;
        border-radius: 8px;
        font-size: 17px;
    }

    .tst__btn svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 600px) {

    .tst {
        --tst-cols: 1;
        padding: 40px 20px;
    }

    .tst__item--span2 {
        grid-column: auto;
    }

    /* one column puts every tile alone in its row, so there is no card beside
       it to match and the ratio goes back to being what shapes it */
    .tst__media {
        aspect-ratio: var(--tst-media-ratio, 1.22);
    }

    .tst__title {
        font-size: 30px;
    }

    .tst__lead {
        font-size: 16px;
    }

    .tst__grid {
        gap: 16px;
    }

    .tst__card {
        padding: 20px;
    }

    .tst__actions {
        display: block;
    }

    .tst__btn {
        width: 100%;
        padding: 15px 22px;
        font-size: 16px;
    }
}