/*
==========================================================
TESTIMONIALS — testimonials.css
==========================================================
WHAT IT IS:
A grid of customer testimonial cards (BATCH_8_PLAN.md §41).

WHAT IT DOES:
Each card shows optional stars, the quote (line breaks
kept), then the person: optional small photo, name,
role — company, review source and a separate source link.
2 or 3 cards per row by the block's own width (fewer in
narrow spaces and on phones). Optional heading area,
heading and testimonial alignment, section background,
Card / Flat with its own card colour, and spacing.

HOW TO USE:
1. Add the "Testimonials" block to a page or post.
2. Testimonials tab: add a quote and a name for each one;
   the rest is optional.
3. Heading & text, Layout, Background and Advanced are
   optional. Without changes it looks as before.

All values use boilerplate CSS tokens from style.css.
==========================================================
*/

/* Block wrapper. The space inside the section follows Space above /
   below (shared §25 standard); Normal is the usual space. */
.testimonials_block {
    --tm-space-top: var(--space-12);
    --tm-space-bottom: var(--space-12);
    margin: var(--space-12) 0;
    padding: var(--tm-space-top) 0 var(--tm-space-bottom);
}

/* Layout follows the block's own width (§41), not the window. */
.testimonials_wrapper {
    container: testimonials / inline-size;
}

/* ── Heading area ───────────────────────────────────────── */
.testimonials_header {
    margin-bottom: var(--space-10);
}

.testimonials_head_align_center .testimonials_header { text-align: center; }
.testimonials_head_align_left   .testimonials_header { text-align: left; }

.testimonials_label {
    margin: 0 0 var(--space-2) 0;
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Label look: Rounded tag (shared §28 pattern).
   BOILERPLATE NOTE: the same rule lives in style.css §10c. Kept here so
   this block works when copied to a new project on its own. */
.testimonials_label.testimonials_label_pill {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid currentColor;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, currentColor 8%, transparent);
    line-height: var(--leading-tight);
}

.testimonials_title {
    font-size: var(--text-3xl);
    color: var(--color-primary);
    margin: 0;
}

.testimonials_intro {
    margin: var(--space-3) 0 0 0;
    max-width: 720px;
    color: var(--color-text);
    line-height: var(--leading-relaxed);
}

.testimonials_head_align_center .testimonials_intro {
    margin-left: auto;
    margin-right: auto;
}

/* ── Grid ───────────────────────────────────────────────── */
.testimonials_grid {
    display: grid;
    gap: var(--space-6);
}

.testimonials_cols_2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.testimonials_cols_3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ── Card ───────────────────────────────────────────────────
   Not a link, so no hover lift (§41). */
.testimonial_card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

/* Star rating. Screen readers hear “Rated 4 out of 5”; the stars are
   for sight only. Empty stars are outlines, so it isn't colour alone. */
.testimonial_stars {
    display: flex;
    gap: var(--space-1);
    margin: 0;
    line-height: 1;
}

.testimonial_star {
    font-size: var(--text-lg);
    line-height: 1;
}

.testimonial_star.filled {
    color: var(--color-rating);
}

.testimonial_star.empty {
    color: var(--color-text-muted);
}

/* Quote: line breaks kept; long words wrap instead of overflowing.
   Resets the global blockquote look (style.css §4f). */
.testimonial_quote {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-style: italic;
    color: var(--color-text);
    line-height: var(--leading-relaxed);
    border: none;
    padding: 0;
    margin: 0;
    flex: 1;
    overflow-wrap: anywhere;
}

.testimonial_quote p {
    margin: 0 0 var(--space-3) 0;
    color: inherit;
    font: inherit;
}

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

/* Person. Resets the global figcaption look (style.css §7c). */
.testimonial_author {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    margin: auto 0 0 0;
    font-size: var(--text-base);
    font-style: normal;
    color: var(--color-text);
    text-align: left;
}

/* With no quote above (name only), no divider is needed. */
.testimonial_card > .testimonial_author:first-child,
.testimonial_stars + .testimonial_author {
    padding-top: 0;
    border-top: 0;
}

.testimonial_photo {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--color-border);
}

.testimonial_author_info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    overflow-wrap: anywhere;
}

.testimonial_name {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
}

.testimonial_role,
.testimonial_source {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-family: var(--font-accent);
}

