/*font family import*/
@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/*css variables*/
/*from the figma design system*/
:root {
  /*font families*/
  /*there is only one in this desing system*/
  --font-family: "Barlow Semi Condensed", sans-serif;

  /*design colors*/
  --color-white: #ffffff;
  --color-dark-blue: #19202d;
  --color-black: #121212;

  --color-purple-500: #733fc8;
  --color-purple-300: #a775f1;
  --color-purple-50: #ede4ff;

  --color-grey-500: #48556a;
  --color-grey-400: #676d7e;
  --color-grey-200: #cfcfcf;
  --color-grey-100: #e7eaee;

  /*design spacings*/
  --spacing-500: 4rem; /*40 pixels*/
  --spacing-400: 3.2rem;
  --spacing-300: 2.4rem;
  --spacing-200: 1.6rem;
  --spacing-100: 0.8rem;
  --spacing-50: 0.4rem; /*4 pixels*/

  /*typography*/
  /*for "font" shorthand*/
  --font-preset-1: 2rem/1.2 var(--font-family); /*20px, 120%*/
  --font-preset-2: 1.3rem/1.1 var(--font-family);
  --font-preset-3: 1.3rem/1.4 var(--font-family);
  --font-preset-4: 1.1rem/1.1 var(--font-family);

  /*sizes*/
  --image-width: clamp(3rem, 3vw, 5rem);

  /*card shadow*/
  --card-shadow: 5px 4px 3px 1px var(--color-grey-200);

  /*radiuses*/
  --card-radius: 0.6rem;
}

/*default styles*/
*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100dvw;
  height: 100dvh;

  font-size: 62.5%;
  font: var(--font-preset-1);

  overflow: hidden;
}

main {
  /*whole screen main*/
  width: 100%;
  height: 100%;

  /*center the grid*/
  display: flex;
  justify-content: safe center;
  align-items: safe center;

  /*forced overflow on main*/
  overflow-y: scroll;

  /*padding*/
  padding: var(--spacing-500) var(--spacing-200);

  /*background color*/
  background-color: var(--color-grey-100);
}

img {
  /*fit image to its parent*/
  object-fit: contain;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

/*grid container*/
.grid-container {
  /*size*/
  width: 100%;
  height: auto;

  /*display*/
  /*1 col grid on mobile*/
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-200);

  /*padding*/
  padding: var(--grid-container-padding-y) var(--grid-container-padding-x);
}

/*card*/
.card {
  /*size*/
  width: var(--card-width);
  height: auto;

  /*display, flex 1 col on all devices*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: var(--spacing-200);

  /*padding*/
  padding: var(--spacing-200);

  /*card radius*/
  border-radius: var(--card-radius);

  /*card shadow*/
  box-shadow: var(--card-shadow);
}

/*card hero*/
.hero {
  /*display*/
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-200);
}

/*avatar*/
.avatar {
  /*image size*/
  width: var(--image-width);

  /*center image*/
  display: flex;
  justify-content: start;
  align-items: start;

  /*border*/
  border: 2px solid var(--color-purple-300);
  border-radius: 50rem;
}

.information {
  /*display*/
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: var(--spacing-50);
}

.name p {
  /*typography*/
  font: var(--font-preset-4);
}

/*status*/
.status {
  /*grid placement*/
  grid-row: 3/4;
  grid-column: 3/12;
}

.status p {
  /*typography*/
  font: var(--font-preset-4);
  opacity: 80%;
}

/*main text*/
.main-text {
  max-width: 90%;
}

.main-text p {
  /*typography*/
  font: var(--font-preset-2);
  font-weight: 600;
}

/*sub text*/
.sub-text p {
  /*typography*/
  font: var(--font-preset-4);
  opacity: 85%;
}

/*card 1*/
.card-1 {
  /*background color*/
  background-color: var(--color-purple-500);

  /*typography*/
  color: var(--color-purple-50);
}

/*card 2*/
.card-2 {
  /*background color*/
  background-color: var(--color-grey-500);

  /*typography*/
  color: var(--color-white);
}

/*card 3*/
.card-3 {
  /*background color*/
  background-color: var(--color-white);

  /*typography*/
  color: var(--color-grey-500);
}

/*card 4*/
.card-4 {
  /*background color*/
  background-color: var(--color-dark-blue);

  /*typography*/
  color: var(--color-white);
}

/*card 5*/
.card-5 {
  /*background color*/
  background-color: var(--color-white);

  /*typography*/
  color: var(--color-grey-500);
}

/*media queries*/
@media (min-width: 768px) {
  :root {
    /*decrease the card width*/
    --card-width: clamp(20rem, 60vw, 40rem);

    /*increase the image size*/
    --image-width: clamp(3rem, 8vw, 10rem);
  }

  .grid-container {
    /*tablet grid*/
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(2, 1fr);
  }

  .card {
    /*adjust card size*/
    width: 100%;
    height: 100%;

    /*decrease the gap*/
    gap: var(--spacing-100);
  }

  /*card 1*/
  .card-1 {
    /*grid placement*/
    grid-column: 1/3;
    grid-row: 1/2;
  }

  /*card 2*/
  .card-2 {
    /*grid placement*/
    grid-column: 1/2;
    grid-row: 2/3;
  }

  /*card 3*/
  .card-3 {
    /*grid placement*/
    grid-column: 2/3;
    grid-row: 2/3;
  }

  /*card 4*/
  .card-4 {
    /*grid placement*/
    grid-column: 1/3;
    grid-row: 3/4;
  }

  .card-5 {
    /*grid placement*/
    grid-column: 1/3;
    grid-row: 4/5;
  }
}

@media (min-width: 1280px) {
  :root {
    /*decrease the image size*/
    --image-width: clamp(3rem, 3vw, 4rem);

    /*decrease the card radius*/
    --card-radius: 0.8rem;
  }

  .grid-container {
    /*fix size*/
    max-height: 50%;
    max-width: 50%;

    /*display grid*/
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(4, 1fr);
  }

  .card {
    /*increase the gap*/
    gap: var(--spacing-300);
  }

  .name p {
    /*increase the font size*/
    font: var(--font-preset-1);
  }

  .status p {
    /*increase the font size*/
    font: var(--font-preset-1);
  }

  .main-text p {
    /*increase the font size*/
    font: var(--font-preset-1);
  }

  .sub-text p {
    /*increase the font size*/
    font: var(--font-preset-2);
  }

  .card-1 {
    /*for the image*/
    position: relative;

    /*grid placement*/
    grid-row: 1/2;
    grid-column: 1/3;
  }

  .card-1::after {
    content: url("./images/bg-pattern-quotation.svg");

    position: absolute;
    top: 0;
    right: 5%;

    opacity: 40%;
  }

  .card-2 {
    /*grid placement*/
    grid-row: 1/2;
    grid-column: 3/4;
  }

  .card-3 {
    /*grid placement*/
    grid-row: 2/3;
    grid-column: 1/2;
  }

  .card-4 {
    /*grid placement*/
    grid-row: 2/3;
    grid-column: 2/4;
  }

  .card-5 {
    /*grid placement*/
    grid-row: 1/4;
    grid-column: 4/5;
  }
}