/**
 * VenueKonnex — Variant C card style for the HivePress listings archive.
 *
 * HivePress emits:
 *   .hp-grid
 *     .hp-grid__item.hp-col-sm-6.hp-col-xs-12        (2-up at desktop)
 *       .hp-listing.hp-listing--view-block            (the card)
 *         .hp-listing__image
 *         .hp-listing__content / __details / __title / __attributes
 *
 * We:
 *   1. Force 3-up at >=1080px, 2-up 720–1080, 1-up below.
 *   2. Restyle each `.hp-listing--view-block` into a row-hybrid card:
 *      photo left, body right, badges + price row pinned bottom.
 *
 * Scoped to body classes that mark the listings archive so other
 * surfaces (homepage slider, single venue, dashboard) keep their
 * existing styling.
 */

body.post-type-archive-hp_listing,
body.tax-hp_listing_category,
body.search-results {
  --vkc-border: rgba(11, 31, 58, 0.10);
  --vkc-navy:   #0b1f3a;
  --vkc-ink:    #1a2530;
  --vkc-mute:   #6c7a89;
  --vkc-mist:   #f5f9f6;
  --vkc-green:  #43824f;
  --vkc-green-soft: #d6f6e3;
  --vkc-blue-soft:  #eef4ff;
  --vkc-blue-ink:   #16407a;
  --vkc-amber-soft: #fff3d8;
  --vkc-amber-ink:  #7a5b16;
}

/* ----------------------------------------------------------------- */
/* 1. Force 3-up grid on the archive                                  */
/* ----------------------------------------------------------------- */
body.post-type-archive-hp_listing .hp-grid,
body.tax-hp_listing_category     .hp-grid,
body.search-results               .hp-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 22px !important;
  margin: 24px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.post-type-archive-hp_listing .hp-grid__item,
body.tax-hp_listing_category     .hp-grid__item,
body.search-results               .hp-grid__item {
  /* Override HivePress's `hp-col-sm-6` (50%) — desktop 3-up */
  flex: 0 0 calc((100% - 44px) / 3) !important;
  max-width: calc((100% - 44px) / 3) !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (max-width: 1080px) {
  body.post-type-archive-hp_listing .hp-grid__item,
  body.tax-hp_listing_category     .hp-grid__item,
  body.search-results               .hp-grid__item {
    flex: 0 0 calc((100% - 22px) / 2) !important;
    max-width: calc((100% - 22px) / 2) !important;
  }
}
@media (max-width: 720px) {
  body.post-type-archive-hp_listing .hp-grid__item,
  body.tax-hp_listing_category     .hp-grid__item,
  body.search-results               .hp-grid__item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ----------------------------------------------------------------- */
/* 2. The card — row-hybrid (photo left, body right)                 */
/* ----------------------------------------------------------------- */
.hp-listing.hp-listing--view-block {
  background: #fff !important;
  border: 1px solid var(--vkc-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  height: 100% !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.hp-listing.hp-listing--view-block:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(11, 31, 58, 0.10) !important;
}

/* Photo — left ~38%, square */
.hp-listing--view-block .hp-listing__image {
  flex: 0 0 38% !important;
  max-width: 38% !important;
  aspect-ratio: 1 / 1 !important;
  position: relative !important;
  overflow: hidden !important;
  background: #eef2ee !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.hp-listing--view-block .hp-listing__image img,
.hp-listing--view-block .hp-listing__image picture {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
}

/* Body — flex column, right */
.hp-listing--view-block .hp-listing__content,
.hp-listing--view-block .hp-listing__details {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 14px 16px !important;
  min-width: 0 !important;
  gap: 4px !important;
}
.hp-listing--view-block .hp-listing__content {
  padding: 14px 16px !important;
}

/* Title — Lexend, 2-line clamp */
.hp-listing--view-block .hp-listing__title,
.hp-listing--view-block .hp-listing__title a {
  font-family: 'Lexend', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--vkc-navy) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  text-decoration: none !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Attributes (location, capacity, category) — muted line */
.hp-listing--view-block .hp-listing__attributes,
.hp-listing--view-block .hp-listing__details--primary,
.hp-listing--view-block .hp-listing__details--secondary {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  color: var(--vkc-mute) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  background: none !important;
}
.hp-listing--view-block .hp-listing__attribute {
  font-size: 12px !important;
  color: var(--vkc-mute) !important;
  display: inline !important;
  background: none !important;
  padding: 0 !important;
}
.hp-listing--view-block .hp-listing__attribute + .hp-listing__attribute::before {
  content: " · ";
  color: var(--vkc-mute);
}

/* Hide stock HP price block — JS replaces it with our pretty version */
.hp-listing--view-block .hp-listing__attribute--price,
.hp-listing--view-block .hp-listing__price {
  display: none !important;
}

/* Hide the heart / favorite action that HP renders in its actions row
   — we render our own pinned to the photo via JS. */
.hp-listing--view-block .hp-listing__actions--secondary,
.hp-listing--view-block .hp-listing__actions--primary {
  display: none !important;
}

/* ----------------------------------------------------------------- */
/* 3. Our injected badge + price rows                                */
/* ----------------------------------------------------------------- */
.hp-listing--view-block .vk-card-badges {
  display: flex !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
  margin-top: auto !important;
  padding-top: 6px !important;
}
.hp-listing--view-block .vk-card-badge {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: var(--vkc-mist);
  color: var(--vkc-green);
  line-height: 1.1;
  white-space: nowrap;
}
.hp-listing--view-block .vk-card-badge--cap {
  background: var(--vkc-blue-soft);
  color: var(--vkc-blue-ink);
}
.hp-listing--view-block .vk-card-badge--cash {
  background: var(--vkc-green-soft);
  color: var(--vkc-green);
}
.hp-listing--view-block .vk-card-badge--cat {
  background: var(--vkc-amber-soft);
  color: var(--vkc-amber-ink);
}

.hp-listing--view-block .vk-card-price-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 8px !important;
  margin-top: 6px !important;
  border-top: 1px dashed var(--vkc-border) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  color: var(--vkc-ink) !important;
  gap: 8px;
  flex-wrap: wrap;
}
.hp-listing--view-block .vk-card-price-row strong {
  color: var(--vkc-navy);
  font-weight: 700;
  font-family: 'Lexend', system-ui, sans-serif;
}
.hp-listing--view-block .vk-card-price-row .vk-card-reviews {
  color: var(--vkc-mute);
  font-size: 12px;
}

/* Save (heart) button overlaid on the photo */
.hp-listing--view-block .vk-card-save {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.92) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  color: #555 !important;
  border: 0 !important;
  cursor: pointer !important;
  z-index: 2 !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.hp-listing--view-block .vk-card-save:hover {
  background: #fff !important;
  color: #e02e2e !important;
}

/* ----------------------------------------------------------------- */
/* 4. Mobile — stack photo on top of body                            */
/* ----------------------------------------------------------------- */
@media (max-width: 520px) {
  .hp-listing.hp-listing--view-block {
    flex-direction: column !important;
  }
  .hp-listing--view-block .hp-listing__image {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    aspect-ratio: 5 / 4 !important;
  }
}