:root {
  /* --- Primary (Daniel) --- */
  --purple-50: hsl(260, 100%, 95%);
  --purple-300: hsl(264, 82%, 80%);
  --purple-500: hsl(263, 55%, 52%); /* Daniel's Card Background */

  /* --- Neutrals (Everyone Else) --- */
  --white: hsl(0, 0%, 100%); /* Jeanette & Kira Backgrounds */
  --grey-100: hsl(214, 17%, 92%); /* Page Background */
  --grey-200: hsl(0, 0%, 81%); /* Jeanette & Kira Avatar Borders */
  --grey-400: hsl(224, 10%, 45%); /* Jeanette & Kira Body Text */
  --grey-500: hsl(217, 19%, 35%); /* Jonathan's Card Background */
  --dark-blue: hsl(219, 29%, 14%); /* Patrick's Card Background */
  --black: hsl(0, 0%, 7%); /* Extra contrast (if needed) */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Barlow Semi Condensed', Arial, sans-serif;
  font-size: 0.8125rem;
  background-color: var(--grey-100);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2.5rem 1.5rem;
    overflow-x: hidden; /* Prevents unwanted horizontal scrolling */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.testimonial-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* This creates the space between the 5 cards */
  width: 100%;
  max-width: 20.4375rem;
  margin: 2rem 0;
}

.card-violet,
.card-grey,
.card-white,
.card-black,
.card-white-last {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.125rem;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 2.5rem 3.75rem 3.125rem -2.5rem rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

/* Card Container */
.card-violet {
  background-color: var(--purple-500);
  background-image: url('images/bg-pattern-quotation.svg');
  background-repeat: no-repeat;
  /* Precisely positioned: 80% to the right, 0px from top */
  background-position: top 0 right 10%;
}

.header-violet {
  display: flex;
  gap: 1rem;
  width: 100%;
  height: 2rem;
  align-items: center;
  justify-content: flex-start;
}

/* Daniel's Name Typography */
.image-violet {
  width: 2rem;
  height: 2rem;
  border-radius: 50%; /* Essential for the circular look */
  border: 2px solid var(--purple-300);
  flex-shrink: 0; /* Prevents oval shape */
}

.info-violet {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.name-violet {
  font-size: 0.8125rem;

  text-decoration: none;
  color: var(--white);
  font-weight: 600;
  opacity: 0.9;
  line-height: 1;
}

/* Daniel's Status Typography */
.status-violet {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--white);
  opacity: 0.6;
  line-height: 1;
}

.testimonial-violet {
  display: flex;
  flex-direction: column;
  gap: 1.125rem; /* Exactly the same 18px gap */
}

/* Daniel's Headline Styling */
.headline-violet {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--white);
  letter-spacing: 0.5px;
}

/* Daniel's Main Quote Styling */
.quote-violet {
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--white);
  opacity: 0.8;
}

/* Card Container */
.card-grey {
  background-color: var(--grey-500);
}

/* Header Layout */
.header-grey {
  display: flex;
  gap: 1rem;
  width: 100%;
  height: 2rem;
  align-items: center;
  justify-content: flex-start;
}

/* Avatar - Note: No border for Jonathan in the design */
.image-grey {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Info Wrapper */
.info-grey {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* Typography Look */
.name-grey {
  font-size: 0.8125rem;

  text-decoration: none;
  color: var(--white);
  font-weight: 600;
  opacity: 0.9;
  line-height: 1;
}

.status-grey {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--white);
  opacity: 0.5;
  line-height: 1;
}

/* Body Text Container */
.testimonial-grey {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.headline-grey {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--white);
}

.quote-grey {
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--white);
  opacity: 0.8;
}

/* Card Container */
.card-white {
  background-color: var(--white);
}

/* Header Layout */
.header-white {
  display: flex;
  gap: 1rem;
  width: 100%;
  height: 2rem;
  align-items: center;
}

/* Avatar - Jeanette has no visible border */
.image-white {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Info Wrapper */
.info-white {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* Typography - Dark Theme */
.name-white {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--grey-500); /* Darker text for white background */
  opacity: 0.8;
  line-height: 1.1;
  text-decoration: none;
}

.status-white {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--grey-500);
  opacity: 0.8;
  line-height: 1;
}

/* Body Text Container */
.testimonial-white {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.headline-white {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--grey-500);
}

.quote-white {
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--grey-400);
  letter-spacing: 0.2px;
}

/* Card Container */
.card-black {
  background-color: var(--dark-blue);
}

/* Header Layout */
.header-black {
  display: flex;
  gap: 1rem;
  width: 100%;
  height: 2rem;
  align-items: center;
}

/* Avatar - Patrick has a violet-style border */
.image-black {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 0.125rem solid var(--purple-500); /* Precise 2px violet border */
  flex-shrink: 0;
}

