/* ============================================================
   directory-grid.css — Worldwide Exporter
   SHARED stylesheet for states.php and countries.php — identical
   UI (search + filterable image-card grid), one file instead of
   two near-duplicate <style> blocks.
   Requires: variables.css, base.css (loaded before this)
   ============================================================ */

.dg-page-container { max-width: 1400px; margin: 0 auto; padding: 40px 20px 60px; }

.dg-page-header { text-align: center; margin-bottom: 36px; }
.dg-page-header h1 { font-size: 2.1rem; font-weight: 800; color: var(--text-heading); letter-spacing: -0.02em; margin-bottom: 8px; }
.dg-page-header p { font-size: 1rem; color: var(--text-muted); }

.dg-search-box { max-width: 560px; margin: 0 auto 36px; position: relative; }
.dg-search-box input {
  width: 100%; padding: 14px 46px 14px 18px; font-size: .95rem; font-family: var(--font);
  border: 1.5px solid var(--border); border-radius: var(--radius-md); box-sizing: border-box;
  outline: none; background: var(--bg-white); color: var(--text-heading);
  transition: var(--transition-fast);
}
.dg-search-box input:focus { border-color: var(--primary); box-shadow: var(--input-shadow-focus); }
.dg-search-box i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--text-subtle); }

.dg-items-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px; margin-bottom: 40px; min-height: 200px;
}
.dg-item-card {
  background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; cursor: pointer; transition: var(--transition-base);
  text-decoration: none; color: inherit; display: block;
}
.dg-item-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.dg-item-card-image { width: 100%; height: 130px; object-fit: cover; background-color: var(--bg-light); display: block; }
.dg-item-card-content { padding: 14px; text-align: center; }
.dg-item-name { font-size: 1rem; font-weight: 700; color: var(--text-heading); }

.dg-no-results { text-align: center; padding: 56px 20px; color: var(--text-muted); grid-column: 1 / -1; }
.dg-no-results i { font-size: 3rem; color: var(--text-subtle); margin-bottom: 16px; display: block; }
.dg-no-results h3 { font-size: 1.1rem; color: var(--text-heading); margin-bottom: 6px; font-weight: 700; }

@media (max-width: 640px) {
  .dg-page-header h1 { font-size: 1.6rem; }
  .dg-items-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .dg-item-card-image { height: 100px; }
}