/* ============================================================
   LUXURI — Home v2 (live-site replica layer)
   Loaded ONLY by index.php — overrides style.css on that page.
   Tokens taken from luxuri.com build CSS:
     fonts:  headings "Mulish", body "Noto Sans"
     zinc:   50 #f8f7f7 / 200 #c9c8c5 / 300 #aba9a5 / 400 #8e8b86
             700 #2d2c2a / 800 #1a1a19 / 900 #0b0a0a
     amber:  200 #e9d9c3 (hover gold) / 300 #dec6a6
   ============================================================ */

/* NOTE: navbar / side-drawer / footer rules moved to style.css
   (site-wide). This file keeps only homepage-specific styling. */

/* ---------- Base typography (live: Noto Sans 16px body, Mulish headings) */
body {
  font-family: var(--lx-font-body);
  font-size: 16px;
  font-weight: 300;
  /* live: <main> is font-light */
  color: var(--lx-zinc-50);
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.sec-title,
.op-title,
.faq-head,
.v-name,
.dest-lbl,
.art-title,
.trusted-lbl {
  font-family: var(--lx-font-accent);
}

/* ---------- Section shell (live: max-w-7xl container, py-8 sections) */
.lx-section {
  padding: 48px 0;
}

.wrap {
  max-width: 1280px;
  /* live max-w-7xl: 1216px content + 2×32px padding */
  padding: 0 32px;
}

@media (max-width: 768px) {
  .wrap {
    padding: 0 24px;
  }
}

.sec-head {
  margin-bottom: 24px;
}

/* live h2: text-3xl (30px/36px), font-normal, uppercase, tracking-wide */
.sec-title {
  font-size: 32px;
  line-height: 38.4px;
  font-weight: 400;
  letter-spacing: .025em;
  color: var(--lx-zinc-50);
}

/* live keeps section headings at 32px on mobile — no shrink rule */
/* live arrows: plain fa-xl icons, full opacity */
.arr-b {
  font-size: 20px;
  opacity: 1;
  padding: 0 4px;
}

.arr-b:hover {
  color: var(--lx-gold);
}

.arr-b:disabled {
  opacity: .35;
}

/* ---------- Hero (live: h1 32→48px semibold tracking-wide, sub 20px/400) */
.hero-overlay {
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, .1) 0%,
      rgba(0, 0, 0, .2) 80%,
      rgba(0, 0, 0, 1) 95%);
}

.hero-title {
  font-size: 32px;
  /* live: text-3xl on mobile */
  line-height: 38.4px;
  font-weight: 600;
  letter-spacing: .025em;
  text-wrap: balance;
  /* live: text-balance */
  text-shadow: 0 4px 16px rgba(0, 0, 0, .1);
  margin-bottom: 16px;
}

.hero-sub {
  font-size: 20px;
  line-height: 31.11px;
  font-weight: 400;
  text-shadow: 0 4px 16px rgba(0, 0, 0, .1);
  margin-bottom: 24px;
}

