/*
=====================================================
 EF22 FRAMEWORK
 HIGHLIGHTS.CSS
 Version 4.2
=====================================================
*/


/* ==========================================
   HIGHLIGHTS
========================================== */

.highlights {

    width:
        100%;

    overflow:
        hidden;

}


/* ==========================================
   VIEWPORT
========================================== */

.highlights-viewport {

    position:
        relative;

    width:
        100%;

    overflow:
        hidden;

    touch-action:
        pan-y;

    user-select:
        none;

    -webkit-user-select:
        none;

    cursor:
        grab;

}

.highlights-viewport.is-dragging {

    cursor:
        grabbing;

}


/* ==========================================
   TRACK

   Der Track scrollt nicht selbst.

   Alle Karten werden absolut innerhalb
   dieser Bühne positioniert.
========================================== */

.highlights-track {

    position:
        relative;

    width:
        100%;

    padding-top:
        var(--space-md);

    padding-bottom:
        var(--space-xl);

}


/* ==========================================
   KARTE
========================================== */

.highlight-card {

    position:
        absolute;

    top:
        var(--space-md);

    left:
        50%;

    width:
        85%;

    padding:
        0;

    overflow:
        hidden;

    border:
        1px solid
        rgba(111, 191, 115, .35);

    border-radius:
        var(--radius-xl);

    background:
        var(--color-background-medium);

    color:
        var(--color-text-on-dark);

    box-shadow:
        0 0 24px rgba(111, 191, 115, .08),
        0 4px 0 rgba(0, 0, 0, .70),
        0 8px 14px rgba(0, 0, 0, .35),
        0 18px 32px rgba(0, 0, 0, .22);

    font-family:
        inherit;

    text-align:
        left;

    cursor:
        inherit;

    appearance:
        none;

    -webkit-appearance:
        none;

    transform-origin:
        center center;

    will-change:
        transform,
        opacity;

}


/* ==========================================
   MEDIA
========================================== */

.highlight-card-media {

    width:
        100%;

    aspect-ratio:
        16 / 9;

    background-position:
        center;

    background-repeat:
        no-repeat;

    background-size:
        cover;

    background-color:
        var(--color-background-dark);

}

.highlight-card-media.is-wide-image {

    background-size:
        contain;

}

/* ==========================================
   CONTENT
========================================== */

.highlight-card-content {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        var(--space-sm);

    padding:
        var(--space-lg)
        var(--space-md);

    background:
        var(--color-background-medium);

    text-align:
        center;

}


/* ==========================================
   TYPE
========================================== */

.highlight-card-title {

    display:
        inline-flex;

    justify-content:
        center;

    align-items:
        center;

    min-height:
        36px;

    padding:
        0
        var(--space-md);

    border:
        2px solid
        var(--color-primary);

    border-radius:
        999px;

    color:
        var(--color-primary);

    font-size:
        var(--font-size-xs);

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

    text-align:
        center;

}


/* ==========================================
   DATUM
========================================== */

.highlight-card-date {

    color:
        var(--color-text-on-dark);

    font-size:
        var(--font-size-lg);

    font-weight:
        600;

    line-height:
        1.3;

    text-align:
        center;

}


/* ==========================================
   AKTIVE KARTE
========================================== */

.highlight-card[aria-current="true"] {

    border-color:
        rgba(111, 191, 115, .60);

}


/* ==========================================
   FOKUS
========================================== */

.highlight-card:focus-visible {

    outline:
        2px solid
        var(--color-primary);

    outline-offset:
        3px;

}


/* ==========================================
   INDIKATOREN
========================================== */

.highlights-indicators {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    /* 16 px Abstand: Mitte zu Mitte 24 px – so viel
       braucht ein Finger (vorher 8 px, zu eng) */
    gap:
        var(--space-md);

    margin-top:
        var(--space-md);

}


/* ==========================================
   INDIKATOR
========================================== */

.highlights-indicator {

    width:
        8px;

    height:
        8px;

    padding:
        0;

    border:
        none;

    border-radius:
        999px;

    background:
        var(--color-border-strong);

    cursor:
        pointer;

    transition:
        width var(--transition-normal),
        background var(--transition-normal);

}

/* Unsichtbare, größere Tippfläche um den Punkt */
.highlights-indicator {

    position:
        relative;

}

.highlights-indicator::before {

    content:
        "";

    position:
        absolute;

    inset:
        -8px;

}

.highlights-indicator.is-active {

    width:
        24px;

    background:
        var(--color-primary);

}


/* ==========================================
   INDIKATOR FOKUS
========================================== */

.highlights-indicator:focus-visible {

    outline:
        2px solid
        var(--color-primary);

    outline-offset:
        3px;

}


/* ==========================================
   EIN HIGHLIGHT
========================================== */

.highlights-track
.highlight-card:only-child {

    opacity:
        1;

}


/* ==========================================
   TABLET
========================================== */

@media (min-width: 481px) {

    .highlight-card {

        width:
            76%;

    }

    .highlights-track::before {

        width:
            76%;

    }

}


/* ==========================================
   DESKTOP
========================================== */

@media (min-width: 769px) {

    .highlight-card {

        width:
            60%;

        max-width:
            720px;

    }

    .highlights-track::before {

        width:
            60%;

        max-width:
            720px;

    }

}


/* ==========================================
   DESKTOP (ab 900 px)
   Bilder im Originalformat: ganz zeigen statt
   auf 16:9 zuschneiden (entschieden 03.11.)
========================================== */

@media (min-width: 900px) {

    .highlight-card-media {

        background-size:
            contain;

    }

}