/* ====================================================================
   SCROLL-CAROUSEL
   --------------------------------------------------------------------
   Horizontal scrollbares Karten-Karussell mit Pfeil-Buttons. Ursprünglich
   nur für Events auf der Startseite gebaut, inzwischen seitenübergreifend
   genutzt (Kurs-Karten bei Einsteiger, Workshop-Karten bei Shows/
   Workshops) - daher bewusst generisch benannt statt "events-*".

   ZWEI PARALLELE NAVIGATIONS-VARIANTEN (bewusste Design-Entscheidung):
   Auf Desktop (>=768px) bleibt das ursprüngliche Design (große, runde
   Pfeil-Buttons, überlagernd auf der Karte). Auf Mobile (<768px) kommt
   stattdessen die neue, schlankere Pfeile+Punkte-Leiste unterhalb der
   Karte zum Einsatz (siehe .carousel-nav weiter unten) - spart dort
   die von den großen Kreisen + Seiten-Padding beanspruchte Breite.

   Beide Markup-Blöcke (.scroll-button UND .carousel-nav) liegen daher
   gleichzeitig im HTML jeder Karussell-Seite; welcher sichtbar ist,
   entscheidet ausschließlich CSS via display:none/flex am 768px-
   Breakpoint - kein JS-Umschalten nötig, kein Resize-Flackern, und
   display:none-Elemente sind für Screenreader automatisch nicht
   ansprechbar (keine doppelten Ansagen).
   ==================================================================== */
.scroll-carousel {
    position: relative;
    overflow: hidden;
    /* Kein Seiten-Padding als Mobile-Default (Pfeile dort ausgeblendet,
       siehe .scroll-button unten) - Desktop-Padding kommt erst ab 768px. */
    padding: 0;
}

.scroll-carousel__track {
    /* Grid-Karussell: Karten liegen in Spalten nebeneinander (horizontal
       scrollbar). Die 7 Zeilen-Tracks werden von allen Karten via subgrid
       geteilt -> Abschnitte/Trennlinien liegen kartenübergreifend auf einer
       Höhe. Spaltenbreite = einheitliche Kartenbreite, schrumpft auf schmalen
       Screens (min(...,100%)). */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(var(--event-card-width), 100%);
    grid-template-rows: repeat(6, auto);
    align-items: start;
    column-gap: 2rem;
    row-gap: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Fluid statt starrem 1rem/1.5rem - war nie Teil der systematischen
       Fluid-Umstellung (Karussell ist Funktions-/Layout-Komponente, keine
       der durchgegangenen Content-Boxen). Summierte sich mit dem bereits
       fluiden .container-Padding zu einem spürbar großen Gesamtabstand
       auf schmalen Screens. Horizontal bewusst bis auf 0 reduziert (auf
       Wunsch) - Karte darf auf sehr schmalen Screens bündig mit dem
       .container-Rand abschließen, da dieser bereits eigenes Padding
       mitbringt. Vertikal unverändert, Desktop-Maxima unverändert. */
    padding-block: clamp(var(--spacing-xs), 4vw, var(--spacing-sm));
    padding-inline: clamp(0px, 1.5vw, var(--spacing-md));
}

.scroll-carousel__track::-webkit-scrollbar {
    display: none;
}

/* ==================== DESKTOP-VARIANTE: Kreis-Pfeile (Original) ====================
   Ausgeblendet als Mobile-Default, erst ab 768px sichtbar (siehe Media
   Query unten) - dort dann exakt wie ursprünglich (50px-Kreise,
   60px Seiten-Padding). */
.scroll-button {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(26,26,26,0.9);
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s;
    font-size: 1.5rem;
    align-items: center;
    justify-content: center;
}

.scroll-button:hover {
    background: var(--color-primary);
    color: #000;
}

.scroll-button.left {
    left: 10px;
}

.scroll-button.right {
    right: 10px;
}

/* ==================== MOBILE-VARIANTE: Pfeile + Punkte (neu) ====================
   Sichtbar als Mobile-Default (<768px), ab 768px durch die Media Query
   unten wieder ausgeblendet. Sitzt als eigene, zentrierte Leiste
   unterhalb des Tracks statt die Karte selbst zu überlagern - siehe
   Mobile-Audit: die Kreise + Seiten-Padding kosteten auf schmalen
   Screens spürbar Platz, der hier stattdessen der Karte zugutekommt.

   WICHTIG (Reihenfolge!): Diese Basisregel MUSS vor der
   @media(min-width:768px)-Regel stehen, die .carousel-nav dort auf
   display:none setzt. Bei gleicher Selektor-Spezifität entscheidet in
   CSS die Position im Stylesheet - stünde diese Regel danach, würde sie
   die Media-Query-Regel wieder überschreiben und die mobile Nav bliebe
   fälschlich auch auf Desktop sichtbar (genau dieser Fehler ist uns
   beim ersten Einbau unterlaufen). */
.carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

.carousel-arrow {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 1.6rem;
    line-height: 1;
    padding: 0.25rem 0.4rem;
    cursor: pointer;
    transition: opacity 0.25s;
}

.carousel-arrow:hover {
    opacity: 0.7;
}

.carousel-dots {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Identisches Punkt-Styling wie .ts-dot (Testimonials) - bewusst
   dieselben Werte, damit Karussell- und Testimonial-Navigation optisch
   als ein gemeinsames Muster erkennbar bleiben. */
.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(221, 191, 95, 0.2);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.25s;
}

.carousel-dot--active {
    background: var(--color-primary);
    transform: scale(1.3);
}

/* ==================== DESKTOP-UMSCHALTUNG (ab hier Media Query!) ====================
   Steht bewusst NACH beiden Basis-Blöcken (.scroll-button oben,
   .carousel-nav direkt darüber) - siehe Kommentar bei .carousel-nav zur
   Begründung der Reihenfolge. */
@media (min-width: 768px) {
    .scroll-carousel {
        padding: 0 60px;
    }

    .scroll-button {
        /* display:flex statt block, damit die bestehende
           align-items/justify-content-Zentrierung des Pfeil-Symbols
           greift (siehe Basis-Regel oben). */
        display: flex;
    }

    .carousel-nav {
        display: none;
    }
}

/* ==================== "WENIGE TERMINE"-VARIANTE ====================
   Nur relevant, wenn eine Seite die Zusatzklasse .scroll-carousel--few
   setzt (aktuell: Einsteiger-Seite bei <=2 Terminen) - alle anderen
   Verwendungen von .scroll-carousel (Startseite, Shows/Workshops,
   Practicamos) bleiben davon unberührt, da sie diese Klasse nie
   tragen. Karten werden weiterhin nur EINMAL gerendert (siehe PHP) -
   hier wird nur umgeschaltet, WIE der bestehende Track sie anordnet,
   nicht die Karten selbst dupliziert (wichtig: verhindert doppelte
   IDs im DOM, die die Kurs-Klick-Funktion sonst durcheinanderbringen
   würden). Bewusst NUR ab 768px aktiv: unterhalb bleibt auch bei
   wenigen Terminen das normale Karussell-Verhalten bestehen (Pfeile+
   Punkte), da ein Grid auf schmalen Screens ohnehin nicht nebeneinander
   passen würde - die Karussell-Darstellung ist dort weiterhin sinnvoll. */
@media (min-width: 768px) {
    .scroll-carousel--few {
        /* Das übliche 60px-Seiten-Padding reserviert Platz für die
           Pfeil-Buttons - die sind hier aber ausgeblendet (siehe unten),
           der Platz wird also nie gebraucht. Ohne diese Zeile bräuchten
           2 Karten nebeneinander ~120px mehr Breite, als tatsächlich
           nötig wäre. */
        padding: 0;
    }

    .scroll-carousel--few .scroll-carousel__track {
        display: grid;
        grid-auto-flow: unset;
        /* Bewusste, dokumentierte Abweichung vom Projekt-Prinzip
           "einheitliche Kartenbreite überall" (siehe --event-card-width
           in variables.css): Statt der festen 420px darf die Karte hier
           bis minimal 280px schrumpfen, damit 2 Karten direkt ab 768px
           nebeneinander passen, ohne umzubrechen - andernfalls bräuchte
           es einen deutlich höheren, eigens berechneten Breakpoint
           (~920px), was denselben Effekt (Grid statt Karussell "sobald
           es passt") erst deutlich später einsetzen ließe. Betrifft nur
           diesen schmalen 2-Karten-Sonderfall, nicht die sonstige,
           weiterhin einheitliche 420px-Kartenbreite im restlichen
           Projekt. */
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        justify-content: center;
        overflow-x: visible;
    }

    .scroll-carousel--few .scroll-button,
    .scroll-carousel--few .carousel-nav {
        /* Nichts zum Scrollen vorhanden - Navigations-Elemente wären
           hier funktionslos, daher ausgeblendet. */
        display: none;
    }
}

@media (max-width: 480px) {
    .carousel-nav {
        gap: 0.75rem;
    }
}