/* ============================================================
   CAR DETAIL — cardetail.css
   Live-replica layer for luxuri.com/cars/{slug}. Loads on top
   of listing.css (shared hero tokens + lx-card similar cards).

   Measured on luxuri.com/cars/lamborghini-evo-spyder-green
   (Chrome, 1440x1000 and 390x844):
     hero    : pt-14 + min-h-40vh, car photo cover + black/20 wash
               + to-black gradient, inner min-h-35svh py-18 my-12
               -> 502px @1000; no text in the hero
     layout  : max-w-7xl p-6/lg:p-8; grid lg:grid-cols-3 gap-8,
               left span 2 (800px), right 384px
     h1      : Mulish 40/44.44 500 ls1 (not uppercase)
     desc    : content-format 16/28 300
     specs   : grid-cols-3 gap-4; cards radius 12, border
               zinc-50/30, p-6 centered; icon 24 sharp light mb-2;
               label 16/24 500
     gallery : hr 30% my-8 + h2 32/38.4 400 upper; grid 1/sm:2/
               lg:3 gap-4, images 256px cover radius 8
     widget  : sticky top-8 (32px); zinc-900 card radius 8 p-6,
               no border; blocks 16 apart, inner hrs zinc-700;
               rows 14/300 zinc-400 label / zinc-50 value;
               white Request Information 40px; Questions 14
               zinc-400 + phone 14/500 white
     similar : own container; hr + h2; 4-up cards = lx-card
   ============================================================ */

/* ── HERO (image band, no copy) ───────────────────────────── */
.cardet-hero {
  position: relative;
  background: var(--black);
  padding-top: 56px;            /* live pt-14 */
  min-height: 40vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.cardet-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cardet-hero-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .2);          /* live bg-black/20 multiply */
  mix-blend-mode: multiply;
  pointer-events: none;
}
.cardet-hero-grad {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2) 80%, rgba(0, 0, 0, 1) 95%);
}
.cardet-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 48px auto;            /* live my-12 */
  padding: 72px 24px;           /* live py-18 */
  min-height: 35svh;            /* live min-h-[35svh] — car pages only */
}
/* the yacht hero's inner block carries no min-height, so the band falls back
   to the 40vh floor (400px @1000) instead of the car page's 502px */
.cardet-hero-inner--flat { min-height: 0; }
.cardet-hero-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--lx-zinc-400);
  font-family: var(--lx-font-body);
  font-size: 14px;
}

/* ── LAYOUT ───────────────────────────────────────────────── */
.cardet-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;                /* live p-6 */
}
@media (min-width: 1024px) {
  .cardet-container { padding: 32px; }   /* live lg:p-8 */
}
/* live leaves align-items at stretch on purpose: the right column runs the
   full height of the row, which is what gives the sticky widget its travel. */
.cardet-cols { display: grid; gap: 32px; }   /* live gap-8 */
@media (min-width: 1024px) {
  .cardet-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cardet-cols > .cardet-left  { grid-column: span 2; }
  .cardet-cols > .cardet-right { grid-column: span 1; }
}
.cardet-left { min-width: 0; }

/* ── TITLE + DESCRIPTION ──────────────────────────────────── */
.cardet-name {
  font-family: var(--lx-font-accent);
  font-size: 40px;              /* live h1 */
  line-height: 44.4444px;
  font-weight: 500;             /* live font-medium */
  letter-spacing: .025em;
  color: var(--lx-zinc-50);
  margin: 0;
}
.cardet-desc {
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 28px;            /* live content-format 1.75 */
  font-weight: 300;
  color: var(--lx-zinc-50);
}
.cardet-desc p { margin: 16px 0 0; }   /* live content-format >*+* */
.cardet-desc p:first-child { margin-top: 0; }
/* the panel's description editor can emit lists and links */
.cardet-desc ul, .cardet-desc ol { margin: 16px 0 0; padding-left: 22px; }
.cardet-desc ul { list-style: disc; }
.cardet-desc ol { list-style: decimal; }
.cardet-desc li { margin: 4px 0; }
.cardet-desc a { color: var(--lx-zinc-50); text-decoration: underline; }
.cardet-desc a:hover { color: var(--lx-gold); }
.cardet-desc strong, .cardet-desc b { font-weight: 600; }
/* headings the description editor can produce (h2/h3/h4 — h1 is the car name) */
.cardet-desc h2, .cardet-desc h3, .cardet-desc h4 {
  font-family: var(--lx-font-accent);
  color: var(--lx-zinc-50);
  font-weight: 600;
  margin: 24px 0 8px;
}
.cardet-desc h2 { font-size: 24px; line-height: 1.3; }
.cardet-desc h3 { font-size: 20px; line-height: 1.35; }
.cardet-desc h4 { font-size: 17px; line-height: 1.4; }
.cardet-desc > :first-child { margin-top: 0; }