.testimonial_source_link {
    font-size: var(--text-sm);
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.testimonial_source_link:hover {
    color: var(--color-accent-hover);
}

.testimonial_source_link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Screen-reader-only words (rating, new tab). */
.testimonials_sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Testimonial alignment: Centre ────────────────────────
   Stars, quote, photo, person and source line up in the middle. */
.testimonials_card_align_center .testimonial_card {
    text-align: center;
}

.testimonials_card_align_center .testimonial_stars {
    justify-content: center;
}

.testimonials_card_align_center .testimonial_author {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
}

.testimonials_card_align_center .testimonial_author_info {
    align-items: center;
}

/* ── Responsive — by the block's own width (943px ≈ the old 1024px
   window step once page padding is taken off; 687px ≈ 768px). ── */
@container testimonials (max-width: 943px) {
    .testimonials_cols_3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container testimonials (max-width: 687px) {
    .testimonials_cols_2,
    .testimonials_cols_3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .testimonial_card {
        padding: var(--space-6);
    }
}

/* Browsers without container queries keep the window-based steps. */
@supports not (container-type: inline-size) {
    @media (max-width: 1024px) {
        .testimonials_cols_3 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 768px) {
        .testimonials_cols_2,
        .testimonials_cols_3 {
            grid-template-columns: minmax(0, 1fr);
        }

        .testimonial_card {
            padding: var(--space-6);
        }
    }
}

@media (max-width: 768px) {
    .testimonials_title {
        font-size: var(--text-2xl);
    }
}

@media (max-width: 480px) {
    .testimonials_block {
        --tm-space-top: var(--space-8);
        --tm-space-bottom: var(--space-8);
        margin: var(--space-8) 0;
    }
}

/* ── Space above / below (shared §25 standard) ──────────────
   Two classes so the choice beats the breakpoint rule above. */
.testimonials_block.testimonials_block_space_top_none     { --tm-space-top: 0px; }
.testimonials_block.testimonials_block_space_top_small    { --tm-space-top: var(--space-10); }
.testimonials_block.testimonials_block_space_top_large    { --tm-space-top: calc(var(--space-16) * 2); }
.testimonials_block.testimonials_block_space_bottom_none  { --tm-space-bottom: 0px; }
.testimonials_block.testimonials_block_space_bottom_small { --tm-space-bottom: var(--space-10); }
.testimonials_block.testimonials_block_space_bottom_large { --tm-space-bottom: calc(var(--space-16) * 2); }

@media (max-width: 768px) {
    .testimonials_block.testimonials_block_space_top_small    { --tm-space-top: var(--space-8); }
    .testimonials_block.testimonials_block_space_top_large    { --tm-space-top: var(--space-20); }
    .testimonials_block.testimonials_block_space_bottom_small { --tm-space-bottom: var(--space-8); }
    .testimonials_block.testimonials_block_space_bottom_large { --tm-space-bottom: var(--space-20); }
}

@media (max-width: 480px) {
    .testimonials_block.testimonials_block_space_top_small    { --tm-space-top: var(--space-6); }
    .testimonials_block.testimonials_block_space_top_large    { --tm-space-top: var(--space-16); }
    .testimonials_block.testimonials_block_space_bottom_small { --tm-space-bottom: var(--space-6); }
    .testimonials_block.testimonials_block_space_bottom_large { --tm-space-bottom: var(--space-16); }
}

/* ── Section background (shared six-choice pattern) ────────
   Only with a chosen colour: the outside margin goes, so the colour
   meets the next section. Cards keep their own surface. */
.testimonials_block.testimonials_sbg {
    margin-top: 0;
    margin-bottom: 0;
}

.testimonials_sbg_background     { background-color: var(--color-bg); }
.testimonials_sbg_alt_background { background-color: var(--color-bg-alt); }
.testimonials_sbg_dark           { background-color: var(--color-bg-dark); }
.testimonials_sbg_accent         { background-color: var(--color-accent); }
.testimonials_sbg_custom         { background-color: var(--testimonials-section-bg, var(--color-bg)); }

.testimonials_sbg_text_light .testimonials_title,
.testimonials_sbg_text_light .testimonials_label {
    color: var(--color-text-inverse);
}

.testimonials_sbg_text_light .testimonials_intro {
    color: var(--color-text-inverse-soft);
}

.testimonials_sbg_text_light .testimonials_intro a {
    color: inherit;
    text-decoration: underline;
}

/* ── Content look + card background (BATCH_8_PLAN.md §40) ───
   Card (default): the usual white card. A chosen Card background fills
   it (and drops the gray border). Flat removes fill, border, shadow and
   radius; spacing and the divider above the person stay.
   testimonials_on_dark: the surface behind the words is dark (a Dark /
   Brand / light-text custom card, or Flat on such a section). */
.testimonials_look_flat .testimonial_card {
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

.testimonials_block.testimonials_cbg_background     .testimonial_card { background-color: var(--color-bg); border-color: transparent; }
.testimonials_block.testimonials_cbg_alt_background .testimonial_card { background-color: var(--color-bg-alt); border-color: transparent; }
.testimonials_block.testimonials_cbg_dark           .testimonial_card { background-color: var(--color-bg-dark); border-color: transparent; }
.testimonials_block.testimonials_cbg_accent         .testimonial_card { background-color: var(--color-accent); border-color: transparent; }
.testimonials_block.testimonials_cbg_custom         .testimonial_card { background-color: var(--testimonials-card-bg, var(--color-bg)); border-color: transparent; }

.testimonials_on_dark .testimonial_quote,
.testimonials_on_dark .testimonial_author {
    color: var(--color-text-inverse-soft);
}

.testimonials_on_dark .testimonial_name,
.testimonials_on_dark .testimonial_source_link,
.testimonials_on_dark .testimonial_source_link:hover {
    color: var(--color-text-inverse);
}

.testimonials_on_dark .testimonial_role,
.testimonials_on_dark .testimonial_source,
.testimonials_on_dark .testimonial_star.empty {
    color: var(--color-text-inverse-muted);
}

.testimonials_on_dark .testimonial_author {
    border-top-color: color-mix(in srgb, var(--color-text-inverse) 25%, transparent);
}

.testimonials_on_dark .testimonial_card > .testimonial_author:first-child,
.testimonials_on_dark .testimonial_stars + .testimonial_author {
    border-top: 0;
}

.testimonials_on_dark .testimonial_photo {
    border-color: color-mix(in srgb, var(--color-text-inverse) 40%, transparent);
}

.testimonials_on_dark .testimonial_source_link:focus-visible {
    outline-color: var(--color-text-inverse);
}

/* On the brand colour the gold stars may not stand out, so filled
   stars turn light (the outline stars still show the difference). */
.testimonials_on_accent .testimonial_star.filled {
    color: var(--color-text-inverse);
}

/* ── Editor-only messages ───────────────────────────────── */
.testimonials_preview_empty,
.testimonials_preview_note {
    box-sizing: border-box;
    margin: var(--space-4) auto 0;
    padding: var(--space-3) var(--space-6);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: var(--text-sm);
}

.testimonials_preview_empty {
    margin: var(--space-4) auto;
    text-align: center;
}