/* ============================================================
   fux_sitepackage_hsgm — Karten-Karussell (Rahmen-Komponente)

   Horizontale Kartenreihe nach dem Reihen-/Navigationsmuster von
   apple.com/mac ("Why Apple is the best place to shop Mac"), Auftrag
   User 2026-10-13. Apple liefert nur Reihe und Navigation — die Karten
   bleiben die bestehenden Kacheln mit ihren Zustaenden (News-Karte,
   Partial CuttingTip/Card).

   Genutzt von:
     - News-Teaser der Startseite (Ext/News/Templates/News/List.html,
       Template-Layout homeTeaser)
     - fux_products_hsgm: Reihe "Schneidspitzen fuer <Anwendung>"
       (Templates/Page/CuttingTipDetail.html) und CE fux_schneidspitzen
   Geladen zentral vom Rahmen-Layout Relaunch.html (carousel.css/.js);
   die Templates liefern nur das Markup unten. Ablage im Sitepackage, weil das Reihenmuster
   Rahmen-/Designsystem ist (Zustaendigkeits-Regel 2026-09-16).

   Markup:
     <div class="fux-carousel" data-fux-carousel
          data-label-prev="…" data-label-next="…">
       <ul class="fux-carousel-track" id="…" role="list">
         <li class="fux-carousel-item"> Karte </li> …
       </ul>
     </div>
   Den Bereichsnamen traegt die umgebende <section aria-labelledby>
   (implizite Rolle region), damit keine doppelte Landmarke entsteht.

   Progressive Enhancement:
     - Ohne JS: Reihe per Touch/Trackpad/Shift+Mausrad/Tab scrollbar,
       Scrollleiste SICHTBAR (einziger Hinweis fuer Mausnutzer), keine
       Buttons (sie entstehen erst im JS), kein Auslaufen bis zum
       Viewport-Rand.
     - Mit JS (.is-enhanced): Scrollleiste ausgeblendet, Pfeil-Buttons
       unter der Reihe rechts, Reihe laeuft beidseitig bis zum
       Viewport-Rand aus (--fux-carousel-bleed-*, von carousel.js
       gemessen — kein 100vw, das mit klassischen Scrollleisten die
       Seite horizontal scrollen liesse).
   ============================================================ */

.fux-carousel {
    /* Kartenbreite: Desktop ~380 px wie Apple, mobil ~80 % Viewport */
    --fux-carousel-item-width: min(23.75rem, 80vw);
    --fux-carousel-gap: 1.5rem;
    /* Luft im Scroll-Container fuer Hebung, Schatten und Fokusrahmen
       (overflow-x:auto erzwingt overflow-y:auto und wuerde sie sonst
       abschneiden); per negativem Margin ausgeglichen */
    --fux-carousel-pad-top: 0.75rem;
    --fux-carousel-pad-bottom: 1.5rem;
    /* Auslauf bis zum Viewport-Rand (JS); ohne JS kleiner Rand fuer
       den Fokusrahmen der ersten/letzten Karte */
    --fux-carousel-bleed-start: 0.5rem;
    --fux-carousel-bleed-end: 0.5rem;
    position: relative;
}

.fux-carousel-track {
    display: flex;
    gap: var(--fux-carousel-gap);
    margin: calc(-1 * var(--fux-carousel-pad-top)) calc(-1 * var(--fux-carousel-bleed-end)) calc(-1 * var(--fux-carousel-pad-bottom)) calc(-1 * var(--fux-carousel-bleed-start));
    /* Endabstand nicht als padding-inline-end: den rechnet Chrome im
       Flex-Scroll-Container nicht in den Scrollbereich (Probe 2026-10-13,
       letzte Karte endete am Viewport- statt am Inhaltsrand) — siehe
       .fux-carousel-item:last-child */
    padding: var(--fux-carousel-pad-top) 0 var(--fux-carousel-pad-bottom) var(--fux-carousel-bleed-start);
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* Einrasten und Fokus-Nachscrollen an der Inhaltskante (WCAG 2.4.11:
       die fokussierte Karte steht vollstaendig in Sicht) */
    scroll-padding-inline: var(--fux-carousel-bleed-start) var(--fux-carousel-bleed-end);
}

.fux-carousel.is-enhanced .fux-carousel-track {
    scrollbar-width: none;
}

.fux-carousel.is-enhanced .fux-carousel-track::-webkit-scrollbar {
    display: none;
}

.fux-carousel-item {
    display: flex;
    flex: 0 0 var(--fux-carousel-item-width);
    min-width: 0;
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
}

/* Endabstand: letzte Karte schliesst am Ende buendig mit der Inhaltskante.
   snap-align end macht genau diese Endposition zum Rastpunkt — sonst rastet
   ein Wisch bis zum Ende an einem Kartenanfang davor ein und "Weiter"
   bliebe aktiv (Probe 2026-10-13) */
.fux-carousel-item:last-child {
    margin-inline-end: var(--fux-carousel-bleed-end);
    scroll-snap-align: end;
}

