/**
 * Belgrade Theme — Beli Grad Companion Styles
 * Additional component refinements layered on top of style.css.
 * Design system: "Beli Grad" (The White City)
 */

/* ═══════════════════════════════════════
   River Divider between major homepage sections
   ═══════════════════════════════════════ */
.bel-featured + .bel-districts,
.bel-districts + .bel-advantages,
.bel-advantages + .bel-testimonials,
.bel-testimonials + .bel-blog-preview,
.bel-blog-preview + .bel-cta {
  position: relative;
}
.bel-featured + .bel-districts::before,
.bel-districts + .bel-advantages::before,
.bel-testimonials + .bel-blog-preview::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: var(--bgd-gradient-river);
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
}

/* ═══════════════════════════════════════
   Enhanced card hover — copper left-bar stagger
   ═══════════════════════════════════════ */
.bel-featured__grid .bel-hotel-card:nth-child(2)::before { transition-delay: 60ms; }
.bel-featured__grid .bel-hotel-card:nth-child(3)::before { transition-delay: 120ms; }
.bel-featured__grid .bel-hotel-card:nth-child(4)::before { transition-delay: 60ms; }
.bel-featured__grid .bel-hotel-card:nth-child(5)::before { transition-delay: 120ms; }
.bel-featured__grid .bel-hotel-card:nth-child(6)::before { transition-delay: 180ms; }

/* ═══════════════════════════════════════
   Gallery brutalist gap highlight
   ═══════════════════════════════════════ */
.bel-gallery__grid {
  background: var(--bgd-neutral-900);
}

/* ═══════════════════════════════════════
   Stat count-up: Literata accent font for numbers
   ═══════════════════════════════════════ */
.bel-advantages__value {
  font-family: var(--bgd-font-heading);
}

/* ═══════════════════════════════════════
   Testimonials quote mark float animation
   ═══════════════════════════════════════ */
@keyframes bgd-quote-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.bel-testimonials__quote::before {
  animation: bgd-quote-float 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bel-testimonials__quote::before {
    animation: none;
  }
}

/* ═══════════════════════════════════════
   Section accent bars on scroll
   ═══════════════════════════════════════ */
.bel-featured__title::after,
.bel-content__title::after,
.bel-rooms__title::after,
.bel-amenities__title::after,
.bel-reviews__title::after {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--bgd-transition-heavy);
}
.reveal.is-visible .bel-featured__title::after,
[data-animate].bel-animate--visible .bel-featured__title::after,
.reveal.is-visible .bel-content__title::after,
[data-animate].bel-animate--visible .bel-content__title::after,
.reveal.is-visible .bel-rooms__title::after,
[data-animate].bel-animate--visible .bel-rooms__title::after,
.reveal.is-visible .bel-amenities__title::after,
[data-animate].bel-animate--visible .bel-amenities__title::after,
.reveal.is-visible .bel-reviews__title::after,
[data-animate].bel-animate--visible .bel-reviews__title::after {
  transform: scaleX(1);
}

/* ═══════════════════════════════════════
   Blog category page refinements
   ═══════════════════════════════════════ */
.bl-search-q {
  width: 100%;
  padding: var(--bgd-space-sm) var(--bgd-space-md);
  border: 1px solid var(--bgd-neutral-200);
  border-radius: var(--bgd-radius-md);
  font-family: var(--bgd-font-body);
  font-size: var(--bgd-text-small);
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.bl-search-q::placeholder { color: var(--bgd-neutral-400); }
.bl-search-q:focus {
  outline: none;
  border-color: var(--bgd-accent);
  background: rgba(255,255,255,0.12);
}
.ah-search-btn {
  background: none;
  border: none;
  color: var(--bgd-neutral-300);
  cursor: pointer;
  padding: var(--bgd-space-sm);
}
.ah-search-btn:hover { color: #fff; }

.ah-hero-eyebrow + .ah-hero-rule + .ah-hero-heading {
  margin-top: 0;
}

/* ═══════════════════════════════════════
   Scrollbar styling (webkit)
   ═══════════════════════════════════════ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bgd-neutral-100);
}
::-webkit-scrollbar-thumb {
  background: var(--bgd-neutral-300);
  border-radius: var(--bgd-radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--bgd-neutral-400);
}

/* ═══════════════════════════════════════
   Selection color
   ═══════════════════════════════════════ */
::selection {
  background: var(--bgd-secondary);
  color: #fff;
}
::-moz-selection {
  background: var(--bgd-secondary);
  color: #fff;
}