/**
 * KW Room Gallery — Zimmer-Galerie Widget (#9)
 * Premium-Galerie mit CSS-Crossfade, Underline-Thumbnails,
 * Glassmorphism-Nav, Scroll-Reveal und Dark Mode.
 *
 * Modi: cardless (Standard, Detailseite) | card (data-kwl-card)
 */

/* @property Schutz: verhindert dass alte SLIDER-Werte mit "px" die Crossfade-Dauer brechen */
@property --kwl-gal-crossfade {
	syntax: '<time>';
	inherits: true;
	initial-value: 500ms;
}

/* ==========================================================================
   1. Custom Properties
   ========================================================================== */

.kw-gallery {
    --kwl-gal-easing: var(--kwl-ease-default);
    --kwl-gal-crossfade: 500ms;

    /* Card-Modus */
    --kwl-gal-card-padding: var(--kwl-space-md, 1rem);

    /* Image */
    --kwl-gal-image-radius: var(--kwl-radius-md, 8px);

    /* Navigation */
    --kwl-gal-nav-size: 44px;
    --kwl-gal-nav-bg: rgb(0 0 0 / 0.45);
    --kwl-gal-nav-bg-hover: rgb(0 0 0 / 0.65);
    --kwl-gal-nav-color: var(--kwl-btn-text, #ffffff);

    /* Glassmorphism */
    --kwl-gal-glass-border: rgb(255 255 255 / 0.15);
    --kwl-gal-glass-blur: blur(8px);

    /* Thumbnails */
    --kwl-gal-thumb-size: 56px;
    --kwl-gal-thumb-gap: 8px;
    --kwl-gal-thumb-radius: 6px;

    /* Counter — solider Gold-Akzent für zuverlässigen Kontrast auf jedem Bild */
    --kwl-gal-counter-bg: var(--kwl-accent, #BD9B5C);
    --kwl-gal-counter-color: #00315d;

    /* Text */
    --kwl-gal-heading-color: var(--kwl-text, #1a202c);
    --kwl-gal-desc-color: var(--kwl-text-muted, #718096);

    /* Ken Burns */
    --kwl-gal-ken-burns-duration: 8s;

    /* Accent & Focus */
    --kwl-gal-accent: var(--kwl-accent, #BD9B5C);
    --kwl-gal-focus-color: var(--kwl-focus, #7B6835);

    /* Indicator (Gold-Underline statt Border-Ring) */
    --kwl-gal-indicator-height: 2px;

    /* Loading-State */
    --kwl-gal-loading-bg: color-mix(in srgb, var(--kwl-text, #1a202c) 6%, var(--kwl-bg, #ffffff));
}

/* Mobile-First: kleinere Thumbnails unter 401px */
@media (max-width: 400px) {
    .kw-gallery {
        --kwl-gal-thumb-size: 40px;
        --kwl-gal-thumb-gap: 6px;
    }
}

/* ==========================================================================
   2. Galerie-Modi: Cardless vs. Card
   ========================================================================== */

/* Gold-Akzentlinie oben — visueller Anker, konsistent mit data-kwl-card */
.kw-gallery {
    border-top: 3px solid var(--kwl-gal-accent);
    border-radius: var(--kwl-radius-lg, 12px) var(--kwl-radius-lg, 12px) 0 0;
}

/* Cardless (Standard): kein Card-Chrome, Container bestimmt Breite */
.kw-gallery[data-kwg-mode="cardless"] {
    padding: 0;
    background: none;
    border-right: none;
    border-bottom: none;
    border-left: none;
    box-shadow: none;
}

/* Card-Modus: Padding um die Galerie */
.kw-gallery[data-kwg-mode="card"] {
    padding: var(--kwl-gal-card-padding);
}

/* ==========================================================================
   3. Stage + Crossfade
   ========================================================================== */

.kw-gallery__stage {
    position: relative;
    overflow: hidden;
    border-radius: var(--kwl-gal-image-radius);
}

/* Klick auf Bild öffnet Lightbox — JS setzt diese Klasse */
.kw-gallery__stage--clickable {
    cursor: pointer;
}

.kw-gallery__stage[data-aspect="16-9"] { aspect-ratio: 16 / 9; }
.kw-gallery__stage[data-aspect="4-3"]  { aspect-ratio: 4 / 3; }
.kw-gallery__stage[data-aspect="3-2"]  { aspect-ratio: 3 / 2; }
.kw-gallery__stage[data-aspect="1-1"]  { aspect-ratio: 1 / 1; }
.kw-gallery__stage[data-aspect="21-9"] { aspect-ratio: 21 / 9; }

.kw-gallery__slides {
    position: absolute;
    inset: 0;
}

.kw-gallery__slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--kwl-gal-crossfade) var(--kwl-gal-easing);
    background: var(--kwl-gal-loading-bg);
}

.kw-gallery__slide.is-active {
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
}

/* Bild-Styling: Hohe Spezifität überschreibt Theme-Resets */
.kw-gallery .kw-gallery__slide img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
}

/* Loading-State: dezenter Pulse bis Bild geladen */
.kw-gallery__slide:not(.is-loaded)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        transparent 25%,
        color-mix(in srgb, var(--kwl-text, #1a202c) 4%, transparent) 50%,
        transparent 75%
    );
    background-size: 200% 100%;
    animation: kwg-loading-pulse 1.5s ease-in-out;
    animation-fill-mode: forwards;
    pointer-events: none;
}

@keyframes kwg-loading-pulse {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* Ken Burns: Langsamer Zoom auf aktivem Slide */
.kw-gallery[data-ken-burns="yes"] .kw-gallery__slide img {
    transform: scale(1);
    transition: transform var(--kwl-gal-crossfade) var(--kwl-gal-easing);
}

.kw-gallery[data-ken-burns="yes"] .kw-gallery__slide.is-active img {
    transform: scale(1.03);
    transition: transform var(--kwl-gal-ken-burns-duration, 8s) var(--kwl-gal-easing);
}

/* ==========================================================================
   4. Arrows (Glassmorphism + IconService SVGs)
   ========================================================================== */

.kw-gallery .kw-gallery__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--kwl-gal-nav-size);
    height: var(--kwl-gal-nav-size);
    padding: 0;
    border: 1px solid var(--kwl-gal-glass-border);
    border-radius: 50%;
    background: var(--kwl-gal-nav-bg);
    color: var(--kwl-gal-nav-color);
    cursor: pointer;
    backdrop-filter: var(--kwl-gal-glass-blur);
    -webkit-backdrop-filter: var(--kwl-gal-glass-blur);
    transform: translateY(-50%);
    transition:
        background 200ms var(--kwl-gal-easing),
        transform 200ms var(--kwl-gal-easing),
        opacity 200ms var(--kwl-gal-easing);
    opacity: 0.85;
}

.kw-gallery .kw-gallery__arrow--prev { left: 12px; }
.kw-gallery .kw-gallery__arrow--next { right: 12px; }

/* SVG-Icons: currentColor erzwingen */
.kw-gallery .kw-gallery__arrow svg {
    fill: currentColor;
    color: inherit;
}

@media (hover: hover) {
    .kw-gallery .kw-gallery__arrow:hover {
        background: var(--kwl-gal-nav-bg-hover);
        opacity: 1;
        transform: translateY(-50%) scale(1.06);
    }
}

.kw-gallery .kw-gallery__arrow:active {
    transform: translateY(-50%) scale(0.96);
}

.kw-gallery .kw-gallery__arrow:focus-visible {
    outline: 3px solid var(--kwl-gal-focus-color);
    outline-offset: 2px;
    opacity: 1;
}

/* ==========================================================================
   5. Counter
   ========================================================================== */

.kw-gallery__counter {
    position: absolute;
    z-index: 3;
    padding: 4px 10px;
    background: var(--kwl-gal-counter-bg);
    color: var(--kwl-gal-counter-color);
    border-radius: var(--kwl-radius-sm, 4px);
    font-size: var(--kwl-fsize-caption, 0.8125rem);
    font-weight: var(--kwl-fw-semibold);
    font-variant-numeric: tabular-nums;
    line-height: var(--kwl-lh-none);
    pointer-events: none;
}

.kw-gallery__counter--top-left     { top: 12px; left: 12px; }
.kw-gallery__counter--top-right    { top: 12px; right: 12px; }
.kw-gallery__counter--bottom-left  { bottom: 12px; left: 12px; }
.kw-gallery__counter--bottom-right { bottom: 12px; right: 12px; }

.kw-gallery__counter-current {
    font-weight: var(--kwl-fw-semibold);
}

/* ==========================================================================
   6. Thumbnails — Außen (below/above)
   ========================================================================== */

.kw-gallery__thumbs--outside {
    display: flex;
    gap: var(--kwl-gal-thumb-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: var(--kwl-space-sm, 0.5rem) 0;
    scrollbar-width: thin;
}

/* ==========================================================================
   7. Thumbnails — Innen (4 Ecken, Glassmorphism)
   ========================================================================== */

.kw-gallery__thumbs--inside {
    position: absolute;
    z-index: 3;
    display: flex;
    gap: var(--kwl-gal-thumb-gap);
    padding: 6px;
    border-radius: 8px;
    background: rgb(0 0 0 / 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / 0.12);
}

[data-thumb-pos="inside-bottom-left"] .kw-gallery__thumbs--inside  { bottom: 12px; left: 12px; }
[data-thumb-pos="inside-bottom-right"] .kw-gallery__thumbs--inside { bottom: 12px; right: 12px; }
[data-thumb-pos="inside-top-left"] .kw-gallery__thumbs--inside     { top: 12px; left: 12px; }
[data-thumb-pos="inside-top-right"] .kw-gallery__thumbs--inside    { top: 12px; right: 12px; }

/* ==========================================================================
   8. Thumbnail-Buttons (Shared) — Underline-Indicator
   ========================================================================== */

.kw-gallery .kw-gallery__thumb {
    position: relative;
    flex-shrink: 0;
    scroll-snap-align: start;
    width: var(--kwl-gal-thumb-size);
    height: var(--kwl-gal-thumb-size);
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--kwl-gal-thumb-radius);
    background: none;
    overflow: hidden;
    cursor: pointer;
    transition:
        opacity 200ms var(--kwl-gal-easing),
        transform 200ms var(--kwl-gal-easing);
    opacity: 0.5;
}

.kw-gallery .kw-gallery__thumb.is-active {
    opacity: 1;
    border-color: var(--kwl-gal-accent);
}

/* Gold-Underline-Indicator: Slide-In beim Wechsel */
.kw-gallery .kw-gallery__thumb::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--kwl-gal-indicator-height);
    background: var(--kwl-gal-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 300ms var(--kwl-gal-easing);
    pointer-events: none;
    z-index: 1;
}

.kw-gallery .kw-gallery__thumb.is-active::after {
    transform: scaleX(1);
}

@media (hover: hover) {
    .kw-gallery .kw-gallery__thumb:hover {
        opacity: 0.85;
        transform: scale(1.06);
    }
}

.kw-gallery .kw-gallery__thumb:active {
    transform: scale(0.96);
}

.kw-gallery .kw-gallery__thumb:focus-visible {
    outline: 3px solid var(--kwl-gal-focus-color);
    outline-offset: 2px;
    opacity: 1;
}

.kw-gallery .kw-gallery__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   9. Inside-Thumbs Fallback <400px: Dot-Indikatoren
   ========================================================================== */

@media (max-width: 400px) {
    .kw-gallery__thumbs--inside {
        padding: 4px;
        gap: 4px;
    }

    .kw-gallery__thumbs--inside .kw-gallery__thumb {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: none;
        background: rgb(255 255 255 / 0.35);
    }

    .kw-gallery__thumbs--inside .kw-gallery__thumb img {
        display: none;
    }

    .kw-gallery__thumbs--inside .kw-gallery__thumb.is-active {
        background: var(--kwl-gal-accent);
    }

    .kw-gallery__thumbs--inside .kw-gallery__thumb::after {
        display: none;
    }
}

/* ==========================================================================
   10. Text-Bereich + Gold-Separator auf Heading
   ========================================================================== */

.kw-gallery__text {
    padding: var(--kwl-space-sm, 0.5rem) 0 0;
}

.kw-gallery__text--above {
    padding: 0 0 var(--kwl-space-sm, 0.5rem);
}

/* Card-Modus: horizontaler Innenabstand */
.kw-gallery[data-kwg-mode="card"] .kw-gallery__text {
    padding-left: var(--kwl-space-xs, 0.25rem);
    padding-right: var(--kwl-space-xs, 0.25rem);
}

.kw-gallery__heading {
    margin: 0 0 var(--kwl-space-xs, 0.25rem);
    color: var(--kwl-gal-heading-color);
}

.kw-gallery__description {
    margin: 0;
    color: var(--kwl-gal-desc-color);
    font-family: var(--kwl-font-body);
    line-height: var(--kwl-lh-prose);
}

/* ==========================================================================
   11. Fullscreen-Button (pro Slide)
   ========================================================================== */

.kw-gallery .kw-gallery__fullscreen {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--kwl-gal-glass-border);
    border-radius: 50%;
    background: rgb(0 0 0 / 0.4);
    color: #fff;
    cursor: pointer;
    backdrop-filter: var(--kwl-gal-glass-blur);
    -webkit-backdrop-filter: var(--kwl-gal-glass-blur);
    opacity: 0.6;
    transition: opacity 200ms var(--kwl-gal-easing),
                background 200ms var(--kwl-gal-easing),
                border-color 200ms var(--kwl-gal-easing),
                box-shadow 200ms var(--kwl-gal-easing);
}

/* SVG-Icons: currentColor */
.kw-gallery .kw-gallery__fullscreen svg {
    fill: currentColor;
    color: inherit;
}

@media (hover: hover) {
    .kw-gallery .kw-gallery__stage:hover .kw-gallery__slide.is-active .kw-gallery__fullscreen {
        opacity: 1;
    }

    .kw-gallery .kw-gallery__fullscreen:hover {
        background: var(--kwl-gal-nav-bg-hover);
        border-color: color-mix(in srgb, var(--kwl-gal-accent) 60%, transparent);
        box-shadow: 0 0 12px color-mix(in srgb, var(--kwl-gal-accent) 20%, transparent);
    }
}

/* Touch-Geräte: immer sichtbar (BFSG) */
@media (hover: none) {
    .kw-gallery .kw-gallery__slide.is-active .kw-gallery__fullscreen {
        opacity: 0.7;
    }
}

.kw-gallery .kw-gallery__fullscreen:active {
    opacity: 1;
    transform: scale(0.92);
}

.kw-gallery .kw-gallery__fullscreen:focus-visible {
    opacity: 1;
    outline: 3px solid var(--kwl-gal-focus-color);
    outline-offset: 2px;
}

/* ==========================================================================
   12. Scroll-Reveal (Entry-Animation)
   ========================================================================== */

/* CSS-native: Scroll-Reveal (shared keyframe aus frontend.css) */
@supports (animation-timeline: view()) {
    .kw-gallery[data-kwg-reveal] {
        animation: kwl-reveal-up linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 30%;
    }
}

/* JS-Fallback: IntersectionObserver setzt .kw-gallery--revealed */
.kw-gallery[data-kwg-reveal]:not(.kw-gallery--revealed) {
    opacity: 0;
    transform: translateY(24px);
}

.kw-gallery[data-kwg-reveal].kw-gallery--revealed {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 500ms var(--kwl-gal-easing), transform 500ms var(--kwl-gal-easing);
}

/* Browser mit animation-timeline brauchen kein JS-Fallback-Styling */
@supports (animation-timeline: view()) {
    .kw-gallery[data-kwg-reveal]:not(.kw-gallery--revealed) {
        opacity: unset;
        transform: unset;
    }
}

/* ==========================================================================
   13. prefers-reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .kw-gallery {
        --kwl-gal-crossfade: 0ms;
    }

    .kw-gallery .kw-gallery__arrow {
        transition: none;
    }

    @media (hover: hover) {
        .kw-gallery .kw-gallery__arrow:hover {
            transform: translateY(-50%);
        }

        .kw-gallery .kw-gallery__thumb:hover {
            transform: none;
        }
    }

    .kw-gallery .kw-gallery__thumb {
        transition: none;
    }

    .kw-gallery .kw-gallery__thumb::after {
        transition: none;
    }

    .kw-gallery__slide {
        transition: none;
    }

    .kw-gallery__slide:not(.is-loaded)::before {
        animation: none;
    }

    .kw-gallery[data-ken-burns="yes"] .kw-gallery__slide img,
    .kw-gallery[data-ken-burns="yes"] .kw-gallery__slide.is-active img {
        transform: none;
        transition: none;
    }

    .kw-gallery .kw-gallery__fullscreen {
        transition: none;
    }

    /* Scroll-Reveal deaktivieren */
    .kw-gallery[data-kwg-reveal] {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .kw-gallery[data-kwg-reveal]:not(.kw-gallery--revealed) {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   14. Dark Mode
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .kw-gallery {
        --kwl-gal-nav-bg: rgb(255 255 255 / 0.2);
        --kwl-gal-nav-bg-hover: rgb(255 255 255 / 0.35);
        --kwl-gal-counter-bg: var(--kwl-accent, #BD9B5C);
        --kwl-gal-counter-color: #0F172A;
        --kwl-gal-glass-border: rgb(255 255 255 / 0.18);
        --kwl-gal-focus-color: var(--kwl-focus, #c9a84c);
        --kwl-gal-loading-bg: color-mix(in srgb, var(--kwl-text, #f7fafc) 6%, var(--kwl-bg, #1a202c));
    }

    .kw-gallery .kw-gallery__thumb {
        opacity: 0.4;
    }

    .kw-gallery .kw-gallery__thumb.is-active {
        opacity: 1;
    }
}