/* ---------- Search bar (live: max-w-2xl, p-5, bg-black/70, rounded-xl) */
.search-bar {
  height: 96px;
  align-items: center;
  width: min(672px, 92vw);
  background: rgba(0, 0, 0, .7);
  border: 1px solid rgba(248, 247, 247, .9);
  /* zinc-50/90 */
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.s-field {
  margin: 0 16px 0 0;
  padding-right: 16px;
  border-right: 1px solid rgba(201, 200, 197, .8);
  /* zinc-200/80 divider */
}

.s-label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.s-val,
.s-inp {
  font-family: var(--lx-font-body);
  font-size: 14px;
  color: var(--lx-zinc-300);
}

.s-inp::placeholder {
  color: var(--lx-zinc-300);
}

.s-btn-wrap {
  padding: 0;
  align-items: center;
}

/* live: size-12 white rounded-md button, gold hover */
.s-btn {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: var(--lx-zinc-50);
  transition: all .15s;
}

.s-btn i {
  color: #000;
  font-size: 16px;
}

.s-btn:hover {
  background: var(--lx-gold);
}

/* ---------- Destination dropdown (live: bg-black/90, rounded-xl, 7:5 cards) */
.dest-dropdown {
  background: rgba(0, 0, 0, .9);
  border: 1px solid rgba(248, 247, 247, .9);
  border-radius: 12px;
  padding: 24px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.dest-dropdown h4 {
  font-size: 16px;
  font-weight: 500;
  color: var(--lx-zinc-50);
  margin-bottom: 12px;
}

.dest-dd-grid {
  gap: 12px;
}

.dest-dd-item img {
  aspect-ratio: 7/5;
  border-radius: 8px;
  transition: transform .3s;
  opacity: 1;
}

.dest-dd-item:hover img {
  opacity: 1;
  transform: scale(1.1);
}

.dest-dd-item span {
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .025em;
  transition: color .3s;
}

.dest-dd-item:hover span {
  color: var(--lx-gold);
}

/* ---------- Popular Destinations cards (live: 10:7 image, label 16px below) */
.dest-card {
  width: calc((100% - 96px) / 5);
}

.slider-track:not(.rev-track) {
  gap: 24px;
}

@media (max-width: 1000px) {
  .dest-card {
    width: calc((100% - 48px) / 3);
  }
}

@media (max-width: 600px) {
  .dest-card {
    width: calc((100% - 24px) / 2);
  }
}

.dest-img {
  aspect-ratio: 10/7;
  height: auto;
  width: 100%;
  border-radius: 8px;
}

.dest-img img {
  transition: transform .3s;
}

.dest-card:hover .dest-img img {
  transform: scale(1.1);
}

.dest-lbl {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .5px;
  color: var(--lx-zinc-50);
  transition: color .3s;
}

/* ---------- Featured Villas (live: 4-col grid gap-6, flat cards, 10:7) */
.featured-villas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 1200px) {
  .featured-villas-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .featured-villas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .featured-villas-grid {
    grid-template-columns: 1fr;
  }
}

.v-card {
  width: auto;
}

.v-card:hover {
  transform: none;
}

.v-card .v-img {
  aspect-ratio: 10/7;
  border-radius: 8px;
}

.v-card img {
  transition: transform .3s;
}

.v-card:hover img {
  transform: scale(1.1);
}

.v-body {
  padding-top: 8px;
}

/* live: title text-lg uppercase 400, gold hover */
.v-name {
  font-size: 20px;
  line-height: 31.2px;
  font-weight: 400;
  letter-spacing: .5px;
  color: var(--lx-zinc-50);
  margin-bottom: 0;
  transition: color .3s;
}

.v-row {
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.v-loc {
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  /* live: article font-light */
  color: var(--lx-zinc-200);
  font-style: italic;
}

.v-meta {
  font-size: 14px;
  line-height: 20px;
  color: var(--lx-zinc-200);
  gap: 6px;
}

/* live price: text-sm, $ semibold, /night zinc-400 */
.v-price {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--lx-zinc-50);
}

.v-price .per {
  font-size: 14px;
  font-weight: 300;
  color: var(--lx-zinc-400);
}

/* ---------- Trusted By (live: h2 30px tracking-wide mb-10, logos 48px, py-24) */
.trusted-wrap {
  padding: 96px 0;
}

.trusted-lbl {
  font-size: 32px;
  line-height: 38.4px;
  font-weight: 300;
  /* live h2 inherits main font-light */
  letter-spacing: .025em;
  color: #fff;
  /* live: explicit text-white */
  margin-bottom: 40px;
}

.mq-inner {
  gap: 72px;
}

.mq-inner img {
  height: 48px;
  max-width: 192px;
  opacity: .6;
  transition: opacity .3s;
}

/* ---------- FAQ (live: max-w-4xl, space-y-3, rounded-xl bg-zinc-800 p-6) */
.faq-wrap {
  max-width: 896px;
}

.faq-head {
  font-size: 32px;
  line-height: 38.4px;
  font-weight: 600;
  letter-spacing: .025em;
  margin-bottom: 24px;
}

.faq-item {
  border-radius: 12px;
  margin-bottom: 12px;
}

.faq-q {
  padding: 24px;
  font-family: var(--lx-font-accent);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .025em;
  color: var(--lx-zinc-50);
  align-items: flex-start;
  gap: 24px;
}

.faq-q .qi {
  font-size: 18px;
  color: #fff;
  transition: transform .2s;
  margin-top: 2px;
}

/* live: plus rotates 45° when open */
.faq-item.open .faq-q .qi {
  transform: rotate(45deg);
}

.faq-a {
  padding: 0 48px 24px 24px;
  /* live: pr-12 */
  font-size: 14px;
  color: var(--lx-zinc-50);
  font-weight: 300;
  line-height: 1.75;
}

/* ---------- Latest Articles (live: 4:3 image, 18px title, xs gray date) */
.art-grid {
  gap: 24px;
  row-gap: 32px;
}

.art-wrap {
  border-radius: 8px;
  margin-bottom: 8px;
  height: auto;
  aspect-ratio: 4/3;
}

.art-img {
  transition: transform .3s;
}

.art-card:hover .art-img {
  transform: scale(1.1);
}

.art-title {
  font-size: 20px;
  line-height: 31.2px;
  font-weight: 400;
  letter-spacing: .5px;
  color: var(--lx-zinc-50);
  margin-bottom: 0;
  transition: color .3s;
}

.art-date {
  font-size: 12px;
  color: var(--lx-zinc-400);
  margin-top: 12px;
}

/* live's result counter: 14px zinc-300 at the body's light weight, with only
   the three numbers stepped up to 500 */
.pg-count {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--lx-zinc-300);
}

