/**
 * PL Testimonials widget (handle: pl-testimonials).
 *
 * Up to three testimonials render as a CSS grid; more than three render as an
 * auto-rotating horizontal scroll carousel (3 cards per view, prev/next + dots,
 * pauses on hover). Card chrome (hover border + shadow) matches the site card
 * standard; this file owns the grid / carousel layout and the per-line
 * typography. Mirrors css/events.css.
 */

.pl-tm { position: relative; }

/* ---- Track: grid (<=3) ---- */
.pl-tm-track {
  display: grid;
  grid-template-columns: repeat(var(--pl-tm-cols, 3), minmax(0, 1fr));
  gap: 24px;
}

/* ---- Track: carousel (>3) ---- */
.pl-tm--carousel .pl-tm-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Bleed the clip 12px each side so a flush card's border/shadow isn't shaved
     at the scroll edge; negative margin pulls it back so the first card stays
     aligned to the section heading. */
  padding: 0 12px 4px;
  margin: 0 -12px;
}
.pl-tm--carousel .pl-tm-track::-webkit-scrollbar { display: none; }
.pl-tm--carousel .pl-tm-card {
  flex: 0 0 calc((100% - 48px) / 3);   /* exactly 3 full cards (2 x 24px gap) */
  scroll-snap-align: start;
}

/* ---- Card ---- */
.pl-tm .pl-tm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  margin: 0;
  background: #ffffff;
  border: 1px solid #e5e5e3;
  padding: 28px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.pl-tm .pl-tm-card:hover {
  border-color: #40a3a1;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
}

.pl-tm .pl-tm-mark {
  display: block;
  height: 24px;
  margin-bottom: 8px;
  color: #40a3a1;
  font: 700 42px/.6 Georgia, "Times New Roman", serif;
}

.pl-tm .pl-tm-quote {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  color: #616160;
}

.pl-tm .pl-tm-attrib {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: auto;                 /* pin attribution to the card bottom so rows align */
  padding-top: 22px;
  border-top: 1px solid #e5e5e3;
}
.pl-tm .pl-tm-logo {
  flex: 0 0 auto;
  width: auto;                        /* hug the logo so the name sits beside it, not across a dead 132px box */
  max-width: 132px;
  height: 60px;                       /* match the name/role/location block so the logo reads balanced, not undersized */
  display: flex;
  align-items: center;
}
.pl-tm .pl-tm-logo img {
  max-width: 132px;
  max-height: 60px;
  object-fit: contain;
  object-position: left center;
}
.pl-tm .pl-tm-logo img[src*="tweed-inc-logo"] {
  max-height: 38px;                   /* dense script wordmark reads oversized at the full 60px box */
}
.pl-tm .pl-tm-wordmark {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .01em;
  color: #1a1a1a;
}
.pl-tm .pl-tm-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-tm .pl-tm-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.pl-tm .pl-tm-role { font-size: 13.5px; line-height: 1.4; color: #616160; }
.pl-tm .pl-tm-loc {
  font-size: 13px;
  line-height: 1.3;
  color: #616160;
}

/* ---- Nav (carousel only): centered arrows + dots (mirror pl-events) ---- */
.pl-tm-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}
.pl-tm-prev,
.pl-tm-next {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pl-line, #e5e5e3);
  background: #fff;
  color: var(--pl-ink, #1a1a1a);
  cursor: pointer;
  border-radius: 0;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.pl-tm-prev svg,
.pl-tm-next svg { width: 20px; height: 20px; flex: 0 0 auto; display: block; }
/* Override Hello Elementor reset.css bare <button> pink hover/focus */
.pl-tm-prev:hover, .pl-tm-next:hover,
.pl-tm-prev:focus, .pl-tm-next:focus,
.pl-tm-prev:active, .pl-tm-next:active {
  background: #fff;
  border-color: var(--pl-teal, #40a3a1);
  color: var(--pl-teal, #40a3a1);
  outline: none;
}
.pl-tm-prev:disabled,
.pl-tm-next:disabled {
  opacity: .35;
  cursor: default;
  background: #fff;
  border-color: var(--pl-line, #e5e5e3);
  color: var(--pl-ink, #1a1a1a);
}

/* Dots — square to match the brand carousel-dot convention; active = teal */
.pl-tm-dots { display: flex; align-items: center; gap: 10px; }
.pl-tm-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #616160;
  opacity: .45;
  cursor: pointer;
  transition: opacity .2s ease, background-color .2s ease;
}
.pl-tm-dot:hover, .pl-tm-dot:focus, .pl-tm-dot:active { opacity: .7; outline: none; }
.pl-tm-dot.is-active,
.pl-tm-dot.is-active:hover,
.pl-tm-dot.is-active:focus { background: var(--pl-teal, #40a3a1); opacity: 1; }
.pl-tm-dot:focus-visible { outline: 2px solid rgba(64, 163, 161, 0.4); outline-offset: 2px; }

/* ---- Responsive ---- */
@media (max-width: 1023px) {
  .pl-tm--grid .pl-tm-track { grid-template-columns: repeat(2, 1fr); }
  .pl-tm--carousel .pl-tm-card { flex-basis: calc((100% - 24px) / 2); }  /* 2 full cards */
}
@media (max-width: 679px) {
  .pl-tm--grid .pl-tm-track { grid-template-columns: 1fr; }
  .pl-tm--carousel .pl-tm-card { flex-basis: 100%; }                     /* 1 full card */
  .pl-tm .pl-tm-card { padding: 24px; }
  .pl-tm .pl-tm-quote { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-tm--carousel .pl-tm-track { scroll-behavior: auto; }
}