/* ── SPEC CARDS ───────────────────────────────────────────── */
.cardet-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* live grid-cols-3 at every width */
  gap: 16px;                                /* live gap-4 */
  margin-top: 32px;                         /* live space-y-8 */
}
.cardet-spec {
  border: 1px solid rgba(248, 247, 247, .3);   /* live border-zinc-50/30 */
  border-radius: 12px;                          /* live rounded-xl */
  padding: 24px;                                /* live p-6 */
  text-align: center;
  font-family: var(--lx-font-body);
  color: var(--lx-zinc-50);
}
.cardet-spec-icon {
  font-size: 24px;              /* live text-2xl = 24/32 */
  line-height: 32px;
  font-weight: 300;             /* live inherits main's font-light */
  margin-bottom: 8px;           /* live mb-2 */
}
/* live: 0-60 badge is a circle glyph with a tiny "60" centred in it —
   text-[.5rem] at the page's 300 weight and default leading */
.cardet-spec-icon .cardet-zero60 { position: relative; display: inline-block; }
.cardet-spec-icon .cardet-zero60 span {
  position: absolute;
  bottom: 50%; right: 50%;
  transform: translate(50%, 50%);
  font-size: 8px;               /* live text-[.5rem] */
  line-height: normal;
  font-weight: 300;
}
.cardet-spec-label {
  font-size: 16px;              /* live text-base */
  line-height: 24px;
  font-weight: 500;             /* live font-medium */
}

/* ── SECTION SHELL (hr + h2) ──────────────────────────────── */
.cardet-hr {
  border: 0;
  border-top: 1px solid #fff;
  opacity: .3;                  /* live hr opacity-30 */
  margin: 32px 0;               /* live my-8 */
}
.cardet-sec-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;          /* live space-y-6 (similar section) */
}
.cardet-left .cardet-sec-head { margin-bottom: 32px; }   /* live space-y-8 (gallery) */
.cardet-sec-title {
  font-family: var(--lx-font-accent);
  font-size: 32px;              /* live text-3xl */
  line-height: 38.4px;
  font-weight: 400;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--lx-zinc-50);
  margin: 0;
}
.cardet-sec-arrows {
  display: flex;
  gap: 8px;
  padding: 8px 0;               /* live py-2 */
}
.cardet-sec-arrows button {
  background: none;
  border: 0;
  padding: 0 4px;               /* live px-1 */
  color: var(--lx-zinc-50);
  cursor: pointer;
}
.cardet-sec-arrows button:disabled { opacity: .4; cursor: default; }

/* ── GALLERY ──────────────────────────────────────────────── */
.cardet-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;                    /* live gap-4 */
}
@media (min-width: 640px)  { .cardet-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cardet-gallery { grid-template-columns: repeat(3, 1fr); } }
.cardet-gallery img {
  width: 100%;
  height: 256px;                /* live h-64 */
  object-fit: cover;
  border-radius: 8px;           /* live rounded-lg */
  display: block;
  cursor: pointer;
}

/* ── YACHT DETAIL EXTRAS ──────────────────────────────────────
   Same skeleton as the car page. Live differences, measured on
   luxuri.com/yachts/azimut-salt-shaker:
     h1 40/44.44 300 (not 500) + location line 16/24 400 under it
     widget leads with a "Charter Rates" h3 and 24/300 rate values
     bullet fine print at 12/16 zinc-500 */
.cardet-name--yacht { font-weight: 300; margin-bottom: 16px; }   /* live h1 has no font-medium */
.cardet-loc {
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;             /* live font-normal */
  color: var(--lx-zinc-50);
}
.cardet-rates-title {
  font-family: var(--lx-font-accent);
  font-size: 20px;              /* live text-lg */
  line-height: 31.1111px;
  font-weight: 500;             /* live font-medium */
  letter-spacing: .025em;
  color: var(--lx-zinc-50);
  margin: 0 0 12px;             /* live mb-3 */
}
.cardet-rate-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;           /* live space-y-2 */
}
.cardet-rate-row:last-child { margin-bottom: 0; }
.cardet-rate-label {
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: var(--lx-zinc-400);
}
.cardet-rate-val {
  font-size: 24px;              /* live text-xl */
  line-height: 33.6px;
  font-weight: 300;             /* live font-light */
  color: var(--lx-zinc-50);
}
.cardet-rates { margin-bottom: 16px; }   /* live space-y-4 between widget blocks */
.cardet-notes {
  font-size: 12px;              /* live text-xs */
  line-height: 16px;
  font-weight: 300;
  color: var(--lx-zinc-500);
}
.cardet-notes p { margin: 0 0 4px; }   /* live space-y-1 */
.cardet-notes p:last-child { margin-bottom: 0; }

