/* =========================================================
   Isopedia Filter Cleanup v1.1
   Save as: isopedia/assets/mobile-filters.css

   Purpose:
   - Use clean dropdown filters on desktop AND mobile.
   - Hide the oversized filter button/chip rows on every screen size.
   - Compact the Project Stats hero area.
   - Shrink entry card images on mobile into thumbnails.
   ========================================================= */

/* ---------- Compact home hero / project stats ---------- */

.hero {
  padding-top: clamp(18px, 2.4vw, 30px) !important;
  padding-bottom: clamp(18px, 2.4vw, 30px) !important;
  gap: 18px !important;
  margin-bottom: 12px !important;
}

.hero-card {
  padding: 18px !important;
  border-radius: 24px !important;
}

.hero-card h2 {
  margin-bottom: 6px !important;
}

.hero-card p {
  margin-bottom: 10px !important;
  line-height: 1.35 !important;
}

.stat-row,
.stats-grid,
.stat-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 10px 0 0 !important;
}

.stat-row .stat,
.stat-card,
.stat {
  padding: 10px 12px !important;
  border-radius: 16px !important;
  min-height: 0 !important;
  height: auto !important;
}

.stat-row .stat strong,
.stat-number,
.stat-value,
.stat strong {
  display: block !important;
  margin: 0 0 3px !important;
  font-size: clamp(1.35rem, 1.9vw, 1.85rem) !important;
  line-height: 1 !important;
}

.stat-row .stat span,
.stat-label,
.stat-card span,
.stat span {
  display: block !important;
  font-size: 0.76rem !important;
  line-height: 1.15 !important;
}

/* Pull the search/filter area closer to the top section. */
.search-panel,
.search-card {
  margin-top: 8px !important;
}

.search-panel {
  padding-top: 10px !important;
}

/* ---------- Dropdown filters on ALL screen sizes ---------- */

.mobile-filter-panel {
  display: block !important;
  margin: 12px 0 0 !important;
  padding: 12px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14) !important;
  backdrop-filter: blur(10px);
}

.mobile-filter-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.mobile-filter-field {
  display: grid !important;
  gap: 7px !important;
}

.mobile-filter-field span {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
}

.mobile-filter-field select {
  width: 100% !important;
  min-height: 46px !important;
  padding: 10px 42px 10px 14px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(6, 59, 34, 0.18) !important;
  background:
    linear-gradient(45deg, transparent 50%, #0b4b2a 50%) calc(100% - 22px) 19px / 7px 7px no-repeat,
    linear-gradient(135deg, #ffffff, #edf8ef) !important;
  color: #07381f !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 4px 12px rgba(0, 0, 0, 0.10) !important;
}

.mobile-filter-field select:focus {
  outline: none !important;
  border-color: rgba(213, 169, 79, 0.82) !important;
  box-shadow: 0 0 0 4px rgba(213, 169, 79, 0.24) !important;
}

/* Hide the oversized pill/chip rows on desktop and mobile. */
#organismButtons,
#genusButtons {
  display: none !important;
}

/* Keep search input + Add Entry button tidy. */
.search-row {
  gap: 10px !important;
  align-items: center !important;
}

.search-row .button {
  white-space: nowrap !important;
}

/* ---------- Mobile-specific cleanup ---------- */

@media (max-width: 768px) {
  .hero {
    padding: 16px !important;
    gap: 14px !important;
    margin-bottom: 10px !important;
  }

  .hero-card {
    padding: 15px !important;
    border-radius: 20px !important;
  }

  .stat-row,
  .stats-grid,
  .stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .stat-row .stat,
  .stat-card,
  .stat {
    padding: 8px 7px !important;
    border-radius: 14px !important;
  }

  .stat-row .stat strong,
  .stat-number,
  .stat-value,
  .stat strong {
    font-size: 1.28rem !important;
  }

  .stat-row .stat span,
  .stat-label,
  .stat-card span,
  .stat span {
    font-size: 0.68rem !important;
  }

  .mobile-filter-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .mobile-filter-panel {
    margin-top: 10px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .search-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .search-row .button {
    width: 100% !important;
  }

  /* Turn entry cards into compact list cards with thumbnail images. */
  #resultGrid,
  #recentGrid {
    gap: 12px !important;
  }

  #resultGrid .species-card,
  #resultGrid .isopod-card,
  #resultGrid .entry-card,
  #resultGrid .result-card,
  #recentGrid .species-card,
  #recentGrid .isopod-card,
  #recentGrid .entry-card,
  #recentGrid .result-card {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    min-height: 92px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  #resultGrid .card-image,
  #resultGrid .entry-image,
  #resultGrid .isopod-image,
  #resultGrid .species-card img,
  #resultGrid .result-card img,
  #recentGrid .card-image,
  #recentGrid .entry-image,
  #recentGrid .isopod-image,
  #recentGrid .species-card img,
  #recentGrid .result-card img {
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  #resultGrid .card-body,
  #resultGrid .entry-card-body,
  #resultGrid .isopod-card-body,
  #recentGrid .card-body,
  #recentGrid .entry-card-body,
  #recentGrid .isopod-card-body {
    padding: 10px 12px !important;
    gap: 5px !important;
    align-content: center !important;
  }

  #resultGrid .card-body h3,
  #resultGrid .entry-card-body h3,
  #resultGrid .isopod-card-body h3,
  #recentGrid .card-body h3,
  #recentGrid .entry-card-body h3,
  #recentGrid .isopod-card-body h3 {
    font-size: 1rem !important;
    line-height: 1.15 !important;
  }

  #resultGrid .card-meta,
  #resultGrid .entry-meta,
  #resultGrid .isopod-meta,
  #recentGrid .card-meta,
  #recentGrid .entry-meta,
  #recentGrid .isopod-meta {
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
  }

  #resultGrid .card-footer,
  #recentGrid .card-footer {
    grid-column: 2 !important;
    padding: 0 12px 10px !important;
  }
}

