/* ===============================================================
   SPLENDOR SAFARI — HOME CAROUSEL (v1.6)
   - Category-based CTA theming (same as tour cards)
   =============================================================== */
.hero-carousel-wrap{width:100vw;margin-left:calc(50% - 50vw);position:relative;overflow:hidden;box-shadow:0 4px 32px rgba(0,0,0,.08)}
    .hero-carousel{display:flex;transition:transform .54s cubic-bezier(.4,.85,.2,1)}
    .hero-slide{min-width:100vw;height:360px;position:relative;display:flex;align-items:flex-end}
    .hero-slide img{width:100%;height:100%;object-fit:cover}
    .hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08) 20%,rgba(0,0,0,.35) 100%)}
    .hero-caption{position:absolute;left:20px;bottom:24px;color:#fff;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);padding:14px 16px;border-radius:12px;max-width:86vw}
    .hero-caption h1{margin:0 0 6px 0;font:600 1.1rem/1.2 Poppins,system-ui}
    .hero-caption p{margin:0;font:400 .88rem/1.3 Poppins,system-ui}
    .hero-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.82);border:none;color:#2d3142;font-size:1.6rem;width:42px;height:42px;border-radius:50%;cursor:pointer}
    .hero-arrow.left{left:10px}.hero-arrow.right{right:10px}
    .hero-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
    .hero-dot{width:12px;height:12px;border-radius:50%;background:#f57c00;opacity:.7;border:2px solid #fff}
    .hero-dot.active{opacity:1}
    @media (max-width:900px){.hero-slide{height:220px}.hero-caption{left:8px;bottom:8px}}
    
.carousel-cta {
  --cta:#f57c00; --cta-hover:#e96a00; /* default */
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--cta);color:#fff;font-weight:600;font-size:0.92rem;
  padding:.52rem 1.08rem;border-radius:999px;text-decoration:none;border:none;cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
  transition:transform .18s ease,background .18s ease;
}
.carousel-cta:hover { background:var(--cta-hover); transform:translateY(-1px); }
.carousel-cta:focus-visible { outline:3px solid color-mix(in srgb,#e4d964 55%,#fff); outline-offset:3px; }

/* ---------- Themed CTA colors per category ---------- */
.carousel-slide.cat-budget    .carousel-cta { --cta:#2e8b57; --cta-hover:#257a4c; }
.carousel-slide.cat-mid-luxury .carousel-cta { --cta:#4a89dc; --cta-hover:#3f7ac6; }
.carousel-slide.cat-luxury    .carousel-cta { --cta:#9b59b6; --cta-hover:#8648a1; }
.carousel-slide.cat-premium   .carousel-cta { --cta:#e67e22; --cta-hover:#cf6f1c; }

/* home-carousel.css - No major changes needed, but ensure responsiveness */
.hero-carousel-wrap {
  position: relative;
  overflow: hidden;
}

.hero-carousel {
  display: flex;
  transition: transform 0.5s ease;
}

.hero-slide {
  flex: 0 0 100%;
  position: relative;
}

.hero-slide img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
}

.hero-caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.left {
  left: 10px;
}

.right {
  right: 10px;
}

.hero-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
}

.hero-dot {
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
}

.hero-dot.active {
  background: #007bff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-slide img {
    height: 300px;
  }
}

/*new carosel*/

/* ===== HERO – single source of truth (overrides old duplicates) ===== */
.hero-carousel-wrap{width:100vw;margin-left:calc(50% - 50vw);position:relative;overflow:hidden;box-shadow:0 4px 32px rgba(0,0,0,.08)}
.hero-carousel{display:flex;transition:transform .54s cubic-bezier(.4,.85,.2,1)}

.hero-slide{flex:0 0 100vw; height:420px; position:relative}
.hero-slide > a{display:block; width:100%; height:100%; position:relative}

.hero-slide img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block; /* kill inline-gap */
}

/* Subtle full-width gradient for caption contrast (not half-screen) */
.hero-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.45) 100%);
}

.hero-caption{
  position:absolute; left:20px; bottom:24px; color:#fff;
  background:rgba(0,0,0,.35); backdrop-filter:blur(2px);
  padding:14px 16px; border-radius:12px; max-width:86vw
}
.hero-caption h1{margin:0 0 6px 0;font:600 1.1rem/1.2 Poppins,system-ui}
.hero-caption p{margin:0;font:400 .9rem/1.35 Poppins,system-ui}

