.articles {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px 0;
}

/* Grid View Style */
.grid-view .article-item {
  width: calc(25% - 20px); /* Adjust for gaps */
}

/* List View Style */
.list-view .article-item {
  width: 100%;
}

/* Force list view on mobile and hide grid button */
@media (max-width: 1000px) {
  /* Force list view */
  .grid-view .article-item {
    width: 100%;
  }
  
  /* Hide both view toggle buttons on mobile */
  .view-toggle {
    display: none !important;
  }
}

/* Style for the tag and date line */
.article-item p {
  color: grey; /* Make the tag and date line grey */
  font-size: 14px; /* Adjust the size if needed */
  margin-bottom: 10px; /* Space below the tag/date line */
}

/* Updated style for the title */
.article-item h2 {
  color: #00274d; /* Darker shade of blue for the title */
  margin: 0; /* Remove default margins */
  font-size: 24px; /* Increase font size for larger text */
  font-weight: 400; /* Less bold, but still emphasized */
  line-height: 1.3; /* Adjust line height for readability */
}

/* Remove border and adjust padding for the article item */
.article-item {
  background: #fff;
  padding: 0;
  box-sizing: border-box;
  border: none; /* Remove the border */
}

.view-toggle {
  margin-bottom: 20px;
}

button {
  cursor: pointer;
}

/* Style for the divider */
.article-divider {
  display: none; /* Hidden by default */
  border: none;
  border-top: 1px solid #ddd; /* Thin grey line */
  margin: 10px 0; /* Space around the divider */
  width: 100%; /* Full width */
}

/* Show the divider for list view */
.list-view .article-divider {
  display: block !important; /* Force visibility in list view */
}
/* --------------------------------

DROPDOWN

-------------------------------- */
/* Style for the dropdowns (select elements) */
#search-filter-form select {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px; /* Rounded corners */
  width: 200px; /* Adjust width if needed */
  background-color: white;
  font-size: 16px;
  appearance: none; /* Hide default dropdown arrow */
  position: relative;
  cursor: pointer;
}

/* Position a wrapper around the select for custom dropdown arrow */
#search-filter-form div {
  position: relative;
  display: inline-block;
}

#search-filter-form div::after {
  content: '▼'; /* Downward pointing triangle */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  pointer-events: none;
  transition: transform 0.2s ease; /* For smooth animation */
}

/* When select is focused (open), change the triangle to point up */
#search-filter-form select:focus + div::after,
#search-filter-form select:active + div::after {
  content: '▲'; /* Upward pointing triangle */
}

/* Style for the buttons */
#search-filter-form button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px; /* Same rounded corners as select */
  cursor: pointer;
  font-size: 16px;
}

#search-filter-form button:hover {
  background-color: #0056b3;
}

/* Ensure consistency in form elements */
#search-filter-form div {
  margin-bottom: 15px;
}