/* Search Results (search-result-index.ejs) */
/* Uses your existing design tokens from main.css */

.sr-container { /* optional if you want a dedicated wrapper */
  max-width: var(--maxw-lg);
  margin: 1.25rem auto;
  padding: 0 var(--pad-x);
}

/* Grid: 2 cols by default; 1 col below 768px */
.sr-grid{
  list-style: none;
  margin: .75rem 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

@media (max-width: 768px){
  .sr-grid{
    grid-template-columns: 1fr;
  }
}

/* Thin card look */
.sr-card{
  background: var(--bs-surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* Make the anchor fill the card */
.sr-link{
  display: block;
  padding: .75rem .9rem;
  text-decoration: none;
  color: var(--bs-heading);
  line-height: 1.35;
}

/* Hover / focus states */
.sr-card:hover{
  transform: translateY(-1px);
  border-color: var(--bs-primary-400);
  box-shadow: var(--shadow);
}
.sr-link:focus-visible{
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  border-radius: calc(var(--radius) - 2px);
}

/* Subtle active tap */
.sr-card:active{
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Highlighting from your hi() function */
.sr-link mark{
  background: rgba(221, 255, 26, 0.7); /* sky-500-ish */
  color: inherit;
  padding: 0 .1em;
  border-radius: .2em;
}

/* Optional: small header/summary text above the grid */
.sr-summary{
  color: var(--bs-muted);
  font-size: .95rem;
  margin: .25rem 0 .75rem;
}

.result{
  text-align: center;
}