.pg-count span {
  font-weight: 500;
}

/* live pagination: one joined pill. Each cell pulls itself 1px left so it
   shares a border with its neighbour, and only the group's outer corners are
   rounded — that single hairline between cells is the whole look. */
.pg-group {
  position: relative;
  z-index: 0;
  display: inline-flex;
  border-radius: 6px;
}

.pg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -1px;
  background: #000;
  border: 1px solid rgba(248, 247, 247, .3);
  border-radius: 0;
  color: var(--lx-zinc-50);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 8px 16px;
  /* live: `transition ease-in-out duration-150`. Named so it also covers the
     border, which style.css's shorthand leaves out. */
  transition: color .15s cubic-bezier(.4, 0, .2, 1),
    background-color .15s cubic-bezier(.4, 0, .2, 1),
    border-color .15s cubic-bezier(.4, 0, .2, 1);
}

.pg-btn:first-child {
  margin-left: 0;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.pg-btn:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* the chevrons stay grey and sit a little tighter than the numbers — live uses
   8px here, widened to 12px so the arrows aren't cramped against their border */
.pg-btn--arrow {
  padding: 8px 12px;
  color: var(--lx-zinc-400);
}

/* Page links are anchors so they work without JS. */
a.pg-btn {
  text-decoration: none;
  text-align: center;
}

/* Live only darkens the fill on hover (hover:bg-zinc-800) and leaves the text
   and border alone. style.css still carries a pre-replica
   `.pg-btn:hover { background:#fff; color:#000; border-color:#fff }`; this rule
   beats it on background but not on the other two, so the number was rendering
   black on a near-black fill. Restate all three to close that gap.
   z-index lifts the hovered cell so its full border draws over its neighbour's. */
a.pg-btn:hover {
  z-index: 10;
  background: var(--lx-zinc-800);
  color: var(--lx-zinc-50);
  border-color: rgba(248, 247, 247, .3);
}

.pg-btn.active {
  z-index: 10;
  background: var(--lx-gold);
  border-color: var(--lx-gold-border);
  color: #000;
  cursor: default;
}

.pg-btn:disabled {
  background: #000;
  color: var(--lx-zinc-400);
  cursor: default;
}

/* ---------- Sticky bottom search bar — same live styling as hero search */
.sticky-search-inner {
  height: 96px;
  align-items: center;
  background: rgba(0, 0, 0, .7);
  border: 1px solid rgba(248, 247, 247, .9);
  border-radius: 12px;
  width: min(672px, 95vw);
  padding: 20px;
}

.ss-field {
  border-right: 1px solid rgba(201, 200, 197, .8);
  margin: 0 16px 0 0;
  padding: 0 16px 0 0;
}

.ss-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 4px;
}