/* Destination chips row inside caption */
.hero-dest-row{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.4rem;align-items:center}
.hero-dest-label{opacity:.9;font-weight:600;margin-right:.25rem}
.chip-dest{
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.22);
  font-size:.8rem; padding:.28rem .5rem; border-radius:999px
}

.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.85); border:none; color:#2d3142;
  font-size:1.6rem; width:42px; height:42px; border-radius:50%; cursor:pointer
}
.hero-arrow.left{left:10px}
.hero-arrow.right{right:10px}

.hero-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.hero-dot{width:12px;height:12px;border-radius:50%;background:#f57c00;opacity:.7;border:2px solid #fff}
.hero-dot.active{opacity:1}

@media (max-width:900px){
  .hero-slide{height:260px}
  .hero-caption{left:8px; bottom:8px; padding:10px 12px}
}


/*new*/
/* Make the anchor fill the whole slide so the image can be full width/height */
.hero-slide a.hero-slide-link{
  display:block;
  width:100%;
  height:100%;
  position:relative; /* makes overlay & caption anchor-relative (cleaner) */
}

/* Ensure the image really fills the full visible area */
.hero-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Keep overlay full-bleed; a touch gentler for readability */
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.12) 20%, rgba(0,0,0,.42) 100%);
}

/* Caption + small meta chips + destinations line */
.hero-caption{
  position:absolute;
  left:20px; bottom:24px;
  color:#fff;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(2px);
  padding:14px 16px;
  border-radius:12px;
  max-width:86vw;
}
.hero-meta-row{
  display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.35rem; margin-bottom:.2rem;
}
.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.32rem .5rem; border-radius:999px;
  font-size:.82rem; line-height:1;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25);
}
.chip.strong{ font-weight:700; background:rgba(255,255,255,.22); }

.hero-dest{
  margin:.25rem 0 0 0;
  font:400 .88rem/1.3 Poppins,system-ui;
}

/* Safety: slide still full-viewport width */
.hero-slide{ min-width:100vw; height:360px; position:relative; display:flex; align-items:flex-end; }
@media (max-width:900px){
  .hero-slide{ height:220px; }
  .hero-caption{ left:8px; bottom:8px; }
}

/* new Destination chips row inside caption */
.hero-dest-row{
  display:flex;
  gap:.35rem;
  flex-wrap:wrap;
  margin-top:.3rem;
}

/* Slightly different look from meta chips for variety */

/* Transparent destination chips in hero caption */
.chip-dest{
  background: transparent;              /* no fill */
  border: 1px solid rgba(255,255,255,.55);
  color: #fff;
  padding: .28rem .5rem;
  font-size: .8rem;
  line-height: 1;
  backdrop-filter: none;                 /* ensure no blur */
  box-shadow: none;                      /* no glow */
  text-shadow: 0 1px 2px rgba(0,0,0,.45);/* keeps text readable on bright images */
}

.hero-dest-row{                          /* (unchanged, included for clarity) */
  display:flex;
  gap:.35rem;
  flex-wrap:wrap;
  margin-top:.3rem;
}

/* Force transparent hero chips (no fill, no blur, no shadow) */
.hero-caption .chip,
.hero-caption .chip-dest,
.hero-caption .chip-dest::before,
.hero-caption .chip-dest::after,
.hero-caption .chip::before,
.hero-caption .chip::after{
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Keep them readable without blocking the photo */
.hero-caption .chip,
.hero-caption .chip-dest{
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  padding: .28rem .5rem;
  line-height: 1;
  font-size: .8rem;
}

/* Optional: no fill on hover/focus either */
.hero-caption .chip:hover,
.hero-caption .chip-dest:hover,
.hero-caption .chip:focus-visible,
.hero-caption .chip-dest:focus-visible{
  background: transparent !important;
  border-color: rgba(255,255,255,.75);
}


/* ===== HERO CAROUSEL — HARD OVERRIDES (fix half image / half shadow) ===== */
.hero-carousel-wrap{width:100vw;margin-left:calc(50% - 50vw);position:relative;overflow:hidden}

.hero-carousel{display:flex;transition:transform .54s cubic-bezier(.4,.85,.2,1) !important}

.hero-slide{
  flex:0 0 100vw !important;
  height:420px !important;
  position:relative !important;
  display:block !important;
  overflow:hidden !important;
}

/* Make the link fill the whole slide (prevents 50% layouts) */
.hero-slide > a{
  display:block !important;
  width:100% !important;
  height:100% !important;
  position:relative !important;
}

/* Full-bleed image pinned to all edges */
.hero-slide img{
  position:absolute !important;
  inset:0 !important;            /* top/right/bottom/left:0 */
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  z-index:0 !important;
}

/* Only a subtle bottom gradient — not a side shadow */
.hero-overlay{
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.45) 100%) !important;
  z-index:1 !important;
}

