/* =========================================================
   cards.css — Shared listing card styles (Everjoy)
   Baseline taken from Vendors page cards; generalized so any
   .cards-grid gains the same look + heart/save behavior.
   Safe: no page scoping, no !important, tokens have fallbacks.
========================================================= */

:root{
  --ej-line:#e5e7eb;
  --ej-sub:#475569;
  --ej-card:#ffffff;
  --ej-brand:#025fbc;
  --ej-brand2:#06a2dd;
  --ej-ink:#0f172a;
  --ej-shadow:0 8px 22px rgba(15,23,42,.08);
  --ej-shadow-soft:0 4px 12px rgba(15,23,42,.06);
}

/* Grid */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:24px;
}

/* Card container */
.cards-grid > *{
  position:relative;
  background:var(--ej-card);
  border:1px solid var(--ej-line);
  border-radius:16px;
  box-shadow:var(--ej-shadow);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
  padding:0;
}
.cards-grid > *:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(15,23,42,.12);
}

/* Media (first child acts as media block) */
.cards-grid > * > :first-child{
  position:relative;
  aspect-ratio:16/9;
  background:#f2f5f9;
  overflow:hidden;
  display:block;
}
.cards-grid > * > :first-child img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .35s ease;
}
.cards-grid > *:hover > :first-child img{ transform: scale(1.03); }

/* Deal badge (optional) */
.cards-grid .deal-badge,
.cards-grid .card-badge{
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:999px; color:#fff;
  font:600 .75rem/1 Poppins,system-ui;
  background:linear-gradient(90deg,var(--ej-brand),var(--ej-brand2));
  box-shadow:0 3px 10px rgba(2,95,188,.25);
}

/* Heart / Save button (supports multiple class names) */
.cards-grid :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn){
  position:absolute; top:12px; right:12px; z-index:50;
  width:36px; height:36px; border:none; border-radius:999px;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(6px) saturate(1.1);
  -webkit-backdrop-filter:blur(6px) saturate(1.1);
  color:#fff; box-shadow:0 4px 12px rgba(15,23,42,.12);
  pointer-events:auto;
}
.cards-grid :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn):hover{
  background:rgba(15,23,42,.7);
}
.cards-grid :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn)[data-saved="1"],
.cards-grid :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn)[aria-pressed="true"],
.cards-grid :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn).is-saved{
  background:#fff;
  color:#e11d48; /* red */
  box-shadow:0 2px 10px rgba(15,23,42,.12), 0 0 0 1px rgba(15,23,42,.08) inset;
}

.cards-grid :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn) svg{
  width:18px; height:18px; display:block; fill:currentColor !important; stroke:none !important;
}
@keyframes ej-heart-pop{ 0%{transform:scale(1)} 50%{transform:scale(1.12)} 100%{transform:scale(1)} }
.cards-grid :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn).heart-pop{
  animation:ej-heart-pop .18s ease;
}

/* Body / typography */
.cards-grid > * :is(.card-body,.body,.content,.info,.details){ padding:16px; }

.cards-grid > * :is(h3,.title){
  margin:0 0 6px;
  font-size:1.06rem; font-weight:700; letter-spacing:-.01em; color:var(--ej-ink);
}
.cards-grid > * :is(.category,.card-cat,.card-category,.meta a){
  color:var(--ej-brand); font-weight:600; font-size:.9rem; text-decoration:none; white-space:nowrap;
}

/* Rating + meta row */
.cards-grid > * :is(.rating-row,.rating,.meta){
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  color:#334155; font-weight:500; font-size:.92rem; margin-top:4px;
}
.cards-grid > * :is(.rating-row,.rating,.meta) :is(.star,svg){ color:#F59E0B; }

/* Price row */
.cards-grid > * :is(.price-row,.meta-price,.card-price,.price,.pricing){
  display:flex; align-items:baseline; gap:2px;
  color:#6b7280; font-size:.9rem; margin-top:8px;
}
.cards-grid > * :is(.price-row,.meta-price,.card-price,.price,.pricing) strong{
  color:var(--ej-ink); font-weight:650; font-size:.95rem;
}

/* Accessible focus style for the clickable card link */
.cards-grid a[data-card-link]{ outline: none; }
.cards-grid a[data-card-link]:focus-visible{
  box-shadow: 0 0 0 3px rgba(2,95,188,.30);
  border-radius: 14px;
}

/* --- Card heart default + saved states (compact + accessible) --- */
.cards-grid :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn,[data-save-btn]){
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border: 0; border-radius: 999px;
  display: inline-grid; place-items: center;
  background: rgba(0,0,0,.55); color: #fff; cursor: pointer;
}
.cards-grid :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn,[data-save-btn])[data-saved="1"],
.cards-grid :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn,[data-save-btn])[aria-pressed="true"],
.cards-grid :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn,[data-save-btn]).is-saved{
  background:#fff; color:#e11d48; /* red */
}

.cards-grid :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn,[data-save-btn]):focus-visible{
  outline: none; box-shadow: 0 0 0 3px rgba(2,95,188,.30);
}

