/* ============================================================
   .uk-testimonial-card — proposed canonical testimonial card (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the testimonial cluster in `public/css/style.css`:

     .testimonials-section       -> consumer's choice (compose with .uk-section-pad)
     .testimonials-grid          -> consumer's grid (.uk-grid-cards or hand-grid)
     .testimonial-card           -> .uk-testimonial-card
     .testimonial-card:hover     -> .uk-testimonial-card:hover  (lift + border)
     .testimonial-stars          -> .uk-testimonial-card-stars
     .testimonial-stars svg      -> .uk-testimonial-card-stars > svg
     .testimonial-text           -> .uk-testimonial-card-quote
     .testimonial-author         -> .uk-testimonial-card-author
     .author-avatar              -> .uk-testimonial-card-avatar
     .author-info                -> .uk-testimonial-card-author-info
     .author-name                -> .uk-testimonial-card-author-name
     .author-role                -> .uk-testimonial-card-author-role

   The canonical owns the card chrome + stars row + quote + author block;
   it does NOT own the section padding or the multi-card grid. Tile inside
   `.uk-grid-cards --3-col` (or any host grid) and wrap in `.uk-section-pad`.

   Composes with: nothing — leaf primitive. Avatar accepts initials text
   (default treatment) or an `<img>` (covers the gradient-circle avatar
   with the actual picture).
   ============================================================ */

/* ============================================
   Root — card chrome with hover lift
   ============================================ */
.uk-testimonial-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-xl);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    transition:
        transform var(--transition-base),
        border-color var(--transition-base);
}

.uk-testimonial-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-border-light);
}

@media (prefers-reduced-motion: reduce) {
    .uk-testimonial-card:hover {
        transform: none;
    }
}

/* ============================================
   Stars row — rating display
   ============================================
   Author provides 5 inline svgs (or fewer for partial ratings). Canonical
   sizes them and tints the stroke + fill via `--color-warning` (the
   conventional star tone). Use `aria-label="5 out of 5 stars"` on the
   wrapper so the rating reads correctly to screen readers.
   ============================================ */
.uk-testimonial-card-stars {
    display: flex;
    gap: 2px;
    margin-bottom: var(--space-lg);
    color: var(--color-warning);
}

.uk-testimonial-card-stars > svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
    fill: currentColor;
    stroke: currentColor;
}

/* ============================================
   Quote — italicised body
   ============================================
   Italicised secondary text. The quote should breathe — generous
   line-height (relaxed) and bottom margin so the author block doesn't
   crowd the closing punctuation.
   ============================================ */
.uk-testimonial-card-quote {
    flex: 1;
    margin: 0 0 var(--space-xl);
    color: var(--color-text-secondary);
    font-size: var(--font-md);
    font-style: italic;
    line-height: var(--line-relaxed);
}

/* ============================================
   Author row — avatar + name + role
   ============================================ */
.uk-testimonial-card-author {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: auto;
}

.uk-testimonial-card-avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--gradient-primary);
    border-radius: 50%;
    color: #000;
    font-size: var(--font-md);
    font-weight: 600;
    overflow: hidden;
}

.uk-testimonial-card-avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uk-testimonial-card-author-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.uk-testimonial-card-author-name {
    color: var(--color-text);
    font-size: var(--font-md);
    font-weight: 600;
    line-height: var(--line-snug);
}

.uk-testimonial-card-author-role {
    color: var(--color-text-muted);
    font-size: var(--font-sm);
    line-height: var(--line-snug);
}

/* ============================================
   --compact — tighter padding
   ============================================
   For dense grids (4+ across) or sidebar contexts where the testimonial
   is supporting evidence rather than the section's centerpiece.
   ============================================ */
.uk-testimonial-card--compact {
    padding: var(--space-lg);
}

.uk-testimonial-card--compact .uk-testimonial-card-stars {
    margin-bottom: var(--space-md);
}

.uk-testimonial-card--compact .uk-testimonial-card-quote {
    margin-bottom: var(--space-lg);
    font-size: var(--font-sm);
}

/* ============================================
   --featured — gradient border + soft glow
   ============================================
   For the centerpiece testimonial (typically the middle card in a 3-up
   grid). Pulls the border to primary and adds a soft halo so the card
   reads as the "headline" quote of the section.
   ============================================ */
.uk-testimonial-card--featured {
    border-color: rgba(var(--color-primary-rgb), 0.4);
    box-shadow: var(--shadow-card-hover-md);
}

.uk-testimonial-card--featured:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card-hover-lg);
}