/* =====================================================
   Mido Hasan — CLIENT WORDS / TESTIMONIALS
   /assets/css/06__client-words.css
   MIDO PHASE 10.8.5 SAFARI CLIENT WORDS STABILITY + ARROW REMOVAL ACTIVE

   Changes from 10.4.5.3:
   - Service/category label now rendered as a pill matching
     single project header pill style (.mht-ph-pill).
   - + characters replaced with | pipe visually (in PHP, display only).
   - PHASE 10.8.5: Decorative arrow orb removed entirely (markup + CSS).
     It had persistent Safari rendering issues (disappearing/delayed on hover)
     that could not be resolved without affecting Chrome/Arc. The card pill
     and whole-card link remain — the card is still fully clickable.
   ===================================================== */

/* ── Section wrapper ── */
.mht-proof {
  position: relative;
  background: transparent;
}
.mht-proof::before { content: none; }
.mht-proof__inner  { position: relative; z-index: 1; }

/* ── Section intro header ── */
.mht-proof__intro {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(320px, .68fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
  margin-bottom: var(--section-head-gap);
}
.mht-proof__kicker { margin-bottom: var(--sp-5); }
.mht-proof__copy   { max-width: 430px; align-self: center; }

/* ── Grid — CSS column masonry, 3 columns desktop ── */
.mht-proof__grid {
  column-count: 3;
  column-gap: clamp(16px, 2vw, 24px);
}

/* Neutralize stagger classes */
.mht-testimonial--nudge-mid,
.mht-testimonial--nudge-end {
  margin-top: 0 !important;
}

/* ── Card base ── */
.mht-testimonial {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: block;
  margin-bottom: clamp(16px, 2vw, 24px);

  background: #141017;
  border: 1px solid #2C2532;
  border-radius: 16px;
  padding: clamp(24px, 2.5vw, 34px);

  opacity: 1;
  transform: none;

  text-decoration: none;
  color: inherit;

  transition: border-color 300ms ease, box-shadow 300ms ease;

  position: relative;
  overflow: hidden;
}

/* Inner radial glow */
.mht-testimonial::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background:
    radial-gradient(circle 220px at 90% 8%, rgba(142, 99, 163, 0.11), transparent 58%),
    radial-gradient(circle 140px at 6% 96%, rgba(197, 166, 211, 0.04), transparent 70%);
  pointer-events: none;
}

/* ── Quote ── */
.mht-testimonial__quote {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  position: relative;
  z-index: 1;
}
.mht-testimonial__quote p {
  margin: 0;
  font-family: var(--font-sans, "Blauer Nue", system-ui, sans-serif);
  font-size: clamp(.9rem, .85rem + .25vw, 1.02rem);
  line-height: 1.78;
  color: #DDD6E3;
}

/* ── Person identity row ── */
.mht-testimonial__person {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.mht-testimonial__avatar-wrap {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #4C345D 0%, #2F1F3A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(183, 140, 255, 0.22);
  box-shadow: 0 0 0 3px rgba(142, 99, 163, 0.08);
}

.mht-testimonial__avatar-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 50%;
}

.mht-testimonial__avatar {
  font-family: var(--font-sans, "Blauer Nue", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #B78CFF;
  line-height: 1;
  text-transform: uppercase;
}

.mht-testimonial__identity { min-width: 0; }

.mht-testimonial__name {
  display: block;
  font-family: var(--font-sans, "Blauer Nue", system-ui, sans-serif);
  font-size: .94rem;
  font-weight: 600;
  line-height: 1.3;
  color: #F6F2F7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mht-testimonial__company {
  display: block;
  font-family: var(--font-sans, "Blauer Nue", system-ui, sans-serif);
  font-size: .78rem;
  line-height: 1.4;
  color: #7C7284;
  margin-top: 3px;
}

/* ── Footer row ── */
.mht-testimonial__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  margin-top: 16px;
  border-top: 1px solid rgba(44, 37, 50, 0.9);
  position: relative;
  z-index: 1;
}

/* ── Service/category pill — matches .mht-ph-pill from page-hero ── */
.mht-testimonial__pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(183, 140, 255, .22);
  background: rgba(183, 140, 255, .06);
  color: var(--text-secondary, #AFA4B8);
  font-family: var(--font-sans, "Blauer Nue", system-ui, sans-serif);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
}

