/* JTP Completed Jobs — "Recent Completed Jobs" module.
   EXACT copy of the client's existing jtp-projects-section CSS, so the dynamic
   module is styled identically AND coexisting with the client's static reference
   section causes zero visual change (same selectors, same values). Do NOT add or
   alter properties here — it would override the client's static block. */

.jtp-projects-section {
  padding: 50px 0;
}

.jtp-projects-header {
  text-align: center;
  max-width: 1150px;
  margin: 0 auto 40px;
}

.jtp-projects-header span {
  display: inline-block;
  background: #eef4fc;
  color: #376DB5;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 15px;
}

.jtp-projects-header h2 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: .95;
  margin: 0;
  color: #173f73;
  font-weight: 900;
}

.jtp-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.jtp-project-card {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(55, 109, 181, .08);
  box-shadow: 0 15px 35px rgba(0, 0, 0, .06);
  transition: .25s ease;
}

.jtp-project-card:hover {
  transform: translateY(-6px);
}

.jtp-project-card img {
  width: 100%;
  display: block;
}

.jtp-project-content {
  padding: 24px;
}

.jtp-project-content h3 {
  margin: 0 0 14px;
  color: #173f73;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
}

.jtp-project-content p {
  margin: 0;
  color: #667085;
  line-height: 1.8;
  font-size: 15px;
}

.jtp-project-text {
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
  color: #667085;
  line-height: 1.8;
  font-size: 15px;
  scrollbar-width: thin;
  scrollbar-color: #cdd5df transparent;
}
.jtp-project-text p { margin: 0 0 12px; }
.jtp-project-text p:last-child { margin-bottom: 0; }
.jtp-project-text::-webkit-scrollbar { width: 6px; }
.jtp-project-text::-webkit-scrollbar-thumb { background: #cdd5df; border-radius: 3px; }

.jtp-project-content a {
  color: #376DB5;
  font-weight: 800;
  text-decoration: none;
}

.jtp-project-content a:hover {
  text-decoration: underline;
}

@media (max-width: 1100px) {
  .jtp-projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .jtp-projects-grid {
    grid-template-columns: 1fr;
  }
}