/* ===== PROJECTS PAGE STYLES ===== */
/* Template-specific styles for the projects listing page */

/* ===== PAGE HEADER ===== */
.projects-header {
  margin-bottom: 2rem;
}

.projects-description {
  max-width: 40rem;
}

/* ===== SEARCH ===== */
.projects-search {
  margin-bottom: 2rem;
}

.search-input {
  display: block;
  width: 100%;
  max-width: 40rem;
  font-family: var(--font-heading);
  font-size: var(--h2-size);
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
}

.search-input::placeholder {
  color: var(--text);
  opacity: 0.4;
}

.search-input:focus {
  border-bottom-color: var(--text);
}

/* ===== SECTION LAYOUT ===== */
.section-heading {
  margin-bottom: 1rem;
}

.projects-section {
  margin-bottom: 3rem;
  min-width: 0; /* Allow flex/grid children to shrink below content size */
}

.projects-section:last-child {
  margin-bottom: 0;
}

.projects-section .chip {
  font-family: var(--font-heading);
}

.no-results {
  color: var(--text);
  opacity: 0.6;
  font-family: var(--font-heading);
  display: none;
}

.no-results.visible {
  display: block;
}

/* ===== PROJECT LIST ===== */
/* Row card styles are in components/row-card.css */

/* Filter visibility for projects */
.row-card.filter-hidden {
  display: none;
}

/* Hide list containers when all items are filtered out */
.stories-scroll.filter-empty,
.row-list.filter-empty {
  display: none;
}