:root{
  /* overridable at runtime by JS */
  --hero-url: url('https://images.unsplash.com/photo-1492684223066-81342ee5ff30?q=80&w=2400&auto=format&fit=crop');
  --hero-overlay: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45));

  --tile-bg: #fff;
  --tile-border: rgba(0,0,0,.08);
  --muted: #6c757d;
}

/* ===== base safety ===== */
html,body{overflow-x:hidden}
img{max-width:100%;height:auto;display:block}

/* ===== HERO ===== */
.hero{
  background-image: var(--hero-overlay), var(--hero-url);
  background-size: cover;
  background-position: center;
  color: #fff;
  min-height: 92vh;
  display: flex;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
}
.hero .container{
  padding-top: clamp(3.5rem, 10vh, 8rem);
  padding-bottom: clamp(3rem, 8vh, 7rem);
}
.badge-soft{background:rgba(255,255,255,.25);color:#fff;letter-spacing:.08em}
#wdCounter .display-6{min-width:3ch}

/* ===== shared surfaces ===== */
.shadow-tiny{box-shadow:0 8px 28px rgba(0,0,0,.06)}
.tile{
  background:var(--tile-bg);
  border:1px solid var(--tile-border);
  border-radius:1rem;
}
.link-quiet{color:inherit;text-decoration:none}
.link-quiet:hover{text-decoration:underline}

/* ===== EVENTS (glassy cards over background) ===== */
.events-bg{
  --events-bg:url('https://images.unsplash.com/photo-1522673607200-164d1b6ce486?q=80&w=2400&auto=format&fit=crop');
  background-image:var(--events-bg);
  background-size:cover;
  background-position:center;
  position:relative;
  padding:4rem 0;
}
@media (min-width:992px){ .events-bg{ padding:5.5rem 0 } }

/* overlay must never block clicks */
.events-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.55));
  pointer-events:none; z-index:0;
}
/* content above overlay */
#events .container{position:relative; z-index:1}

/* glassy card */
.glass{
  background:rgba(255,255,255,.08);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:1rem;
}
#events .card-body{color:#fff}
#events iframe{width:100%;height:100%;border:0;display:block}

/* ===== ENTOURAGE (centered table) ===== */
.ent-bg{background:#f3f3f3}
.entourage-table{
  width:100%;
  table-layout:fixed !important;
  --bs-table-bg:transparent; /* kill Bootstrap bg */
  background:transparent;
  text-align:center;
  margin:0;
}
.entourage-table th,
.entourage-table td{
  background:transparent !important;
  border:0;
  padding:10px 8px;
  vertical-align:middle;
}

/* hard column widths (mirrored) */
.entourage-table col.col-left  { width:48% }
.entourage-table col.col-sep   { width:8px }
.entourage-table col.col-right { width:48% }
/* fallback if <colgroup> is missing */
.entourage-table td:nth-child(1){width:48%}
.entourage-table td:nth-child(2){
  width:8px;min-width:8px;padding-left:0;padding-right:0;text-align:center;
}
.entourage-table td:nth-child(3){width:48%}

/* headings – keep bold */
.entourage-table .ent-head,
.entourage-table .ent-subhead{
  font-weight:800 !important;
  color:var(--muted);
  letter-spacing:.02em;
}
.entourage-table .ent-head{font-size:1.125rem}
@media (max-width:576px){ .entourage-table .ent-head{font-size:1rem} }

/* small dot separator */
.ent-sep{text-align:center;opacity:.6}
.ent-dot{display:inline-block;transform:translateY(-.08em)}

/* spacer row without white bars */
.ent-pad td{padding:6px 0 !important;background:transparent !important;border:0}

/* === OVERRIDES: tighten center & add top spacing === */

/* 1) Minimize center gap */
.entourage-table td:nth-child(2){width:4px;min-width:4px}
.entourage-table td{padding-left:6px;padding-right:6px}

/* 2) Give left/right columns a touch more width to squeeze center */
.entourage-table td:nth-child(1),
.entourage-table td:nth-child(3){width:calc((100% - 4px)/2)}

/* 3) Add space above the “Entourage” heading block */
#entourage .text-center.mb-3{margin-top:1rem}
@media(min-width:992px){#entourage .text-center.mb-3{margin-top:1.5rem}}

/* ===== gallery thumbs (used on gallery page) ===== */
.photo-card{
  display:block;border-radius:12px;overflow:hidden;
  border:1px solid var(--tile-border);background:var(--tile-bg);
}
.photo-card .ratio{aspect-ratio:1/1}
.photo-card .thumb{width:100%;height:100%;object-fit:cover;display:block}

/* ===== tiny utils ===== */
.object-cover{object-fit:cover}

/* ensure text never becomes transparent */
.entourage-table td { color: inherit !important; }

/* ---- tighten entourage center gap ---- */
.entourage-table{
  border-collapse: collapse;   /* kill implicit gaps between cells */
  border-spacing: 0;
}

/* shrink the dot column to 2px and remove its padding */
.entourage-table td:nth-child(2){
  width:2px; min-width:2px;
  padding-left:0 !important; padding-right:0 !important;
  text-align:center;
}

/* slightly trim horizontal padding on left/right cells */
.entourage-table td:nth-child(1),
.entourage-table td:nth-child(3){
  padding-left:6px; padding-right:6px;
}

/* tiny dot so the column reads as a hairline */
.ent-dot{ font-size:.75rem; line-height:1; transform:translateY(-.05em); }

/* optional: a touch more space above the "Entourage" section heading */
#entourage .text-center.mb-3{ margin-top:1.25rem; }
@media (min-width:992px){ #entourage .text-center.mb-3{ margin-top:1.75rem; } }

/* Make the hamburger visible on translucent nav backgrounds */
.navbar .navbar-toggler {
  outline: none;
}

/* Make toggler crisp on translucent nav */
.navbar .navbar-toggler:focus { box-shadow:none; }

/* Drawer width + comfortable tap targets */
@media (max-width: 991.98px){
  .offcanvas.offcanvas-end { width: min(85vw, 250px); }
  #navDrawer .nav-link { font-size:1.05rem; }
}
