/* assets/public/widgets/gallery.css
   Hero slideshow widget. Frosted-glass overlay card with two themes — dark
   (default) for light/busy backgrounds, light for dark backgrounds.

   Animation architecture
   ──────────────────────
   The slide PARENT (.wgt-gallery__slide) uses a regular opacity transition
   for crossfading. That has to be symmetric (in AND out) so it stays as a
   transition.

   The slide CHILDREN (image, overlay-box, title, text, button) use @keyframes
   animations triggered when the parent gets `--active`. This is bulletproof:
   each animation has explicit `from` and `to` states defined in the keyframes,
   so the browser doesn't have to detect a state change — it just runs the
   animation from start to finish whenever the class is added.

   When `--active` is removed, the animation declaration goes away and each
   child reverts to its base CSS (which is the visible default state). That's
   fine because the parent is fading out at the same time, hiding the snap.

   This approach replaced an earlier transition-based version that had subtle
   timing/cascade issues across browsers. Animations are universally supported
   since 2014 and don't depend on transition-direction edge cases. */


/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.wgt-gallery--full-width {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
}


/* ── Viewport ────────────────────────────────────────────────────────────── */

.wgt-gallery__viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 6;
    overflow: hidden;
    background: var(--surface-primary);
}


/* ── Slide (parent — uses transition for symmetric crossfade) ────────────── */

.wgt-gallery__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.4s ease-out;
}

.wgt-gallery__slide--active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}


/* ── Image (child — keyframe animation) ──────────────────────────────────── */
/* Slides in horizontally from translateX(40px). Runs immediately when --active
   is added, no delay.

   When a slide has a per-viewport mobile image, the markup is <picture><source
   media=...><img></picture> — the <img> still matches the descendant selectors
   below, but <picture> itself needs to be block-sized to fill the slide. */

.wgt-gallery__slide picture {
    display: block;
    width: 100%;
    height: 100%;
}

.wgt-gallery__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.wgt-gallery__slide--active img {
    animation: wgt-gallery-img-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes wgt-gallery-img-in {
    from {
        transform: translateX(40px);
    }

    to {
        transform: translateX(0);
    }
}


/* ── Dot indicators ──────────────────────────────────────────────────────── */
/* Always white-stroke since they sit directly on the image, not inside the
   overlay-box. */

.wgt-gallery__indicators {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 5;
}

.wgt-gallery__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.65);
    background: transparent;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition:
        background 0.2s ease-out,
        border-color 0.2s ease-out,
        transform 0.2s ease-out;
}

.wgt-gallery__dot:hover {
    border-color: #fff;
    transform: scale(1.25);
}

.wgt-gallery__dot--active {
    background: #fff;
    border-color: #fff;
    transform: scale(1.4);
}


/* ── Overlay positioning ─────────────────────────────────────────────────── */

.wgt-gallery__overlay {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    width: clamp(280px, 40%, 520px);
    z-index: 3;
    pointer-events: none;
}


/* ── Overlay box — frosted-glass card, themable + keyframe entrance ──────── */
/* Lifts up from translateY(24px) + fades in. Delay 0.2s after the slide
   crossfade has mostly resolved. */

.wgt-gallery__overlay-box {
    position: relative;
    pointer-events: auto;
    padding: 20px 28px;
    border-radius: 20px;
    border: 1px solid;
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
}

