/* ============================================================
   PICK MY HOLIDAYS — ENHANCEMENTS CSS (v4 — no conflicts)
   Only additions: img hover, parallax, galleries, sections
   that are NOT already defined in main.css
   ============================================================ */

/* ── LAZY IMAGE placeholder ──────────────────────────────────── */
img[data-src] { background: var(--black-mid); filter: blur(6px); transition: filter .4s; }
img.loaded    { filter: blur(0); }

/* ── IMAGE HOVER EFFECTS ─────────────────────────────────────── */
.img-hover-zoom { overflow: hidden; display: block; }
.img-hover-zoom img { transition: transform .55s ease; }
.img-hover-zoom:hover img { transform: scale(1.07); }

.img-tilt {
  transition: transform .4s ease, box-shadow .4s ease;
  will-change: transform;
}
.img-tilt:hover {
  transform: perspective(800px) rotateX(2deg) rotateY(-2deg) scale(1.02);
  box-shadow: 6px 10px 36px rgba(0,0,0,.5);
}

/* ── PARALLAX IMAGE CONTAINERS ───────────────────────────────── */
.img-parallax-wrap  { overflow: hidden; position: relative; }
.img-parallax-inner { will-change: transform; }
.img-parallax-inner img { width: 100%; height: 115%; object-fit: cover; display: block; }

/* ── CLIP REVEAL ─────────────────────────────────────────────── */
.img-clip-reveal { clip-path: inset(0 100% 0 0); transition: clip-path .85s cubic-bezier(.77,0,.175,1); }
.img-clip-reveal.visible { clip-path: inset(0 0% 0 0); }

/* ── GALLERY STRIP (horizontal scroll) ──────────────────────── */
.gallery-strip {
  display: flex; gap: 14px; overflow-x: auto; padding: 8px 0 16px;
  scrollbar-width: thin; scrollbar-color: var(--orange) var(--black-mid);
}
.gallery-strip::-webkit-scrollbar { height: 4px; }
.gallery-strip::-webkit-scrollbar-track { background: var(--black-mid); }
.gallery-strip::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 2px; }
.gallery-strip-item { flex-shrink: 0; width: 240px; height: 165px; border-radius: var(--radius); overflow: hidden; }
.gallery-strip-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gallery-strip-item:hover img { transform: scale(1.07); }

/* ── HERO SLIDE CAPTION (inner pages) ───────────────────────── */
.hero-slide-caption {
  position: absolute; bottom: 110px; right: 36px;
  background: rgba(0,0,0,.5); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,106,0,.3); border-radius: 8px;
  padding: 9px 18px; font-size: .78rem; color: var(--white-muted);
  letter-spacing: 1px; z-index: 5; opacity: 0; transition: opacity .6s .8s;
}
.hero-slide.active .hero-slide-caption { opacity: 1; }
@media (max-width: 767px) { .hero-slide-caption { display: none; } }

/* ── CONTACT HERO IMAGE ──────────────────────────────────────── */
.contact-hero-img { position: relative; border-radius: var(--radius-lg); overflow: hidden; height: 340px; }
.contact-hero-img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .contact-hero-img { height: 220px; } }

/* ── ABOUT SECTION responsive ────────────────────────────────── */
@media (max-width: 576px) {
  .about-story-img { height: 240px; }
  .about-img-badge { bottom: 12px; left: 12px; padding: 10px 14px; }
}

/* ── FULL BANNER responsive ──────────────────────────────────── */
@media (max-width: 400px) { .full-banner { height: 180px; } }