/* ==========================
   ARTICLE PAGE
========================== */

.article-page {
  padding: 145px 0 60px;
}

.article {
  background: white;

  border-radius: 15px;

  overflow: hidden;

  border: 1px solid #eee;
}

.article img {
  width: 100%;

  height: 500px;

  object-fit: cover;
}

.article-header {
  padding: 35px;
}

.article-header h1 {
  font-size: 42px;

  font-weight: 800;

  line-height: 1.2;

  margin: 20px 0;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;

  gap: 25px;

  color: #777;
}

.article-content {
  padding: 0 35px 35px;
}

.article-content p {
  font-size: 18px;

  line-height: 1.9;

  margin-bottom: 25px;

  color: #444;
}

.related-news {
  background: white;

  padding: 25px;

  border-radius: 15px;

  border: 1px solid #eee;
}

.comments-section {
  margin-top: 28px;
  padding: 30px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(87, 38, 255, .12);
  border-radius: 15px;
}

.comments-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 25px;
}

.comments-heading h2 {
  margin: 0;
  color: #19214f;
  font-size: 25px;
  font-weight: 800;
}

.comments-heading span {
  color: #6a2eff;
  font-weight: 600;
}

.comment-form {
  padding: 22px;
  background: #f4f2ff;
  border-radius: 12px;
}

.comment-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.comment-form label {
  display: block;
  margin: 14px 0 7px;
  color: #263260;
  font-size: 14px;
  font-weight: 600;
}

.comment-form label span { font-weight: 400; color: #68708f; }

.comment-form input,
.comment-form textarea {
  width: 100%;
  border: 1px solid #d8d9ea;
  border-radius: 8px;
  padding: 11px 13px;
  color: #19214f;
  background: #fff;
}

.comment-form textarea { resize: vertical; }

.comment-form button {
  margin-top: 18px;
  border: 0;
  border-radius: 8px;
  padding: 12px 18px;
  background: #5c22ff;
  color: #fff;
  font-weight: 700;
}

.comments-list { margin-top: 28px; }

.comment-item {
  display: flex;
  gap: 13px;
  padding: 18px 0;
  border-bottom: 1px solid #ececf4;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e5dcff;
  color: #5421de;
  font-weight: 800;
}

.comment-item time {
  display: block;
  margin-top: 2px;
  color: #777;
  font-size: 12px;
}

.comment-item p { margin: 8px 0 0; color: #454b68; white-space: pre-line; }
.comment-success { padding: 12px; background: #e7f8ed; color: #176437; border-radius: 8px; }
.field-error { display: block; margin-top: 6px; color: #b42318; }
.no-comments { color: #68708f; }

@media (max-width: 768px) {
  .article-page { padding-top: 120px; }
  .article img { height: 300px; }
  .article-header, .article-content, .comments-section { padding-left: 22px; padding-right: 22px; }
  .article-header h1 { font-size: 30px; }
  .comment-fields { grid-template-columns: 1fr; gap: 0; }
}