/* ── PRICING WIDGET ───────────────────────────────────────── */
.cardet-sticky { position: sticky; top: 32px; }   /* live top-8 */
.cardet-widget {
  background: #0b0a0a;          /* live bg-zinc-900 */
  border-radius: 8px;           /* live rounded-lg */
  padding: 24px;                /* live p-6 */
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: var(--lx-zinc-50);
}
.cardet-price-row { display: flex; align-items: baseline; gap: 4px; margin-bottom: 16px; }   /* live space-y-4 */
.cardet-price {
  font-size: 24px;              /* live text-2xl */
  line-height: 32px;
  font-weight: 600;
  color: #e9e8e7;               /* live text-zinc-100 */
}
.cardet-per { color: var(--lx-zinc-400); }
.cardet-widget hr {
  border: 0;
  border-top: 1px solid var(--lx-zinc-700);   /* live border-zinc-700 */
  opacity: 1;                 /* Bootstrap's reset sets hr to .25 — live is full */
  margin: 0 0 16px;
}
.cardet-rows {
  margin-bottom: 16px;
  font-size: 14px;              /* live .space-y-2.text-sm */
  line-height: 20px;
}
.cardet-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;              /* live text-sm */
  line-height: 20px;
  margin-bottom: 8px;           /* live space-y-2 */
}
.cardet-row:last-child { margin-bottom: 0; }
.cardet-row-label { color: var(--lx-zinc-400); }
.cardet-req-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--lx-zinc-50);
  color: #000;
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  padding: 10px;                /* live py-2.5 -> 40px */
  border: 0;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  text-decoration: none;
  margin-bottom: 16px;
  cursor: pointer;
  transition: background-color .18s;
}
.cardet-req-btn:hover { background: #e9d9c3; }   /* live hover:bg-amber-200 */
.cardet-call {
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: var(--lx-zinc-400);
}
/* live: the label carries no margin, only the phone's mt-2 separates them */
.cardet-call p { margin: 0; }
.cardet-call a {
  display: block;
  margin-top: 8px;              /* live mt-2 */
  font-weight: 500;
  color: #fff;
  text-decoration: none;
}
.cardet-call a:hover { color: #e9d9c3; }

/* ── SIMILAR VEHICLES (scroll slider styled like live's grid) ── */
.cardet-sim-track {
  display: flex;
  gap: 24px;                    /* live gap-6 */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.cardet-sim-track::-webkit-scrollbar { display: none; }
.cardet-sim-track .lx-card {
  flex: 0 0 calc((100% - 72px) / 4);   /* live lg:grid-cols-4 */
  scroll-snap-align: start;
}
@media (max-width: 1023px) { .cardet-sim-track .lx-card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 639px)  { .cardet-sim-track .lx-card { flex-basis: 100%; } }

/* ── GALLERY LIGHTBOX — same live design as the villa gallery ── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .8);
  padding: 16px;
}
@media (min-width: 1024px) { .lightbox { padding: 32px; } }
.lightbox.open { display: flex; }
.lightbox-inner {
  display: flex;
  flex-direction: column;
  width: 1280px;
  max-width: 100%;
  height: 90svh;
  background: #0b0a0a;
  border: 1px solid var(--lx-zinc-800);
  border-radius: 12px;
  overflow: hidden;
  animation: cardetModalIn .2s ease-out .1s both;
}
@keyframes cardetModalIn {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: 1; transform: scale(1); }
}
.lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--lx-zinc-800);
  flex: 0 0 auto;
}
.lb-title {
  font-family: var(--lx-font-accent);
  font-size: 24px;
  line-height: 33.6px;
  font-weight: 600;
  letter-spacing: .025em;
  color: #e9e8e7;
  margin: 0;
}
.lb-close {
  background: none; border: 0;
  color: #fff; cursor: pointer;
  padding: 0; line-height: 0;
  font-size: 18px;
}
.lb-main {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
}
.lb-main img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(26, 26, 25, .8);
  border: 1px solid var(--lx-zinc-700);
  color: #e9e8e7;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.lb-prev { left: 33px; }
.lb-next { right: 33px; }
.lb-counter {
  position: absolute;
  right: 33px;
  bottom: 16px;
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  color: #e9e8e7;
  background: rgba(11, 10, 10, .8);
  border: 1px solid var(--lx-zinc-700);
  border-radius: 999px;
  padding: 5px 14px;
}
.lb-strip {
  display: flex;
  gap: 12px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--lx-zinc-800);
  overflow-x: auto;
  flex: 0 0 auto;
}
.lb-strip-thumb {
  flex: 0 0 133px;
  height: 75px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: .8;
}
.lb-strip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-strip-thumb.active { border-color: #dec6a6; opacity: 1; }
.lb-strip::-webkit-scrollbar { height: 8px; }
.lb-strip::-webkit-scrollbar-track { background: rgba(248, 247, 247, .9); border-radius: 4px; }
.lb-strip::-webkit-scrollbar-thumb { background: #8e8b86; border-radius: 4px; }

/* footer make-up, same as the other listing pages */
.cardet-bottom-pad { height: 64px; }
@media (max-width: 1023px) { .cardet-bottom-pad { height: 48px; } }