@layer reset, base, components, utilities;

@font-face {
   font-family: 'Plus Jakarta Sans';
   src: url('./assets/font/PlusJakartaSans-Medium.ttf');
   font-weight: 400;
}

@font-face {
   font-family: 'Plus Jakarta Sans';
   src: url('./assets/font/PlusJakartaSans-Bold.ttf');
   font-weight: 700;
}

@font-face {
   font-family: 'Plus Jakarta Sans';
   src: url('./assets/font/PlusJakartaSans-ExtraBold.ttf');
   font-weight: 800;
}

@layer reset {
   *,
   *::before,
   *::after {
      box-sizing: border-box;
   }

   html {
      -moz-text-size-adjust: none;
      -webkit-text-size-adjust: none;
      text-size-adjust: none;
   }

   body,
   h1,
   h2,
   h3,
   h4,
   p,
   figure,
   blockquote,
   dl,
   dd {
      margin: 0;
   }

   [role='list'] {
      list-style: none;
      margin: 0;
      padding: 0;
   }

   body {
      min-block-size: 100vh;
      line-height: 1.6;
   }

   h1,
   h2,
   h3,
   button,
   input,
   label {
      line-height: 1.1;
   }

   h1,
   h2,
   h3,
   h4 {
      text-wrap: balance;
   }

   p,
   li {
      text-wrap: pretty;
   }

   img,
   picture {
      max-inline-size: 100%;
      display: block;
   }

   input,
   button,
   textarea,
   select {
      font: inherit;
   }
}

@layer base {
   :root {
      /* colors */
      --brand-clr-primary: hsl(233, 54%, 16%);
      --brand-clr-primary-accent: hsl(234, 25%, 52%);
      --brand-clr-secondary: hsl(341, 92%, 62%);
      --brand-clr-secondary-accent: hsl(341, 100%, 83%);
      --text-clr: hsl(232, 10%, 56%);
      --bg-clr: hsl(0, 0%, 100%);
      --gradient-pink: linear-gradient(
         to top,
         hsl(322, 87%, 55%) 0%,
         hsl(13, 100%, 64%) 100%
      );
      --gradient-purple: linear-gradient(
         to bottom,
         hsl(237, 100%, 64%) 0%,
         hsl(322, 87%, 55%) 100%
      );

      /* typography */
      --text-preset-1: 3.5rem;
      --text-preset-2: 2.5rem;
      --text-preset-3: 2rem;
      --text-preset-4: 1.5rem;
      --text-preset-5: 1.125rem;
      --text-preset-6: 1rem;

      --ff: 'Plus Jakarta Sans', sans-serif;

      /* line height */
      --lh-tight: 120%;
      --lh-normal: 150%;

      /* spacing system reference
      --space-1800: 9rem; 
      --space-1600: 8rem; 
      --space-1000: 5rem; 
      --space-800: 4rem; 
      --space-700: 3.5rem; 
      --space-600: 3rem; 
      --space-550: 2.75rem; 
      --space-500: 2.5rem; 
      --space-400: 2rem; 
      --space-300: 1.5rem; 
      --space-250: 1.25rem; 
      --space-200: 1rem; 
      --space-150: 0.75rem; 
      --space-100: 0.5rem;
      */
   }

   body {
      font-family: var(--ff);
      overflow-x: hidden;
   }

   main {
      padding: 1rem;
   }

   header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem;
      padding-bottom: 4rem;
   }

   .logo {
      width: 85px;
      height: 22px;
   }

   h1 {
      font-size: var(--text-preset-2);
      font-weight: 700;
      line-height: var(--lh-tight);
      color: var(--brand-clr-primary);
   }

   .hero {
      padding-bottom: 5rem;
   }

   .hero__content p {
      font-size: var(--text-preset-5);
      font-weight: 400;
      line-height: var(--lh-normal);
      color: var(--text-clr);
   }

   .hero__content {
      display: grid;
      gap: 2rem;
      justify-items: start;
      padding-bottom: 4rem;
   }

   .courses {
      padding-bottom: 5rem;
   }

   .courses__header {
      font-size: var(--text-preset-4);
      line-height: var(--lh-normal);
      font-weight: 800;
      color: var(--brand-clr-primary);
   }

   .courses__text {
      font-size: var(--text-preset-6);
      line-height: var(--lh-tight);
      color: var(--text-clr);
   }

   .courses__link {
      font-size: var(--text-preset-5);
      font-weight: 700;
      line-height: var(--lh-normal);
      color: var(--brand-clr-secondary);
      text-decoration: none;
   }

   footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100px;
      background-color: var(--brand-clr-primary);
      padding-inline: 1rem;
   }
}

