/**
 * WX Wrapped: Styles für den 'Scroll Container' Block Variation.
 * Ermöglicht ausschließlich horizontales Scrollen (Quer-Scroll).
 */


/* Horizontal Scroll Container
   ---------------------------------------------------------------------------------------------------- */
.horizontal-scroll-container,
.is-style-scroll-container {
    box-sizing: border-box;
    display: flex;
    align-items: stretch !important;
    gap: 1.5em;
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 100px;
    padding: 0.5em 2em 1.5em 0.5em;
    scrollbar-width: auto;
    scrollbar-color: var(--wp--preset--color--primary) transparent;
    /*scroll-snap-type: x mandatory; /* optional: for snapping behavior */

    -webkit-touch-callout: none;
    -webkit-tap-highlighter-color: transparent;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
} 

.horizontal-scroll-container > *,
.is-style-scroll-container > * {
    flex: 0 0 auto; /* prevent shrinking and allow horizontal layout */
    width: min(400px, 42vh);
    min-width: 320px;
    max-width: calc(100vw - 5em);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: relative;
    scroll-snap-align: start; /* optional: aligns to scroll snapping */
}

:where(.horizontal-scroll-container, .is-style-scroll-container) [class*=wp-block-group] > [class*=is-style-box], 
:where(.horizontal-scroll-container, .is-style-scroll-container) [class*=is-style-box] {
    margin: 0 !important;
}


@media (max-width: 559px) {
    .is-layout-constrained > .is-style-scroll-container:where(.alignwide), 
    .is-layout-flow > .is-style-scroll-container,
    .is-layout-constrained > .horizontal-scroll-container:where(.alignwide), 
    .is-layout-flow > .horizontal-scroll-container {
        margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
        margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
        max-width: none;
    }
}


.wx-wrapped > .is-style-box {
    background-repeat: no-repeat !important;
    background-size: 75% !important;
}
.wx-wrapped > .is-style-box:nth-child(1) {
    background-image: url(assets/img/wx-wrapped-2025-decoration-1.png) !important;
    background-position: top left !important;
}
.wx-wrapped > .is-style-box:nth-child(3) {
    background-image: url(assets/img/wx-wrapped-2025-decoration-2.png) !important;
    background-position: bottom left !important;
}
.wx-wrapped > .is-style-box:not(:nth-child(1)):not(:nth-child(3)) {
    background-image: none !important;
}

.wx-wrapped .is-style-tag,
.wx-wrapped .is-style-tag.has-background {
    display: inline-block;
    font-weight: 700;
    color: #555;
    background-color: rgba(32, 32, 32, .07);
    padding: .375em 1em;
    margin-bottom: 0.25em;
    border-radius: 8px;
}

.wx-wrapped .wp-block-media-text {
    position: relative;
}
.wx-wrapped .wp-block-media-text__media a {
    position: static;
}
.wx-wrapped .wp-block-media-text a::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    cursor: pointer;
    content: "";
}