@import url('article-base.css');

.article-content li {
  color: #444
}

.highlight-box h4 i,
.highlight-box p,
.career-path p {
  margin-bottom: 0
}

.highlight-box p,
.career-path p {
  line-height: 1.8
}

.certifications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(1.5rem, 4vw, 2rem);
  margin: 3rem 0
}

.cert-card .info {
  background: rgba(0, 191, 165, 0.08);
  padding: clamp(.75rem, 2vw, 1rem);
  margin: .5rem 0;
  border-radius: 0;
  border: 3px solid var(--shadow-color);
  border-left: 5px solid var(--article-primary);
  font-size: clamp(.9rem, 2.5vw, 1rem);
  line-height: 1.5;
  box-shadow: 3px 3px 0 0 var(--shadow-color)
}

.career-path {
  background: var(--article-bg);
  border: 4px solid var(--shadow-color);
  border-radius: 0;
  padding: clamp(1.5rem, 4vw, 2rem);
  margin: 2rem 0;
  transition: all .3s ease;
  box-shadow: 4px 4px 0 0 var(--shadow-color);
  border-left: 6px solid var(--article-primary)
}

.career-path:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--shadow-color)
}

.career-path h4 {
  font-family: var(--font-comic-ar);
  color: var(--article-primary-dark);
  margin-bottom: 1.25rem;
  font-size: clamp(1.15rem, 3vw, 1.35rem);
  line-height: 1.4;
  font-weight: 600;
  text-shadow: 1px 1px 0 rgba(0, 191, 165, 0.2)
}

.salary-table tr:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(95, 39, 205, 0.15)
}

@media (max-width:768px) {
  .article-content {
    border-radius: 16px
  }

  .article-content ul {
    padding-right: 2rem;
    margin: 1.75rem 0
  }

  .certifications-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin: 2.5rem 0
  }

  .career-path {
    padding: 1.75rem;
    margin: 2rem 0
  }

  .salary-table {
    font-size: .875rem;
    border-radius: 12px
  }

  .salary-table th,
  .salary-table td {
    padding: .875rem .625rem
  }
}

@media (max-width:480px) {

  .highlight-box,
  .career-path,
  .cert-card {
    padding: 1.5rem
  }

  .salary-table th,
  .salary-table td {
    padding: .75rem .5rem;
    font-size: .8rem
  }
}