/* ════════════════════════════════════════════════════════════════════════════
   TestimonialCard — generalized dark review card ("Testimonial Card Large").
   Extracted from content-v3.css (.cnt-v3-card*); values preserved verbatim.
   Card carries data-colors="primary-dark" so type is white + accents lime;
   this file paints the dark surface, lime offset shadow, and inner rules.
   Artifact TestimonialCardLarge: p-40 gap-24, rounded-16, lime drop-shadow.
   Root selector is article.tstm-card (0,1,1) so the rules keep their edge over
   same-specificity utilities regardless of CSS load order.
   ════════════════════════════════════════════════════════════════════════════ */

article.tstm-card {
    display: flex;
    flex-direction: column;
    gap: 1.333rem;                /* 24px */
    width: 100%;
    background: var(--background);            /* dark palette bg */
    color: var(--text-color);                 /* white */
    border-color: var(--black);              /* .bdr_a supplies 2px solid */
    border-radius: var(--bdr-rds);          /* 16px */
    padding: 2.222rem;                        /* 40px */
    box-shadow: var(--bx-sdw-x) var(--bx-sdw-y) var(--bx-sdw-blr) 0 var(--lt-accent);   /* 4px 6px 0 lime */

    /* Top block: stars + numeric rating, divider rule under it */
    .tstm-card-top {
        display: flex;
        flex-direction: column;
        gap: 0.556rem;                /* 10px */
        padding-bottom: 1.778rem;     /* 32px */
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .tstm-stars {
        display: inline-flex;
        line-height: 1; /* was 0 — policy: never < 1 */
    }

    .tstm-stars svg {
        display: block;
        width: 8.889rem;              /* 160px */
        height: 1.5rem;               /* 27px */
    }

    .tstm-rating {
        display: flex;
        align-items: flex-start;
        gap: 0.556rem;                /* 10px */
    }

    .tstm-rating-num {
        font-family: var(--fnt-t-big-ff);
        font-weight: var(--fnt-t-big-w);
        line-height: 1; /* was 0.9 — policy: never < 1 */
        color: var(--text-color);
    }

    .tstm-rating-meta {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.556rem;                /* 10px */
    }

    .tstm-rating-label {
        font-family: var(--fnt-m);
        text-transform: uppercase;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.5);
    }

    .tstm-rating-count {
        font-family: var(--fnt-m);
        line-height: 1.4;
        color: var(--text-color);
    }

    /* Middle block: lime-ruled pull-quote + attribution, divider under it */
    .tstm-card-mid {
        display: flex;
        flex-direction: column;
        gap: 1.333rem;                /* 24px */
        padding-bottom: 0.889rem;     /* 16px */
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .tstm-quote {
        margin: 0;
        padding-left: 0.889rem;       /* 16px */
        border-left: 1px solid var(--accent);
        font-family: var(--fnt-t);    /* Archivo */
        font-style: italic;
        line-height: 1.5;
        color: var(--text-color);
    }

    .tstm-attr {
        display: flex;
        flex-direction: column;
        gap: 0.444rem;                /* 8px */
    }

    .tstm-attr-name {
        font-family: var(--fnt-t);
        line-height: 1.4;
        color: var(--text-color);
    }

    .tstm-attr-loc {
        font-family: var(--fnt-m);
        text-transform: uppercase;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.5);
    }

    /* Bottom block: see-all link ("as seen on" pills removed for now) */
    .tstm-card-btm {
        display: flex;
        flex-direction: column;
        gap: 0.889rem;                /* 16px */
    }

    .tstm-seeall {
        display: inline-flex;
        align-items: center;
        gap: 0.556rem;                /* 10px */
        align-self: flex-start;
        text-decoration: none;
        color: var(--link-color);     /* lime on the dark palette */
        border-bottom: 1px solid var(--link-color);
        transition: color var(--g-trn-sp) var(--g-trn-tf), border-color var(--g-trn-sp) var(--g-trn-tf);
    }

    .tstm-seeall-label {
        font-family: var(--fnt-t);
        line-height: 1.2;
        color: var(--link-color);
    }

    .tstm-seeall-arw {
        display: block;
        width: 1.111rem;              /* 20px */
        height: 1.111rem;
        color: var(--link-color);
        transition: transform var(--g-trn-sp) var(--g-trn-tf);
    }

    /* Hover/focus: brighten to the palette link-hover + nudge the arrow up-right. */
    @media (hover: hover) and (pointer: fine) {
        .tstm-seeall:is(:hover, :focus-visible) {
            color: var(--link-hover);
            border-bottom-color: var(--link-hover);

            :is(.tstm-seeall-label, .tstm-seeall-arw) {
                color: var(--link-hover);
            }

            .tstm-seeall-arw {
                transform: translate(0.167rem, -0.167rem);   /* ~3px up-right, along the arrow */
            }
        }
    }

    /* Desktop: deliberate display-size rating numeral + fine-print count that
       fall outside the mobile ramp; base classes (fnt_t-big / fnt_nv-sec)
       carry the mobile sizing. */
    @media (min-width: 1280px) {
        .tstm-rating-num {
            font-size: 4.889rem;      /* 88px */
        }

        .tstm-rating-count {
            font-size: 0.722rem;      /* 13px */
        }
    }
}