/* =========================================================
   Projects Page
   ========================================================= */

.projects-page {
  padding-bottom: 80px;
}

.projects-intro {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.projects-grid {
  max-width: 900px;
  margin: 30px auto 0;
  padding: 0 20px;

  display: grid;
  gap: 32px;
}

.project-card {
  padding: 36px;

  background: #ffffff;
  border: 1px solid #e7e2d6;
  border-radius: 16px;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);

  text-align: left;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.project-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
}

.project-card:focus-within {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
}

.project-card-header {
  text-align: center;
  margin-bottom: 24px;
}

.project-title {
  margin-bottom: 8px;

  color: var(--text-dark);
  font-size: 1.5rem;
  font-weight: 700;
}

.project-period {
  margin: 0;

  color: var(--text-gray);
  font-size: 0.95rem;
  font-weight: 500;
}

.project-description {
  max-width: 760px;
  margin: 0 auto 28px;

  color: var(--text-dark);
  line-height: 1.8;
  text-align: center;
}

.project-section-title {
  margin-bottom: 16px;

  color: var(--text-dark);
  font-size: 1.15rem;
  font-weight: 700;
}

.project-responsibilities {
  margin: 0;
  padding-left: 22px;
}

.project-responsibilities li {
  margin-bottom: 10px;

  color: var(--text-dark);
  line-height: 1.7;
}

.project-closing {
  max-width: 760px;
  margin: 70px auto 0;
  padding: 0 20px;

  text-align: center;
}

.project-section-heading {
  margin-bottom: 14px;

  color: var(--text-dark);
  font-size: 1.6rem;
  font-weight: 700;
}

.projects-note {
  padding: 16px 20px;
  margin: 20px auto 40px;

  background: #fafafa;
  border-left: 4px solid var(--gold);

  border-radius: 8px;

  max-width: 800px;
}

/* =========================================================
   Projects Page - RTL
   ========================================================= */

[dir="rtl"] .project-card-header,
[dir="rtl"] .project-title,
[dir="rtl"] .project-section-title,
[dir="rtl"] .project-section-heading,
[dir="rtl"] .project-period,
[dir="rtl"] .project-description,
[dir="rtl"] .service-intro {
  text-align: center;
}
[dir="rtl"] .project-responsibilities {
  padding-right: 28px;
  padding-left: 0;
  text-align: right;
}

/* =========================================================
   Projects Page - Mobile
   ========================================================= */

@media (max-width: 768px) {
  .projects-grid {
    margin-top: 36px;
    padding: 0 16px;
  }

  .project-card {
    padding: 20px 18px;
  }

  .project-title {
    font-size: 1.3rem;
  }

  .project-description {
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.8;
  }

  .project-responsibilities li {
    font-size: 0.95rem;
    line-height: 1.7;
  }
}