/**
 * KSM Zitate-Grid
 *
 * Zitate-Grid (Standard 3 Spalten, responsive). Pro Eintrag:
 * Anführungszeichen, Zitat (kursiv), Profilbild + Name + Position.
 *
 * Desktop/Tablet: Grid. Mobile (≤767px): horizontaler Slider per
 * CSS scroll-snap (Touch-Swipe links/rechts, ohne JS).
 *
 * Alle Stellschrauben zentral über die Variablen im .ksm-zitate-grid-Block.
 */

.ksm-zitate {
    /* ===== zentrale Stellschrauben ===== */
    --ksm-quote-cols:        3;                                  /* Spalten (Desktop) */
    --ksm-quote-gap:         var(--ksm-spacing-xl);              /* 36px Abstand */
    --ksm-quote-mark-color:  var(--ksm-color-accent);           /* Farbe Anführungszeichen (Koralle) */
    --ksm-quote-name-color:  var(--ksm-color-secondary);        /* Farbe Name (Blau, wie Counter-Zahl) */
    --ksm-quote-avatar-size: calc(var(--ksm-spacing-base) * 4); /* 48px Avatar */
    --ksm-quote-bar-color:   var(--ksm-color-primary);          /* Farbe Scroll-Handle */
}

.ksm-zitate-grid {
    display: grid;
    grid-template-columns: repeat(var(--ksm-quote-cols), 1fr);
    gap: var(--ksm-quote-gap);
    align-items: start;
}

/* ===== Eintrag ===== */
.ksm-zitat {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ksm-spacing-lg);
}

/* ===== Anführungszeichen ===== */
.ksm-zitat__mark {
    color: rgba(var(--ksm-quote-mark-color), 1);
    font-family: var(--ksm-font-bold-italic);
    font-style: italic;
    font-weight: var(--ksm-font-weight-bold);
    font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    line-height: 0.6;   /* Glyphe sitzt oben → wenig Leerraum darunter */
}

/* ===== Zitat ===== */
.ksm-zitat__quote {
    margin: 0;
    border: 0;
    padding: 0;
    color: rgba(var(--ksm-color-accent), 1);
    font-family: var(--ksm-font-bold-italic);
    font-weight: var(--ksm-font-weight-bold);
    font-style: italic;
    font-size: var(--ksm-font-size-base);
    line-height: var(--ksm-line-height-normal);
}

/* ===== Autor ===== */
.ksm-zitat__author {
    display: flex;
    align-items: center;
    gap: var(--ksm-spacing-md);
}

.ksm-zitat__avatar {
    flex: 0 0 auto;
    width: var(--ksm-quote-avatar-size);
    height: var(--ksm-quote-avatar-size);
    border-radius: var(--ksm-border-radius-pill);
    object-fit: cover;
    display: block;
}

.ksm-zitat__meta {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ksm-spacing-base) * 0.15);
}

.ksm-zitat .ksm-zitat__name {
    color: rgba(var(--ksm-quote-name-color), 1);
    font-family: var(--ksm-font-bold);
    font-weight: var(--ksm-font-weight-bold);
    font-size: var(--ksm-font-size-xs);
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.ksm-zitat__position {
    color: rgba(var(--ksm-color-text), 0.6);
    font-size: var(--ksm-font-size-sm);
    line-height: 1.3;
}

/* ===== Scroll-Indikator (Custom-Scrollbar mit Handle) ===== */
.ksm-zitate__scrollbar {
    display: none;   /* nur im Mobile-Slider sichtbar */
    margin-top: var(--ksm-spacing-xl);
}

.ksm-zitate__scrollbar.is-hidden {
    display: none !important;   /* nichts zu scrollen → ausblenden */
}

.ksm-zitate__scrollbar-track {
    position: relative;
    width: 60%;
    margin-inline: auto;   /* zentriert */
    height: calc(var(--ksm-spacing-base) * 0.5);   /* 6px */
    border-radius: var(--ksm-border-radius-pill);
    background: rgba(var(--ksm-color-text), 0.12);
    overflow: hidden;
}

.ksm-zitate__scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;                                     /* per JS gesetzt */
    min-width: calc(var(--ksm-spacing-base) * 3);
    padding: 0;
    border: 0;
    border-radius: var(--ksm-border-radius-pill);
    background: rgba(var(--ksm-quote-bar-color), 1);
    cursor: grab;
    touch-action: none;
    will-change: transform, width;
}

.ksm-zitate__scrollbar-thumb:active {
    cursor: grabbing;
}

/* Maus-Drag auf den Karten */
.ksm-zitate-grid.is-grabbing {
    cursor: grabbing;
    user-select: none;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Tablet: 2 Spalten */
@media (max-width: 959px) {
    .ksm-zitate { --ksm-quote-cols: 2; }
}

/* Mobile: horizontaler Slider (scroll-snap, Touch-Swipe) */
@media (max-width: 767px) {
    .ksm-zitate-grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;                 /* Firefox */
    }

    .ksm-zitate-grid::-webkit-scrollbar {
        display: none;                         /* WebKit */
    }

    .ksm-zitat {
        flex: 0 0 85%;                         /* nächste Karte „peekt" am Rand */
        scroll-snap-align: start;
    }

    .ksm-zitate__scrollbar {
        display: block;
    }
}