/**
 * KW Lobby — Shared Elements Widget (#37)
 *
 * Standalone-Nutzung der 4 Shared Components.
 * Reine CSS-Lösung ohne JavaScript.
 *
 * Komponenten:
 *   .kw-se--button      → [data-kwl-btn="gradient"]
 *   .kw-se--separator   → [data-kwl-separator="gold"]
 *   .kw-se--icon_circle → [data-kwl-icon-circle]
 *   .kw-se--card        → [data-kwl-card]
 */

/* =========================================================
   1. Widget-Scope Custom Properties
   ========================================================= */

.kw-shared-elements {
    --kwl-se-btn-bg: var(--kwl-accent, #BD9B5C);
    --kwl-se-btn-color: var(--kwl-btn-text, #ffffff);
    --kwl-se-btn-radius: var(--kwl-radius-md, 8px);
    --kwl-se-icon-size: 48px;
    --kwl-se-icon-color: var(--kwl-accent, #BD9B5C);
    --kwl-se-icon-svg-size: 55%;
    --kwl-se-card-bg: var(--kwl-bg, #ffffff);
    --kwl-se-card-border: var(--kwl-border, #e2e8f0);
    --kwl-se-card-accent: var(--kwl-accent, #BD9B5C);
    --kwl-se-card-radius: var(--kwl-radius-lg, 12px);
    --kwl-se-card-lift: -3px;
    --kwl-se-separator-height: 2px;
    --kwl-se-accent: var(--kwl-accent, #BD9B5C);
    --kwl-se-title-color: var(--kwl-text, #1a202c);
    --kwl-se-desc-color: var(--kwl-text-muted, #718096);
}

/* =========================================================
   2. Layout & Ausrichtung
   ========================================================= */

.kw-shared-elements {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

.kw-shared-elements--align-left { justify-content: flex-start; }
.kw-shared-elements--align-right { justify-content: flex-end; }

/* Elementor Flex-Container fix */
.kw-shared-elements {
    align-self: flex-start;
}

/* =========================================================
   3. Bridge: Widget-Tokens → Shared Components
   ========================================================= */

/* Button: Gradient — weiß auf Gold */
.kw-shared-elements [data-kwl-btn="gradient"] {
    --kwl-btn-bg: var(--kwl-se-btn-bg);
    --kwl-btn-color: var(--kwl-se-btn-color);
    --kwl-btn-radius: var(--kwl-se-btn-radius);
}

/* Button: Outline — Gold-Text auf transparent */
.kw-shared-elements [data-kwl-btn="outline"] {
    --kwl-btn-bg: var(--kwl-se-btn-bg);
    --kwl-btn-color: var(--kwl-se-btn-bg);
    --kwl-btn-radius: var(--kwl-se-btn-radius);
}

/* Button: Inverted — Navy-Text auf Gold-Tint */
.kw-shared-elements [data-kwl-btn="inverted"] {
    --kwl-btn-color: var(--kwl-primary, #00315d);
    --kwl-btn-bg: var(--kwl-se-btn-bg);
    --kwl-btn-radius: var(--kwl-se-btn-radius);
}

/* Card */
.kw-shared-elements [data-kwl-card] {
    --kwl-card-bg: var(--kwl-se-card-bg);
    --kwl-card-border: var(--kwl-se-card-border);
    --kwl-card-accent: var(--kwl-se-card-accent);
    --kwl-card-radius: var(--kwl-se-card-radius);
    --kwl-card-lift: var(--kwl-se-card-lift);
}

/* Icon-Kreis */
.kw-shared-elements [data-kwl-icon-circle] {
    --kwl-icon-size: var(--kwl-se-icon-size);
    --kwl-icon-color: var(--kwl-se-icon-color);
    --kwl-icon-svg-size: var(--kwl-se-icon-svg-size);
}

/* Separator */
.kw-shared-elements [data-kwl-separator="gold"] {
    --kwl-separator-height: var(--kwl-se-separator-height);
}

/* Separator: Akzentfarbe ueberschreiben */
.kw-shared-elements [data-kwl-separator="gold"]::after {
    background: linear-gradient(to right,
        var(--kwl-se-accent, var(--kwl-accent, #BD9B5C)),
        color-mix(in srgb, var(--kwl-se-accent, var(--kwl-accent, #BD9B5C)) 40%, transparent),
        transparent
    );
}

/* =========================================================
   4. Button — Groessen-Varianten
   ========================================================= */

.kw-se__btn {
    gap: var(--kwl-space-xs, 6px);
}

.kw-se__btn--sm {
    padding: var(--kwl-space-xs, 6px) var(--kwl-space-sm, 12px);
    font-size: var(--kwl-fsize-small, 0.875rem);
}

.kw-se__btn--md {
    padding: var(--kwl-space-sm, 12px) var(--kwl-space-md, 20px);
    font-size: var(--kwl-fsize-body, 1rem);
}

.kw-se__btn--lg {
    padding: var(--kwl-space-md, 20px) var(--kwl-space-lg, 32px);
    font-size: var(--kwl-fsize-h4, 1.125rem);
}

.kw-se__btn-icon {
    width: 1.2em;
    height: 1.2em;
    object-fit: contain;
    flex-shrink: 0;
}

/* =========================================================
   5. Separator — Standalone + Heading + Richtungen
   ========================================================= */

.kw-se__separator {
    width: 100%;
    position: relative;
    min-height: var(--kwl-se-separator-height, 2px);
    padding-bottom: var(--kwl-space-xs, 6px);
}

.kw-se__heading {
    margin: 0;
    padding-bottom: var(--kwl-space-sm, 12px);
    font-family: var(--kwl-font-heading);
    font-weight: var(--kwl-fw-semibold);
    color: var(--kwl-se-title-color, var(--kwl-text, #1a202c));
    line-height: var(--kwl-lh-heading, 1.3);
}

/* Richtung: rechts nach links */
.kw-se__sep--right[data-kwl-separator="gold"]::after {
    background: linear-gradient(to left,
        var(--kwl-se-accent, var(--kwl-accent, #BD9B5C)),
        color-mix(in srgb, var(--kwl-se-accent, var(--kwl-accent, #BD9B5C)) 40%, transparent),
        transparent
    );
}

/* Richtung: von der Mitte */
.kw-se__sep--center[data-kwl-separator="gold"]::after {
    background: linear-gradient(to right,
        transparent,
        color-mix(in srgb, var(--kwl-se-accent, var(--kwl-accent, #BD9B5C)) 40%, transparent) 20%,
        var(--kwl-se-accent, var(--kwl-accent, #BD9B5C)) 50%,
        color-mix(in srgb, var(--kwl-se-accent, var(--kwl-accent, #BD9B5C)) 40%, transparent) 80%,
        transparent
    );
}

/* =========================================================
   6. Icon-Kreis — Link-Wrapper
   ========================================================= */

.kw-se__icon-link {
    --kwl-link-color: var(--kwl-se-icon-color, var(--kwl-accent, #BD9B5C));
    --kwl-link-hover-color: var(--kwl-se-icon-color, var(--kwl-accent, #BD9B5C));
    display: inline-flex;
    border-radius: var(--kwl-radius-full, 9999px);
    transition: transform var(--kwl-transition, 200ms ease);
}

.kw-se__icon-link:active {
    transform: scale(0.95);
}

.kw-se__icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--kwl-radius-full, 9999px);
}

@media (hover: hover) {
    .kw-se__icon-link:hover {
        transform: scale(1.08);
    }

    .kw-se__icon-link:hover [data-kwl-icon-circle] {
        box-shadow:
            0 0 0 2px var(--kwl-se-icon-color, var(--kwl-accent, #BD9B5C)),
            0 4px 12px color-mix(in srgb, var(--kwl-se-icon-color, var(--kwl-accent, #BD9B5C)) 25%, transparent);
    }
}

/* =========================================================
   7. Card — Layout
   ========================================================= */

.kw-se__card {
    width: 100%;
    max-width: 480px;
    overflow: hidden;
}

.kw-se__card-image {
    overflow: hidden;
    border-radius: var(--kwl-se-card-radius, var(--kwl-radius-lg, 12px))
                   var(--kwl-se-card-radius, var(--kwl-radius-lg, 12px))
                   0 0;
}

.kw-se__card-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform var(--kwl-transition, 200ms ease);
}

.kw-se__card-content {
    padding: var(--kwl-space-md, 20px);
    display: flex;
    flex-direction: column;
    gap: var(--kwl-space-sm, 12px);
}

.kw-se__card-icon {
    align-self: flex-start;
}

.kw-se__card-title {
    margin: 0;
    font-family: var(--kwl-font-heading);
    font-weight: var(--kwl-fw-bold);
    color: var(--kwl-se-title-color, var(--kwl-text, #1a202c));
    line-height: var(--kwl-lh-heading, 1.3);
}

.kw-se__card-desc {
    margin: 0;
    color: var(--kwl-se-desc-color, var(--kwl-text-muted, #718096));
    line-height: var(--kwl-lh-body, 1.6);
}

.kw-se__card-cta {
    align-self: flex-start;
    margin-top: var(--kwl-space-xs, 6px);
    padding: var(--kwl-space-sm, 12px) var(--kwl-space-md, 20px);
    gap: var(--kwl-space-xs, 6px);
}

/* Card Bild-Hover */
@media (hover: hover) {
    .kw-se__card:hover .kw-se__card-img {
        transform: scale(1.03);
    }
}

/* =========================================================
   7b. Inline-Link — Dezenter Textlink mit Pfeil
   ========================================================= */

.kw-shared-elements.kw-se--inline_link {
    align-items: baseline;
    flex-wrap: wrap;
}

.kw-se__inline-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 1em;
    flex-wrap: wrap;
    max-width: 100%;
}

.kw-se__inline-lead {
    color: var(--kwl-text-muted, #64748b);
    font-style: italic;
    line-height: var(--kwl-lh-body, 1.6);
}

.kw-se__inline-text {
    color: var(--kwl-text, #1a202c);
}

.kw-se__inline-link {
    --kwl-link-color: var(--kwl-se-accent, var(--kwl-accent, #BD9B5C));
    --kwl-link-hover-color: var(--kwl-se-accent, var(--kwl-accent, #BD9B5C));
    --kwl-link-underline: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    min-inline-size: 0;
    font-weight: var(--kwl-fw-semibold, 600);
    letter-spacing: var(--kwl-ls-wide, 0.02em);
    line-height: var(--kwl-lh-body, 1.6);
    border-bottom: 1px solid color-mix(in srgb, var(--kwl-se-accent, var(--kwl-accent, #BD9B5C)) 35%, transparent);
    padding-bottom: 2px;
    transition: border-color 200ms ease;
}

.kw-se__inline-link-icon {
    inline-size: 1em;
    block-size: 1em;
    flex-shrink: 0;
    transition: transform 200ms ease;
    will-change: transform;
}

@media (hover: hover) {
    .kw-se__inline-link:hover {
        border-bottom-color: var(--kwl-se-accent, var(--kwl-accent, #BD9B5C));
    }

    .kw-se__inline-link:hover .kw-se__inline-link-icon {
        transform: translateX(4px);
    }
}

/* Einmal-Puls beim Sichtbarwerden (JS setzt .is-visible) */
@keyframes kwl-se-inline-pulse {
    0%   { transform: translateX(0); }
    40%  { transform: translateX(6px); }
    100% { transform: translateX(0); }
}

.kw-se__inline-link[data-inline-anim="pulse"].is-visible .kw-se__inline-link-icon,
.kw-se__inline-link[data-inline-anim="both"].is-visible .kw-se__inline-link-icon {
    animation: kwl-se-inline-pulse 600ms ease 200ms 1 both;
}

/* Sanftes Einblenden — Safe Default: sichtbar.
   JS markiert .is-observing sobald IntersectionObserver aktiv ist und
   setzt anschliessend .is-visible beim Scroll in den Viewport.
   Ohne JS (AdBlocker / Skript-Fehler) bleibt der Link einfach sichtbar. */
.kw-se__inline-wrap--reveal {
    transition: opacity 500ms ease, transform 500ms ease;
}

.kw-se__inline-wrap--reveal.is-observing:not(.is-visible) {
    opacity: 0;
    transform: translateY(16px);
}

.kw-se__inline-wrap--reveal.is-observing.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Forced-Colors-Mode (High Contrast) */
@media (forced-colors: active) {
    .kw-se__inline-link {
        color: LinkText;
        border-bottom-color: LinkText;
    }

    .kw-se__inline-link:hover,
    .kw-se__inline-link:focus-visible {
        color: Highlight;
        border-bottom-color: Highlight;
    }
}

/* =========================================================
   8. Dark Mode
   ========================================================= */

@media (prefers-color-scheme: dark) {
    .kw-shared-elements {
        --kwl-se-card-bg: var(--kwl-bg, #1a202c);
        --kwl-se-card-border: var(--kwl-border, #4a5568);
        --kwl-se-title-color: var(--kwl-text, #f7fafc);
        --kwl-se-desc-color: var(--kwl-text-muted, #a0aec0);
    }

    /* Inline-Link: Text-Farbe im Dark-Mode heller */
    .kw-se__inline-lead {
        color: var(--kwl-text-muted, #a0aec0);
    }

    .kw-se__inline-text {
        color: var(--kwl-text, #f7fafc);
    }

    .kw-se__icon-link:focus-visible {
        outline-color: var(--kwl-focus, #c9a84c);
    }

    /* Icon-Link Hover Schatten mit rgba (kein color-mix im Dark) */
    @media (hover: hover) {
        .kw-se__icon-link:hover [data-kwl-icon-circle] {
            box-shadow:
                0 0 0 2px var(--kwl-se-icon-color, var(--kwl-accent, #BD9B5C)),
                0 4px 12px rgba(0, 0, 0, 0.3);
        }
    }
}

/* =========================================================
   9. Scroll-Animationen (CSS native + Fallback)
   ========================================================= */

/* Basis-Zustand: unsichtbar */
.kw-shared-elements[data-animation] {
    opacity: 0;
}

/* Fade */
.kw-shared-elements[data-animation="fade"] {
    animation: kw-se-fade-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

/* Slide Up — nutzt Shared Keyframe aus frontend.css */
.kw-shared-elements[data-animation="slide-up"] {
    transform: translateY(24px);
    animation: kwl-reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

/* Scale */
.kw-shared-elements[data-animation="scale"] {
    transform: scale(0.92);
    animation: kw-se-scale linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

@keyframes kw-se-fade-in {
    to {
        opacity: 1;
    }
}

@keyframes kw-se-scale {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Fallback: Wenn kein animation-timeline Support */
@supports not (animation-timeline: view()) {
    .kw-shared-elements[data-animation] {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* =========================================================
   10. Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .kw-shared-elements[data-animation] {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .kw-se__icon-link {
        transition: none;
    }

    .kw-se__icon-link:active {
        transform: none;
    }

    .kw-se__card-img {
        transition: none;
    }

    /* Inline-Link: alle Bewegungen aus */
    .kw-se__inline-link-icon,
    .kw-se__inline-wrap--reveal {
        transition: none;
        animation: none;
        opacity: 1;
        transform: none;
    }

    .kw-se__inline-link[data-inline-anim].is-visible .kw-se__inline-link-icon {
        animation: none;
        transform: none;
    }

    @media (hover: hover) {
        .kw-se__icon-link:hover {
            transform: none;
        }

        .kw-se__card:hover .kw-se__card-img {
            transform: none;
        }

        .kw-se__inline-link:hover .kw-se__inline-link-icon {
            transform: none;
        }
    }
}