/* Global tokens */
:root {
  /* Colors */
  --color-white: #ffffff;
  --color-neutral-900: #171717;
  --color-neutral-600: #525252;
  --color-neutral-200: #d2d6db;
  --color-neutral-50: #f9fafb;

  /* Typography */
  --font-primary: "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
}

/* Reset */
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-primary);
  /* Font smoothing (cross-browser) */
  -webkit-font-smoothing: antialiased; /* WebKit (Chrome/Safari) */
  -moz-osx-font-smoothing: grayscale; /* Firefox on macOS */
  text-rendering: optimizeLegibility; /* enable kerning/ligatures when possible */
}

/* Make image elements scale nicely by default */
img {
  display: block;
  max-width: 100%;
}

/* Basic page structure */
.page {
  min-height: 90vh;
  background: linear-gradient(
    148deg,
    var(--color-neutral-50) 8.89%,
    var(--color-neutral-200) 100.48%
  );
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 200px;
}

/* Card container: size, spacing, surface */
.testimonial-card {
  width: 100%;
  max-width: 340px; /* never larger than the design */
  min-width: 280px; /* never smaller than this */
  background: var(--color-white);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  display: flex; /* enables gap between header and text */
  flex-direction: column;
  gap: 16px;
}

/* Header row: avatar on the left, texts on the right */
.testimonial-card__header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.testimonial-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover; /* keep the face centered if image is not square */
  flex: 0 0 48px; /* fixed size: do not grow, do not shrink, keep 48px basis */
}

/* Stack name and handle vertically */
.testimonial-card__meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Name (title of the card) */
.testimonial-card__name {
  font-weight: 600;
  font-size: 1.125rem; /* 18px */
  line-height: 1.75rem; /* 28px */
  color: var(--color-neutral-900);
  /* Allow wrapping to next line */
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Public handle (@username) */
.testimonial-card__handle {
  font-weight: 400;
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem; /* 20px */
  color: var(--color-neutral-600);
  /* Truncate with ellipsis */
  white-space: nowrap; /* keep text in a single line */
  overflow: hidden; /* hide overflowed text */
  text-overflow: ellipsis; /* add "..." when it overflows */
  max-width: 200px; /* needed for ellipsis to work */
}

/* Main testimonial text */
.testimonial-card__text {
  font-weight: 400;
  font-size: 1rem; /* 16px */
  line-height: 1.5rem; /* 24px */
  color: var(--color-neutral-600);
  /* Allow normal wrapping (paragraphs) */
  word-break: break-word; /* break very long words if needed */
  overflow-wrap: anywhere;
}

/* Footer */
.credits {
  min-height: 10vh;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}