/* CSS Grid Result Cards */
  .result-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 15px;
      width: 100%;
      margin-bottom: 20px;
  }

  .result-card-field {
      background: var(--container-bg-color);
      color: var(--text-color);
      border: 1px solid rgba(0, 0, 0, 0.125);
      border-radius: 0.25rem;
      padding: 1rem;
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;

      /* Dynamic grid positioning via CSS custom properties */
      grid-column: var(--grid-column-start) / span var(--grid-column-span);
      grid-row: var(--grid-row-start) / span var(--grid-row-span);
  }

  /* Dark mode border adjustments */
  [data-theme="dark"] .result-card-field {
      border-color: rgba(255, 255, 255, 0.125);
  }

  /* Responsive breakpoints */
  @media (max-width: 768px) {
      .result-grid {
          grid-template-columns: repeat(6, 1fr);
      }
  }

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

      .result-card-field {
          grid-column: 1;
          grid-row: auto;
      }
  }

 .rc-scrollable-container {
    max-height: 150vh; /* 25% of viewport height */
    overflow-y: auto;
    padding-right: 0.5rem; /* space so text isn't hidden by scrollbar */
    scrollbar-width: none; /* hide by default in Firefox */
}

/* Detail pages: no max-height restriction */
.rc-scrollable-container.rc-detail-page {
    max-height: none;
    overflow-y: visible;
}

/* Show scrollbar only on hover */
.rc-scrollable-container:hover {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* WebKit browsers (Chrome, Edge, Safari) - hide by default */
.rc-scrollable-container::-webkit-scrollbar {
    width: 8px;
    background: transparent;
}

.rc-scrollable-container::-webkit-scrollbar-thumb {
    background-color: transparent; /* hidden until hover */
    border-radius: 4px;
}

/* On hover: show thumb */
.rc-scrollable-container:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
}

.rc-scrollable-container:hover::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.35);
}