/* ═══════════════════════════════════════════════════════════
   IT BOY — v8 CSS
   R12  Profile picture support for review / testimonial cards
   — Purely additive. Zero changes to existing card rules. —
   ═══════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════
   R12 — TESTIMONIAL CARD: .test-avatar with real img
   The .test-avatar div already exists at 44×44px with
   its border-radius:50% and brand border.
   We only style what's inside it — the new <img>.
══════════════════════════════════════════════════ */

/* Fill the existing avatar container with the image */
.test-avatar .avatar-img {
  width:  100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  display: block;

  /* Smooth theme transition */
  transition: filter 0.4s ease, opacity 0.4s ease;

  /* Slight warmth filter so it feels integrated, not pasted-in */
  filter: brightness(0.96) saturate(1.05);
}

/* Hover: subtly brighten with the card */
.testimonial-card:hover .test-avatar .avatar-img {
  filter: brightness(1.05) saturate(1.1);
}

/* Dark mode: keep luminance balanced in the dark UI */
[data-theme="dark"] .test-avatar .avatar-img,
html:not([data-theme]) .test-avatar .avatar-img {
  filter: brightness(0.92) saturate(1.08);
  opacity: 0.95;
}
[data-theme="dark"] .testimonial-card:hover .test-avatar .avatar-img {
  filter: brightness(1.0) saturate(1.12);
  opacity: 1;
}

/* Light mode: slightly more contrast */
[data-theme="light"] .test-avatar .avatar-img {
  filter: brightness(0.95) contrast(1.08) saturate(1.05);
  opacity: 0.92;
}
[data-theme="light"] .testimonial-card:hover .test-avatar .avatar-img {
  filter: brightness(1.02) contrast(1.05) saturate(1.08);
  opacity: 1;
}


/* ══════════════════════════════════════════════════
   R12 — HOMEPAGE MINI CARDS: .cpt-item avatar row
   Added below the existing <strong> — purely additive.
   Stars, quote <p>, and <strong> are untouched above.
══════════════════════════════════════════════════ */

/* Wrapper that holds the avatar + two-line author meta.
   Flex row: [avatar] [name / role stacked], vertically centered,
   left-aligned, and scalable for long names/titles. */
.cpt-author {
  margin-top: 14px;
  display: flex;
  align-items: center;      /* avatar vertically centered with the 2-line block */
  justify-content: flex-start;
  gap: 12px;                /* consistent avatar-to-text spacing (no hardcoded margins) */
  /* Subtle separator between quote content and author */
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

/* Two-line text block: name on line 1, role/company on line 2,
   both sharing the exact same left edge beside the avatar. */
.cpt-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;             /* allows text to wrap/ellipsis cleanly if very long */
  line-height: 1.3;
}
.cpt-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-light);
}
.cpt-role {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* The avatar image itself */
.cpt-avatar {
  width:  36px;
  height: 36px;
  flex-shrink: 0;           /* keep avatar circular beside long names/titles */
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border: 1.5px solid var(--border-brand);
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 8px rgba(26,86,219,0.2);
  transition: filter 0.35s ease, opacity 0.35s ease,
              box-shadow 0.35s ease, transform 0.3s ease;

  /* Integrated look */
  filter: brightness(0.94) saturate(1.06);
}

.cpt-item:hover .cpt-avatar {
  filter: brightness(1.04) saturate(1.1);
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 14px rgba(26,86,219,0.35);
  transform: scale(1.08);
}

/* Dark mode */
[data-theme="dark"] .cpt-avatar,
html:not([data-theme]) .cpt-avatar {
  filter: brightness(0.9) saturate(1.08);
  opacity: 0.92;
}
[data-theme="dark"] .cpt-item:hover .cpt-avatar {
  filter: brightness(1.0) saturate(1.1);
  opacity: 1;
}

/* Light mode */
[data-theme="light"] .cpt-author {
  border-top-color: rgba(0,0,0,0.07);
}
[data-theme="light"] .cpt-avatar {
  filter: brightness(0.94) contrast(1.08);
  opacity: 0.9;
  box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(26,86,219,0.12);
}
[data-theme="light"] .cpt-item:hover .cpt-avatar {
  filter: brightness(1.0) contrast(1.05);
  opacity: 1;
  box-shadow: 0 0 0 2px #fff, 0 4px 14px rgba(26,86,219,0.22);
}