@import url('satoshi.css');
@import url('styles.css');
/* === Style For Desktop=== */

/* === Start Style for Current Opening Section=== */
.current-opening-section {
    width: 100%;
    display: flex;
    background-color: var(--black_solid);
    padding: 56.33px 808px 81px 72px;
     
  }
  .current-opening-container{
      width: 560px;
      height: auto;
      display: flex;
      flex-direction: column;
      gap: 24px;
  }
  .current-opening-header{
  font-size: var(--text-54);
  font-family: 'Satoshi-Regular';
  color: var(--white_100);
  line-height: 81px;
  }
  .current-opening-desc{
  font-size: var(--text-18);
  font-family: 'Satoshi-Regular';
  color: var(--white_100);
  line-height: 27px;
  }

/* === Start Style for Job Opening Section=== */
 .job-opening-section {
    width: 100%;
    padding: 64px 168px 72px 168px;
    background-color: var(--white_700);
    display: flex;
    gap: 26px;
    justify-content: center;
  }

  /* Left column - Job Listings */
  .job-listings {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .job-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: var(--gray-job-card);
    border: 1px solid var(--gray_200);
    padding: 24px 28px;
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    cursor: pointer;
  }
  .job-card.selected { border: 2px solid var(--yellow_600); }

  .job-title {
    font-size: var(--text-24);
    font-family: 'Satoshi-Bold';
    color: var(--black_1000);
    line-height: 36px;
  }

  .job-tags {
    display: flex;
    gap: 16px; 
  }

  .job-tag {
    padding: 5px 8px;
    border-radius: 4px;
    background-color: #EFF1F5;
    font-size: var(--text-13);
    font-family: 'Satoshi-Medium';
    color: var(--black_800);
    line-height: auto;
  }

  .job-summary {
    margin-top: 4px;
    font-size: var(--text-14);
    font-family: 'Satoshi-Regular';
    color: var(--black_800);
    line-height: 21px;
  }

  /* Right column - Job Details */
  .job-details {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 36px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    background-color: var(--gray-job-card);
    border-radius: 16px;
    gap: 24px;
  }

  .job-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .job-detail .job-heading {
    font-size: var(--text-22);
    font-family: 'Satoshi-Bold';
    color: var(--black_1000);
    line-height: 36px;
  }

  .details-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .details-content .job-sub-head {
    font-size: var(--text-18);
    font-family: 'Satoshi-Bold';
    color: var(--black_1000);
    line-height: 36px;
  }
  .details-content .job-sub-head span { font-size: var(--text-16); font-family: 'Satoshi-Regular'; }

  .details-content ul {
    padding-left: 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .details-content ul li{
    font-size: var(--text-14);
    font-family: 'Satoshi-Regular';
    color: var(--black_800);
    line-height: 21px;
  }
  .details-contents {
    margin-top: 8px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .details-contents p {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .details-contents .job-point {
    font-size: var(--text-14);
    font-family: 'Satoshi-Regular';
    color: var(--black_1000);
    line-height: 22px;
  }
  .details-contents .job-point span {
    font-size: var(--text-14);
    font-family: 'Satoshi-Medium';
    color: var(--black_100);
    line-height: 22px;
  }

  .job-apply-btn {
    height: 39px;
    padding: 10px 20px;
    background-color: var(--yellow_500);
    border: none;
    text-decoration: none;
    border-radius: 8px;
    font-size: var(--text-14);
    font-family: 'Satoshi-Medium';
    color: var(--black_1000);
    line-height: auto;
    cursor: pointer;
  }
  .job-apply-btn:hover { background-color: var(--yellow_500); }

/* === End Style For Desktop=== */
/* === Responsive Styles for Tablet Screen (744px to 1024px) === */

@media (min-width: 744px) and (max-width: 1024px) {
.current-opening-section {
    width: 100%;
    padding: 80px 112px 99px 72px; 
  }
  .current-opening-header{
  font-size: var(--text-42);
  line-height: 63px;
  }
  .job-opening-section {
    width: 100%;
    padding: 32px 102px 32px 102px;
    gap: 0px;
  }
  .job-card { border-radius: 12px; }
  .job-title { font-size: var(--text-22); }

  .job-details { display: none; }
  .job-details.active { display: flex; }

}

/* === Responsive Styles for Tablet Screen (744px to 1024px) === */
@media (min-width: 320px) and (max-width: 744px) {
  .current-opening-section {
     width: 100%;
     padding: 24px 101px 60px 20px; 
  }
  .current-opening-container{
     width: 100%;
     height: auto;
  }
  .current-opening-header{
     font-size: var(--text-24);
     line-height: 36px;
  }
  .current-opening-desc{
     font-size: var(--text-14);
     line-height: 21px;
  }
  .job-opening-section {
    width: 100%;
    padding: 24px 20px 24px 20px;
    gap: 0px;
  }

  .job-card { border-radius: 12px; }
  .job-title {
    font-size: var(--text-18);
    line-height: 27px;
  }
  .job-summary { font-size: var(--text-12); }

  .job-details { display: none; }
  .job-details.active { display: flex; }

  .job-detail .job-heading {
    font-size: var(--text-18);
    line-height: 130%;
  }
  .details-content .job-sub-head { font-size: var(--text-16); }
  .details-content ul li{
    font-size: var(--text-12);
    line-height: 21px;
  }
 
}