/**
 * ============================================================================
 * CATEGORY ARTICLES GRID - RESPONSIVE ARTICLE CARD LAYOUT
 * ============================================================================
 * This stylesheet defines the grid layout for displaying articles on category pages.
 * Articles are shown as cards in a responsive grid that adapts to screen size.
 * 
 * LAYOUT TECHNIQUE:
 * - CSS Grid with auto-fill for responsive columns
 * - Minimum card width of 300px, maximum of 1fr (equal distribution)
 * - Flexbox for card internal layout
 * - Text truncation with line-clamp for consistent heights
 * 
 * CARD STRUCTURE:
 * - Thumbnail image (200px height)
 * - Title (2-line clamp)
 * - Publication date
 * - Read button (pushed to bottom with margin-top: auto)
 * 
 * RESPONSIVE BEHAVIOR:
 * - Automatically adjusts number of columns based on available space
 * - Maintains minimum card width of 300px
 * ============================================================================
 */

/* ========================================================================== */
/* MAIN CONTAINER - GRID WRAPPER */
/* ========================================================================== */
/* Outer wrapper for the entire articles grid section */
.category-articles-grid {
  width: 100%; /* Full width of parent container */
  padding: 20px 0; /* Vertical spacing above and below grid */
}

/* ========================================================================== */
/* GRID CONTAINER - RESPONSIVE CSS GRID LAYOUT */
/* ========================================================================== */
/* Creates a responsive grid that automatically adjusts column count */
.category-articles-grid__container {
  display: grid; /* Enable CSS Grid layout */
  grid-template-columns: repeat(
    auto-fill,
    minmax(300px, 1fr)
  ); /* Responsive columns: min 300px, max equal width */
  gap: 12px; /* Space between grid items (cards) */
}

/* ========================================================================== */
/* ARTICLE CARD - INDIVIDUAL ARTICLE CONTAINER */
/* ========================================================================== */
/* Each article is displayed as a card with border */
.category-articles-grid__card {
  background: none; /* Transparent background (page background shows through) */
  border: 2px solid #211d25; /* Dark border around card */
  overflow: hidden; /* Clip content that exceeds card bounds */
  display: flex; /* Flexbox for vertical layout */
  flex-direction: column; /* Stack children vertically */
}

/* ========================================================================== */
/* CARD LINK - MAKES ENTIRE CARD CLICKABLE */
/* ========================================================================== */
/* Wraps all card content in a clickable link */
.category-articles-grid__link {
  text-decoration: none; /* Remove underline from link */
  color: inherit; /* Inherit text color from parent */
  display: flex; /* Flexbox for vertical layout */
  flex-direction: column; /* Stack children vertically */
  height: 100%; /* Fill entire card height */
}

/* ========================================================================== */
/* THUMBNAIL WRAPPER - IMAGE CONTAINER WITH FIXED HEIGHT */
/* ========================================================================== */
/* Contains the article thumbnail image with consistent dimensions */
.category-articles-grid__thumbnail-wrapper {
  width: 100%; /* Full width of card */
  height: 200px; /* Fixed height for all thumbnails */
  overflow: hidden; /* Crop images that exceed container */
  background-color: #211d25; /* Dark background for missing images */
}

/* ========================================================================== */
/* THUMBNAIL IMAGE - ARTICLE FEATURED IMAGE */
/* ========================================================================== */
/* Styles the actual image element */
.category-articles-grid__thumbnail {
  width: 100%; /* Full width of container */
  height: 100%; /* Full height of container */
  object-fit: cover; /* Crop and center image to fill container */
}

/* ========================================================================== */
/* CARD CONTENT - TEXT CONTENT AREA */
/* ========================================================================== */
/* Contains title, date, and read button */
.category-articles-grid__content {
  padding: 16px 20px; /* Internal spacing around content */
  display: flex; /* Flexbox for vertical layout */
  flex-direction: column; /* Stack children vertically */
  gap: 12px; /* Space between child elements */
  flex: 1; /* Grow to fill available space (pushes button to bottom) */
}

/* ========================================================================== */
/* ARTICLE TITLE - TRUNCATED HEADING */
/* ========================================================================== */
/* Displays article title with 2-line truncation for consistent card heights */
.category-articles-grid__title {
  color: #ffffff; /* White text color */
  font-size: 16px; /* Readable font size */
  font-weight: 500; /* Medium weight for emphasis */
  margin: 0; /* Remove default heading margin */
  line-height: 1.4; /* Comfortable line spacing */

  /* TEXT TRUNCATION - LIMIT TO 2 LINES */
  display: -webkit-box; /* Required for line-clamp */
  -webkit-line-clamp: 2; /* Limit to 2 lines (WebKit browsers) */
  line-clamp: 2; /* Limit to 2 lines (standard property) */
  -webkit-box-orient: vertical; /* Required for line-clamp */
  overflow: hidden; /* Hide text beyond 2 lines */
}

/* ========================================================================== */
/* PUBLICATION DATE - ARTICLE TIMESTAMP */
/* ========================================================================== */
/* Shows when the article was published */
.category-articles-grid__date {
  color: rgba(255, 255, 255, 0.7); /* Semi-transparent white (70% opacity) */
  font-size: 13px; /* Smaller font for metadata */
  font-weight: 400; /* Regular weight */
  display: block; /* Block-level element */
}

/* ========================================================================== */
/* READ BUTTON - CALL-TO-ACTION BUTTON */
/* ========================================================================== */
/* Button that encourages users to read the article */
.category-articles-grid__read-btn {
  background-color: #211d25; /* Dark background color */
  color: #ffffff; /* White text color */
  border: none; /* Remove default button border */
  padding: 8px 20px; /* Internal button spacing */
  font-size: 13px; /* Button text size */
  font-weight: 500; /* Medium weight for emphasis */
  cursor: pointer; /* Show pointer cursor on hover */
  text-align: center; /* Center button text */
  margin-top: auto; /* CRITICAL: Pushes button to bottom of card */
}

/* ========================================================================== */
/* EMPTY STATE - NO ARTICLES FOUND */
/* ========================================================================== */
/* Displayed when category has no articles */
.category-articles-grid__empty {
  width: 100%; /* Full width */
  padding: 60px 20px; /* Generous padding for empty state */
  text-align: center; /* Center text */
}

/* Empty state message text */
.category-articles-grid__empty-message {
  color: rgba(255, 255, 255, 0.7); /* Semi-transparent white */
  font-size: 16px; /* Readable font size */
  margin: 0; /* Remove default paragraph margin */
}