/* ============================================================
   ZION PLUS — V4 LISTING TILES  (shared)
   ------------------------------------------------------------
   Applies the v4 design language to the plugin's search/archive
   listings that still render the legacy Bootstrap card markup:
   activities, articles, cuisine, occasions, venues (+ their
   taxonomy pages). Accommodations has its own dedicated file
   (accommodations-archive.css) and is unaffected.

   IMPORTANT — specificity: the theme's compiled Bootstrap
   (bootstrap/css/styles.min.css) styles these cards with the chain
   `.zionplus-search-listings .container .card-deck .card …`
   (an old `height:0; padding-bottom:%` aspect hack). To win, our
   selectors must match that chain depth (include `.container`) and
   then rely on load order (this file loads after styles.min.css).
   Scope stays limited to `.zionplus-search-listings` so nothing
   else on the site is affected. No PHP/JS changes — AJAX filtering
   keeps working.
   ============================================================ */

:root {
  --gz-dark-blue: #364b54;
  --gz-orange: #EB6B40;
  --gz-aqua: #42B5BF;
  --gz-sand: #F4ECDF;
}

/* ---- Section headings within listings ("Browse by …") ---- */
.zionplus-search-listings .section-heading h2,
.zionplus-search-listings .container h2,
.restaurant-types h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gz-dark-blue, #364b54);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  margin: 0 0 1.25rem;
}

/* ============================================================
   GRID — override Bootstrap .card-deck (flex) with a grid
   ============================================================ */
.zionplus-search-listings .container .card-deck {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
}

/* ============================================================
   CARD — v4 image tile with gradient scrim + overlaid title
   ============================================================ */
.zionplus-search-listings .container .card-deck .card {
  position: relative;
  display: block;
  width: auto;
  height: auto;            /* reset bootstrap height:0 */
  padding-bottom: 0;       /* reset bootstrap padding-bottom aspect hack */
  margin: 0;
  border: none;
  border-radius: 14px;
  overflow: hidden;
  background: var(--gz-dark-blue, #364b54);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.zionplus-search-listings .container .card-deck .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
}

.zionplus-search-listings .container .card-deck .card:focus-within {
  outline: 3px solid var(--gz-orange, #EB6B40);
  outline-offset: 2px;
}

/* Image block — an in-flow block whose padding-top gives the card its
   height (4:3 tile). Overrides bootstrap's absolute .card-img. */
.zionplus-search-listings .container .card-deck .card .card-img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding-top: 75%; /* 4:3 tile */
  margin: 0;
  border-radius: 0;
  overflow: hidden;
}

.zionplus-search-listings .container .card-deck .card .card-img img {
  position: absolute;
  inset: 0;
  left: 0;                 /* reset bootstrap left:50% */
  width: 100%;             /* reset bootstrap width:auto */
  height: 100%;
  object-fit: cover;
  margin: 0;
  transform: none;         /* reset bootstrap translateX(-50%) */
  transition: transform 0.6s ease;
}

.zionplus-search-listings .container .card-deck .card:hover .card-img img {
  transform: scale(1.06);
}

/* Gradient scrim + title, anchored to the bottom. */
.zionplus-search-listings .container .card-deck .card .card-img-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  background: linear-gradient(
    to top,
    rgba(20, 30, 35, 0.82) 0%,
    rgba(20, 30, 35, 0.45) 32%,
    rgba(20, 30, 35, 0) 62%
  );
  pointer-events: none; /* clicks fall through to .click-frame */
}

.zionplus-search-listings .container .card-deck .card .card-img-overlay .card-title {
  position: static;
  margin: 0;
  padding: 0;
  background: none;      /* reset bootstrap gradient on .card-title */
  text-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Eyebrow — type/category label above the title */
.zionplus-search-listings .container .card-deck .card .card-img-overlay .card-title .card-text,
.zionplus-search-listings .container .card-deck .card .card-img-overlay .card-title .venue-type,
.zionplus-search-listings .container .card-deck .card .card-img-overlay .card-title > span:first-child {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

.zionplus-search-listings .container .card-deck .card .card-img-overlay .card-title .card-text a,
.zionplus-search-listings .container .card-deck .card .card-img-overlay .card-title .venue-type a {
  color: var(--gz-aqua, #42B5BF);
  text-decoration: none;
  display: inline;
  margin-top: 0;
  pointer-events: auto; /* keep the type link clickable */
  position: relative;
  z-index: 3;
}

.zionplus-search-listings .container .card-deck .card .card-img-overlay .card-title .card-text a:hover,
.zionplus-search-listings .container .card-deck .card .card-img-overlay .card-title .venue-type a:hover {
  color: #fff;
}

.zionplus-search-listings .container .card-deck .card .card-img-overlay .card-title h5 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.3px;
  color: #fff;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.zionplus-search-listings .container .card-deck .card .card-img-overlay .card-title h5 a,
.zionplus-search-listings .container .card-deck .card .card-img-overlay .card-title h5 a span {
  color: inherit;
  text-decoration: none;
  display: inline;
  margin-top: 0;
}

/* Whole-card click target */
.zionplus-search-listings .container .card-deck .card .click-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Favorite button — top-right, above the scrim */
.zionplus-search-listings .container .card-deck .card > .zionplus-favorite-wrapper {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
}

/* The article card's trailing "Read More" button is redundant with the
   fully-clickable tile and bootstrap pins it as an absolute bottom bar —
   hide it so every tile is uniform. */
.zionplus-search-listings .container .card-deck .card > a.btn {
  display: none;
}

/* ============================================================
   "BROWSE BY TYPE" PILLS (cuisine)
   ============================================================ */
.restaurant-types .cuisine-col {
  margin-bottom: 12px;
}

.restaurant-types .cuisine-col .btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gz-dark-blue, #364b54);
  background: #fff;
  border: 1px solid #E6DFD2;
  border-radius: 999px;
  padding: 10px 18px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.restaurant-types .cuisine-col .btn:hover,
.restaurant-types .cuisine-col .btn:focus-visible {
  background: var(--gz-orange, #EB6B40);
  border-color: var(--gz-orange, #EB6B40);
  color: #fff;
}

/* ============================================================
   FILTER FORM (venues TYPE / LOCATION selects)
   ============================================================ */
.zionplus-search-form select,
.zionplus-search-listings select.form-control {
  font-family: 'Nunito Sans', sans-serif;
  border: 1px solid #E6DFD2;
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--gz-dark-blue, #364b54);
}

.zionplus-search-form select:focus {
  outline: 2px solid var(--gz-orange, #EB6B40);
  outline-offset: 1px;
  border-color: var(--gz-orange, #EB6B40);
}

/* ============================================================
   PAGINATION
   ============================================================ */
.zionplus-search-listings .paging .btn-primary,
.zionplus-search-listings + .paging .btn-primary,
.paging .btn-primary {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: var(--gz-orange, #EB6B40);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
}

.paging .btn-primary:hover:not(.disabled) {
  background: var(--gz-dark-blue, #364b54);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .zionplus-search-listings .container .card-deck {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
    gap: 14px;
  }
  .zionplus-search-listings .container .card-deck .card .card-img-overlay .card-title h5 {
    font-size: 20px;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .zionplus-search-listings .container .card-deck .card,
  .zionplus-search-listings .container .card-deck .card .card-img img {
    transition: none;
  }
  .zionplus-search-listings .container .card-deck .card:hover {
    transform: none;
  }
  .zionplus-search-listings .container .card-deck .card:hover .card-img img {
    transform: none;
  }
}