/* ============================================================
   LISTING PAGES — listing.css
   Shared live-replica layer for luxuri.com/cars and /yachts.
   Both pages are the same Livewire component with a different
   filter row, so hero / container / grid / card / pager are one
   set of rules here and each page only adds its own filters.

   Measured on the live pages (Chrome, 1440x1000 and 390x844):
     hero      : pt-14 (56px) + min-h-40vh, flex items-center,
                 inner py-18/my-12 = 120px block padding, centered
     h1        : Mulish 48/48 300 ls1.2px  (40/44.44 ls1px < 1024)
     sub       : Noto  24/33.6 300 white/80
     container : max-w-7xl (1280) + p-6 / lg:p-8  (24 / 32)
     filters   : flex gap-16 mb-32; pills gap-8, 34px tall,
                 px-2.5 py-1.5, radius 6, border zinc-50/30,
                 bg zinc-800/50, label 14/20 400 uppercase;
                 checked -> amber-50 fill, black label
     mobile    : native <select> px-4 py-2, radius 8, border zinc-200
     grid      : 1 / sm:2 / lg:4 cols, gap 24
     card      : image aspect-10/7 radius 8 mb-8, hover scale 1.1;
                 h3 Mulish 20/31.11 400 ls.5 uppercase -> amber-200;
                 loc zinc-200 italic mb-8; price 14/20, /day zinc-500
   ============================================================ */

/* ── HERO ─────────────────────────────────────────────────── */
.lx-list-hero {
  background: var(--black);
  padding-top: 56px;          /* live pt-14, nav overlays it */
  min-height: 40vh;           /* live min-h-[40vh] */
  display: flex;
  align-items: center;
}
.lx-list-hero-inner {
  width: 100%;
  max-width: 1280px;          /* live max-w-7xl */
  margin: 0 auto;
  padding: 120px 24px;        /* live py-18 (72) + my-12 (48) */
  text-align: center;
}
@media (min-width: 1024px) {
  .lx-list-hero-inner { padding-left: 32px; padding-right: 32px; }
}
.lx-list-title {
  font-family: var(--lx-font-accent);
  font-size: 40px;            /* live text-4xl */
  line-height: 44.4444px;
  font-weight: 300;
  letter-spacing: .025em;
  color: #fff;
  margin: 0 0 16px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 3px 2px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .1);
}
@media (min-width: 1024px) {
  .lx-list-title { font-size: 48px; line-height: 48px; }   /* live lg:text-5xl */
}
.lx-list-sub {
  font-family: var(--lx-font-body);
  font-size: 24px;            /* live text-xl */
  line-height: 33.6px;
  font-weight: 300;
  color: rgba(255, 255, 255, .8);
  max-width: 672px;           /* live max-w-2xl */
  margin: 0 auto;
}

/* ── SECTION / CONTAINER ──────────────────────────────────── */
.lx-list-section { background: var(--black); }
/* live's footer opens with its own container padding (24px, 32px at lg) on
   top of the 48px footer inset; our shared footer has none, so the listing
   makes it up with the matching extra padding-bottom. */
.lx-list-wrap {
  width: 100%;
  max-width: 1280px;          /* live max-w-7xl */
  margin: 0 auto;
  padding: 24px 24px 48px;    /* live p-6 (+24 footer make-up) */
}
@media (min-width: 1024px) {
  .lx-list-wrap { padding: 32px 32px 64px; }   /* live lg:py-8 lg:px-8 (+32) */
}

/* ── FILTER ROW ───────────────────────────────────────────── */
.lx-list-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;                  /* live gap-4 */
  margin-bottom: 32px;        /* live mb-8 */
}

/* cars: desktop pills — live: hidden lg:block w-full */
.lx-pills { display: none; width: 100%; }
.lx-pills-set { border: 0; padding: 0; margin: 0; min-width: 0; }
.lx-pills-row { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 1024px) {
  .lx-pills { display: block; }
  .lx-list-select--mobile { display: none; }   /* cars swaps the select for pills */
}

.lx-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;                            /* live px-2.5 py-1.5 */
  border: 1px solid rgba(248, 247, 247, .3);    /* live border-zinc-50/30 */
  border-radius: 6px;                           /* live rounded-md */
  background: rgba(26, 26, 25, .5);             /* live bg-zinc-800/50 */
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s;
}
.lx-pill.active {
  background: #f9f6f0;        /* live amber-50 */
  border-color: #f9f6f0;
  color: #000;
}

/* native select — live: px-4 py-2 border-zinc-200 rounded-lg.
   Cars uses one of these below lg; yachts uses four at every width. */
/* The select sits on the dark page so its text is near-white. The browser draws
   the open dropdown on its own light panel, though, and <option> inherits that
   near-white colour — leaving the choices invisible. Live solves it the same
   way, by giving the options a dark background of their own
   (`[&>option]:bg-zinc-700` + `[&>option]:text-white`). */
.lx-list-select option {
  background-color: var(--lx-zinc-700);
  color: #fff;
}

.lx-list-select {
  padding: 8px 16px;
  border: 1px solid #c9c8c5;
  border-radius: 8px;
  background-color: transparent;
  color: var(--lx-zinc-50);
  font-family: var(--lx-font-body);
  font-size: 16px;
  font-weight: 300;
  cursor: pointer;

  /* The browser's own arrow is painted hard against the right edge and ignores
     padding, so the gap after it read tighter than the 16px before the label.
     Drawing the chevron ourselves puts it on the same 16px inset.
     padding-right = 16 inset + 16 arrow + 8 gap. */
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8f7f7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
}
/* The option list is left entirely to the browser, like live. Forcing dark
   colours on it blends with the native popup material and leaves the
   unselected rows unreadable, so no option rules here. */

