/**
 * ============================================================================
 * SHOW MORE ARTICLES - CATEGORY PAGE PAGINATION
 * ============================================================================
 * Similar to content-loader but for category-specific pagination.
 * ============================================================================
 */

/* ========================================================================== */
/* MAIN CONTAINER */
/* ========================================================================== */
.show-more-articles {
  width: 100%; /* Full width */
  padding: 30px 0; /* Vertical spacing */
  display: flex; /* Flexbox */
  flex-direction: column; /* Stack vertically */
  justify-content: center; /* Center content */
  align-items: center; /* Center horizontally */
  gap: 20px; /* Space between elements */
}

/* ARTICLES CONTAINER */
.show-more-articles__articles {
  width: 100%; /* Full width */
}

/* Dynamically loaded articles grid */
.show-more-articles__articles .category-articles-grid__container {
  display: grid; /* CSS Grid */
  grid-template-columns: repeat(
    auto-fill,
    minmax(300px, 1fr)
  ); /* Responsive columns */
  gap: 12px; /* Space between cards */
}

/* SHOW MORE BUTTON */
.show-more-articles__btn {
  display: flex; /* Flexbox for icon + text */
  align-items: center; /* Vertically center */
  gap: 10px; /* Space between icon and text */
  background-color: #211d25; /* Dark background */
  color: #ffffff; /* White text */
  border: none; /* No border */
  padding: 14px 32px; /* Button padding */
  font-size: 15px; /* Text size */
  font-weight: 500; /* Medium weight */
  cursor: pointer; /* Pointer cursor */
}

/* BUTTON DISABLED STATE */
.show-more-articles__btn:disabled {
  opacity: 0.6; /* Dimmed */
  cursor: not-allowed; /* Not-allowed cursor */
}

/* BUTTON LOADING STATE */
.show-more-articles__btn--loading {
  opacity: 0.8; /* Slightly dimmed */
}

/* BUTTON ICON */
.show-more-articles__icon {
  width: 20px; /* Icon width */
  height: 20px; /* Icon height */
  filter: brightness(0) invert(1); /* Convert to white */
}

/* END OF CONTENT MESSAGE */
.show-more-articles__message {
  text-align: center; /* Center text */
  color: rgba(255, 255, 255, 0.8); /* White text */
  font-size: 16px; /* Text size */
  font-weight: 400; /* Regular weight */
  line-height: 1.6; /* Line spacing */
  padding: 20px; /* Internal spacing */
  max-width: 600px; /* Limit width */
}