/**
 * Hero Slideshow — a background image layer that shows either a single
 * image or a cross-fading carousel behind hero overlay content.
 *
 * Used by the "Hero Slideshow" GrapesJS block (webroot/js/admin-page-blocks.js).
 * Cross-fade is pure CSS (no JS) so it is unaffected by the site CSP, which
 * drops inline scripts. Only the per-slide `background-image` and the
 * `--lc-hero-cycle` timing are inline (dynamic, author-supplied values).
 */

/* Ready-made hero section shipped by the block. Drop-in usable on its own;
   the .lc-hero-slideshow layer can also be placed inside an existing hero. */
.lc-hero-section {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    display: flex;
    align-items: center;
    color: #fff;
}

.lc-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 48px 0;
}

/* Background media layer — fills its positioned parent. */
.lc-hero-slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.lc-hero-slides,
.lc-hero-slide,
.lc-hero-overlay {
    position: absolute;
    inset: 0;
}

.lc-hero-slide {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* Slides stay opaque by default; only the slide currently fading in is
       transparent, and it fades in ON TOP of the others — so the background
       (dark fallback) is never exposed between transitions. */
    opacity: 1;
    will-change: opacity;
}

/* Darkening gradient so overlay text stays readable over any image.
   Must sit ABOVE the slides — the crossfade gives slides a positive z-index
   (up to 3), so the overlay needs a higher one or the images paint over it. */
.lc-hero-overlay {
    z-index: 6;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.58) 55%,
        rgba(0, 0, 0, 0.48) 100%
    );
}

/* Single image (mode = image, or a one-image carousel): no animation. */
.lc-hero-slideshow--n1 .lc-hero-slide {
    opacity: 1;
    animation: none;
}

/* Carousel — seamless cross-fade.
   Each slide dissolves IN over the currently-visible slide (z-index 3 while
   fading), holds on top through its window, then drops behind (z-index 1) while
   the next slide dissolves in over it. Because every non-fading slide stays at
   opacity 1, at least one image always fully covers the background — so there
   is no dark frame between transitions. Loop length = --lc-hero-cycle;
   per-slide delay = cycle / N * index. */
.lc-hero-slideshow--n2 .lc-hero-slide,
.lc-hero-slideshow--n3 .lc-hero-slide,
.lc-hero-slideshow--n4 .lc-hero-slide,
.lc-hero-slideshow--n5 .lc-hero-slide {
    animation-duration: var(--lc-hero-cycle, 15s);
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* N = 2 */
.lc-hero-slideshow--n2 .lc-hero-slide { animation-name: lc-hero-fade-2; }
.lc-hero-slideshow--n2 .lc-hero-slide:nth-child(1) { animation-delay: calc(var(--lc-hero-cycle, 15s) / 2 * 0); }
.lc-hero-slideshow--n2 .lc-hero-slide:nth-child(2) { animation-delay: calc(var(--lc-hero-cycle, 15s) / 2 * 1); }
@keyframes lc-hero-fade-2 {
    0%     { opacity: 0; z-index: 3; }
    10%    { opacity: 1; z-index: 3; }
    50%    { opacity: 1; z-index: 3; }
    50.01% { opacity: 1; z-index: 1; }
    100%   { opacity: 1; z-index: 1; }
}

/* N = 3 */
.lc-hero-slideshow--n3 .lc-hero-slide { animation-name: lc-hero-fade-3; }
.lc-hero-slideshow--n3 .lc-hero-slide:nth-child(1) { animation-delay: calc(var(--lc-hero-cycle, 15s) / 3 * 0); }
.lc-hero-slideshow--n3 .lc-hero-slide:nth-child(2) { animation-delay: calc(var(--lc-hero-cycle, 15s) / 3 * 1); }
.lc-hero-slideshow--n3 .lc-hero-slide:nth-child(3) { animation-delay: calc(var(--lc-hero-cycle, 15s) / 3 * 2); }
@keyframes lc-hero-fade-3 {
    0%     { opacity: 0; z-index: 3; }
    7%     { opacity: 1; z-index: 3; }
    33.33% { opacity: 1; z-index: 3; }
    33.34% { opacity: 1; z-index: 1; }
    100%   { opacity: 1; z-index: 1; }
}

/* N = 4 */
.lc-hero-slideshow--n4 .lc-hero-slide { animation-name: lc-hero-fade-4; }
.lc-hero-slideshow--n4 .lc-hero-slide:nth-child(1) { animation-delay: calc(var(--lc-hero-cycle, 15s) / 4 * 0); }
.lc-hero-slideshow--n4 .lc-hero-slide:nth-child(2) { animation-delay: calc(var(--lc-hero-cycle, 15s) / 4 * 1); }
.lc-hero-slideshow--n4 .lc-hero-slide:nth-child(3) { animation-delay: calc(var(--lc-hero-cycle, 15s) / 4 * 2); }
.lc-hero-slideshow--n4 .lc-hero-slide:nth-child(4) { animation-delay: calc(var(--lc-hero-cycle, 15s) / 4 * 3); }
@keyframes lc-hero-fade-4 {
    0%     { opacity: 0; z-index: 3; }
    6%     { opacity: 1; z-index: 3; }
    25%    { opacity: 1; z-index: 3; }
    25.01% { opacity: 1; z-index: 1; }
    100%   { opacity: 1; z-index: 1; }
}

/* N = 5 */
.lc-hero-slideshow--n5 .lc-hero-slide { animation-name: lc-hero-fade-5; }
.lc-hero-slideshow--n5 .lc-hero-slide:nth-child(1) { animation-delay: calc(var(--lc-hero-cycle, 15s) / 5 * 0); }
.lc-hero-slideshow--n5 .lc-hero-slide:nth-child(2) { animation-delay: calc(var(--lc-hero-cycle, 15s) / 5 * 1); }
.lc-hero-slideshow--n5 .lc-hero-slide:nth-child(3) { animation-delay: calc(var(--lc-hero-cycle, 15s) / 5 * 2); }
.lc-hero-slideshow--n5 .lc-hero-slide:nth-child(4) { animation-delay: calc(var(--lc-hero-cycle, 15s) / 5 * 3); }
.lc-hero-slideshow--n5 .lc-hero-slide:nth-child(5) { animation-delay: calc(var(--lc-hero-cycle, 15s) / 5 * 4); }
@keyframes lc-hero-fade-5 {
    0%     { opacity: 0; z-index: 3; }
    5%     { opacity: 1; z-index: 3; }
    20%    { opacity: 1; z-index: 3; }
    20.01% { opacity: 1; z-index: 1; }
    100%   { opacity: 1; z-index: 1; }
}

/* Empty-state prompt shown in the editor before images are picked. */
.lc-hero-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    color: #6b7280;
    background: #f3f4f6;
    font-size: 0.95rem;
}

/* Respect users who prefer reduced motion — show the first slide only. */
@media (prefers-reduced-motion: reduce) {
    .lc-hero-slide { animation: none !important; opacity: 0; }
    .lc-hero-slide:first-child { opacity: 1; }
}