/* ── CARD GRID ────────────────────────────────────────────── */
.lx-list-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;                  /* live gap-6 */
  margin-bottom: 24px;        /* live space-y-6 */
}
@media (min-width: 640px)  { .lx-list-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lx-list-grid { grid-template-columns: repeat(4, 1fr); } }

.lx-card {
  position: relative;
  display: block;
  align-self: start;          /* live: article is auto-height inside the cell */
  text-decoration: none;
  border-radius: 12px;        /* live rounded-xl */
  font-family: var(--lx-font-body);
  font-size: 14px;            /* live text-sm */
  line-height: 20px;
  font-weight: 300;
  color: var(--lx-zinc-50);
}
.lx-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 10 / 7;       /* live aspect-10/7 */
  overflow: hidden;
  border-radius: 8px;         /* live rounded-lg */
  margin-bottom: 8px;         /* live mb-2 */
}
.lx-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  transition: transform .3s;  /* live duration-300 */
}
.lx-card:hover .lx-card-img img { transform: scale(1.1); }

.lx-card-name {
  font-family: var(--lx-font-accent);
  font-size: 20px;            /* live text-lg */
  line-height: 31.1111px;
  font-weight: 400;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--lx-zinc-50);
  margin: 0;
  transition: color .3s;
}
.lx-card:hover .lx-card-name { color: #e9d9c3; }   /* live amber-200 */

.lx-card-locrow {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--lx-zinc-200);
}
.lx-card-loc {
  font-style: italic;
  margin-bottom: 8px;         /* live mb-2 */
}
.lx-card-price { margin: 0; color: var(--lx-zinc-50); }
.lx-card-per   { color: var(--lx-zinc-500); }

/* ── PAGINATION ───────────────────────────────────────────────
   live: wrapper mt-12; row 38px tall; "Showing…" 14/20 300
   zinc-300 with 500-weight numbers; button group inline-flex,
   radius 6, shadow-sm, cells overlapping by -1px; arrows 38x38
   (p-2 + 20px icon), numbers px-4 py-2; current page = amber-200
   fill / amber-300 border / black text; disabled = zinc-400. */
.lx-pager { margin-top: 48px; }
.lx-pager-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* until JS paginates, only the first page's cards are visible */
.lx-list-grid[data-paged="0"] .lx-card:nth-child(n + 13) { display: none; }

/* mobile (< 640): « Previous / Next » pushed to the edges */
.lx-pager-mobile {
  display: flex;
  flex: 1 1 0%;
  justify-content: space-between;
}
.lx-pager-desktop { display: none; }
@media (min-width: 640px) {
  .lx-pager-mobile  { display: none; }
  .lx-pager-desktop {
    display: flex;
    flex: 1 1 0%;
    align-items: center;
    justify-content: space-between;
  }
}

.lx-pg-showing {
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  color: var(--lx-zinc-300);
  margin: 0;
}
.lx-pg-showing span { font-weight: 500; }

.lx-pg-group {
  position: relative;
  z-index: 0;
  display: inline-flex;
  border-radius: 6px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
}

.lx-pg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;                            /* live px-4 py-2 */
  margin-left: -1px;                            /* live -ml-px */
  border: 1px solid rgba(248, 247, 247, .3);    /* live border-zinc-50/30 */
  background: #000;
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--lx-zinc-50);
  cursor: pointer;
  transition: background-color .15s ease-in-out, color .15s ease-in-out, border-color .15s ease-in-out;
}
.lx-pg-btn:first-child { margin-left: 0; border-radius: 6px 0 0 6px; }
.lx-pg-btn:last-child  { border-radius: 0 6px 6px 0; }
.lx-pg-btn.is-arrow    { padding: 8px; }      /* live p-2 */
.lx-pg-btn.is-arrow svg { width: 20px; height: 20px; display: block; }

button.lx-pg-btn:hover { background: var(--lx-zinc-800); }
button.lx-pg-btn:focus-visible {
  z-index: 10;
  outline: none;
  border-color: var(--lx-gold-border);
  box-shadow: 0 0 0 3px rgba(222, 198, 166, .5);
}
button.lx-pg-btn:active { background: var(--lx-zinc-700); color: var(--lx-zinc-100, #e9e8e7); }

.lx-pg-btn.is-current {
  background: var(--lx-gold);           /* amber-200 */
  border-color: var(--lx-gold-border);  /* amber-300 */
  color: #000;
  cursor: default;
}
.lx-pg-btn.is-disabled {
  color: var(--lx-zinc-400);
  cursor: default;
}

/* mobile buttons */
.lx-pg-mob {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid rgba(248, 247, 247, .3);
  border-radius: 6px;
  background: #000;
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--lx-zinc-50);
  cursor: pointer;
  transition: background-color .15s ease-in-out;
}
button.lx-pg-mob:hover { background: var(--lx-zinc-800); }
.lx-pg-mob.is-disabled { color: var(--lx-zinc-400); cursor: default; }

/* ── EMPTY STATE ──────────────────────────────────────────── */
.lx-list-empty {
  border: 1px solid rgba(248, 247, 247, .14);
  border-radius: 14px;
  background: #121212;
  padding: 54px 24px;
  text-align: center;
}
.lx-list-empty h2 {
  font-family: var(--lx-font-accent);
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: .025em;
  color: var(--lx-zinc-50);
  margin: 0;
}

/* image placeholder, same footprint as a real photo */
.lx-card-img .lx-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lx-zinc-800);
  color: var(--lx-zinc-400);
  font-size: 14px;
}