.ss-val,
.ss-inp {
  font-family: var(--lx-font-body);
  font-size: 14px;
  color: var(--lx-zinc-300);
}

.ss-inp::placeholder {
  color: var(--lx-zinc-300);
}

.ss-btn {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: var(--lx-zinc-50);
  transition: all .15s;
}

.ss-btn i {
  color: #000;
  font-size: 16px;
}

.ss-btn:hover {
  background: var(--lx-gold);
}

/* ---------- Font Awesome family repair: the client's FA build maps
   .fa/.fa-solid/.fa-regular to "Font Awesome 6 Pro", which it doesn't ship.
   Point those legacy classes back at the free CDN font (loaded in header);
   fa-sharp/fa-brands keep the client's fonts. */
.fa,
.fas,
.fa-solid:not(.fa-sharp) {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.far,
.fa-regular:not(.fa-sharp) {
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
}

/* ============================================================
   FULLY OPERATED — feature grid, exact live values
   (measured on luxuri.com: h3 Mulish 24/32 w300 ls.6px balance,
    p Noto Sans 16/28 w300, icon 24px, 3 × 362.66px, gap 64px,
    my-16 = 64px, space-y-3 = 12px, colour zinc-50)
   ============================================================ */
.feat-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
  max-width: 1280px;
  /* 1216px content + 2 × 32px */
  margin: 64px auto;
  padding: 0 32px;
  text-align: left;
}

@media (max-width: 1000px) {
  .feat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .feat-grid {
    grid-template-columns: 1fr;
    padding: 0 24px;
  }
}

/* index.php sets an inline padding on each cell — live has none */
.feat-grid>div {
  padding: 0 !important;
}

.f-icon {
  margin-bottom: 12px;
  color: var(--lx-zinc-50);
  line-height: 1;
}

/* live: fa-xl on a 16px parent = exactly 24px */
.f-icon i {
  font-size: 24px;
  line-height: 1;
}

.f-title {
  font-family: var(--lx-font-accent);
  font-size: 24px;
  line-height: 32px;
  font-weight: 300;
  /* live inherits font-light — not 500 */
  letter-spacing: .025em;
  /* 0.6px */
  color: var(--lx-zinc-50);
  text-wrap: balance;
  /* live: balanced title line breaks */
  margin-bottom: 12px;
}

.f-text {
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 28px;
  font-weight: 300;
  color: var(--lx-zinc-50);
}

/* ---------- Fully Operated: tighter wrapper spacing (image → text and
   grid → next section). Grid's own 64px my-16 margins are live-exact. */
.op-body {
  padding: 40px 0 24px;
}

/* ---------- Tighten the gap above Recent Reviews (grid bottom margin +
   section top padding). Grid's top margin stays at live's 64px. */
.feat-grid {
  margin-bottom: 40px;
}

#reviews {
  padding-top: 20px;
}

/* ---------- Feature grid: tighter gap between the two rows (description →
   next row's icon). Column gap stays at live's 64px. */
.feat-grid {
  row-gap: 46px;
}

/* ---------- Fully Operated intro — exact live values
   (measured on luxuri.com: eyebrow Noto Sans 20/31.11 w400 ls 1px,
    h2 Mulish 32/38.4 w600 ls 0.8px balance, p Noto Sans 16/24 w300,
    both centred in a 672px column, 12px gaps) */
.op-eye {
  font-family: var(--lx-font-body);
  font-size: 20px;
  line-height: 31.11px;
  font-weight: 400;
  letter-spacing: .05em;
  /* 1px — was 3px */
  color: var(--lx-zinc-50);
  max-width: 672px;
  /* live: whole intro sits in a max-w-2xl column */
  margin: 0 auto 12px;
}

.op-title {
  font-family: var(--lx-font-accent);
  font-size: 32px;
  /* live text-3xl — was clamped to 28px */
  line-height: 38.4px;
  font-weight: 600;
  letter-spacing: .025em;
  /* 0.8px — was 5px */
  color: var(--lx-zinc-50);
  text-wrap: balance;
  max-width: 672px;
  /* live: max-w-2xl column */
  margin: 0 auto 12px;
}