/* Phase 10.8.5: Decorative arrow orb removed entirely.
   The arrow had persistent Safari rendering issues (disappearing on hover,
   delayed sweep) that could not be resolved without affecting Chrome/Arc.
   Per direction, it has been removed from markup and styles. The card pill
   and whole-card link remain — the card itself is still clickable. */

/* ── Linked card hover ── */
.mht-testimonial--linked {
  cursor: pointer;
}
.mht-testimonial--linked:hover {
  border-color: rgba(183, 140, 255, 0.32);
  box-shadow:
    0 0 0 1px rgba(183, 140, 255, 0.06),
    0 6px 24px rgba(142, 99, 163, 0.14),
    0 2px 4px rgba(0, 0, 0, 0.12);
}

/* ── Entry animation — visible-first ── */
@keyframes mht-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mht-proof__grid.mht-cards-animate .mht-testimonial {
  animation: mht-card-in 480ms var(--ease-soft, cubic-bezier(.25, .46, .45, .94)) both;
}

.mht-proof__grid.mht-cards-animate .mht-testimonial:nth-child(1) { animation-delay:   0ms; }
.mht-proof__grid.mht-cards-animate .mht-testimonial:nth-child(2) { animation-delay:  55ms; }
.mht-proof__grid.mht-cards-animate .mht-testimonial:nth-child(3) { animation-delay: 110ms; }
.mht-proof__grid.mht-cards-animate .mht-testimonial:nth-child(4) { animation-delay:  65ms; }
.mht-proof__grid.mht-cards-animate .mht-testimonial:nth-child(5) { animation-delay: 120ms; }
.mht-proof__grid.mht-cards-animate .mht-testimonial:nth-child(6) { animation-delay: 175ms; }
.mht-proof__grid.mht-cards-animate .mht-testimonial:nth-child(7) { animation-delay: 130ms; }
.mht-proof__grid.mht-cards-animate .mht-testimonial:nth-child(8) { animation-delay: 185ms; }
.mht-proof__grid.mht-cards-animate .mht-testimonial:nth-child(9) { animation-delay: 240ms; }

/* ── Responsive ── */
@media (max-width: 980px) {
  .mht-proof__intro {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--sp-7, 40px);
  }
  .mht-proof__copy { max-width: 560px; }
}

@media (max-width: 900px) {
  .mht-proof__grid {
    column-count: 2;
    column-gap: clamp(14px, 2vw, 20px);
  }
}

@media (max-width: 560px) {
  .mht-proof__grid {
    column-count: 1;
  }
  .mht-testimonial { margin-bottom: 16px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .mht-testimonial {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Safety: never let global [data-reveal] hide cards ── */
.mht-proof [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   SAFARI-SPECIFIC CLIENT WORDS FIXES — Phase 10.8.2
   Scoped via @supports(-webkit-hyphens:none) — Safari only.
   Chrome/Arc completely unaffected.
   ═══════════════════════════════════════════════════════════════ */
@supports (-webkit-hyphens: none) {

  /* Fix 1 + 2: Balanced 3-column distribution + top alignment.
     column-fill:balance forces even distribution (3/3/3 not 4/3/2).
     display:inline-block + vertical-align:top anchors cards to column top. */
  .mht-proof__grid {
    display: block;
    column-fill: balance;
    -webkit-column-fill: balance;
  }

  .mht-testimonial {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    /* Pre-promote to compositor layer at rest.
       This prevents Safari from triggering a full column repaint
       when the card's visual properties change on hover.
       The card is already on its own layer so no layer-creation flash. */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* will-change at rest ensures the layer exists before hover */
    will-change: transform;
  }

  /* Bug 3 fix: Prevent disappear/flicker on hover.
     Replace box-shadow + border-color transition (both cause Safari column
     repaint) with outline + opacity on a ::after overlay — these are
     composited properties that don't invalidate the column layout.
     The border-color change is kept but transition is instant (0ms) to
     avoid the repaint window where the card briefly disappears. */
  .mht-testimonial--linked {
    transition:
      border-color 0ms,
      outline-color 320ms ease,
      opacity 1ms;
    outline: 1px solid transparent;
    outline-offset: -1px;
  }

  .mht-testimonial--linked:hover {
    border-color: rgba(183, 140, 255, 0.32);
    outline-color: rgba(183, 140, 255, 0.18);
    box-shadow: none; /* Remove box-shadow — it causes column repaint in Safari */
  }
}