@layer components {
   .header__btn {
      padding: 1rem 2.5rem;
      border-radius: 2rem;
      border: none;
      font-size: var(--text-preset-5);
      font-weight: 400;
      line-height: var(--lh-normal);
      background-color: var(--brand-clr-primary);
      color: var(--bg-clr);
   }

   .header__btn:hover {
      background-color: var(--brand-clr-primary-accent);
      cursor: pointer;
      transition: 0.5s ease;
   }

   .hero__btn {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: 1rem 2rem;
      border-radius: 2rem;
      border: none;
      font-size: var(--text-preset-5);
      font-weight: 400;
      line-height: var(--lh-normal);
      background: var(--gradient-pink);
      color: var(--bg-clr);
      cursor: pointer;
      transition: 0.5s ease;
   }

   .hero__btn::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: var(--brand-clr-secondary-accent);
      opacity: 0;
      transition: opacity 0.5s ease;
      z-index: -1;
   }

   .hero__btn:hover::after,
   .hero__btn:focus-visible::after {
      opacity: 1;
   }

   .courses__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4rem;
   }

   .courses__cta {
      text-align: left;
      padding: 2rem;
      background: var(--gradient-pink);
      border-radius: 1rem;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
      color: var(--bg-clr);
   }

   .course__info {
      background-color: var(--bg-clr);
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      border-radius: 1rem;
      position: relative;
      display: grid;
      gap: 1.5rem;
      padding: 4rem 2rem 2.5rem 2rem;
   }

   .course__info img {
      position: absolute;
      top: -30px;
      left: 40px;
   }

   .footer__btn {
      padding: 0.5rem 1.5rem;
      border-radius: 2rem;
      border: none;
      font-size: var(--text-preset-5);
      font-weight: 400;
      line-height: var(--lh-normal);
      background: var(--gradient-purple);
      color: var(--bg-clr);
      position: relative;
      isolation: isolate;
      transition: 0.5s ease;
      cursor: pointer;
   }

   .footer__btn::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: var(--brand-clr-secondary-accent);
      opacity: 0;
      transition: opacity 0.5s ease;
      z-index: -1;
   }

   .footer__btn:hover::after,
   .footer__btn:focus-visible::after {
      opacity: 1;
   }
}

@layer utilities {
   .attribution {
      font-size: 11px;
      text-align: center;
      padding: 2rem;
   }
   .attribution a {
      color: hsl(228, 45%, 44%);
   }
}

@media (min-width: 760px) {
   header {
      padding: 1rem 2rem 5rem 2rem;
   }

   .header__btn {
      padding: 0.5rem 1.5rem;
      font-size: var(--text-preset-6);
   }

   .hero__btn {
      padding: 0.5rem 1.5rem;
      font-size: var(--text-preset-6);
   }

   .hero {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      padding: 0 1rem 3rem 1rem;
   }

   .hero picture {
      transform: translate(31%, -18%);
      scale: 140%;
   }

   .courses {
      padding-inline: 1rem;
   }

   .courses__grid {
      grid-template-columns: 1fr 1fr;
      gap: 4rem 1.5rem;
   }

   footer {
      padding-inline: 2rem;
   }
}

@media (min-width: 1024px) {
   h1 {
      font-size: var(--text-preset-1);
      line-height: var(--lh-normal);
      font-weight: 800;
   }

   .courses__grid {
      grid-template-columns: repeat(3, 1fr);
   }

   header {
      padding: 1rem 6rem;
   }

   .hero picture {
      transform: translate(30%, -5%);
      scale: 140%;
      padding-bottom: 5rem;
   }

   .hero {
      padding-inline: 5rem;
   }

   .courses {
      padding-inline: 4rem;
   }
}