/* Custom styles for Nous School */

.open-articles-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 40px 20px;
}

.open-articles-grid-progressive {
  display: grid;
  /* Progressive grid: adapts columns automatically based on available space */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
  justify-content: center;
}

/* Ensure cards look good in the grid */
.open-articles-grid-progressive .class_item {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff; /* Ensure bg is white */
  border-radius: 8px; /* Optional rounded corners */
  overflow: hidden; /* Fix for image overflow if rounded */
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Simulating valid card shadow */
}

.open-articles-grid-progressive .class_item_image {
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  min-height: 200px; /* Force minimum height to ensure visibility */
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.open-articles-grid-progressive .class_item_link {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-decoration: none; /* remove link styles */
}

.open-articles-grid-progressive .class_item_content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px; /* Ensure generic padding */
}

.open-articles-grid-progressive .journey-item_infos {
  margin-top: auto;
  padding-top: 15px; /* compact padding */
}

/* Compact styles for font sizing within cards */
.open-articles-grid-progressive .class_item_content_title {
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 8px; /* Reduce title margin */
}

.open-articles-grid-progressive .class_item_content_p {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Limit text lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Styles specifically for teacher info inside the card */
.open-articles-grid-progressive .class_item_teacher {
  display: flex;
  align-items: center;
  /* styles handled inline in html for specific overrides, but can add here if needed */
}

/* Fix for very small screens */
@media screen and (max-width: 350px) {
  .open-articles-grid-progressive {
    grid-template-columns: 1fr;
  }
}