/* ==================================================
🔥 ITSSOSO — DISCOVERY GRID SYSTEM (FINAL HARDENED)
================================================== */

/* ==========================================
BASE DISCOVERY RESULTS CONTAINER
========================================== */

#itssoso-discovery-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  align-items: stretch;
  width: 100%;
}

/* ==========================================
🔥 ROOT FALLBACK (CRITICAL FIX)
========================================== */

/* If JS applies grid to root instead of results */
#itssoso-discovery.view-grid,
.view-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 20px !important;
}

/* Ensure cards behave properly if root becomes grid */
#itssoso-discovery.view-grid > * {
  width: 100%;
}

/* ==========================================
VIEW MODES
========================================== */

/* GRID VIEW */
#itssoso-discovery-results.view-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 20px !important;
}

/* FEED VIEW */
#itssoso-discovery-results.view-feed {
  display: flex !important;
  flex-direction: column;
  gap: 16px;
}

/* ==========================================
CARD BEHAVIOR
========================================== */

.itssoso-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Stretch cards evenly */
#itssoso-discovery-results > .itssoso-card {
  align-self: stretch;
}

/* ==========================================
IMAGE HANDLING (NO DISTORTION)
========================================== */

.card-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #f4f4f4;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================
RESPONSIVE GRID
========================================== */

@media (max-width: 1024px) {
  #itssoso-discovery-results,
  #itssoso-discovery.view-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (max-width: 768px) {
  #itssoso-discovery-results,
  #itssoso-discovery.view-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

@media (max-width: 480px) {
  #itssoso-discovery-results,
  #itssoso-discovery.view-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
DISCOVER LAYOUT (MAP + RESULTS)
========================================== */

.itssoso-discover-layout {
  display: grid !important;
  grid-template-columns: 360px 1fr !important;
  gap: 20px;
  align-items: start;
}

/* MAP COLUMN */
.itssoso-map {
  position: sticky;
  top: 20px;
  height: 420px;
  border-radius: 12px;
  overflow: hidden;
}

/* RESULTS COLUMN */
.itssoso-discover-results {
  width: 100%;
}

/* ==========================================
SAFETY OVERRIDES
========================================== */

/* Prevent theme conflicts */
#itssoso-discovery-results * {
  box-sizing: border-box;
}

/* Kill flex interference */
#itssoso-discovery-results {
  flex: unset !important;
}

/* ==========================================
DEBUG MODE (OPTIONAL)
========================================== */

/*
#itssoso-discovery-results {
  outline: 3px solid red;
}
*/

/* ==========================================
🔥 FORCE GRID ON ROOT (FINAL FIX)
========================================== */

#itssoso-discovery {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 20px !important;
}