/* ============================================================
   Shared card UI (all collections): hearts, tip, mobile scroller
============================================================ */

/* Results tip (if a page doesn’t already style it) */
.results-tip{
  margin: 6px 0 10px;
  font: 500 13px/1.3 Poppins, system-ui;
  color: #64748b;
}

/* Heart button base + states (works across our varied class names) */
.cards-grid :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color:#fff;
  transition: transform .08s ease, background-color .12s ease, color .12s ease;
  will-change: transform;
}
.cards-grid :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn):hover{ transform: scale(1.03); }
.cards-grid :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn)[data-saved="1"],
.cards-grid :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn)[aria-pressed="true"],
.cards-grid :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn).is-saved{
  background:#fff; color:#e11d48; /* red */
}

/* Make sure hearts are visible for authed users (some themes hide them) */
html.auth-user .cards-grid :is(.heart-btn,.favorite-btn,.card-like,.card-heart,.save-btn){
  visibility: visible !important;
}

/* Horizontal, swipeable cards on mobile/tablet (results pages) */
@media (max-width: 960px){
  .results-section .cards-grid{
    display:flex !important;
    gap:12px !important;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scroll-padding-left:16px;
    scrollbar-width:none;
  }
  .results-section .cards-grid::-webkit-scrollbar{ display:none; }

  /* reasonable card width on phones/tablets */
  #gridResults > *{
    flex:0 0 clamp(240px, 66vw, 300px);
    max-width:clamp(240px, 66vw, 300px);
    scroll-snap-align:start;
  }

  .results-tip{padding-left: 12px;}
}

/* ===== Card v2 polish (layout matches reference) ===================== */
.cards-grid .card{
  border-radius: 16px;
  overflow: hidden;
}

.cards-grid .card .card-media{ position: relative; }
.cards-grid .card .card-link{ border-radius: 0; overflow:hidden; }
.cards-grid .card .card-media img{
  display:block; width:100%; height:auto; object-fit:cover; aspect-ratio: var(--card-media-ratio, 16 / 9);
}

/* Move/save button to bottom-right of the image */
.cards-grid .card .heart-btn{
  position:absolute !important;
  top: auto !important;
  right: 12px !important;
  bottom: 12px !important;
  width: 40px; height: 40px;
  display:grid; place-items:center;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background:#fff;            /* no !important */
  color:#0f172a;              /* no !important */
  box-shadow:0 8px 20px rgba(15,23,42,.18);
  backdrop-filter: none;
}

/* Saved state — match/exceed base specificity so it wins */
.cards-grid .card .heart-btn[aria-pressed="true"],
.cards-grid .card .heart-btn[data-saved="1"],
.cards-grid .card .heart-btn.is-saved{
  background:#fff;
  color:#e11d48;        /* red when saved */
  border-color:#fbd5dc; /* subtle pink border (optional) */
}
.card-body{gap: 0px;}

/* Body (four-row layout) */
.cards-grid .card .card-body{ padding: 18px 16px 16px; }
.cards-grid .card .card-cat{
  font: 600 11px/1 Poppins, system-ui;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:#94a3b8;               /* faded */
  margin: 2px 0 8px;
}
.cards-grid .card .card-title{
  margin: 0 0 6px 0;
  font: 700 1.05rem/1.25 Poppins, system-ui;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* cut off long titles with … */
}
.cards-grid .card .card-title a{ color: inherit; text-decoration: none; }
.cards-grid .card .card-sub{
  font: 500 .86rem/1.3 Poppins, system-ui;
  color:#64748b;               /* province, small & faded */
}

