/* ============================================================
   MORETECH -- TESTIMONIALS
   First-party markup + CSS (see partials/testimonials.php's own header
   for the full rationale). Every recurring visual value is a real --mt-*
   token.

   Design Language v2 (MoreTech craftsmanship pass): the card's own
   hierarchy device is an oversized quotation glyph behind the quote,
   with the quote set in real display copy and the author separated by a
   hairline rule. 'spotlight' becomes a single, large, framed pull-quote.
   Class hooks (.mt-testimonials, .mt-testimonials__header/__eyebrow/
   __heading/__grid/__card/__stars/__text/__author/__avatar/
   __author-meta/__name/__role, and the --spotlight modifier) are
   UNCHANGED. The real :only-child grid-track bug fix is preserved.

   Testimonials reconnect round (2026-09-22) -- a recolor + reconnect
   pass, NOT a redesign. Same shape as Process Flow/Why Choose Us:
     1. All 3 remaining --mt-accent usages (eyebrow, stars, the
        decorative quote glyph) replaced with a fixed --ally-blue-500
        accent -- deliberately NOT currentColor, matching every other
        Ally eyebrow/accent-node in this system. The avatar already
        correctly used Ally navy (--mt-brand-primary) and needed no
        change.
     2. currentColor-on-root applied to the shared heading only. Unlike
        Process Flow ('vertical') and Why Choose Us ('checklist'),
        NEITHER composition here needed a body-text currentColor
        override: testimonial text/name/role sit on their own card
        surface in BOTH 'grid' (--mt-surface-card) and 'spotlight' (its
        own tinted panel) -- there is no "sits directly on the section
        background" case in this module, so all card-level text stays
        hardcoded deliberately, same reasoning as Services' Grid/
        Detailed.
   No composition, markup, class, or interaction changed.
   ============================================================ */

.mt-testimonials {
    padding: var(--mt-section-py) 0;
    background: var(--mt-page-bg);
    font-family: var(--mt-font-sans);
    /* Ally identity / Studio fix (2026-09-22): explicit base color so
       .mt-testimonials__heading can read currentColor and a Studio
       self.color edit actually reaches it -- same fix already applied
       to Process Flow's/Why Choose Us's own title. Same literal value
       as before -- default rendering is unchanged. */
    color: var(--mt-text-strong);
}

.mt-testimonials__header {
    text-align: center;
    max-width: 56ch;
    margin: 0 auto var(--mt-space-12);
}

.mt-testimonials__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-3);
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-weight-bold);
    letter-spacing: var(--mt-tracking-wider);
    text-transform: uppercase;
    /* Ally identity (2026-09-22): --mt-accent (orange) -> --ally-blue-500,
       a fixed accent -- matching every other Ally eyebrow (Hero/About/
       Services/Process Flow/Why Choose Us), deliberately not
       currentColor. */
    color: var(--ally-blue-500);
    margin-bottom: var(--mt-space-4);
}

.mt-testimonials__eyebrow::before,
.mt-testimonials__eyebrow::after {
    content: "";
    width: var(--mt-kicker-rule);
    height: 2px;
    background: currentColor;
    flex-shrink: 0;
}

.mt-testimonials__heading {
    font-size: var(--mt-text-3xl);
    font-weight: var(--mt-weight-black);
    /* Ally identity / Studio fix (2026-09-22): was a hardcoded literal --
       now reads .mt-testimonials's own color, so a Studio self.color
       edit actually reaches this heading. Same fix already applied to
       Process Flow's/Why Choose Us's own title. */
    color: currentColor;
    line-height: var(--mt-leading-tight);
    letter-spacing: var(--mt-tracking-tight);
    margin: 0 auto;
    max-width: 22ch;
}

.mt-testimonials__stars {
    /* Ally identity (2026-09-22): --mt-accent (orange) -> --ally-blue-500.
       Fixed accent, not currentColor -- same reasoning as the eyebrow
       above (a rating indicator is a consistent signature color, not
       running text). */
    color: var(--ally-blue-500);
    font-size: var(--mt-text-sm);
    letter-spacing: 0.15em;
    margin-bottom: var(--mt-space-4);
}

.mt-testimonials__text {
    position: relative;
    font-size: var(--mt-text-md);
    font-weight: var(--mt-weight-medium);
    color: var(--mt-text-body);
    line-height: var(--mt-leading-relaxed);
    margin: 0 0 var(--mt-space-6);
}

.mt-testimonials__author {
    display: flex;
    align-items: center;
    gap: var(--mt-space-3);
    padding-top: var(--mt-space-5);
    border-top: 1px solid var(--mt-border-light);
}

.mt-testimonials__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--mt-radius-full);
    background: var(--mt-brand-primary);
    color: var(--mt-text-inverse);
    font-weight: var(--mt-weight-bold);
    font-size: var(--mt-text-sm);
}

.mt-testimonials__author-meta {
    display: flex;
    flex-direction: column;
    line-height: var(--mt-leading-tight);
}

