/* =============================================================================
   SMJ Marketplace — Card Unified  v3.0
   LOADED LAST (after design-system, style, smj-marketplace-ui, smj-dashboard).

   THIS FILE IS THE ENFORCEMENT LAYER.
   smj-marketplace-ui.css defines the single card component (.smj-card).
   This file enforces it everywhere by:
     1. Killing every competing card rule from older CSS layers
     2. Setting the correct grid columns per section (per design spec)
     3. Wiring the Dashboard to use the same component + management strip
   ============================================================================= */


/* =============================================================================
   §1  NUCLEAR RESET — Kill every legacy card definition that survives
       from design-system.css, style.css, or theme CSS.
       These !important rules win the cascade unconditionally.
   ============================================================================= */

/* Card shell — enforce locked dimensions everywhere, no exceptions */
.smj-card {
  width:          100%          !important;
  height:         320px         !important;
  min-height:     320px         !important;
  max-height:     320px         !important;
  display:        flex          !important;
  flex-direction: column        !important;
  overflow:       hidden        !important;
  border-radius:  12px          !important;
  background:     #ffffff       !important;
  box-shadow:     0 4px 12px rgba(0,0,0,.06) !important;
  border:         1px solid #e5e9f0          !important;
  position:       relative      !important;
  cursor:         pointer       !important;
  box-sizing:     border-box    !important;
  /* Transition allowed — does not affect dimensions */
  transition:     transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

/* Hover — only transform/shadow, never height */
.smj-card:hover {
  transform:    translateY(-4px)                !important;
  box-shadow:   0 8px 20px rgba(0,0,0,.08)      !important;
  border-color: rgba(37,99,235,.18)             !important;
  height:       320px                           !important; /* prevent any hover height change */
}

/* Image zone — locked 150px, never aspect-ratio */
.smj-card__img,
.smj-card__img-link {
  width:          100%    !important;
  height:         170px   !important;
  min-height:     170px   !important;
  max-height:     170px   !important;
  flex-shrink:    0       !important;
  overflow:       hidden  !important;
  display:        block   !important;
  position:       relative !important;
  /* Kill aspect-ratio — it fights the fixed height */
  aspect-ratio:   unset   !important;
}
.smj-card__img img,
.smj-card__img-link img {
  width:      100%  !important;
  height:     100%  !important;
  object-fit: cover !important;
  display:    block !important;
}

/* Placeholder fills exactly 150px */
.smj-card__img-placeholder {
  width:       100%  !important;
  height:      170px !important;
  min-height:  170px !important;
  max-height:  170px !important;
  flex-shrink: 0     !important;
  aspect-ratio: unset !important;
}

/* Content section — fills the remaining 190px (340 - 150) */
.smj-card__body {
  flex:             1                  !important;
  overflow:         hidden             !important;
  display:          flex               !important;
  flex-direction:   column             !important;
  padding:          8px 10px 0         !important;
  min-height:       0                  !important;
}

/* Title — 2 lines, fixed height */
.smj-card__title {
  font-size:    14px              !important;
  font-weight:  600               !important;
  line-height:  1.3               !important;
  min-height:   34px              !important;
  max-height:   34px              !important;
  overflow:     hidden            !important;
  display:      -webkit-box       !important;
  -webkit-line-clamp: 2           !important;
  -webkit-box-orient: vertical    !important;
  margin:       0 0 3px           !important;
  flex-shrink:  0                 !important;
}

/* Price — fixed slot */
.smj-price,
.smj-card__price {
  font-size:   16px    !important;
  font-weight: 700     !important;
  color:       #16a34a !important;
  height:      20px    !important;
  min-height:  20px    !important;
  max-height:  20px    !important;
  overflow:    hidden  !important;
  white-space: nowrap  !important;
  margin:      0 0 2px !important;
  flex-shrink: 0       !important;
  line-height: 1.35    !important;
}

/* Specs row — one chip row, locked */
.smj-card__specs {
  height:      20px   !important;
  min-height:  20px   !important;
  max-height:  20px   !important;
  overflow:    hidden !important;
  flex-shrink: 0      !important;
  margin-bottom: 3px  !important;
}

/* Footer — fixed bottom strip, space-between on body positions it at bottom */
.smj-card__footer {
  flex-shrink: 0           !important;
  margin-top:  0           !important;
  display:     flex        !important;
  gap:         6px         !important;
  padding:     6px 10px 8px !important;
  min-height:  unset       !important;
}

/* Meta-top row — fixed single line */
.smj-card__meta-top {
  height:      16px   !important;
  min-height:  16px   !important;
  max-height:  16px   !important;
  overflow:    hidden !important;
  flex-shrink: 0      !important;
  margin-bottom: 3px  !important;
}

/* Location row */
.smj-card__location {
  overflow:    hidden !important;
  white-space: nowrap !important;
  flex-shrink: 0      !important;
  margin-top:  auto   !important;
  font-size:   11px   !important;
}

/* Fav button — kill design-system.css circle/34px override */
.smj-fav-btn {
  width:        auto              !important;
  height:       auto              !important;
  border-radius: 0                !important;
  background:   transparent       !important;
  background-color: transparent   !important;
  border:       none              !important;
  box-shadow:   none              !important;
  font-size:    inherit           !important;
  color:        #ffffff           !important;
  filter:       drop-shadow(0 1px 4px rgba(0,0,0,.70)) !important;
}


/* =============================================================================
   §2  GRID SYSTEMS — Per-section column counts (design spec)

   Homepage / All Listings : 3 col desktop  →  2 col tablet  →  2 col mobile
   Similar Listings         : 4 col desktop  →  2 col ≤768px
   Favorite Listings        : 4 col desktop  →  2 col ≤768px
   Dashboard My Listings    : 3 col desktop  →  2 col ≤768px
   ============================================================================= */

/* Base homepage/all-listings grid */
.smj-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   16px;
  align-items:           start; /* card height is fixed — no stretch needed */
}