/* Karten gleich hoch und volle Item-Breite */
.fux-carousel-item > * {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---------- Kopfbereich (Nachtrag User 2026-10-13): Ueberschrift links,
   Link zur Uebersicht rechts auf der Grundlinie der LETZTEN Ueberschriften-
   zeile (Apple "Shop Mac ›"); mobil darunter linksbuendig, vor der Reihe.
   DOM: Ueberschrift -> (Untertitel) -> Link -> Liste -> Buttons, damit
   Lese-/Tab-Reihenfolge der Darstellung folgt (1.3.2/2.4.3).
     <div class="fux-carousel-head">
       <h2 class="fux-carousel-title">…</h2>
       <p>Untertitel (optional, Spalte 1)</p>
       <a class="fux-carousel-more">…</a>
     </div> ---------- */
.fux-carousel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: last baseline;
    column-gap: 2rem;
    margin: 0 0 2rem;
    text-align: start;
}

.fux-carousel-head > * {
    grid-column: 1;
}

/* 0,2,1: schlaegt die Kontext-Margins (.tip-detail .sd-h2, .section-title) */
.fux-carousel-head > h2.fux-carousel-title {
    margin: 0;
    text-align: start;
}

.fux-carousel-head > .fux-carousel-more {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
}

/* Textlink im CI; Farbe je Kontext ueber --fux-carousel-link-color
   (Detailseite: --tip-blue). Pfeil wie die bestehenden Weiter-Links
   (.sd-all-link: "→" per ::after, Alt-Syntax = von Screenreadern nicht
   vorgelesen; erste Deklaration Rueckfall ohne Alt-Syntax). */
.fux-carousel-more {
    /* inline-block statt inline-flex: der Pfeil bleibt beim Umbruch (320 px)
       am letzten Wort statt als eigenes Flex-Item an den Rand zu rutschen */
    display: inline-block;
    min-height: 1.5rem; /* Zielgroesse >= 24 px (WCAG 2.5.8) */
    padding: 0.25rem 0;
    color: var(--fux-carousel-link-color, var(--hsgm-blue, #0066cc));
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    overflow-wrap: anywhere;
}

.fux-carousel-more::after {
    content: "\00a0\2192";
    content: "\00a0\2192" / "";
}

.fux-carousel-more:hover {
    text-decoration-thickness: 2px;
}

.fux-carousel-more:focus-visible,
body.fux-relaunch .fux-carousel-more:focus-visible {
    outline: 2px solid var(--fux-carousel-link-color, var(--hsgm-blue, #0066cc));
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .fux-carousel-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .fux-carousel-head > .fux-carousel-more {
        grid-row: auto;
        grid-column: 1;
        justify-self: start;
        margin-top: 0.5rem;
    }
}

/* ---------- Navigation: zwei runde Pfeil-Buttons unter der Reihe rechts.
   Optik aus dem Bestand (Produkt-Slideshow .slideshow-prev/-next: weiss,
   1px --gray-tertiary, rund, leichter Schatten), Hover im Kachel-CI
   (--hsgm-blue-light-Rahmen), auf 44 px vergroessert (WCAG 2.5.8 AA
   verlangt 24 px; 44 px wie Seitenwechsel/Touch). ---------- */
.fux-carousel-nav {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.fux-carousel-nav[hidden] {
    display: none;
}

.fux-carousel-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--gray-primary, #1d1d1f);
    background: var(--white, #fff);
    border: 1px solid var(--gray-tertiary, #d2d2d7);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.fux-carousel-btn svg {
    display: block;
    width: 20px;
    height: 20px;
}

.fux-carousel-btn:hover:not([aria-disabled="true"]) {
    color: var(--hsgm-blue, #0066cc);
    border-color: var(--hsgm-blue-light, #3384d9);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.fux-carousel-btn:focus-visible,
body.fux-relaunch .fux-carousel-btn:focus-visible {
    outline: 2px solid var(--hsgm-blue, #0066cc);
    outline-offset: 2px;
}

/* Am Anfang/Ende: aria-disabled statt disabled, damit der Fokus beim
   Erreichen des Endes nicht verloren geht (Button bleibt fokussierbar,
   wird als "nicht verfuegbar" angesagt, Klick ohne Wirkung). Deaktivierte
   Bedienelemente sind von 1.4.11 ausgenommen. */
.fux-carousel-btn[aria-disabled="true"] {
    color: var(--gray-secondary, #6e6e73);
    box-shadow: none;
    opacity: 0.45;
    cursor: default;
}

@media (prefers-reduced-motion: no-preference) {
    .fux-carousel-track {
        scroll-behavior: smooth;
    }

    .fux-carousel-btn {
        transition: color 0.3s, border-color 0.3s, box-shadow 0.3s;
    }
}

@media (forced-colors: active) {
    .fux-carousel-btn {
        color: ButtonText;
        border-color: ButtonText;
        forced-color-adjust: none;
        background: ButtonFace;
    }

    .fux-carousel-btn:hover:not([aria-disabled="true"]) {
        color: Highlight;
        border-color: Highlight;
    }

    .fux-carousel-btn[aria-disabled="true"] {
        color: GrayText;
        border-color: GrayText;
        opacity: 1;
    }
}