/*
 * Freddy Reviews — Slider-Layout-Styles (S80-1)
 *
 * SCOPE: Alle Selektoren beginnen mit .freddy-reviews — keine globalen Styles
 * fuer body, a, button, img, p, h1–h6 (FR-FE-003/004, AGENTS.md §5).
 *
 * Technik: CSS Scroll Snap + native Scroll-API; kein externes Lib/CDN (FR-SLD-001).
 * Reduced-Motion: @media (prefers-reduced-motion: reduce) deaktiviert alle
 * Animationen und Smooth-Scrolling (FR-SLD-003).
 */

/* ==========================================================================
   Slider-Wrapper (Root fuer den Scroll-Track)
   ========================================================================== */

.freddy-reviews--slider .freddy-reviews__slider-wrapper {
    position: relative;
    /* Kein overflow:hidden — sonst kappt der Wrapper die Karten-Schatten oben/
       unten. Der Track scrollt selbst (overflow-x:auto) und begrenzt sich. */
}

/* ==========================================================================
   Scroll-Track (Scroll-Snap-Container)
   ========================================================================== */

.freddy-reviews--slider .freddy-reviews__slider-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: var(--fr-card-gap, 24px);
    /* Innen-Abstand, damit die Karten-Schatten (auch d_shadow=lg) nicht am
       Track-Rand abgeschnitten werden und die Karten Luft zum Rand haben. Der
       negative Margin gleicht den Inline-Abstand aus, damit die erste Karte
       weiterhin bündig am Widget-Rand startet. */
    padding: 18px 8px;
    margin-inline: -8px;

    /* Scrollbar ausblenden (rein visuell; native Scroll bleibt erhalten) */
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE/Edge */
}

.freddy-reviews--slider .freddy-reviews__slider-track::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* ==========================================================================
   Slide-Karten: Flex-Basis via CSS-Variablen und Data-Attributen
   ========================================================================== */

/*
 * Breite einer Karte = (100% - (cols-1) * gap) / cols.
 * --fr-slider-cols wird per JS oder direkt ueber das Data-Attribut gesetzt.
 * Fallback: 1 Spalte (mobile-first).
 */
.freddy-reviews--slider .freddy-reviews__slider-track > .freddy-reviews__card {
    flex: 0 0 calc(
        (100% - (var(--fr-slider-cols, 1) - 1) * var(--fr-card-gap, 24px))
        / var(--fr-slider-cols, 1)
    );
    min-width: 0;
    scroll-snap-align: start;
}

/* Desktop-Breakpoint: data-columns */
@media (min-width: 1025px) {
    .freddy-reviews--slider .freddy-reviews__slider-track {
        --fr-slider-cols: var(--fr-slider-cols-desktop, 3);
    }
}

/* Tablet-Breakpoint: data-columns-tablet */
@media (min-width: 641px) and (max-width: 1024px) {
    .freddy-reviews--slider .freddy-reviews__slider-track {
        --fr-slider-cols: var(--fr-slider-cols-tablet, 2);
    }
}

/* Mobile-Breakpoint: IMMER genau 1 Karte über die volle Bildschirmbreite
   (Produktvorgabe) — unabhängig von der konfigurierten Mobil-Spaltenzahl. */
@media (max-width: 640px) {
    .freddy-reviews--slider .freddy-reviews__slider-track {
        --fr-slider-cols: 1;
    }
}

/* ==========================================================================
   Pfeil-Buttons (Prev/Next)
   ========================================================================== */

.freddy-reviews--slider .freddy-reviews__slider-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fr-space-3, 12px);
    margin-block-start: var(--fr-space-4, 16px);
}

