/**
 * Themed static banners for legal & contact pages (Home keeps video hero).
 */

.luxe-page-banner {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  height: clamp(200px, 34vh, 380px);
  overflow: hidden;
  border-radius: 0 0 20px 20px;
  background: var(--luxe-bg, #1f1a2e);
}

.luxe-page-banner__media {
  position: absolute;
  inset: 0;
}

.luxe-page-banner__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.luxe-page-banner--has-photo .luxe-page-banner__photo {
  opacity: 0.55;
}

.luxe-page-banner__icon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: var(--luxe-accent, #d4af77);
  filter: drop-shadow(0 8px 32px rgba(212, 175, 119, 0.35));
  pointer-events: none;
}

.luxe-page-banner__icon svg {
  display: block;
  width: clamp(72px, 12vw, 120px);
  height: clamp(72px, 12vw, 120px);
  margin: 0 auto;
  flex-shrink: 0;
}

.luxe-page-banner--has-photo .luxe-page-banner__icon svg {
  width: clamp(56px, 10vw, 96px);
  height: clamp(56px, 10vw, 96px);
}

.luxe-page-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(31, 26, 46, 0.4) 0%,
    rgba(31, 26, 46, 0.75) 55%,
    rgba(31, 26, 46, 0.95) 100%
  );
}

/* Themed gradients when no custom photo */
.luxe-page-banner--privacy .luxe-page-banner__media {
  background: radial-gradient(ellipse at 50% 30%, rgba(232, 168, 200, 0.2), transparent 55%),
    var(--luxe-bg);
}

.luxe-page-banner--terms .luxe-page-banner__media,
.luxe-page-banner--usage .luxe-page-banner__media {
  background: radial-gradient(ellipse at 40% 40%, rgba(212, 175, 119, 0.22), transparent 50%),
    var(--luxe-bg);
}

.luxe-page-banner--conduct .luxe-page-banner__media {
  background: radial-gradient(ellipse at 60% 35%, rgba(232, 168, 200, 0.15), transparent 50%),
    var(--luxe-bg);
}

.luxe-page-banner--returns .luxe-page-banner__media {
  background: radial-gradient(ellipse at 50% 50%, rgba(212, 175, 119, 0.18), transparent 52%),
    var(--luxe-bg);
}

.luxe-page-banner--security .luxe-page-banner__media {
  background: radial-gradient(ellipse at 50% 25%, rgba(232, 168, 200, 0.18), transparent 48%),
    radial-gradient(ellipse at 70% 70%, rgba(212, 175, 119, 0.12), transparent 45%),
    var(--luxe-bg);
}

.luxe-page-banner--contact .luxe-page-banner__media {
  background: radial-gradient(ellipse at 50% 40%, rgba(212, 175, 119, 0.2), transparent 55%),
    var(--luxe-bg);
}

.luxe-page-banner--support .luxe-page-banner__media {
  background: radial-gradient(ellipse at 45% 30%, rgba(232, 168, 200, 0.18), transparent 52%),
    radial-gradient(ellipse at 60% 75%, rgba(212, 175, 119, 0.16), transparent 48%),
    var(--luxe-bg);
}

.luxe-page-banner--app .luxe-page-banner__media {
  background: radial-gradient(ellipse at 50% 35%, rgba(212, 175, 119, 0.22), transparent 55%),
    radial-gradient(ellipse at 30% 70%, rgba(232, 168, 200, 0.14), transparent 50%),
    var(--luxe-bg);
}

.luxe-page-banner--history .luxe-page-banner__media {
  background: radial-gradient(ellipse at 35% 30%, rgba(232, 168, 200, 0.2), transparent 52%),
    radial-gradient(ellipse at 70% 75%, rgba(212, 175, 119, 0.16), transparent 48%),
    var(--luxe-bg);
}

.luxe-page-banner--team .luxe-page-banner__media {
  background: radial-gradient(ellipse at 50% 40%, rgba(212, 175, 119, 0.22), transparent 55%),
    var(--luxe-bg);
}

.luxe-page-banner--careers .luxe-page-banner__media {
  background: radial-gradient(ellipse at 45% 35%, rgba(232, 168, 200, 0.14), transparent 50%),
    radial-gradient(ellipse at 60% 70%, rgba(212, 175, 119, 0.18), transparent 45%),
    var(--luxe-bg);
}

.luxe-page-banner--privacy .luxe-page-banner__icon {
  color: var(--luxe-primary, #e8a8c8);
}