.op-desc {
  font-family: var(--lx-font-body);
  font-size: 16px;
  /* was 15px */
  line-height: 24px;
  /* was 1.9 (28.5px) */
  font-weight: 300;
  color: var(--lx-zinc-50);
  max-width: 672px;
  /* live max-w-2xl — was 585px */
  margin: 0 auto;
}

/* ---------- Fully Operated photo: live's long eased fade into black.
   Live overlays `from-black/10 → via-black/20 80% → to-black 95%`, i.e. a
   gentle wash that only reaches solid black near the very bottom. The
   stock mask cut from #000 83% straight to transparent, which read as a
   hard edge — these extra stops ease it out instead. */
.op-img {
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%,
      #000 15%,
      #000 52%,
      rgba(0, 0, 0, .94) 65%,
      rgba(0, 0, 0, .82) 74%,
      rgba(0, 0, 0, .62) 82%,
      rgba(0, 0, 0, .38) 89%,
      rgba(0, 0, 0, .16) 95%,
      transparent 100%);
  mask-image: linear-gradient(to bottom,
      transparent 0%,
      #000 15%,
      #000 52%,
      rgba(0, 0, 0, .94) 65%,
      rgba(0, 0, 0, .82) 74%,
      rgba(0, 0, 0, .62) 82%,
      rgba(0, 0, 0, .38) 89%,
      rgba(0, 0, 0, .16) 95%,
      transparent 100%);
}

/* ---------- FAQ open state: live's card is one flat colour (bg-zinc-800)
   with the answer only 8px below the question (dd has mt-2). Ours tinted
   the question row and left a 24px gap. */
.faq-q:hover,
.faq-item.open .faq-q {
  background: transparent;
}

.faq-item.open .faq-q {
  padding-bottom: 8px;
}

/* ============================================================
   TRUSTED BY — exact live marquee spec (from luxuri.com's inline
   <style>): track gap 5rem, animation 30s linear, responsive steps,
   plain overflow clip (no edge mask), logos max-h-12 / max-w-48 @ 60%
   ============================================================ */
.mq-outer {
  width: calc(100% - 64px);
  max-width: 1216px;
  /* live clips at the max-w-7xl content box */
  margin: 0 auto;
  -webkit-mask-image: none;
  /* live has no fade at the edges */
  mask-image: none;
}

.mq-inner {
  gap: 80px;
  /* live: 5rem */
  animation-duration: 130s;
  /* slower than live's 30s, by request */
}

@media (max-width: 1024px) {
  .mq-inner {
    gap: 60px;
    animation-duration: 260s;
  }

  /* live: 25s */
}

@media (max-width: 768px) {
  .mq-outer {
    width: calc(100% - 48px);
  }

  .mq-inner {
    gap: 48px;
    animation-duration: 225s;
  }

  /* live: 20s */
}

@media (max-width: 640px) {
  .mq-inner {
    gap: 40px;
    animation-duration: 180s;
  }

  /* live: 15s */
}

/* live: <div class="max-w-48"><img class="max-h-12 w-auto object-contain"> */
.mq-inner img {
  height: auto;
  width: auto;
  max-height: 48px;
  max-width: 192px;
  object-fit: contain;
  opacity: .6;
}

/* ---------- More breathing room above Latest Articles */
#articles {
  padding-top: 40px;
}

/* ============================================================
   MOBILE — match live at small viewports (measured at 390 x 844)
   ============================================================ */
@media (min-width: 640px) {

  /* live: sm:text-5xl */
  .hero-title {
    font-size: 48px;
    line-height: 1;
  }
}