/* Similar Listings — up to 4 col, auto-fill prevents stretch when < 4 items */
.smj-similar-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:                   16px;
  align-items:           start;
}
@media (min-width: 1024px) {
  .smj-similar-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* Favorite Listings — up to 4 col, auto-fill so cards never stretch when < 4 items */
.smj-favorites-grid,
.smj-favorite-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:                   16px;
  align-items:           start;
}
/* Cap at 4 columns on wide screens */
@media (min-width: 1024px) {
  .smj-favorites-grid,
  .smj-favorite-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* Featured Listings — 3 col (matches homepage) */
.smj-featured-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   16px;
  align-items:           start;
}

/* Search Results — 4 col desktop, responsive per OLX spec */
.smj-search-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   20px;
  align-items:           start;
}

/* Dashboard My Listings — 3 col */
.smj-db__card-grid,
.smj-dashboard-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   16px;
  align-items:           start;
}

/* Width guards — all grid children must not blow out their track */
.smj-grid             > *,
.smj-similar-grid     > *,
.smj-favorites-grid   > *,
.smj-favorite-grid    > *,
.smj-featured-grid    > *,
.smj-search-grid      > *,
.smj-db__card-grid    > *,
.smj-dashboard-grid   > * {
  min-width: 0;
  width:     100%;
}


/* =============================================================================
   §3  SECTION TITLES
   ============================================================================= */

