/* ==========================================================================
   Light City Church Core — fallback styles.
   The child theme owns the full design system. This file only guarantees the
   plugin's shortcodes and widgets stay legible if the theme is swapped out.
   Every rule is scoped and every token has a fallback value.
   ========================================================================== */

.lcc-placeholder {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg,
    var(--lcc-bone, #F2F1EE) 0 12px, #EAE9E5 12px 24px);
  border: 1px solid var(--lcc-line, #E2E1DD);
  color: var(--lcc-ash, #6E6E73);
  overflow: hidden;
}

.lcc-placeholder::after {
  content: attr(data-label);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.75rem 1.25rem;
  background: var(--lcc-paper, #fff);
  border: 1px solid var(--lcc-line, #E2E1DD);
  max-width: 80%;
}

.lcc-placeholder[data-ratio="16x9"] { aspect-ratio: 16 / 9; }
.lcc-placeholder[data-ratio="21x9"] { aspect-ratio: 21 / 9; }
.lcc-placeholder[data-ratio="4x5"]  { aspect-ratio: 4 / 5; }
.lcc-placeholder[data-ratio="3x2"]  { aspect-ratio: 3 / 2; }
.lcc-placeholder[data-ratio="1x1"]  { aspect-ratio: 1 / 1; }
.lcc-placeholder[data-ratio="hero"] { position: absolute; inset: 0; height: 100%; }

.lcc-placeholder--video {
  background: var(--lcc-ink, #0B0B0C);
  border-color: var(--lcc-line-dark, #2A2A2E);
}
.lcc-placeholder--video::after {
  background: transparent;
  border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.75);
}

.lcc-video { width: 100%; height: 100%; object-fit: cover; }

.lcc-empty {
  padding: 1.25rem;
  border: 1px dashed var(--lcc-line, #ddd);
  color: var(--lcc-ash, #666);
  font-size: 0.9rem;
}

/* Elementor's editor preview needs the marquee visible but not animating,
   otherwise the canvas fights the editor's own drag handles. */
.elementor-editor-active .lcc-marquee__track { animation-play-state: paused; }