/* Caption above overlay */
.hero-caption{
  position:absolute !important;
  left:20px !important; bottom:24px !important;
  color:#fff !important;
  background:rgba(0,0,0,.35) !important;
  backdrop-filter:blur(2px) !important;
  padding:14px 16px !important;
  border-radius:12px !important;
  max-width:86vw !important;
  z-index:2 !important;
}

/* Kill any leftover pseudo-elements that might be painting a half shadow */
.hero-slide::before,
.hero-slide::after,
.hero-slide > a::before,
.hero-slide > a::after{
  content:none !important;
}

/* Keep your arrows/dots as you had them */
@media (max-width:900px){
  .hero-slide{ height:260px !important; }
}
/*new  */
/* ===== HERO CAPTION — MOBILE COMPACT MODE ===== */

/* Base (desktop/tablet) — keep your current look, just style the new classes */
.hero-caption .hero-title{margin:0 0 6px 0}
.hero-caption .hero-meta{margin:0}
.hero-caption .hero-dest-label{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.22);
  font-weight:600; letter-spacing:.1px;
}
.hero-caption .hero-duration{opacity:.95}
.hero-caption .hero-duration::before{
  content:"·"; margin:0 .45rem; opacity:.75;
}
.hero-caption .hero-meta :first-child.hero-duration::before{ content:""; margin:0 }

/* ------- Compact at <= 768px ------- */
@media (max-width: 768px){
  .hero-caption{
    left:10px !important; bottom:10px !important;
    padding:8px 10px !important; border-radius:10px !important;
    max-width:90vw !important; background:rgba(0,0,0,.28) !important;
    backdrop-filter:blur(1.5px);
  }
  .hero-caption .hero-title{
    font:600 .95rem/1.15 Poppins,system-ui !important;
    margin:0 0 4px 0 !important;
  }
  .hero-caption .hero-excerpt{
    font:.78rem/1.2 Poppins,system-ui !important;
    margin:0 0 4px 0 !important;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  }
  .hero-caption .hero-meta{
    font:.74rem/1.1 Poppins,system-ui !important;
    letter-spacing:.1px;
  }
  .hero-caption .hero-dest-label{
    font:.66rem/1 Poppins,system-ui !important;
    padding:2px 6px !important; border-radius:999px !important;
  }
  .hero-caption .hero-duration{ font-size:.5rem !important; }
  .hero-caption .hero-duration::before{ margin:0 .35rem !important; }
}

/* ------- Ultra-compact at <= 420px ------- */
@media (max-width: 420px){
  .hero-caption{
    left:8px !important; bottom:8px !important;
    padding:6px 8px !important; border-radius:8px !important;
    max-width:96vw !important;
  }
  .hero-caption .hero-title{
    font:500 .56rem/1.1 Poppins,system-ui !important;
    letter-spacing:-.1px;
  }
  .hero-caption .hero-excerpt{
    font:.5rem/1.15 Poppins,system-ui !important;
    -webkit-line-clamp:1;           /* squeeze to a single line on very small phones */
  }
  .hero-caption .hero-meta{ font:.56rem/1.1 Poppins,system-ui !important; }
  .hero-caption .hero-dest-label{ font:.5rem/1 Poppins,system-ui !important; padding:2px 6px !important; }
  .hero-caption .hero-duration{ font-size:.52rem !important; }
  .hero-caption .hero-duration::before{ margin:0 .3rem !important; }
}