/**
 * ============================================================================
 * RECENT HIGHLIGHTS - ARTICLE LIST COMPONENT
 * ============================================================================
 * Displays a list of recent articles in a horizontal card layout.
 * Each article shows a thumbnail, category, title, date, and read button.
 * 
 * LAYOUT STRUCTURE:
 * - Horizontal cards with thumbnail on left
 * - Content in middle (category, title)
 * - Metadata on right (date, read button)
 * - Flexbox layout for responsive alignment
 * 
 * CARD COMPONENTS:
 * - 80x80px thumbnail
 * - Category badge (uppercase, small)
 * - Article title
 * - Publication date
 * - Read button
 * ============================================================================
 */

/* ========================================================================== */
/* MAIN CONTAINER - SECTION WRAPPER */
/* ========================================================================== */
.recent-highlights {
  width: 100%; /* Full width of parent */
  padding: 20px 0; /* Vertical spacing */
}

/* ========================================================================== */
/* SECTION TITLE - "RECENT HIGHLIGHTS" HEADING */
/* ========================================================================== */
.recent-highlights__title {
  color: #ffffff; /* White text */
  font-size: 24px; /* Large, prominent heading */
  font-weight: 900; /* Heavy weight for emphasis */
  margin: 0 0 20px 0; /* Bottom margin only */
}

/* ========================================================================== */
/* ARTICLE LIST - VERTICAL STACK OF ARTICLES */
/* ========================================================================== */
.recent-highlights__list {
  list-style: none; /* Remove bullet points */
  display: flex; /* Flexbox layout */
  flex-direction: column; /* Stack vertically */
  gap: 12px; /* Space between articles */
}

/* ========================================================================== */
/* ARTICLE ITEM - INDIVIDUAL ARTICLE CARD */
/* ========================================================================== */
.recent-highlights__item {
  background: none; /* Transparent background */
  border: 2px solid #211d25; /* Dark border */
}

/* ========================================================================== */
/* ARTICLE LINK - CLICKABLE CARD WRAPPER */
/* ========================================================================== */
/* Makes entire card clickable */
.recent-highlights__link {
  display: flex; /* Horizontal layout */
  align-items: center; /* Vertically center all children */
  gap: 20px; /* Space between thumbnail, content, and meta */
  padding: 16px 20px; /* Internal card padding */
  text-decoration: none; /* Remove underline */
  color: inherit; /* Inherit text color */
  width: 100%; /* Full width to prevent overflow */
  box-sizing: border-box; /* Include padding in width calculation */
}

/* ========================================================================== */
/* THUMBNAIL - ARTICLE IMAGE */
/* ========================================================================== */
.recent-highlights__thumbnail {
  width: 80px; /* Fixed width */
  height: 80px; /* Fixed height (square) */
  object-fit: cover; /* Crop and center image */
  flex-shrink: 0; /* Don't shrink when space is limited */
  background-color: #211d25; /* Dark background for missing images */
}

/* ========================================================================== */
/* CONTENT AREA - CATEGORY AND TITLE */
/* ========================================================================== */
.recent-highlights__content {
  display: flex; /* Flexbox for vertical stacking */
  flex-direction: column; /* Stack category and title */
  gap: 8px; /* Space between elements */
  flex: 1; /* Grow to fill available space */
  min-width: 0; /* CRITICAL: Allows text truncation to work */
}

/* ========================================================================== */
/* CATEGORY BADGE - ARTICLE CATEGORY LABEL */
/* ========================================================================== */
.recent-highlights__category {
  display: inline-block; /* Inline but with block properties */
  background-color: #211d25; /* Dark background */
  border: none; /* No border */
  color: #ffffff; /* White text */
  padding: 8px 12px; /* Internal spacing */
  font-size: 10px; /* Small text */
  font-weight: 500; /* Medium weight */
  text-transform: uppercase; /* ALL CAPS */
  letter-spacing: 1px; /* Spaced out letters */
  align-self: flex-start; /* Don't stretch to full width */
}

/* ========================================================================== */
/* ARTICLE TITLE - MAIN HEADING */
/* ========================================================================== */
.recent-highlights__item-title {
  color: #ffffff; /* White text */
  font-size: 16px; /* Readable size */
  font-weight: 500; /* Medium weight */
  margin: 0; /* No margin */
  line-height: 1.4; /* Comfortable line spacing */
}

/* ========================================================================== */
/* METADATA SECTION - DATE AND READ BUTTON */
/* ========================================================================== */
.recent-highlights__meta {
  display: flex; /* Flexbox layout */
  flex-direction: row; /* Horizontal layout */
  align-items: center; /* Vertically center items */
  justify-content: space-between; /* Separate date and button */
  gap: 12px; /* Space between date and button */
  flex-shrink: 0; /* Don't shrink */
  min-width: 0; /* Allow shrinking if needed on small screens */
}

/* ========================================================================== */
/* PUBLICATION DATE - ARTICLE TIMESTAMP */
/* ========================================================================== */
.recent-highlights__date {
  color: rgba(255, 255, 255, 0.7); /* Semi-transparent white */
  font-size: 13px; /* Small text */
  font-weight: 400; /* Regular weight */
  white-space: nowrap; /* Prevent line breaks in date */
}

/* ========================================================================== */
/* READ BUTTON - CALL-TO-ACTION */
/* ========================================================================== */
.recent-highlights__read-btn {
  background-color: #211d25; /* Dark background */
  border: none; /* No border */
  color: #ffffff; /* White text */
  padding: 8px 20px; /* Internal spacing */
  font-size: 13px; /* Button text size */
  font-weight: 500; /* Medium weight */
  cursor: pointer; /* Pointer cursor on hover */
}

/* ========================================================================== */
/* EMPTY STATE - NO ARTICLES AVAILABLE */
/* ========================================================================== */
.recent-highlights__empty {
  padding: 40px 20px; /* Generous padding */
  text-align: center; /* Center text */
  border: 2px solid #211d25; /* Border for visual consistency */
}

/* Empty state message */
.recent-highlights__empty p {
  color: #ffffff; /* White text */
  font-size: 16px; /* Readable size */
  font-weight: 400; /* Regular weight */
  margin: 0; /* No margin */
}