/* DJC_Testimonials -- Skeleton
 *
 * Rotating testimonial pairs in a bordered frame with the title sitting on the
 * top border (fieldset/legend pattern). Visual design ported 1:1 from the
 * Matching Challenge page (.mc-testimonial*). Every token the rules reference is
 * localized to the component root so the look is identical wherever it mounts;
 * override via the skin (skins/testimonials.djc.css) or by redeclaring the vars
 * on .djc-testimonials.
 *
 * Parts:
 *   .djc-testimonials__list     -- bordered frame
 *   .djc-testimonials__title    -- overline sitting on the top border
 *   .djc-testimonials__pair     -- the cross-fading row of cards
 *   .djc-testimonials__card     -- quote + attribution (avatar, name, location)
 */

@import url('skins/testimonials.djc.css');

/* Localized design tokens (resolved from the Matching Challenge palette) */
.djc-testimonials {
  --color-light: #ffffff;
  --color-n1: rgb(248, 249, 252);
  --color-n2: rgb(232, 236, 242);

  --text-strong: #0f172a;
  --text-default: #334155;
  --text-muted: #64748b;

  --font-display: 'Raleway', Georgia, 'Times New Roman', serif;
  --font-body: 'proxima-nova', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* avatar fill (purple) + overline text fill (amber -> orange) */
  --avatar-gradient: linear-gradient(135deg, rgb(107, 45, 139), rgb(74, 28, 107));
  --overline-gradient: linear-gradient(to right, rgb(249, 168, 37), rgb(239, 108, 0));

  /* keep in sync with the JS fadeMs prop (default 800) */
  --fade-ms: 800ms;

  /* transparent root -- the component adapts to the host section's band; the
     bordered __list frame carries the card look */
  background: transparent;
}

.djc-testimonials__list {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
  min-height: 220px;
  padding: 44px 36px 32px;
  border: 2px solid var(--color-n2);
  border-radius: 16px;
  background: var(--color-n1);
}

.djc-testimonials__title {
  position: absolute;
  top: 20px;
  left: 35%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 8px 18px;
  white-space: nowrap;
  background: var(--color-n1);
}

.djc-testimonials__overline {
  position: relative;
  top: -20px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  background: var(--overline-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.djc-testimonials__pair {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 48px;
  width: 100%;
  opacity: 0;
  transition: opacity var(--fade-ms) ease;
}

.djc-testimonials__pair.is-active {
  opacity: 1;
}

.djc-testimonials__card {
  flex: 1 1 0;
  min-width: 0;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.djc-testimonials__quote {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-default);
  font-style: italic;
  font-weight: 300;
}

.djc-testimonials__attr {
  display: flex;
  align-items: center;
  gap: 12px;
}

.djc-testimonials__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--avatar-gradient);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-light);
  text-transform: uppercase;
}

.djc-testimonials__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.djc-testimonials__name {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-strong);
  font-size: 15px;
}

.djc-testimonials__location {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
}

.djc-testimonials__card.hide {
  display: none !important;
}

@media only screen and (max-width: 768px) {
  .djc-testimonials__pair {
    flex-direction: column;
    gap: 32px;
  }
}