/* Container – single */
.rude-overlay-container {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  height: 60vh;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.rude-overlay-bg,
.rude-overlay-bg-embed { position: absolute; inset: 0; width: 100%; height: 100%; }
.rude-overlay-bg { object-fit: cover; filter: brightness(.58); }
.rude-overlay-bg-embed iframe { width: 100%; height: 100%; border: 0; }

.rude-overlay-content {
  z-index: 2;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* Grid items */
.rude-overlay-grid-item {
  position: relative;
  height: 340px;
  cursor: pointer;
  transition: transform .4s ease, box-shadow .4s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.rude-overlay-grid-item:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0,0,0,.3);
}
.rude-overlay-grid-bg,
.rude-overlay-grid-bg-embed { position: absolute; inset: 0; width: 100%; height: 100%; }
.rude-overlay-grid-bg { object-fit: cover; filter: brightness(.55); transition: filter .4s ease; }
.rude-overlay-grid-item:hover .rude-overlay-grid-bg { filter: brightness(.72); }
.rude-overlay-grid-bg-embed iframe { width: 100%; height: 100%; border: 0; }

.rude-overlay-grid-text {
  z-index: 2;
  transition: all .4s ease;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.rude-overlay-grid-item:hover .rude-overlay-grid-text { transform: translate(-50%, -52%) scale(1.05); }

/* Fade-in for videos/images */
.ro-fade-in { opacity: 0; animation: roFade .9s ease forwards; }
@keyframes roFade { to { opacity: 1; } }

/* Title/subtle animations */
.ro-anim-title { opacity: 0; transform: translateY(6px); animation: roPop .6s .2s ease forwards; }
.ro-anim-sub   { opacity: 0; transform: translateY(6px); animation: roPop .6s .35s ease forwards; }
@keyframes roPop { to { opacity: 1; transform: none; } }

/* Theme blending (auto by default) */
.ro-theme .rude-overlay-bg,
.ro-theme .rude-overlay-grid-bg { filter: brightness(.58); }
@media (prefers-color-scheme: dark) {
  .ro-theme .rude-overlay-bg,
  .ro-theme .rude-overlay-grid-bg { filter: brightness(.5) saturate(1.05); }
}

/* Buttons (settings-driven styles) */
.ro-btn-lg, .ro-btn-sm {
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.ro-btn-lg { padding: .6rem 1.2rem; font-weight: 600; }
.ro-btn-sm { padding: .35rem .9rem; font-weight: 600; font-size: .875rem; }

/* Defaults (light) */
.ro-btn-lg, .ro-btn-sm { background: #ffffff; color: #111; border: 1px solid rgba(0,0,0,.1); }
.ro-btn-lg:hover, .ro-btn-sm:hover { filter: brightness(.96); }

/* Primary variant (when JS adds .ro-btn-primary) */
.ro-btn-primary { background: #6b7bff !important; color: #fff !important; border-color: #6b7bff !important; }
.ro-btn-outline { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.7) !important; }

/* Modal polish */
.ro-modal { background: #0b0e16; border-radius: 1rem; overflow: hidden; }
.ro-modal .modal-body { background: linear-gradient(180deg, rgba(15,18,26,.9), rgba(15,18,26,.92)); }
.ro-modal .btn-close { filter: invert(1); }

/* Respect admin-chosen theme overrides */
.ro-theme.ro-force-light .rude-overlay-bg,
.ro-theme.ro-force-light .rude-overlay-grid-bg { filter: brightness(.8); }
.ro-theme.ro-force-dark .rude-overlay-bg,
.ro-theme.ro-force-dark .rude-overlay-grid-bg { filter: brightness(.45) saturate(1.05); }