/**
 * Unified Grid System CSS
 * 
 * Consistent grid layout for:
 * - Search results
 * - Resonates list
 * 
 * Mobile-first, 2 columns on mobile, responsive breakpoints
 * Both listings use identical column counts at every breakpoint for visual consistency.
 */

/* ===== UNIFIED GRID ===== */
.resonate-grid,
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 10px;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* Prevent grid items from overflowing their column */
.resonate-grid > *,
.card-grid > * {
  min-width: 0;
}

/* ===== LIST CONTENT AREAS ===== */
.search-results-list,
.resontes-list-content {
  overflow-x: hidden;
  height: auto;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0) + var(--vv-bottom-inset, 0px));
}

/* Consistent grid inside both containers — no per-context overrides */
.search-results-list .resonate-grid,
.search-results-list .card-grid,
.resontes-list-content .resonate-grid,
.resontes-list-content .card-grid {
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 10px;
}

/* ===== TABLET RESPONSIVE (3 columns) ===== */
@media (min-width: 600px) {
  .resonate-grid,
  .card-grid,
  .search-results-list .resonate-grid,
  .search-results-list .card-grid,
  .resontes-list-content .resonate-grid,
  .resontes-list-content .card-grid {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    gap: 12px;
  }

  .search-results-list,
  .resontes-list-content {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0));
  }
}

/* ===== WIDE TABLET / SMALL DESKTOP (3 columns) ===== */
@media (min-width: 768px) {
  .resonate-grid,
  .card-grid,
  .search-results-list .resonate-grid,
  .search-results-list .card-grid,
  .resontes-list-content .resonate-grid,
  .resontes-list-content .card-grid {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 14px;
  }

  .search-results-list {
    max-width: 1024px;
    margin: 0 auto;
    padding: 10px 16px 0;
  }

  .resontes-list-content {
    padding: 10px 12px 0;
  }
}

/* ===== DESKTOP (4 columns) ===== */
@media (min-width: 1024px) {
  .resonate-grid,
  .card-grid,
  .search-results-list .resonate-grid,
  .search-results-list .card-grid,
  .resontes-list-content .resonate-grid,
  .resontes-list-content .card-grid {
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 14px;
  }

  .search-results-list {
    max-width: 1200px;
    padding: 10px 24px 0;
  }
}

/* ===== WIDE DESKTOP (5 columns) ===== */
@media (min-width: 1280px) {
  .resonate-grid,
  .card-grid,
  .search-results-list .resonate-grid,
  .search-results-list .card-grid,
  .resontes-list-content .resonate-grid,
  .resontes-list-content .card-grid {
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    gap: 16px;
  }

  .search-results-list,
  .search-container {
    max-width: 1200px;
  }
}

/* ===== SMALL MOBILE TIGHTENING ===== */
@media (max-width: 420px) {
  .resonate-grid,
  .card-grid,
  .search-results-list .resonate-grid,
  .search-results-list .card-grid,
  .resontes-list-content .resonate-grid,
  .resontes-list-content .card-grid {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 8px;
  }

  .search-results-list,
  .resontes-list-content {
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0));
  }
}

/* ===== NO RESULTS STATE ===== */
.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
}

.no-results-icon {
  font-size: 40px;
  opacity: 0.5;
  margin-bottom: 8px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

.no-results-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 4px;
}

.no-results-hint {
  font-size: 12px;
  color: var(--muted);
}