/* Info Wrapper */
.info-black {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* Typography - White Theme */
.name-black {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1;
  opacity: 0.9;
  text-decoration: none;
}

.status-black {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--white);
  opacity: 0.9;
  line-height: 1;
}

/* Body Text Container */
.testimonial-black {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.headline-black {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--grey-200);
  letter-spacing: 0.5px;
}

.quote-black {
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--grey-200);
}

/* Card Container */
.card-white-last {
  background-color: var(--white);
}

/* Header Layout */
.header-white-last {
  display: flex;
  gap: 1rem;
  width: 100%;
  height: 2rem;
  align-items: center;
}

/* Avatar - Kira has no visible border */
.image-white-last {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Info Wrapper */
.info-white-last {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* Typography - Dark Theme */
.name-white-last {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--grey-500);
  opacity: 0.9;
  line-height: 1;
  text-decoration: none;
}

.status-white-last {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--grey-400);
  opacity: 0.5;
  line-height: 1;
}

/* Body Text Container */
.testimonial-white-last {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.headline-white-last {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--grey-500);
  letter-spacing: 0.5px;
}

.quote-white-last {
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--grey-400);
  word-spacing: 0.2px;
  letter-spacing: 0.15px;
}


/* Base Transition for smoothness */
.name-violet, .name-grey, .name-white, .name-black, .name-white-last {
  transition: opacity 0.3s ease, color 0.3s ease;
}

/* Hover & Focus for Dark Cards */
.card-violet .name-violet:hover,
.card-grey .name-grey:hover,
.card-black .name-black:hover,
.card-violet .name-violet:focus-visible,
.card-grey .name-grey:focus-visible,
.card-black .name-black:focus-visible {
  opacity: 1; 
  outline: 2px dashed var(--white);
  outline-offset: 4px;
}

/* Hover & Focus for Light Cards */
.card-white .name-white:hover,
.card-white-last .name-white-last:hover,
.card-white .name-white:focus-visible,
.card-white-last .name-white-last:focus-visible {
  opacity: 1;
  color: var(--purple-500);
  outline: 2px dashed var(--grey-500);
  outline-offset: 4px;
}

.card-violet, .card-grey, .card-white, .card-black, .card-white-last {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer; /* Tells the user "this is interactive" */
}

.card-violet:hover, .card-grey:hover, .card-white:hover, .card-black:hover, .card-white-last:hover {
  transform: translateY(-5px); /* Subtle upward movement */
  box-shadow: 0 1.5rem 2.5rem -1rem rgba(0, 0, 0, 0.2); /* Deepens the shadow */
}



.attribution {
  font-size: 0.6875rem;
  text-align: center;
  color: var(--grey-400);
}

.attribution a {
  color: var(--dark-blue);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.attribution a:hover {
  color: var(--purple-500);
  text-decoration: underline;
}


@media (min-width: 37.5rem) {
  /* 600px */
  .testimonial-grid {
    display: grid;
    /* Two equal columns for a balanced tablet look */
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 1.5rem;
    max-width: 43.75rem; /* 700px */
  }

  /* Daniel: Spans both columns at the top */
  .card-violet {
    grid-column: span 2;
  }

  /* Jonathan & Jeanette: Sit side-by-side in the second row */
  .card-grey {
    grid-column: 1;
  }
  .card-white {
    grid-column: 2;
  }

  /* Patrick: Spans both columns in the third row */
  .card-black {
    grid-column: span 2;
  }

  /* Kira: Spans both columns at the bottom */
  .card-white-last {
    grid-column: span 2;
  }
}

@media (min-width: 68.75rem) {
  /* 1100px and up */
  .testimonial-grid {
    display: grid;
    /* Defines 4 columns: each 1 fraction of the 1110px width */
    grid-template-columns: repeat(4, 1fr);
    /* Defines 2 rows that adjust height based on the content */
    grid-template-rows: auto auto;
    /* 30px gap for the spacious desktop look */
    gap: 1.875rem;
    /* 1110px: The standard width for the content area in a 1440px design */
    max-width: 69.375rem;
    /* Centers the entire grid horizontally on the 1440px page */
    margin: 0 auto;
    /* Overrides mobile stacking */
    flex-direction: row;
    margin-bottom: 2rem;

  }

  .card-violet {
    grid-column: span 2; /* Occupies Column 1 and 2 */
  }

  .card-grey {
    grid-column: 3; /* Occupies Column 3 */
  }

  .card-white-last {
    grid-column: 4; /* Far right column */
    grid-row: span 2; /* Occupies the full height of the grid */
  }

  .card-white {
    grid-column: 1; /* Bottom left */
    grid-row: 2; /* Second row */
  }

  .card-black {
    grid-column: span 2; /* Bottom middle (Spans 2 columns) */
    grid-row: 2; /* Second row */
  }
}