/* ============================================================
   XO Club Dubai PR — Luxury Nightclub Theme
   ============================================================ */

/* ── Color Tokens ───────────────────────────────────────── */
:root {
  --gold:        #C9A84C;
  --gold-light:  #E8C97A;
  --gold-dark:   #9A7A2E;
  --bg:          #080808;
  --bg-alt:      #0f0f0f;
  --bg-card:     #131313;
  --border:      rgba(201, 168, 76, 0.18);
  --border-hover:rgba(201, 168, 76, 0.55);
  --text:        #F0F0F0;
  --text-muted:  #888;
}

/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Lato', sans-serif !important;
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar               { width: 6px; }
::-webkit-scrollbar-track         { background: var(--bg); }
::-webkit-scrollbar-thumb         { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover   { background: var(--gold); }

/* ── Header / Nav ───────────────────────────────────────── */
header {
  background: rgba(8, 8, 8, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--border) !important;
}

header nav a.brand-link {
  background: linear-gradient(120deg, #fff 30%, var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  letter-spacing: -0.01em;
}

header nav .nav-links a {
  color: #bbb;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s;
}
header nav .nav-links a:hover { color: var(--gold) !important; }

/* Mobile nav */
header nav .nav-links {
  background: var(--bg) !important;
  border-color: var(--border) !important;
}

/* ── Gold Divider ───────────────────────────────────────── */
.gold-divider {
  display: block;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 14px auto 0;
}

/* ── Hero Section ───────────────────────────────────────── */
.xo-hero {
  position: relative;
  background: linear-gradient(180deg, #111 0%, var(--bg) 100%) !important;
  overflow: hidden;
}
.xo-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 55% at 50% -10%,
    rgba(201, 168, 76, 0.10) 0%, transparent 70%);
  pointer-events: none;
}
.xo-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ── Section Alternation ───────────────────────────────── */
.xo-section {
  background: var(--bg) !important;
}
.xo-section-alt {
  background: var(--bg-alt) !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ── Section Headings ───────────────────────────────────── */
.xo-heading {
  color: var(--text) !important;
  letter-spacing: -0.025em;
}
.xo-heading-gold {
  background: linear-gradient(135deg, #fff 40%, var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Cards ──────────────────────────────────────────────── */
.xo-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important;
}
.xo-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-hover) !important;
  box-shadow: 0 8px 32px rgba(201, 168, 76, 0.08) !important;
}

/* ── Buttons ─────────────────────────────────────────────── */
.xo-btn-primary {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%) !important;
  color: #050505 !important;
  font-weight: 700 !important;
  border: none !important;
  letter-spacing: 0.04em;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s !important;
  text-shadow: none !important;
}
.xo-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(201, 168, 76, 0.35) !important;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-light) 60%, var(--gold) 100%) !important;
}

.xo-btn-outline {
  border: 1px solid var(--gold) !important;
  color: var(--gold) !important;
  background: transparent !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s !important;
}
.xo-btn-outline:hover {
  background: rgba(201, 168, 76, 0.1) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(201, 168, 76, 0.15) !important;
}

/* ── Star Rating ─────────────────────────────────────────── */
.text-star { color: var(--gold) !important; }

/* ── Gold Link ───────────────────────────────────────────── */
.xo-link {
  color: var(--gold) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.xo-link:hover { color: var(--gold-light) !important; }

/* ── Muted Text ──────────────────────────────────────────── */
.xo-muted { color: var(--text-muted) !important; }

/* ── Review Rating Row ───────────────────────────────────── */
.xo-rating-link {
  color: var(--gold) !important;
  font-weight: 600;
}
.xo-rating-link:hover { color: var(--gold-light) !important; }

/* ── Social Section ──────────────────────────────────────── */
.xo-social {
  background: var(--bg-alt) !important;
  border-top: 1px solid var(--border);
}
.xo-social img {
  opacity: 0.75;
  transition: opacity 0.2s, transform 0.2s;
}
.xo-social a:hover img {
  opacity: 1;
  transform: scale(1.1);
}

/* ── Footer ──────────────────────────────────────────────── */
footer, .xo-footer {
  background: var(--bg) !important;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}

/* ── Contact Info ────────────────────────────────────────── */
.xo-contact-icon { color: var(--gold); }

/* ── Photo Gallery ───────────────────────────────────────── */
.xo-gallery-wrap {
  gap: 6px !important;
}
.xo-gallery-wrap a {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--border);
  transition: border-color 0.3s;
}
.xo-gallery-wrap a:hover {
  border-color: var(--border-hover);
}
.xo-gallery-img,
.xo-gallery-wrap img {
  transition: transform 0.4s ease, filter 0.3s ease !important;
  filter: brightness(0.85) saturate(0.9);
}
.xo-gallery-wrap a:hover .xo-gallery-img,
.xo-gallery-wrap a:hover img {
  transform: scale(1.06) !important;
  filter: brightness(1) saturate(1.1);
}

/* ── Map ─────────────────────────────────────────────────── */
.xo-map iframe,
iframe[src*="maps"] {
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  filter: brightness(0.85) saturate(0.8);
  width: 100%;
}

/* ── Blog Cards Grid ─────────────────────────────────────── */
.xo-blog-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}
@media (min-width: 768px) {
  .xo-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .xo-blog-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ensure cards in the grid always fill height */
.xo-blog-grid .xo-card {
  width: 100% !important;
  max-width: none !important;
  height: 100%;
}
.xo-blog-grid .xo-card .flex-1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* preview text — clamp to 4 lines */
.xo-blog-grid .whitespace-pre-wrap {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal !important;
  color: #ccc;
  line-height: 1.7;
  flex: 1;
}

/* ── Blog Post Content ───────────────────────────────────── */
.xo-post-content p {
  color: #ccc;
  line-height: 1.85;
}

/* ── Page Hero Banner (inner pages) ─────────────────────── */
.xo-page-hero {
  padding: 4rem 1.5rem 3rem;
  text-align: center;
  background: linear-gradient(180deg, #111 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.xo-page-hero::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ── Headings — consistent spacing ─────────────────────── */
h1.ld-break-words,
h2.ld-break-words {
  letter-spacing: -0.025em;
}

/* ── Section padding consistency ───────────────────────── */
.xo-section-content {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding: 3rem 1.5rem;
}

/* ── Nav phone link style ───────────────────────────────── */
header nav .nav-links a[href^="tel:"] {
  color: var(--gold) !important;
  font-weight: 700;
}

/* ── Hero rating stars row ──────────────────────────────── */
.xo-hero .flex.gap-0\.5 {
  gap: 3px;
}

/* ── "Write a review" strip ─────────────────────────────── */
.xo-review-strip {
  background: var(--bg-alt) !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 3rem 1.5rem;
  text-align: center;
}