/* ===========================================
   Research Index — Results Page
   =========================================== */

.ri-search-block {
  /* This block sits inside <main>, which already supplies the 1200px
     container and its horizontal padding. Repeating both here indented
     the whole index one extra step relative to the header and the rest
     of the page — vertical rhythm only. */
  max-width: none;
  margin: 0 auto;
  padding: var(--space-md, 2rem) 0;
}

.ri-stats {
  font-family: var(--font-body, 'Archivo', sans-serif);
  font-size: 0.9rem;
  color: var(--grey-500, #999);
  margin-bottom: var(--space-md, 2rem);
}

/* --- Search panel --- */

.ri-search-panel {
  margin-bottom: var(--space-md, 2rem);
}

.ri-search-row {
  margin-bottom: var(--space-sm, 1rem);
}

.ri-search-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body, 'Archivo', sans-serif);
  font-size: 1rem;
  border: 1px solid var(--grey-400, #ccc);
  border-radius: 4px;
  background: var(--grey-100, #fafafa);
  color: var(--black, #1a1a1a);
  outline: none;
  transition: border-color var(--transition-fast, 0.2s ease);
  box-sizing: border-box;
}

.ri-search-input:focus {
  border-color: var(--grey-600, #666);
}



/* --- Filter row --- */

.ri-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.ri-filter-select {
  padding: 0.4rem 0.6rem;
  font-family: var(--font-body, 'Archivo', sans-serif);
  font-size: 0.85rem;
  border: 1px solid var(--grey-400, #ccc);
  border-radius: 3px;
  background: var(--grey-100, #fafafa);
  color: var(--black, #1a1a1a);
  cursor: pointer;
  min-width: 120px;
}


.ri-filter-count {
  font-family: var(--font-body, 'Archivo', sans-serif);
  font-size: 0.85rem;
  color: var(--grey-500, #999);
  margin-left: auto;
}

.ri-filter-clear {
  font-size: 0.85rem;
  color: var(--grey-500, #999);
  text-decoration: none;
  margin-left: 0.5rem;
}

.ri-filter-clear:hover {
  color: var(--black, #1a1a1a);
}


/* --- Results --- */

.ri-results-prompt {
  font-family: var(--font-body, 'Archivo', sans-serif);
  font-size: 0.9rem;
  color: var(--grey-500, #999);
  text-align: center;
  padding: var(--space-lg, 4rem) 0;
}

.ri-results-list {
  display: flex;
  flex-direction: column;
}

.ri-result-row {
  display: flex;
  align-items: flex-start;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--grey-300, #e8e8e8);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--transition-fast, 0.2s ease);
}


.ri-result-row:hover {
  background-color: var(--grey-100, #fafafa);
}


.ri-result-body {
  flex: 1;
  min-width: 0;
}

.ri-result-title {
  font-family: var(--font-display, 'EB Garamond', serif);
  font-size: 1.1rem;
  color: var(--black, #1a1a1a);
  margin-bottom: 0.2rem;
  /* The renderer emits this as an <a>, i.e. an inline box — it needs a
     block-level box for any overflow handling to apply at all, otherwise
     the full title width pushes the row past the viewport.
     Titles wrap over up to 3 lines rather than truncating: with the
     thumbnail taking half the row, one ellipsed line lost too much. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}


.ri-result-meta {
  font-family: var(--font-body, 'Archivo', sans-serif);
  font-size: 0.8rem;
  color: var(--grey-500, #999);
  margin-bottom: 0.15rem;
}

.ri-result-badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  background: var(--grey-300, #e8e8e8);
  border-radius: 2px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}


.ri-result-code {
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
}

.ri-result-domain {
  font-family: var(--font-body, 'Archivo', sans-serif);
  font-size: 0.75rem;
  /* --grey-400 is a border tone (1.6:1) and was illegible as text */
  color: var(--grey-500, #6e6e6e);
}

.ri-result-title {
  text-decoration: none;
  color: inherit;
}

.ri-result-title:hover {
  text-decoration: underline;
}

.ri-result-excerpt {
  font-family: var(--font-body, 'Archivo', sans-serif);
  font-size: 0.8rem;
  color: var(--grey-600, #666);
  line-height: 1.4;
  margin-top: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.ri-result-formats {
  font-family: var(--font-body, 'Archivo', sans-serif);
  font-size: 0.8rem;
  margin-top: 0.3rem;
}

.ri-fmt-link {
  color: var(--grey-600, #666);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
}

.ri-fmt-link:hover {
  color: var(--black, #1a1a1a);
  text-decoration: underline;
}



.ri-no-results {
  font-family: var(--font-body, 'Archivo', sans-serif);
  font-size: 0.9rem;
  color: var(--grey-500, #999);
  text-align: center;
  padding: var(--space-md, 2rem) 0;
}

/* --- Overflow containment ---
   Applies at every width, not just mobile: .ri-results-list is a grid on
   lens pages, and grid/flex items default to min-width:auto, so they refuse
   to shrink below their content's intrinsic width. One unbreakable string
   (absolute URL, asset code, long title) then pushes the whole row past the
   viewport and the page scrolls sideways. */

.ri-search-block,
.ri-results-list,
.ri-result-row,
.ri-result-body {
  min-width: 0;
  max-width: 100%;
}

.ri-result-meta,
.ri-result-excerpt,
.ri-result-code,
.ri-result-domain,
.ri-result-formats {
  overflow-wrap: anywhere;
}

/* --- Responsive --- */

@media (max-width: 768px) {
  .ri-filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .ri-filter-select {
    min-width: 100%;
  }

  .ri-filter-count {
    margin-left: 0;
    margin-top: 0.5rem;
  }
}

@media (max-width: 480px) {
  .ri-search-block {
    /* horizontal inset comes from <main> — vertical only here */
    padding: var(--space-sm, 1rem) 0;
  }

  .ri-result-title {
    font-size: 1rem;
  }
}