/* ===== PERSPECTIVES SECTION ===== */
.perspectives-section {
  background-color: #ffffff;
  padding: 96px 0;
}

/* ===== SECTION HEADER ===== */
.perspectives-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 40px;
}

.perspectives-title {
  font-size: 36px;
  line-height: 125%;
  color: #181c20;
  font-weight: 700;
  margin: 0;
}

.perspectives-desc {
  font-size: 16px;
  line-height: 100%;
  color: #3e4a3c;
  margin: 0;
}

/* ===== CARDS GRID ===== */
.perspectives-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

/* ===== SINGLE CARD ===== */
.perspective-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* Align to top */
  gap: 32px; /* Gap between image and content */
  padding: 24px;
  border-radius: 16px;
  background-color: #ffffff;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

/* Hover animation on card (not clickable, just visual) */
.perspective-card:hover {
  box-shadow: 0 8px 28px rgba(0, 110, 37, 0.1);
  transform: translateY(-4px);
}

/* ===== LEFT: IMAGE ===== */
.perspective-img-wrapper {
  flex-shrink: 0; /* Prevents image from shrinking */
}

.perspective-img-placeholder {
  width: 192px;
  height: 192px;
  border-radius: 16px;
  background-color: #c8d8c9;
  overflow: hidden;
  flex-shrink: 0;
}

.perspective-img {
  width: 192px;
  height: 192px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* ===== RIGHT: CONTENT ===== */
.perspective-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Blog Title */
.perspective-blog-title {
  font-size: 24px;
  line-height: 125%;
  color: #181c20;
  font-weight: 700;
  margin: 0 0 15px 0; /* 15px gap to description */
}

/* Blog Description — truncated to 3 lines */
.perspective-blog-desc {
  font-size: 14px;
  line-height: 150%;
  color: #3e4a3c;
  margin: 0 0 15px 0; /* 15px margin bottom */

  /* 3-line truncation */
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== DATE & AUTHOR ===== */
.perspective-meta {
  display: flex;
  align-items: center;
  gap: 16px; /* 16px between date and author */
  margin-bottom: 15px; /* 15px gap before read link */
}

.perspective-date,
.perspective-author {
  font-size: 12px;
  line-height: 16px;
  color: #3e4a3c;
  font-family: "Inter", sans-serif;
}

.perspective-author strong {
  font-weight: 700;
  font-family: "Inter", sans-serif;
}

/* ===== READ FULL STORY LINK ===== */
.perspective-read-link {
  display: inline-flex;
  align-items: center;
  gap: 16px; /* 16px between text and arrow */
  color: #006e25;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.6px;
  font-family: "Inter", sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  width: fit-content;
  transition:
    gap 0.2s ease,
    color 0.2s ease;
}

.perspective-read-link:hover {
  color: #004d1a;
  gap: 20px; /* Arrow slides right on hover */
}

/* ===== RESPONSIVE ===== */

/* Tablet */
@media (max-width: 992px) {
  .perspectives-section {
    padding: 60px 0;
  }

  .perspectives-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .perspectives-title {
    font-size: 28px;
  }

  .perspective-img-placeholder,
  .perspective-img {
    width: 160px;
    height: 160px;
  }
}

/* Small Tablet */
@media (max-width: 768px) {
  .perspective-card {
    gap: 20px;
    padding: 20px;
  }

  .perspective-blog-title {
    font-size: 20px;
  }

  .perspective-img-placeholder,
  .perspective-img {
    width: 130px;
    height: 130px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .perspectives-section {
    padding: 48px 0;
  }

  .perspective-card {
    flex-direction: column; /* Stack image above content on mobile */
    gap: 16px;
    padding: 16px;
  }

  .perspective-img-placeholder,
  .perspective-img {
    width: 100%;
    height: 200px;
    border-radius: 12px;
  }

  .perspectives-title {
    font-size: 24px;
  }

  .perspective-blog-title {
    font-size: 18px;
  }
}