/* Buisier Dev — shared tokens & rules used across every page.
   Page-specific layout stays inline (mirrors the source design 1:1 for easy diffing). */

:root {
  --bd-navy: rgb(22, 37, 64);
  --bd-navy-2: rgb(37, 61, 106);
  --bd-navy-3: rgb(123, 149, 198);
  --bd-ink: rgb(0, 0, 0);
  --bd-grey: rgb(137, 137, 137);
  --bd-grey-light: rgb(216, 216, 216);
  --bd-surface: rgb(241, 241, 241);
  --bd-white: rgb(255, 255, 255);
  --bd-error: rgb(200, 60, 60);
  --bd-font: Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--bd-font);
  color: var(--bd-ink);
  background: var(--bd-white);
}

a { text-decoration: none; }

button { font-family: inherit; }

img { max-width: 100%; display: block; }

@keyframes bd-fade { from { opacity: 0; } to { opacity: 1; } }

/* Villa collection card hover-swap */
.villa-img-hover { opacity: 0; transition: opacity 0.45s ease; }
.villa-card:hover .villa-img-hover { opacity: 1; }

/* Shop product card hover */
.bd-product-img { transition: opacity 0.3s ease; }
.bd-product-card:hover .bd-product-img { opacity: 0.9; }

/* Generic full-bleed photo placeholder */
.bd-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--bd-surface);
}

.bd-input::placeholder,
.bd-field::placeholder { color: rgb(153, 153, 153); }

nav a, footer a { color: var(--bd-navy-2); }
nav a:hover, footer a:hover { color: var(--bd-navy); }

/* Scroll-reveal: fade + rise + slight scale-up, applied once as content
   enters the viewport. Pure CSS transition (no animation library) so it
   stays cheap. The .reveal-d1..d4 classes add a per-item transition-delay
   so items in the same grid row cascade in one after another instead of
   arriving all at once (see initScrollReveal in site.js). */
.reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.reveal-d1.is-visible { transition-delay: 0.2s; }
.reveal-d2.is-visible { transition-delay: 0.4s; }
.reveal-d3.is-visible { transition-delay: 0.6s; }
.reveal-d4.is-visible { transition-delay: 0.8s; }
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Any inline two/three-column grid tagged with this class collapses to a
   single column on narrow viewports. The !important is required because
   the desktop column layout is set via the inline style attribute (this
   codebase's convention) and only an !important external rule can win
   over that without duplicating every grid inline. */
@media (max-width: 760px) {
  .bd-grid-stack {
    grid-template-columns: 1fr !important;
  }
}

/* Villa "Location highlights" style stat row: N items spread evenly across
   a line on desktop. Equal-width grid columns (count set inline per villa,
   matching how many items it has) so each item's text centers on an evenly
   spaced point -- flex+gap centering looked lopsided whenever one item's
   text was much longer than the others, since equal gaps between edges
   still leaves unequal spacing between each item's visual center. Below
   760px it becomes a clean single-column stack instead of wrapping. */
.bd-stat-row {
  display: grid;
  gap: 28px 24px;
  justify-items: center;
}
@media (max-width: 760px) {
  .bd-stat-row {
    grid-template-columns: 1fr !important;
  }
}

/* Villa photo lightbox */
.bd-lightbox-trigger {
  cursor: zoom-in;
}
.bd-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(10, 14, 22, 0.94);
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5vw, 64px);
}
.bd-lightbox.is-open {
  display: flex;
}
.bd-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 2px;
  background: transparent;
}
.bd-lightbox-close {
  position: absolute;
  top: clamp(14px, 3vw, 28px);
  right: clamp(14px, 3vw, 28px);
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: rgb(255, 255, 255);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
}