/* Testimonial section style 4 — simple grid with hover (29 Sep 2026; no slider, no background colours). Loaded by
   front/global-sections/TestimonialSection/style_4.blade.php. Plain file (no Vite build in this copy); theme tokens only. */

.t4s { background: transparent; }
.t4s__head { max-width: 44rem; margin-bottom: var(--space-8); }
.t4s__head .lead { margin-top: var(--space-3); }

.t4s__grid { display: grid; gap: var(--space-6); }
@media (min-width: 640px) { .t4s__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .t4s__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.t4s-card {
  position: relative; margin: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: none;
  transition: transform 400ms var(--ease-out), border-color 400ms var(--ease-out);
}
.t4s-card::after {                                     /* thin crimson line that grows along the bottom on hover */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--color-primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform 400ms var(--ease-out);
}
.t4s-card__text { margin: 0; font-size: var(--text-md); line-height: 1.7; color: var(--color-text); }
.t4s-card__who { display: flex; flex-direction: column; margin-top: auto; }
.t4s-card__name { font-weight: var(--weight-bold); color: var(--color-heading); transition: color 400ms var(--ease-out); }
.t4s-card__role { font-size: var(--text-sm); color: var(--color-text-muted); }

@media (hover: hover) and (pointer: fine) {
  .t4s-card:hover { transform: scale(1.03); border-color: var(--color-primary); }
  .t4s-card:hover::after { transform: scaleX(1); }
  .t4s-card:hover .t4s-card__name { color: var(--color-primary); }
}

.t4s__foot { margin: var(--space-8) 0 0; }
.t4s__all { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-heading); text-decoration: none; }
.t4s__all .icon { width: 0.95rem; height: 0.95rem; transition: transform var(--duration-base) var(--ease-out); }
.t4s__all:hover { color: var(--color-primary); }
.t4s__all:hover .icon { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .t4s-card, .t4s-card::after, .t4s-card__name { transition: none; }
  .t4s-card:hover { transform: none; }
}