/*
    The rotating showcase of the testimonies on the home page.

    The pool is in the markup, in the order the ministry set. The
    script moves the track; the CSS decides how many cards fit and how
    the movement looks.

    Every colour and every measure comes from the tokens of the site.
*/

.tlv-testimonies-section {
    padding: var(--tlv-space-9, 96px) 0;
    background: var(--tlv-paper, #ffffff);
}

.tlv-testimonies-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--tlv-space-5, 24px);
    margin-bottom: var(--tlv-space-6, 32px);
    flex-wrap: wrap;
}

.tlv-testimonies-section h2 {
    text-align: center;
    margin: 0 0 var(--tlv-space-3, 12px) 0;
    color: var(--tlv-primary, #1e3a8a);
    font-size: var(--tlv-size-3xl, 3rem);
    line-height: var(--tlv-leading-tight, 1.25);
}

.tlv-testimonies-section__description {
    color: var(--tlv-muted, #6b7280);
    max-width: var(--tlv-wrap-narrow, 780px);
    margin: 0 auto var(--tlv-space-6, 32px) auto;
    text-align: center;
}

.tlv-carousel {
    position: relative;
}

.tlv-carousel__viewport {
    overflow: hidden;
    /*
        The room the arrows stand in, so that they never cover a card.
        It is a margin and not a padding, so that the window of the
        showcase ends exactly where the cards end: no card is half
        shown at the edge.
    */
    margin: 0 52px;
}

.tlv-carousel__track {
    display: flex;
    gap: var(--tlv-space-5, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform var(--tlv-move, 220ms) cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

.tlv-carousel__item {
    flex: 0 0 calc((100% - 2 * var(--tlv-space-5, 24px)) / 3);
    min-width: 0;
}

/*
    The copies are written exactly like the cards they copy, and they
    may be used like any other card. The keyboard does not stop on
    them, because the card itself is already there for the keyboard to
    find.
*/

.tlv-testimony-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    padding: 0;
    background: var(--tlv-surface, #f9fafb);
    border: 1px solid var(--tlv-line, #e5e7eb);
    border-radius: var(--tlv-radius-lg, 16px);
    box-shadow: var(--tlv-shadow-sm, 0 1px 2px rgba(15, 27, 77, 0.06));
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform var(--tlv-move, 220ms) ease, box-shadow var(--tlv-move, 220ms) ease, border-color var(--tlv-move, 220ms) ease;
}

/*
    The whole card opens the testimony, so the pressed part is a
    button that fills the card.
*/
.tlv-testimony-card__open {
    display: flex;
    flex-direction: column;
    gap: var(--tlv-space-4, 16px);
    flex: 1;
    width: 100%;
    padding: var(--tlv-space-5, 24px);
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.tlv-testimony-card__open:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--tlv-ring, 0 0 0 3px rgba(30, 58, 138, 0.35));
}

.tlv-testimony-card:hover,
.tlv-testimony-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--tlv-shadow-lg, 0 18px 48px rgba(15, 27, 77, 0.12));
    border-color: var(--tlv-primary, #1e3a8a);
}

.tlv-testimony-card__quote,
.tlv-testimony-card blockquote {
    margin: 0;
    display: block;
    font-style: italic;
    color: var(--tlv-ink-soft, #374151);
    font-size: var(--tlv-size-md, 1.125rem);
    line-height: var(--tlv-leading, 1.65);
}

.tlv-testimony-card__who {
    display: flex;
    flex-direction: column;
    gap: var(--tlv-space-1, 4px);
    margin-top: auto;
}

.tlv-testimony-card cite {
    font-style: normal;
    font-weight: 700;
    color: var(--tlv-primary, #1e3a8a);
    font-size: var(--tlv-size-base, 1rem);
}

.tlv-testimony-card__country {
    display: inline-flex;
    align-items: center;
    gap: var(--tlv-space-2, 8px);
    color: var(--tlv-muted, #6b7280);
    font-size: var(--tlv-size-sm, 0.875rem);
}

.tlv-testimony-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--tlv-space-2, 8px);
    align-self: flex-start;
    margin: 0 var(--tlv-space-5, 24px) var(--tlv-space-5, 24px);
    color: var(--tlv-gold-text, #b45309);
    font-size: var(--tlv-size-sm, 0.875rem);
    font-weight: 600;
    text-decoration: none;
}

.tlv-testimony-card__cta:hover,
.tlv-testimony-card__cta:focus-visible {
    color: var(--tlv-primary, #1e3a8a);
    text-decoration: underline;
}

.tlv-testimony-card__more {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tlv-muted, #6b7280);
    font-size: var(--tlv-size-xs, 0.75rem);
    text-decoration: underline;
    cursor: pointer;
}

.tlv-testimony-card__more:hover,
.tlv-testimony-card__more:focus-visible {
    color: var(--tlv-primary, #1e3a8a);
}

.tlv-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--tlv-line, #e5e7eb);
    border-radius: var(--tlv-radius-pill, 999px);
    background: var(--tlv-paper, #ffffff);
    color: var(--tlv-primary, #1e3a8a);
    box-shadow: var(--tlv-shadow, 0 4px 18px rgba(15, 27, 77, 0.08));
    cursor: pointer;
    transition: background var(--tlv-move-fast, 140ms) ease, color var(--tlv-move-fast, 140ms) ease;
}

.tlv-carousel__arrow:hover,
.tlv-carousel__arrow:focus-visible {
    background: var(--tlv-primary, #1e3a8a);
    color: var(--tlv-paper, #ffffff);
}

.tlv-carousel__arrow--prev {
    left: 0;
}

.tlv-carousel__arrow--next {
    right: 0;
}

.tlv-carousel__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--tlv-space-2, 8px);
    margin-top: var(--tlv-space-5, 24px);
}

.tlv-carousel__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: var(--tlv-radius-pill, 999px);
    background: var(--tlv-line-strong, #d1d5db);
    cursor: pointer;
    transition: background var(--tlv-move-fast, 140ms) ease, transform var(--tlv-move-fast, 140ms) ease;
}

.tlv-carousel__dot:hover,
.tlv-carousel__dot:focus-visible {
    background: var(--tlv-muted, #6b7280);
}

.tlv-carousel__dot[aria-current="true"] {
    background: var(--tlv-accent, #f59e0b);
    transform: scale(1.3);
}

.tlv-testimonies-empty {
    text-align: center;
    padding: var(--tlv-space-7, 48px) var(--tlv-space-5, 24px);
    background: var(--tlv-surface, #f9fafb);
    border: 1px dashed var(--tlv-line-strong, #d1d5eb);
    border-radius: var(--tlv-radius-lg, 16px);
}

/*
    The box that shows the whole testimony without leaving the page.
*/
.tlv-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 27, 77, 0.6);
    backdrop-filter: blur(5px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: var(--tlv-space-5, 24px);
}

.tlv-popup-overlay.show {
    display: flex;
}

.tlv-popup-overlay[hidden] {
    display: none;
}

.tlv-popup-content {
    position: relative;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--tlv-paper, #ffffff);
    padding: var(--tlv-space-7, 48px);
    border-radius: var(--tlv-radius-lg, 16px);
    box-shadow: var(--tlv-shadow-lg, 0 18px 48px rgba(15, 27, 77, 0.12));
    text-align: center;
}

.tlv-popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: 0;
    padding: 0;
    color: var(--tlv-faint, #9ca3af);
    cursor: pointer;
    border-radius: var(--tlv-radius-sm, 6px);
}

.tlv-popup-close:hover,
.tlv-popup-close:focus-visible {
    color: var(--tlv-ink, #1f2937);
}

.tlv-popup-icon {
    font-size: 48px;
    margin-bottom: var(--tlv-space-5, 24px);
}

.tlv-featured-quote {
    margin: 0 0 var(--tlv-space-5, 24px) 0;
    font-style: italic;
    font-size: var(--tlv-size-lg, 1.375rem);
    line-height: var(--tlv-leading-loose, 1.8);
    color: var(--tlv-ink-soft, #374151);
    text-align: left;
}

.tlv-featured-author {
    font-size: var(--tlv-size-lg, 1.375rem);
    font-weight: 700;
    color: var(--tlv-primary, #1e3a8a);
    margin-bottom: var(--tlv-space-1, 4px);
}

.tlv-featured-country {
    color: var(--tlv-muted, #6b7280);
    font-size: var(--tlv-size-base, 1rem);
    margin-bottom: var(--tlv-space-5, 24px);
}

.tlv-featured-answer,
.tlv-featured-prayer {
    display: none;
    margin-top: var(--tlv-space-5, 24px);
    padding-top: var(--tlv-space-5, 24px);
    border-top: 1px solid var(--tlv-line, #e5e7eb);
    text-align: left;
}

.tlv-featured-answer h4,
.tlv-featured-prayer h4 {
    margin: 0 0 var(--tlv-space-3, 12px) 0;
    font-size: var(--tlv-size-sm, 0.875rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tlv-primary, #1e3a8a);
}

.tlv-featured-answer p,
.tlv-featured-prayer p {
    margin: 0;
    color: var(--tlv-ink-soft, #374151);
    line-height: var(--tlv-leading, 1.65);
}

.tlv-testimonies-empty p {
    color: var(--tlv-muted, #6b7280);
    margin: 0 0 var(--tlv-space-5, 24px) 0;
}

.tlv-testimonies-share-row {
    max-width: none;
    margin: var(--tlv-space-5, 24px) auto 0;
    text-align: center;
}

.tlv-testimonies-share {
    display: inline-flex;
    align-items: center;
    gap: var(--tlv-space-2, 8px);
    padding: 12px 24px;
    border-radius: var(--tlv-radius, 10px);
    background: var(--tlv-primary, #1e3a8a);
    color: var(--tlv-paper, #ffffff);
    font-weight: 600;
    text-decoration: none;
}

.tlv-testimonies-share:hover,
.tlv-testimonies-share:focus-visible {
    background: var(--tlv-primary-dark, #172554);
}

@media (max-width: 980px) {
    .tlv-carousel__item {
        flex-basis: calc((100% - var(--tlv-space-5, 24px)) / 2);
    }
}

@media (max-width: 640px) {
    .tlv-testimonies-section {
        padding: var(--tlv-space-7, 48px) 0;
    }

    .tlv-testimonies-section h2 {
        font-size: var(--tlv-size-2xl, 2.25rem);
    }

    .tlv-carousel__item {
        flex-basis: 100%;
    }

    /*
        On a narrow screen one card fills the width, and the arrows
        stand in a row of their own beside the dots. They never stand
        on the words of a testimony.
    */
    .tlv-carousel {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        grid-template-areas:
            "prev viewport next"
            "dots dots dots";
        align-items: center;
    }

    .tlv-carousel__viewport {
        grid-area: viewport;
        margin: 0;
    }

    .tlv-carousel__arrow {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        width: 44px;
        height: 44px;
    }

    .tlv-carousel__arrow--prev {
        grid-area: prev;
        justify-self: start;
    }

    .tlv-carousel__arrow--next {
        grid-area: next;
        justify-self: end;
    }

    .tlv-carousel__dots {
        grid-area: dots;
        margin-top: var(--tlv-space-4, 16px);
    }
}

/*
    The visitor who asks for less movement gets less movement: the
    showcase does not move by itself, and the cards change at once.
*/
@media (prefers-reduced-motion: reduce) {
    .tlv-carousel__track {
        transition: none;
    }

    .tlv-testimony-card {
        transition: none;
    }

    .tlv-testimony-card:hover,
    .tlv-testimony-card:focus-visible {
        transform: none;
    }
}