/* Fonts */
/* league-spartan-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/league-spartan-v14-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* league-spartan-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/fonts/league-spartan-v14-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* league-spartan-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/fonts/league-spartan-v14-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Variables */
:root {
  --color-purple: hsl(300, 43%, 22%);
  --color-pink: hsl(333, 80%, 67%);
  --color-magenta-700: hsl(303, 10%, 53%);
  --color-magenta-400: hsl(300, 24%, 96%);
  --color-white: hsl(0, 0%, 100%);
}

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

img {
  display: block;
  width: 100%;
  height: auto;
}

/* Typography */
body {
  font-size: 0.9375rem;
  font-family: 'League Spartan';
}

h1 {
  line-height: 1;
  word-spacing: -2px;
  color: var(--color-purple);
  margin-bottom: 1.3rem;
  font-size: clamp(1.875rem, 1.6549295774647887rem + 0.9389671361502347vw, 2.5rem);
}

p {
  line-height: 1.5;
}

/* Rating block component */
.rating-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 6px;
  margin-bottom: 1rem;
  padding-block: 0.5rem;
  background-color: var(--color-magenta-400);
}

.rating-block__text {
  color: var(--color-purple);
  font-weight: 700;
}

@media (min-width: 1024px) {
  .rating-block {
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
    padding: 0.8rem;
  }
}

/* Media component */
.media {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.media__image .image-container {
  border-radius: 100%;
  overflow: hidden;
}

.media__profile-pic {
  width: 3rem;
}

.media__name {
  margin-bottom: -2px;
  font-weight: 700;
  color: var(--color-white);
}

.media__role {
  color: var(--color-pink);
  font-weight: 700;
}

/* Comment Block Component */
.comment-block {
  background-color: var(--color-purple);
  padding: 2rem;
  border-radius: 8px;
}

.comment-block__body {
  padding-top: 1.6rem;
}

.comment-block__text {
  color: var(--color-white);
  width: 27ch;
}

@media screen and (min-width: 700px) and (max-width: 1299px) {
  .comment-block__text {
    width: 100%;
  }
}

@media screen and (min-width: 1300px) {
  .comment-block__text {
    width: 30ch;
  }
}

/* Hero */
.hero {
  display: grid;
  row-gap: 1.7rem;
  padding-block-end: 2rem;
}

.hero__title {
  text-align: center;
  width: 12ch;
  margin-inline: auto;
}

.hero__text {
  text-align: center;
  margin-inline: auto;
  width: 32ch;
  color: var(--color-magenta-700);
}

@media screen and (min-width: 1024px) {
  .hero {
    grid-template-columns: 1fr 1fr;
  }

  .hero__title, .hero__text {
    text-align: left;
    margin-inline: 0;
  }

  .hero__text {
    width: 43ch;
  }

  .hero-rating-holder {
    display: flex;
    justify-content: flex-end;
  }

  .hero-rating-holder.ls-small {
    padding-right: 3rem;
  }

  .hero-rating-holder.ls-medium {
    padding-right: 6rem;
  }

  .rating-block {
    max-width: 350px;
  }
}

/* Comments Section */
.comment-section {
  display: grid;
  row-gap: 1rem;
}

.comment__wrapper {
  max-width: fit-content;
  margin-inline: auto;
}

@media screen and (min-width: 700px) {
  .comment-section {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2rem;
  }
}

/* Wrapper */
.wrapper {
  padding-inline: 1.5rem;
  padding-top: 3rem;
  padding-bottom: 4rem;
  width: 100%;
  max-width: 1300px;
  margin-inline: auto;
  box-shadow:  0rem 0 40px black;
  background-color: var(--color-white);
}

@media screen and (min-width: 1024px) {
  .wrapper {
    padding: 7rem 5rem;
  }
}

/* Container */
.container {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  background-color: var(--color-magenta-400);
}

@media screen and (min-width: 1024px) {
  .container {
    padding-block: 3rem;
  }
}


/* Utils */
@media screen and (min-width: 1024px) {
  .comment-block-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 350px;
  }

  .comment-block-container.us-small {
    padding-bottom: 1rem;
  }

  .comment-block-container.us-medium {
    padding-bottom: 2.4rem;
  }
}