@media (max-width: 430px) {
  #resultGrid .species-card,
  #resultGrid .isopod-card,
  #resultGrid .entry-card,
  #resultGrid .result-card,
  #recentGrid .species-card,
  #recentGrid .isopod-card,
  #recentGrid .entry-card,
  #recentGrid .result-card {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    min-height: 78px !important;
  }

  #resultGrid .card-image,
  #resultGrid .entry-image,
  #resultGrid .isopod-image,
  #resultGrid .species-card img,
  #resultGrid .result-card img,
  #recentGrid .card-image,
  #recentGrid .entry-image,
  #recentGrid .isopod-image,
  #recentGrid .species-card img,
  #recentGrid .result-card img {
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
  }
}

/* =========================================================
   Isopedia Cleanup v1.2
   - Cleaner background, no graph-paper grid
   - Real mobile thumbnail cards for current iso-card markup
   ========================================================= */

/* Clean up the graph-paper background on Isopedia pages. */
body {
  background:
    radial-gradient(circle at 18% 0%, rgba(213, 169, 79, 0.12), transparent 24rem),
    radial-gradient(circle at 88% 8%, rgba(42, 132, 82, 0.18), transparent 28rem),
    linear-gradient(180deg, #06190f 0%, #082416 48%, #0d2c1d 100%) !important;
}

body::before {
  display: none !important;
  content: none !important;
}

.site-header {
  background:
    linear-gradient(135deg, rgba(8, 30, 19, 0.98), rgba(9, 42, 25, 0.96)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
}

.main {
  padding-top: 18px !important;
}

/* Clean white cards over the darker background. */
.iso-card,
.species-card,
.isopod-card,
.entry-card,
.result-card,
.content-card,
.search-panel,
.search-card,
.hero,
.hero-card {
  border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Make the home sections feel less heavy. */
.search-panel {
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  padding: 14px !important;
}

.section-head {
  margin-top: 16px !important;
  margin-bottom: 10px !important;
}

.section-head h2,
#activeGenusLabel {
  color: rgba(227, 247, 232, 0.96) !important;
}

.section-head .muted,
#genusHelp {
  color: rgba(227, 247, 232, 0.72) !important;
}

/* Current app card markup uses .iso-card > .iso-card-link > .iso-thumb + .iso-card-body. */
.iso-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18) !important;
}

