/* ==========================================================================
   visa-listing.css — /en/visa-listing.html
   Design A "Editorial Trust"
   Visa hero, trust bar, category tabs, and visa card live in global.css.
   This file only owns the visa grid layout used on this page.
   ========================================================================== */

.visa-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 640px)  { .visa-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .visa-grid { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   Listing toolbar: result count + sort select.
   (Design-A omitted sort/pagination; the backend supports both, so they are
   added here styled with Design-A tokens — same look, no Bootstrap.)
   -------------------------------------------------------------------------- */
.visa-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
}
.visa-result-count {
  font-size: var(--text-sm);
  color: var(--gray-700);
  margin: 0;
}
.visa-sort {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.visa-sort-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--gray-700);
}
.visa-sort-label svg { width: 16px; height: 16px; color: var(--gray-400); }
/* .visa-sort-select styling now lives in the unified SORT / LISTING DROPDOWNS
   component in shared/global.css (single source of truth, Safari-safe). */

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.visa-pagination {
  display: flex;
  justify-content: center;
  margin-block-start: var(--sp-10);
}
.visa-pagination-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.visa-page-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-width: 40px;
  height: 40px;
  padding-inline: var(--sp-3);
  justify-content: center;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--gray-700);
  background: var(--bg-white);
  text-decoration: none;
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}
.visa-page-link svg { width: 16px; height: 16px; }
.visa-page-link:hover { background: var(--navy-light); border-color: var(--navy-border); color: var(--navy); }
.visa-page-link.is-current {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--on-navy);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Empty state (no visas match the filter)
   -------------------------------------------------------------------------- */
.visa-empty {
  text-align: center;
  padding-block: var(--sp-16);
}
.visa-empty-icon {
  width: 48px;
  height: 48px;
  color: var(--gray-400);
  margin-block-end: var(--sp-4);
}
.visa-empty-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--gray-900);
  margin-block-end: var(--sp-2);
}
.visa-empty-text { font-size: var(--text-sm); color: var(--gray-700); }
.visa-empty-text a { color: var(--primary); font-weight: var(--weight-medium); }