.wgt-gallery__slide--active .wgt-gallery__overlay-box {
    animation: wgt-gallery-box-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

@keyframes wgt-gallery-box-in {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark variant — default. Dark glass card, white text. */
.wgt-gallery__overlay-box--dark {
    background: rgba(15, 25, 35, 0.42);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.20);
}

/* Light variant — light glass card, brand-navy text. */
.wgt-gallery__overlay-box--light {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 12px 40px rgba(15, 25, 35, 0.12);
}


/* ── Title / description / button — cascade animation ────────────────────── */
/* All three use the same wgt-gallery-cascade keyframe, with staggered delays.
   Delays are timed to start AFTER the overlay-box has finished its entrance
   (box: 0.2s delay + 0.6s duration = 0.8s end). Title starts at 0.4s so it's
   visible during the second half of the box's entrance — feels coordinated. */

.wgt-gallery__slide-title {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wgt-gallery__slide-text {
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wgt-gallery__slide--active .wgt-gallery__slide-title {
    animation: wgt-gallery-cascade 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

.wgt-gallery__slide--active .wgt-gallery__slide-text {
    animation: wgt-gallery-cascade 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}

.wgt-gallery__slide--active .wgt-gallery__slide-btn {
    animation: wgt-gallery-cascade 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}

@keyframes wgt-gallery-cascade {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ── Theme-specific text colors ──────────────────────────────────────────── */

.wgt-gallery__overlay-box--dark .wgt-gallery__slide-title,
.wgt-gallery__overlay-box--dark .wgt-gallery__slide-text {
    color: #fff;
}

.wgt-gallery__overlay-box--light .wgt-gallery__slide-title {
    color: var(--color-brand-primary);
}

.wgt-gallery__overlay-box--light .wgt-gallery__slide-text {
    color: var(--color-label-secondary, var(--color-brand-primary));
}


/* ── Button styling (animation declared above; here just visual + hover) ─── */

.wgt-gallery__slide-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-body);
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid;
    transition: background 0.2s ease-out, box-shadow 0.2s ease-out;
}

/* Dark theme — glass button on a glass card */
.wgt-gallery__overlay-box--dark .wgt-gallery__slide-btn {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.30);
    color: #fff;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.wgt-gallery__overlay-box--dark .wgt-gallery__slide-btn:hover {
    background: rgba(255, 255, 255, 0.24);
}

/* Light theme — solid brand-primary CTA */
.wgt-gallery__overlay-box--light .wgt-gallery__slide-btn {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(42, 68, 90, 0.22);
}

.wgt-gallery__overlay-box--light .wgt-gallery__slide-btn:hover {
    background: rgba(42, 68, 90, 0.92);
    box-shadow: 0 6px 20px rgba(42, 68, 90, 0.32);
}


/* ── Optional widget header (above the slideshow) ────────────────────────── */

.wgt-gallery__header {
    margin-bottom: 24px;
    text-align: center;
}

.wgt-gallery__title {
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 700;
    color: var(--color-brand-primary);
    margin: 0 0 8px;
}

.wgt-gallery__desc {
    font-size: 15px;
    color: var(--color-label-secondary);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}


/* ── Empty state ─────────────────────────────────────────────────────────── */

.wgt-gallery__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 24px;
    color: var(--color-label-quaternary);
    font-size: 13px;
    border: 2px dashed var(--separator-default);
    border-radius: 20px;
}


/* ── Reduced motion — kill animations for users with the OS setting on ──── */

@media (prefers-reduced-motion: reduce) {

    .wgt-gallery__slide,
    .wgt-gallery__slide--active img,
    .wgt-gallery__slide--active .wgt-gallery__overlay-box,
    .wgt-gallery__slide--active .wgt-gallery__slide-title,
    .wgt-gallery__slide--active .wgt-gallery__slide-text,
    .wgt-gallery__slide--active .wgt-gallery__slide-btn {
        animation: none !important;
        transition: opacity 0.2s ease-out !important;
    }
}


/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 734px) {
    .wgt-gallery__viewport {
        aspect-ratio: 4 / 3;
    }

    .wgt-gallery__overlay {
        width: 100%;
        left: 0;
        padding: 0 20px;
    }

    .wgt-gallery__overlay-box {
        padding: 16px 20px;
    }

    .wgt-gallery__indicators {
        right: 12px;
        gap: 8px;
    }

    .wgt-gallery__dot {
        width: 10px;
        height: 10px;
    }
}
/* Dots: same look, 24px hit area (the visible ring is drawn by ::after). */
.wgt-gallery__dot {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    box-shadow: none;
    position: relative;
    transform: none;
}

.wgt-gallery__dot::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition:
        background 0.2s ease-out,
        border-color 0.2s ease-out,
        transform 0.2s ease-out;
}

.wgt-gallery__dot:hover {
    transform: none;
}

.wgt-gallery__dot:hover::after {
    border-color: #fff;
    transform: scale(1.25);
}

.wgt-gallery__dot--active {
    transform: none;
}

.wgt-gallery__dot--active::after {
    background: #fff;
    border-color: #fff;
    transform: scale(1.4);
}