.iso-card-link {
  color: #12351f !important;
  display: block !important;
  text-decoration: none !important;
}

.iso-card-link:hover {
  text-decoration: none !important;
}

.iso-thumb {
  width: 100% !important;
  height: 210px !important;
  object-fit: cover !important;
  background: #dfece2 !important;
}

.iso-card-body {
  padding: 15px !important;
}

.iso-card-body h3 {
  color: #073d22 !important;
  margin: 8px 0 6px !important;
}

.iso-card-body p {
  color: #355746 !important;
  margin: 0 0 10px !important;
  line-height: 1.45 !important;
}

/* Mobile: true thumbnail list cards. */
@media (max-width: 768px) {
  .site-shell {
    width: min(100% - 22px, var(--shell)) !important;
  }

  body {
    background:
      radial-gradient(circle at top, rgba(34, 121, 72, 0.16), transparent 20rem),
      linear-gradient(180deg, #06180f 0%, #082014 100%) !important;
  }

  .main {
    padding-top: 10px !important;
  }

  .search-panel {
    padding: 12px !important;
    border-radius: 20px !important;
    margin-bottom: 12px !important;
  }

  .section-head {
    margin-top: 12px !important;
    margin-bottom: 8px !important;
  }

  .section-head h2,
  #activeGenusLabel {
    font-size: 1.35rem !important;
    line-height: 1.12 !important;
  }

  #genusHelp {
    display: block !important;
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
  }

  #resultGrid,
  #recentGrid,
  .grid#resultGrid,
  .grid#recentGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #resultGrid .iso-card,
  #recentGrid .iso-card {
    border-radius: 18px !important;
    min-height: 104px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.20) !important;
  }

  #resultGrid .iso-card-link,
  #recentGrid .iso-card-link {
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    min-height: 104px !important;
    align-items: stretch !important;
  }

  #resultGrid .iso-thumb,
  #recentGrid .iso-thumb {
    width: 104px !important;
    height: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  #resultGrid .iso-card-body,
  #recentGrid .iso-card-body {
    min-width: 0 !important;
    padding: 10px 12px !important;
    display: grid !important;
    gap: 5px !important;
    align-content: center !important;
  }

  #resultGrid .card-topline,
  #recentGrid .card-topline {
    gap: 5px !important;
    margin: 0 !important;
  }

  #resultGrid .badge,
  #resultGrid .type-pill,
  #resultGrid .genus-pill,
  #recentGrid .badge,
  #recentGrid .type-pill,
  #recentGrid .genus-pill {
    font-size: 0.62rem !important;
    padding: 4px 7px !important;
    line-height: 1 !important;
    max-width: 100% !important;
  }

  #resultGrid .genus-pill,
  #recentGrid .genus-pill {
    display: none !important;
  }

  #resultGrid .iso-card-body h3,
  #recentGrid .iso-card-body h3 {
    font-size: 1.02rem !important;
    line-height: 1.12 !important;
    margin: 0 !important;
    color: #073d22 !important;
  }

  #resultGrid .iso-card-body p,
  #recentGrid .iso-card-body p {
    color: #375746 !important;
    font-size: 0.83rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  #resultGrid .tag-row,
  #recentGrid .tag-row {
    display: none !important;
  }
}

@media (max-width: 430px) {
  #resultGrid .iso-card,
  #recentGrid .iso-card,
  #resultGrid .iso-card-link,
  #recentGrid .iso-card-link {
    min-height: 92px !important;
  }

  #resultGrid .iso-card-link,
  #recentGrid .iso-card-link {
    grid-template-columns: 92px minmax(0, 1fr) !important;
  }

  #resultGrid .iso-thumb,
  #recentGrid .iso-thumb {
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
  }

  #resultGrid .iso-card-body,
  #recentGrid .iso-card-body {
    padding: 9px 10px !important;
  }

  #resultGrid .iso-card-body h3,
  #recentGrid .iso-card-body h3 {
    font-size: 0.96rem !important;
  }

  #resultGrid .iso-card-body p,
  #recentGrid .iso-card-body p {
    font-size: 0.78rem !important;
  }
}