.mt-testimonials__name {
    font-size: var(--mt-text-sm);
    font-weight: var(--mt-weight-bold);
    color: var(--mt-text-strong);
}

.mt-testimonials__role {
    font-size: var(--mt-text-xs);
    color: var(--mt-text-muted);
}

/* ------------------------------------------------------------
   Composition: grid -- card grid. v2: an oversized quote glyph anchors
   each card; a resting elevation gives the cards real presence.
   ------------------------------------------------------------ */

.mt-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--mt-space-6);
}

.mt-testimonials__card {
    position: relative;
    overflow: hidden;
    padding: var(--mt-space-8);
    border: 1px solid var(--mt-border-light);
    border-radius: var(--mt-radius-lg);
    background: var(--mt-surface-card);
    box-shadow: var(--mt-elevation-card);
    transition: box-shadow var(--mt-duration-normal) var(--mt-ease-default),
                transform var(--mt-duration-normal) var(--mt-ease-default);
}

.mt-testimonials__card::before {
    content: "\201C";
    position: absolute;
    top: calc(-1 * var(--mt-space-6));
    right: var(--mt-space-5);
    font-size: 7rem;
    line-height: 1;
    font-family: Georgia, "Times New Roman", serif;
    /* Ally identity (2026-09-22): --mt-accent (orange) -> --ally-blue-500.
       Fixed accent, not currentColor -- same signature-color reasoning
       as the eyebrow/stars above. */
    color: var(--ally-blue-500);
    opacity: 0.14;
    pointer-events: none;
}

.mt-testimonials__card:hover {
    box-shadow: var(--mt-elevation-card-hover);
    transform: translateY(-3px);
}

/* Real bug fix (whole-page design review round) -- preserved: a lone
   card in an auto-fit grid stretches across the full content width.
   Redefining the TRACK via :has() to a single min()-sized column is the
   only approach that reliably caps it (item-level max-width / margin:auto
   switch grid item sizing to fit-content). Scoped to 'grid' only. */
.mt-testimonials:not(.mt-testimonials--spotlight) .mt-testimonials__grid:has(.mt-testimonials__card:only-child) {
    grid-template-columns: min(520px, 100%);
    justify-content: center;
}

/* ------------------------------------------------------------
   Composition: spotlight -- one large, framed pull-quote (or two,
   stacked). v2: a real editorial device -- a tinted panel, a large
   serif quote mark, display-size quote copy -- not just "the grid card
   with its borders removed".
   ------------------------------------------------------------ */

.mt-testimonials--spotlight .mt-testimonials__grid {
    display: flex;
    flex-direction: column;
    gap: var(--mt-space-8);
    max-width: 760px;
    margin: 0 auto;
}

.mt-testimonials--spotlight .mt-testimonials__card {
    text-align: center;
    padding: var(--mt-space-12) var(--mt-space-10);
    border: 1px solid var(--mt-border-light);
    border-radius: var(--mt-radius-xl);
    background:
        var(--mt-section-glow),
        var(--mt-surface-card);
    box-shadow: var(--mt-shadow-md);
}

.mt-testimonials--spotlight .mt-testimonials__card::before {
    top: var(--mt-space-4);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    font-size: 5rem;
    opacity: 0.18;
}

.mt-testimonials--spotlight .mt-testimonials__card:hover {
    transform: none;
    box-shadow: var(--mt-shadow-md);
}

.mt-testimonials--spotlight .mt-testimonials__stars {
    display: flex;
    justify-content: center;
}

.mt-testimonials--spotlight .mt-testimonials__text {
    font-size: var(--mt-text-xl);
    font-weight: var(--mt-weight-medium);
    color: var(--mt-text-strong);
    line-height: var(--mt-leading-snug);
    max-width: 40ch;
    margin-left: auto;
    margin-right: auto;
}

.mt-testimonials--spotlight .mt-testimonials__author {
    justify-content: center;
    border-top: none;
    padding-top: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .mt-testimonials__grid {
        gap: var(--mt-space-5);
    }
    .mt-testimonials--spotlight .mt-testimonials__text {
        font-size: var(--mt-text-lg);
    }
}

@media (max-width: 767px) {
    .mt-testimonials {
        padding: var(--mt-section-py-sm) 0;
    }
    .mt-testimonials__header {
        margin-bottom: var(--mt-space-10);
    }
    .mt-testimonials__heading {
        font-size: var(--mt-text-2xl);
    }
    .mt-testimonials__grid {
        grid-template-columns: 1fr;
    }
    .mt-testimonials__card {
        padding: var(--mt-space-6);
    }
    .mt-testimonials__card::before {
        font-size: 5rem;
        top: calc(-1 * var(--mt-space-4));
    }
    .mt-testimonials--spotlight .mt-testimonials__card {
        padding: var(--mt-space-8) var(--mt-space-6);
    }
    .mt-testimonials--spotlight .mt-testimonials__text {
        font-size: var(--mt-text-md);
    }
}