.smj-section-title,
.smj-similar-title,
.tmp-featured-title {
  font-size:      18px;
  font-weight:    700;
  color:          #111827;
  margin:         0 0 16px;
  display:        flex;
  align-items:    center;
  gap:            10px;
  letter-spacing: -.01em;
  font-family:    var(--mk-font, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.smj-section-title::after,
.smj-similar-title::after,
.tmp-featured-title::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: linear-gradient(to right, #e5e9f0, transparent);
}


/* =============================================================================
   §4  SECTION WRAPPERS
   ============================================================================= */

.smj-similar-section  { margin-top: 32px; }
.smj-favorites-wrap   { padding: 0; }


/* =============================================================================
   §5  DASHBOARD — Card wrapper + management strip
   ============================================================================= */

/* Wrapper stacks card + strip, provides overlay anchor */
.smj-db__card-wrap {
  display:        flex;
  flex-direction: column;
  position:       relative;
  min-width:      0;
}

/* Card inside dashboard wrapper: remove bottom radius → connects to strip */
.smj-db__card-wrap > .smj-card {
  border-bottom-left-radius:  0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom:              none !important;
  /* Override the global height lock — wrapper controls the stacking */
  height:         320px !important;
}

/* Status badge — top-left overlay on card image */
.smj-db__card-status {
  position:        absolute;
  top:             8px;
  left:            8px;
  z-index:         10;
  font-size:       10px;
  font-weight:     800;
  text-transform:  uppercase;
  letter-spacing:  .05em;
  padding:         2px 8px;
  border-radius:   999px;
  line-height:     1.5;
  pointer-events:  none;
  white-space:     nowrap;
  font-family:     var(--mk-font, system-ui, sans-serif);
}
.smj-db__card-status--publish { background: #dcfce7; color: #15803d; }
.smj-db__card-status--pending { background: #fef9c3; color: #a16207; }
.smj-db__card-status--draft   { background: #f1f5f9; color: #475569; }
.smj-db__card-status--sold    { background: #fee2e2; color: #b91c1c; }

/* Views counter — top-right, behind the fav heart */
.smj-db__card-views {
  position:              absolute;
  top:                   8px;
  right:                 36px;
  z-index:               10;
  font-size:             10px;
  font-weight:           700;
  color:                 #fff;
  background:            rgba(0,0,0,.45);
  padding:               2px 6px;
  border-radius:         999px;
  pointer-events:        none;
  white-space:           nowrap;
  font-family:           var(--mk-font, system-ui, sans-serif);
  backdrop-filter:       blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Management strip — attaches directly below the card */
.smj-db__mgmt-strip {
  background:     #ffffff;
  border:         1px solid #e2e8f0;
  border-top:     none;
  border-radius:  0 0 12px 12px;
  padding:        8px 10px 10px;
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.smj-db__mgmt-expiry {
  font-size:   11px;
  font-weight: 600;
  color:       #d97706;
  font-family: var(--mk-font, system-ui, sans-serif);
}

.smj-db__mgmt-actions {
  display:   flex;
  flex-wrap: wrap;
  gap:       5px;
}

.smj-db__mgmt-actions .db-btn {
  font-size:       11px;
  padding:         4px 10px;
  border-radius:   8px;
  font-weight:     700;
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
  gap:             3px;
  white-space:     nowrap;
  cursor:          pointer;
  border:          1.5px solid transparent;
  transition:      background .15s, color .15s, border-color .15s;
  font-family:     var(--mk-font, system-ui, sans-serif);
}


/* =============================================================================
   §6  RESPONSIVE BREAKPOINTS
   Cards stay 320px tall at ALL breakpoints — only columns change.
   ============================================================================= */

/* Tablet ≤1024px: search grid → 3 columns */
@media (max-width: 1024px) {
  .smj-search-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

/* Tablet ≤768px: all grids → 2 columns (per design spec) */
@media (max-width: 768px) {
  .smj-grid,
  .smj-similar-grid,
  .smj-favorites-grid,
  .smj-favorite-grid,
  .smj-featured-grid,
  .smj-search-grid,
  .smj-db__card-grid,
  .smj-dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* Mobile ≤480px: most grids → 1 col; search keeps 2 col per OLX spec */
@media (max-width: 480px) {
  .smj-grid,
  .smj-similar-grid,
  .smj-favorites-grid,
  .smj-favorite-grid,
  .smj-featured-grid,
  .smj-db__card-grid,
  .smj-dashboard-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  /* Search results: 2 col on mobile (OLX standard) */
  .smj-search-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}


/* =============================================================================
   §7  LEGACY SUPPRESSION
   Hides old HTML structures on cached pages.
   ============================================================================= */

.smj-sc               { display: none !important; }
.smj-db__listing-card { display: none !important; }
.smj-db__listings     { display: none !important; }