/* Farge- og fontvariabler */
:root {
  --clr-primary-400: 263 55% 52%;
  --clr-secondary-400: 217 19% 35%;
  --clr-secondary-500: 219 29% 14%;
  --clr-neutral-100: 0 0% 100%;
  --clr-neutral-200: 210 46% 95%;
  --clr-neutral-300: 0 0% 81%;

  --ff-primary: "Barlow Semi Condensed", sans-serif;

  --fw-400: 500;
  --fw-700: 600;

  --fs-300: 0.6875rem;
  --fs-400: 0.8125rem;
  --fs-500: 1.25rem;
}

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

/* Grunnstil for hele siden */
body {
  font-family: var(--ff-primary);
  margin: 0;
  padding: 2rem;
}

/* Grid-oppsett for testimonial-seksjonen */
.testimonials-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1100px; /* Holder layouten til en viss bredde på desktop */
  margin: 0 auto; /* Sentrerer innholdet */
}

/* Gjør enkelte bokser dobbelt så brede */
.grid-col-span-2 {
  grid-column: span 2;
}

/* Styling for hvert testimonial-kort */
.testimonial {
  font-size: var(--fs-400);
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 2.5rem 3.75rem 3rem -3rem hsl(var(--clr-secondary-400) / 0.25);
}

/* Bakgrunnsfarger */
.bg-primary-400 {
  background: hsl(var(--clr-primary-400));
}
.bg-secondary-400 {
  background: hsl(var(--clr-secondary-400));
}
.bg-secondary-500 {
  background: hsl(var(--clr-secondary-500));
}
.bg-neutral-100 {
  background: hsl(var(--clr-neutral-100));
}

/* Tekstfarger */
.text-neutral-100 {
  color: hsl(var(--clr-neutral-100));
}

/* Gjør siste kortet stort og høyrejustert i desktop-visning */
.testimonial:last-child {
  grid-column-start: 4;
  grid-row: 1/3;
}

/* Første avsnitt større tekst */
.testimonial > p:first-of-type {
  font-size: var(--fs-500);
  line-height: 1.2;
}

/* Gjør siste avsnitt litt lysere */
.testimonial > p:last-of-type {
  opacity: 0.7;
}

/* Profilbilder */
.testimonial img {
  width: 1.75rem;
  aspect-ratio: 1;
  border-radius: 50%;
  display: block;
}

/* --- Profilseksjon (bilde og navn ved siden av hverandre) --- */
.profile {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* litt luft mellom bilde og tekst */
  margin-bottom: 1rem; /* luft mellom profil og første avsnitt */
}

.profile img {
  width: 2rem;
  border-radius: 50%;
}

.profile h3 {
  margin: 0;
  font-size: var(--fs-500);
}

.profile p {
  margin: 0;
  font-size: var(--fs-300);
  opacity: 0.6;
}

#img-quotation {
  background-image: url("images/bg-pattern-quotation.svg");
  background-repeat: no-repeat;
  background-position-x: 80%;
}

/* ----- MEDIA QUERY ----- */
/* Når skjermen er smalere enn 768px, vis alt under hverandre */
@media (max-width: 768px) {
  .testimonials-grid {
    grid-template-columns: 1fr; /* én kolonne */
  }

  .grid-col-span-2 {
    grid-column: span 1; /* fjern dobbel bredde på små skjermer */
  }

  .testimonial:last-child {
    grid-column-start: auto;
    grid-row: auto;
  }
}