/* ============================================================
   MEDIA.CSS — media-ready framework (Phase 1)
   Loaded AFTER landing.css so these rules win.
   Purpose: every image/video slot looks intentional & premium
   even before real media exists, and dropping media in later
   is a one-line swap. Fully reversible — delete this file +
   its <link> to revert.
   ============================================================ */

/* Real media (img OR video) fills any media container edge-to-edge */
.media-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Elegant branded placeholder (hero & any slot) ---------- */
.media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
  background: linear-gradient(150deg, #24355A 0%, #131E35 58%, #0C1424 100%);
  color: var(--cream);
  overflow: hidden;
}

/* Slow gold sheen so the slot feels alive, not broken */
.media-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(201,168,76,0.12) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: mediaShimmer 3.4s ease-in-out infinite;
}
@keyframes mediaShimmer {
  0%   { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

.media-placeholder__icon {
  position: relative;
  z-index: 1;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--gold);
  border: 1.5px solid rgba(201,168,76,0.55);
  background: rgba(201,168,76,0.08);
  padding-left: 4px; /* optically center a ▶ glyph */
}
.media-placeholder__label {
  position: relative;
  z-index: 1;
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.media-placeholder__hint {
  position: relative;
  z-index: 1;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-light);
  opacity: 0.85;
}

/* ---------- Gallery upgrade: premium, "intentional placeholder" ---------- */
/* Captions always visible (was hover-only) so tiles read as finished */
.gallery-item-overlay {
  opacity: 1 !important;
  background: linear-gradient(to top, rgba(12,20,36,0.92) 0%, rgba(12,20,36,0.12) 55%, rgba(12,20,36,0.20) 100%) !important;
}
/* Navy scrim mutes the loud gradients into something on-brand */
.gallery-item-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(19,30,53,0.42);
}
/* Small "coming soon" badge — auto-hides once you add the has-photo class */
.gallery-item:not(.has-photo)::after {
  content: '📷 Photo coming soon';
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
  background: rgba(242,237,228,0.92);
  padding: 5px 10px;
  border-radius: 30px;
}
/* When a real photo is dropped in: add class "has-photo" + an <img class="media-fill"> */
.gallery-item.has-photo .gallery-item-bg,
.gallery-item.has-photo .gallery-item-icon { display: none; }
.gallery-item .media-fill { position: absolute; inset: 0; z-index: 1; }

/* ---------- Signature cocktail tiles: unify with premium look ---------- */
/* Subtle navy depth over the per-drink gradients — richer, less neon,
   cohesive with the muted gallery. Keeps each drink's color identity. */
.cocktail-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(19, 30, 53, 0.22);
  pointer-events: none;
}
.cocktail-glass-icon { opacity: 0.38 !important; }

/* ---------- Hero editorial plate (photo-free premium, replaces placeholder) ---------- */
.hero-plate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 22px;
  padding: 40px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(201,168,76,0.10) 0%, transparent 55%),
    linear-gradient(160deg, #24355A 0%, #131E35 60%, #0C1424 100%);
  color: var(--cream);
}
.hero-plate__eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.hero-plate__rule {
  width: 46px;
  height: 1px;
  background: rgba(201,168,76,0.7);
}
.hero-plate__quote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.25;
  color: var(--cream);
  max-width: 16ch;
}
.hero-plate__mark {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ============================================================
   PLACEHOLDER PHOTOS (temporary stock — swap for real event photos)
   All live in /assets/media/stock/. Delete this block to revert
   to the photo-free editorial look. Reversible & self-contained.
   ============================================================ */
/* Hero — real photo replaces the editorial plate */
.hero-media {
  background-image: url('/assets/media/stock/hero.jpg');
  background-size: cover;
  background-position: center;
}
.hero-plate { display: none; }

/* Gallery — real photos */
.gallery-item-icon { display: none; }
.gallery-item:not(.has-photo)::after { content: none; } /* hide 'photo coming soon' */
.gallery-item-bg::after { background: rgba(12,20,36,0.26); }   /* lighter scrim over photo */
.gallery-item-overlay {
  background: linear-gradient(to top, rgba(12,20,36,0.90) 0%, rgba(12,20,36,0.05) 48%) !important;
}
.gallery-bg-1 { background-image: url('/assets/media/stock/gallery-1.jpg'); background-size: cover; background-position: center; }
.gallery-bg-2 { background-image: url('/assets/media/stock/gallery-2.jpg'); background-size: cover; background-position: center; }
.gallery-bg-3 { background-image: url('/assets/media/stock/gallery-3.jpg'); background-size: cover; background-position: center; }
.gallery-bg-4 { background-image: url('/assets/media/stock/gallery-4.jpg'); background-size: cover; background-position: center; }
.gallery-bg-5 { background-image: url('/assets/media/stock/gallery-5.jpg'); background-size: cover; background-position: center; }
.gallery-bg-6 { background-image: url('/assets/media/stock/gallery-6.jpg'); background-size: cover; background-position: center; }

/* Signature cocktails — real photos */
.cocktail-glass-icon { display: none; }
.cocktail-image::before { background: rgba(12,20,36,0.16); }
.cocktail-image-paloma   { background-image: url('/assets/media/stock/cocktail-paloma.jpg');   background-size: cover; background-position: center; }
.cocktail-image-pacific  { background-image: url('/assets/media/stock/cocktail-spritz.jpg');    background-size: cover; background-position: center; }
.cocktail-image-mule     { background-image: url('/assets/media/stock/cocktail-espresso.jpg');  background-size: cover; background-position: center; }
.cocktail-image-hibiscus { background-image: url('/assets/media/stock/cocktail-margarita.jpg'); background-size: cover; background-position: center; }

@media (prefers-reduced-motion: reduce) {
  .media-placeholder::before { animation: none; opacity: 0; }
}