@media (max-width: 640px) {

  /* live mobile planner: full width of the 16px-gutter hero column,
       20px padding, 12px radius, black/70 like the desktop bar */
  .mobile-search {
    width: 100%;
  }

  .mobile-search-collapsed,
  .mobile-search-expanded {
    padding: 20px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .7);
    border: 1px solid rgba(248, 247, 247, .9);
  }

  /* live hero is ~90vh on mobile (760px at 844) — ours was 72vh */
  .hero {
    height: 90vh;
  }

  /* live search button is size-12 (48px), which sets the bar's 90px height */
  .mob-search-btn {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
  }

  /* the hero is centre-aligned, which was centring the bar's text —
       live keeps it left, label 14px/500, value 14px zinc-300 */
  .mobile-search {
    text-align: left;
  }

  .mob-dest-label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
  }

  .mob-dest-val {
    font-size: 14px;
    color: var(--lx-zinc-300);
    padding: 4px 0;
  }

  .mob-date-val {
    font-size: 12px;
    color: var(--lx-zinc-300);
  }

  /* live destination cards: 165px wide in a 12px-gap row */
  .slider-track:not(.rev-track) {
    gap: 12px;
  }

  .dest-card {
    width: calc((100% - 12px) / 2);
  }

  /* live keeps the intro block full-bleed inside the 24px gutters */
  .op2-inner,
  .feat-grid {
    padding: 0 24px;
  }
}

/* ---------- Divider above Popular Destinations (mobile).
   On live this line is the bottom edge of the hero video rather than a
   border, so we draw it explicitly to get the same separation. */
@media (max-width: 768px) {
  #popular {
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
}

/* ---------- Mobile sticky (bottom) search dropdowns.
   .mob-dest-dropdown had no styling at all, so the destination list and
   date picker floated transparently over the page. Give them the same
   panel treatment live uses for its dropdown. */
.mob-dest-dropdown {
  background: rgba(0, 0, 0, .9);
  border: 1px solid rgba(248, 247, 247, .9);
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  max-height: 58vh;
  overflow-y: auto;
}

.mob-dest-title {
  font-family: var(--lx-font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--lx-zinc-50);
  margin-bottom: 12px;
}

/* the hero bar's inline destination list gets the same panel */
#mobDestDropdown,
#mobDateDropdown {
  background: rgba(0, 0, 0, .55) !important;
  border: 1px solid rgba(248, 247, 247, .35);
  border-radius: 10px;
  padding: 14px !important;
}

/* ---------- Mobile: tighten the gap between Popular Destinations and
   Featured Villas (48px + 64px of stacked padding was too much at 390px) */
@media (max-width: 640px) {
  #popular {
    padding-bottom: 32px;
  }

  .lx-section[style*="padding-top:64px"] {
    padding-top: 34px !important;
  }
}

/* ---------- Vacation section on mobile: live keeps 24px side gutters
   (intro block runs L24 → R366 at 390px); ours was full-bleed. */
@media (max-width: 768px) {

  .op-eye,
  .op-title,
  .op-desc {
    /* inset the box itself (live: 342px wide at L24) rather than padding
       a full-bleed element, so wrapping and measurements both match */
    width: calc(100% - 48px);
    max-width: 672px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .feat-grid {
    padding: 0 24px;
  }
}

/* ---------- Mobile: live leaves 48px between the last FAQ card and the
   "Latest Articles" heading (ours stacked 40px + FAQ's 48px = 100px) */
@media (max-width: 768px) {
  #faq {
    padding-bottom: 24px;
  }

  #articles {
    padding-top: 12px;
  }
}

/* ---------- Bottom sticky search on mobile: live reuses the same planner
   panel it uses in the hero — bg-black/70 with a 2px backdrop blur, 20px
   padding (90px tall) and a 48px button. Ours was a near-solid
   rgba(22,22,22,.97) slab at 12px padding. */
@media (max-width: 768px) {

  .mob-sticky-collapsed,
  .mob-sticky-expanded {
    background: rgba(0, 0, 0, .7);
    border: 1px solid rgba(248, 247, 247, .9);
    border-radius: 12px;
    padding: 20px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: none;
  }

  .mob-sticky-btn {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 6px;
  }

  .mob-sticky-dest-label {
    font-size: 14px;
    font-weight: 500;
  }

  .mob-sticky-dest-val {
    font-size: 14px;
    color: var(--lx-zinc-300);
    padding: 4px 0;
  }

  .mob-sticky-dates {
    font-size: 12px;
    color: var(--lx-zinc-300);
  }
}