@import url("./reset.css");
@import url("./frontend.css");

.jobs {
  width: 100%;
  max-width: 1300px;
  padding: 0 16px;
  margin: 0 auto;
  min-height: 100vh;

  &>header {
    margin-top: 48px;

    h1 {
      font-size: 36px;
      font-weight: 700;
      line-height: 57.6px;
      color: hsla(223, 62%, 35%, 1);
    }
  }

  .items {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 27px 0;

    .job {
      width: 100%;
      padding: 32px;
      background: hsla(0, 0%, 97%, 1);
      border-radius: 10px;

      &>header {
        h2 {
          font-size: 32px;
          font-weight: 500;
          line-height: 51.2px;
          color: hsla(223, 62%, 35%, 1);
          margin: 0;
        }

        ul {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 8px;

          li {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 16px;
            font-weight: 400;
            line-height: 25.6px;
            color: hsla(0, 0%, 36%, 1);
          }
        }
      }

      hr {
        width: 100%;
        height: 1px;
        background: hsla(0, 0%, 68%, 1);
        margin-top: 16px;
      }

      h3 {
        font-size: 24px;
        font-weight: 500;
        line-height: 38.4px;
        color: hsla(0, 0%, 27%, 1);
        margin-top: 21px;
      }

      p {
        margin-top: 8px;
        font-size: 16px;
        font-weight: 400;
        line-height: 25.6px;
        color: hsla(0, 0%, 36%, 1);
        margin-bottom: 27px;
        white-space: pre-line;
      }

      .job-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;

        ul {
          display: flex;
          align-items: center;
          gap: 32px;
          flex-wrap: wrap;


          li {
            display: flex;
            gap: 8px;
            align-items: center;
            font-size: 16px;
            font-weight: 400;
            line-height: 25.6px;
          }
        }

        .apply {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 194px;
          height: 48px;
          padding: 8px;
          gap: 16px;
          border-radius: 8px;
          background: hsla(223, 62%, 35%, 1);
          color: hsla(54, 100%, 52%, 1);
          font-size: 20px;
          font-weight: 700;
          line-height: 32px;
          transition: all 0.3s ease;

          &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
          }

          &:not(:disabled):hover {
            cursor: pointer;
            opacity: 0.8;
          }
        }
      }
    }
  }


}

@media only screen and (max-width: 768px) {
  .jobs {
    &>header {
      margin-top: 24px;

      h1 {
        font-size: 24px;
        line-height: 38.4px;
      }
    }

    .items {
      gap: 16px;

      .job {
        padding: 16px;

        &>header {
          h2 {
            font-size: 18px;
            line-height: 28.8px;
          }

          ul {
            flex-direction: column;
            align-items: flex-start;

            li {
              gap: 6px;
              font-size: 12px;
              line-height: 19.2px;

              img {
                width: 12px;
                height: 12px;
              }
            }
          }
        }

        h3 {
          font-size: 16px;
          line-height: 25.6px;
          margin-top: 8px;
        }

        p {
          margin-top: 16px;
          font-size: 12px;
          line-height: 19.2px;
          margin-bottom: 16px;
        }

        .job-footer {
          flex-direction: column;

          ul {
            gap: 16px;

            li {
              gap: 6px;
              font-size: 12px;
              line-height: 19.2px;

              img {
                width: 12px;
                height: 12px;
              }
            }
          }

          .apply {
            width: 100%;
            height: 32px;
            font-size: 12px;
            line-height: 19.2px;

          }
        }
      }
    }
  }
}