.freddy-reviews--slider .freddy-reviews__slider-btn {
    /* Kein globaler button-Reset */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--fr-r-pill, 999px);
    background: var(--fr-card-background, #ffffff);
    border: 2px solid var(--fr-border, #e2e8f0);
    cursor: pointer;
    font-size: 18px;
    color: var(--fr-ink, #0f172a);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

/* Icon-Größe explizit + höhere Spezifität (0,2,0), damit Page-Builder-Themes
   (`.elementor svg { … }`, 0,1,1) die Pfeil-/Play-Pause-SVGs nicht verzerren
   oder auf 0/auto setzen (sonst „leere Kreise"). currentColor erbt die
   Button-Textfarbe. */
.freddy-reviews--slider .freddy-reviews__slider-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
}
.freddy-reviews--slider .freddy-reviews__slider-icon path[fill="currentColor"] {
    fill: currentColor;
}

.freddy-reviews--slider .freddy-reviews__slider-btn:hover {
    background: var(--fr-accent-soft, #eff6ff);
    border-color: var(--fr-accent, #2563eb);
    color: var(--fr-accent, #2563eb);
}

/* Sichtbarer Fokusring (AC-SLD-1, WCAG 2.2 AA) */
.freddy-reviews--slider .freddy-reviews__slider-btn:focus-visible {
    outline: 2px solid var(--fr-accent, #2563eb);
    outline-offset: 2px;
}

.freddy-reviews--slider .freddy-reviews__slider-btn:disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* ==========================================================================
   Punkte-Navigation (Dots)
   ========================================================================== */

.freddy-reviews--slider .freddy-reviews__slider-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--fr-space-2, 8px);
    flex: 1;
    flex-wrap: wrap;
}

.freddy-reviews--slider .freddy-reviews__slider-dot {
    /* Kein globaler button-Reset.
       Zielgröße >= 24x24px (WCAG 2.5.8, AA): 24px Box mit 8px sichtbarem Kern
       (Padding + background-clip:content-box), damit die Klick-/Touch-Fläche groß
       genug ist, der Punkt aber weiterhin klein aussieht. */
    display: inline-block;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    padding: 8px;
    border: 0;
    border-radius: var(--fr-r-pill, 999px);
    /* background-color (nicht das background-Shorthand) — sonst würde ein späteres
       `background:` den background-clip:content-box auf border-box zurücksetzen und
       der sichtbare Kern die ganze 24px-Hit-Area füllen. */
    background-color: var(--fr-border-strong, #cbd5e1);
    background-clip: content-box;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.freddy-reviews--slider .freddy-reviews__slider-dot.is-active {
    background-color: var(--fr-accent, #2563eb);
    transform: scale(1.3);
}

/* Sichtbarer Fokusring fuer Punkte (AC-SLD-1) */
.freddy-reviews--slider .freddy-reviews__slider-dot:focus-visible {
    outline: 2px solid var(--fr-accent, #2563eb);
    outline-offset: 2px;
}

/* ==========================================================================
   Play/Pause-Button (nur wenn Autoplay aktiv)
   ========================================================================== */

.freddy-reviews--slider .freddy-reviews__slider-playpause {
    /* Kein globaler button-Reset */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--fr-r-pill, 999px);
    background: var(--fr-card-background, #ffffff);
    border: 2px solid var(--fr-border, #e2e8f0);
    cursor: pointer;
    font-size: 14px;
    color: var(--fr-ink, #0f172a);
    transition: background-color 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}

.freddy-reviews--slider .freddy-reviews__slider-playpause:hover {
    background: var(--fr-accent-soft, #eff6ff);
    border-color: var(--fr-accent, #2563eb);
    color: var(--fr-accent, #2563eb);
}

.freddy-reviews--slider .freddy-reviews__slider-playpause:focus-visible {
    outline: 2px solid var(--fr-accent, #2563eb);
    outline-offset: 2px;
}

/* ==========================================================================
   Reduced-Motion (FR-SLD-003, Style-Guide §0 Motion)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .freddy-reviews--slider .freddy-reviews__slider-track {
        scroll-behavior: auto;
    }

    .freddy-reviews--slider .freddy-reviews__slider-btn,
    .freddy-reviews--slider .freddy-reviews__slider-dot,
    .freddy-reviews--slider .freddy-reviews__slider-playpause {
        transition-duration: 0.01ms;
    }

    .freddy-reviews--slider .freddy-reviews__slider-dot.is-active {
        transform: none;
    }
}