/* ===========================================
   Epistemic Lens — Visual mood per lens
   Extends research-index.css for lens pages
   =========================================== */

/* --- Shared lens layout --- */

.ri-lens .ri-results-list {
  display: grid;
  /* 3 across on a 1200px container, 2 mid-width, 1 on phones.
     min() guards the track floor: a bare minmax(320px, 1fr) would hold
     320px even in a 288px viewport and reintroduce sideways scroll. */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 1.5rem 2rem;
}

.ri-lens .ri-result-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
}

/* Thumbnails */

.ri-result-thumb {
  /* 50/50 split with the text column. Height follows the 2:3 portrait
     ratio the covers are cropped to, so the image scales with the row
     instead of sitting at a fixed 78px. */
  flex: 0 0 50%;
  width: 50%;
  height: auto;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 3px;
  background: var(--grey-200, #eee);
}


.ri-result-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- OBSERVATIONS — field notebook feel --- */

.ri-lens-observations {
  --lens-accent: #5a7a3a;
  --lens-accent-light: #e8f0e0;
  --lens-accent-dark: #3d5a28;
}

.ri-lens-observations .ri-search-input {
  border-left: 3px solid var(--lens-accent);
}

.ri-lens-observations .ri-result-badge {
  background: var(--lens-accent-light);
  color: var(--lens-accent-dark);
}


/* --- MEASUREMENTS — clinical precision --- */

.ri-lens-measurements {
  --lens-accent: #3a6a8a;
  --lens-accent-light: #e0eef5;
  --lens-accent-dark: #1a4a6a;
}

.ri-lens-measurements .ri-search-input {
  border-left: 3px solid var(--lens-accent);
}

.ri-lens-measurements .ri-result-badge {
  background: var(--lens-accent-light);
  color: var(--lens-accent-dark);
}

.ri-lens-measurements .ri-result-code {
  font-weight: 600;
}


/* --- PRACTICE — warm studio feel --- */

.ri-lens-practice {
  --lens-accent: #8a5a3a;
  --lens-accent-light: #f5e8e0;
  --lens-accent-dark: #6a3a1a;
}

.ri-lens-practice .ri-search-input {
  border-left: 3px solid var(--lens-accent);
}

.ri-lens-practice .ri-result-badge {
  background: var(--lens-accent-light);
  color: var(--lens-accent-dark);
}

.ri-lens-practice .ri-result-title {
  font-style: italic;
}


/* --- THEORY — typographic/academic --- */

.ri-lens-theory {
  --lens-accent: #4a4a6a;
  --lens-accent-light: #e8e8f0;
  --lens-accent-dark: #2a2a4a;
}

.ri-lens-theory .ri-search-input {
  border-left: 3px solid var(--lens-accent);
}

.ri-lens-theory .ri-result-badge {
  background: var(--lens-accent-light);
  color: var(--lens-accent-dark);
  letter-spacing: 0.05em;
}

.ri-lens-theory .ri-result-title {
  font-weight: 500;
}


/* --- Responsive --- */

/* The thumbnail is proportional (50%) at every width, so it needs no
   fixed-pixel override here — one used to force it back to 62px. */