/* Footer: price left, rating right */
.cards-grid .card .card-footer{
  margin-top: 10px;
  display:flex; align-items:center; justify-content:space-between;
}
.cards-grid .card .price{ color:#0f172a; font-weight:700; }
.cards-grid .card .price .from{ opacity:.75; font-weight:600; margin-right:4px; }
.cards-grid .card .price .unit{ opacity:.7; font-weight:600; margin-left:2px; }

/* Rating (number + stars) */
.cards-grid .card .rating{ display:flex; align-items:center; gap:6px; }
.cards-grid .card .rating .num{ font-weight:600; color:#0f172a; }
.cards-grid .card .rating .stars{ display:inline-flex; gap:2px; }
.cards-grid .card .rating .star{ color:#cbd5e1; font-size: .95rem; line-height:1; }
.cards-grid .card .rating .star.on{ color:#F59E0B; }

/* ===== Mobile rating compression: numeric + 1 star only ===== */
@media (max-width: 640px){
  /* Keep footer items from colliding */
  .cards-grid .card .card-footer{ gap:8px; }
  .cards-grid .card .card-footer > *{ min-width:0; }

  /* Show 1 star only (covers .star elements or inline SVG/icons) */
  .cards-grid .card .rating{ display:inline-flex; align-items:center; gap:4px; }
  .cards-grid .card .rating .stars > *:nth-child(n+2){ display:none; } /* hide extra icons */
  .cards-grid .card .rating .star{ font-size:.9rem; line-height:1; }
  .cards-grid .card .rating .num{ font-size:.95rem; line-height:1; }
}

/* Ultra-small phones: tighten a touch more */
@media (max-width: 400px){
  .cards-grid .card .rating .num{ font-size:.9rem; }
  .cards-grid .card .rating .star{ font-size:.85rem; }
}

/* Mobile tighten: shorter media + tighter paddings */
@media (max-width: 480px){
  .cards-grid .card .card-body{ padding: 12px 12px 14px; }
  .cards-grid .card .card-title{ font-size:.96rem; }
  .cards-grid .card .card-sub{ font-size:.80rem; }
  .cards-grid .card .price{ font-size:.93rem; }
  .cards-grid .card .rating .num{ font-size:.90rem; }
  .cards-grid .card .rating .star{ font-size:.82rem; }
}

/* Hard guarantee there’s no visual gap between media and body */
.card, .card-media, .card-media img, .card-body{
  background:#fff;
}

/* ===== ≤760px: prevent price/rating clash + keep title comfy ===== */
@media (max-width: 760px){
  /* Footer spacing + allow clean wrap */
  .cards-grid .card .card-footer{ gap:8px; }
  .cards-grid .card .card-footer > *{ min-width:0; }

  /* Show numeric + ONE star only (handles .stars wrapper OR direct icons) */
  .cards-grid .card .rating{ display:inline-flex; align-items:center; gap:4px; }
  .cards-grid .card .rating .stars > *:nth-child(n+2){ display:none; }
  .cards-grid .card .rating > .star:nth-of-type(n+2),
  .cards-grid .card .rating > svg:nth-of-type(n+2){ display:none; }

  /* Slightly smaller type */
  .cards-grid .card .rating .num{ font-size:.95rem; line-height:1; font-weight:600; }
  .cards-grid .card .rating .star{ font-size:.9rem; line-height:1; }
  .cards-grid .card .price{ font-size:.95rem; }

  /* Title: allow soft hyphenation + tiny side padding */
  .cards-grid .card .card-title{ word-break: break-word; hyphens: auto; }
  .cards-grid .card .card-body{ padding: 16px 14px; }
}

/* ===== ≤600px: smaller type + hide unit to save space ===== */
@media (max-width: 600px){
  .cards-grid .card .card-title{ font-size:1rem; line-height:1.2; }
  .cards-grid .card .card-sub{ font-size:.84rem; }
  .cards-grid .card .price{ font-size:.94rem; }
  .cards-grid .card .price .unit{ display:none; } /* hides "hour" on tiny screens */
  .cards-grid .card .rating .num{ font-size:.92rem; }
  .cards-grid .card .rating .star{ font-size:.88rem; }
}

/* =========================================================
   Listing pages grid layout (Vendors / Rentals / Catering)
   - 4 columns desktop, 3 columns tablet, 2 columns mobile
   - Always vertical scroll (no horizontal carousel here)
   ========================================================= */

/* Base: desktop (≥1025px) → 4 columns */
body[data-page-kind="vendor"]   #gridResults.cards-grid,
body[data-page-kind="rental"]   #gridResults.cards-grid,
body[data-page-kind="catering"] #gridResults.cards-grid,
body[data-page-kind="venue"]    #gridResults.cards-grid {
  display: grid !important;            /* beat cards.css flex */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}


/* Tablet: 3 columns */
@media (max-width: 1024px) {
  body[data-page-kind="vendor"]   #gridResults.cards-grid,
  body[data-page-kind="rental"]   #gridResults.cards-grid,
  body[data-page-kind="catering"] #gridResults.cards-grid,
  body[data-page-kind="venue"]    #gridResults.cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile: 2 columns */
@media (max-width: 640px) {
  body[data-page-kind="vendor"]   #gridResults.cards-grid,
  body[data-page-kind="rental"]   #gridResults.cards-grid,
  body[data-page-kind="catering"] #gridResults.cards-grid,
  body[data-page-kind="venue"]    #gridResults.cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Undo the horizontal flex scroller from cards.css on listing pages */
@media (max-width: 960px) {
  body[data-page-kind="vendor"]   .results-section #gridResults.cards-grid,
  body[data-page-kind="rental"]   .results-section #gridResults.cards-grid,
  body[data-page-kind="catering"] .results-section #gridResults.cards-grid,
  body[data-page-kind="venue"]    .results-section #gridResults.cards-grid {
    display: grid !important;
    overflow-x: visible;
    scroll-snap-type: none;
    scrollbar-width: auto;
  }

  body[data-page-kind="vendor"]   #gridResults.cards-grid > *,
  body[data-page-kind="rental"]   #gridResults.cards-grid > *,
  body[data-page-kind="catering"] #gridResults.cards-grid > *,
  body[data-page-kind="venue"]    #gridResults.cards-grid > * {
    flex: none;
    max-width: none;
    scroll-snap-align: none;
  }
}