/* ==========================================================================
   Media slider – najnowsze wpisy kategorii jako kafelki 4:3 (media-tile.css)
   ========================================================================== */
.media-slider {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* Filter – "Wszystkie" + subcategories */
.media-slider__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.media-slider__filter {
    padding: 10px 16px 9px;
    border: 1px solid var(--theme-palette-color-3);
    border-radius: 0;
    background: var(--theme-palette-color-8);
    font-family: "DM Mono", monospace;
    font-size: 12px;
    line-height: 1;
    color: var(--theme-palette-color-3);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.media-slider__filter:hover {
    background: var(--theme-palette-color-3);
    color: var(--theme-palette-color-8);
}

.media-slider__filter.is-active {
    border-color: var(--theme-palette-color-1);
    background: var(--theme-palette-color-1);
    color: var(--theme-palette-color-8);
    cursor: default;
}

.media-slider__filter:focus-visible {
    outline: 2px solid var(--theme-palette-color-3);
    outline-offset: 3px;
}

/* Slider wrapper */
.media-slider__slider {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* Stage – context for the loader */
.media-slider__stage {
    position: relative;
    min-height: 120px; /* room for the message / loader when there are no slides */
}

/* Swiper */
.media-slider__swiper {
    width: 100%;
}

/* Slides peek out of the container on the right, like in Posts slider */
.media-slider__swiper.swiper-initialized {
    overflow: visible !important;
}

/* Before Swiper starts and in the editor (no viewScript there) – the slides side by side, like the 3/2 columns of the slider */
.media-slider__swiper:not(.swiper-initialized) .swiper-wrapper {
    gap: 24px;
}

.media-slider__swiper:not(.swiper-initialized) .swiper-slide {
    flex-shrink: 0;
    width: calc((100% - 48px) / 3);
}

@media (max-width: 1023px) {
    .media-slider__swiper:not(.swiper-initialized) .swiper-slide {
        width: calc((100% - 24px) / 2);
    }
}

@media (max-width: 639px) {
    .media-slider__swiper:not(.swiper-initialized) .swiper-slide {
        width: 87%;
    }
}

/* No posts / error after filtering */
.media-slider__message {
    margin: 0;
    padding: 24px 0;
    font-family: "DM Mono", monospace;
    font-size: 14px;
    color: var(--theme-palette-color-3);
}

/* Loader – covers the slides while the filter results are loading */
.media-slider__loader {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.65);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.media-slider__loader::after {
    content: "";
    width: 40px;
    height: 40px;
    border: 3px solid var(--theme-palette-color-5);
    border-top-color: var(--theme-palette-color-1);
    border-radius: 50%;
    animation: media-slider-spin 0.8s linear infinite;
}

.media-slider.is-loading .media-slider__loader {
    opacity: 1;
    visibility: visible;
}

/* Filters stay clickable during loading – a newer click cancels the previous request */
.media-slider.is-loading .media-slider__bar,
.media-slider.is-loading .media-slider__pagination {
    pointer-events: none;
    opacity: 0.4;
}

@keyframes media-slider-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .media-slider__loader::after {
        animation-duration: 2.4s;
    }
}

/* Bar above the slides – counter on the left, arrows on the right (the pagination is below the slides) */
.media-slider__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.media-slider__counter {
    margin: 0;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--theme-palette-color-3);
}

.media-slider__nav {
    display: flex;
    justify-self: end;
    gap: 8px;
}

.media-slider__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--theme-palette-color-3);
    border-radius: 0;
    background: var(--theme-palette-color-8);
    color: var(--theme-palette-color-3);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}

.media-slider__prev svg {
    transform: rotate(180deg);
}

.media-slider__next {
    border-color: var(--theme-palette-color-1);
    background: var(--theme-palette-color-1);
    color: var(--theme-palette-color-8);
}

.media-slider__arrow:hover {
    border-color: var(--theme-palette-color-3);
    background: var(--theme-palette-color-3);
    color: var(--theme-palette-color-8);
}

.media-slider__arrow:focus-visible {
    outline: 2px solid var(--theme-palette-color-3);
    outline-offset: 3px;
}

.media-slider__arrow.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* Pagination – bars instead of dots */
.media-slider__pagination {
    position: static;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.media-slider__pagination .swiper-pagination-bullet {
    width: 16px;
    height: 4px;
    margin: 0 !important;
    border-radius: 0;
    background: var(--theme-palette-color-5);
    opacity: 1;
    transition: width 0.3s, background-color 0.3s;
}

.media-slider__pagination .swiper-pagination-bullet-active {
    width: 40px;
    background: var(--theme-palette-color-1);
}

/* Everything fits – no controls needed */
.media-slider__slider.is-locked .media-slider__bar,
.media-slider__slider.is-locked .media-slider__pagination {
    display: none;
}

/* ==========================================================================
   Dark mode – for dark backgrounds: white filters, counter, arrows and messages
   (the subtle glow of the tiles is in media-tile.css)
   ========================================================================== */
.media-slider--dark .media-slider__filter,
.media-slider--dark .media-slider__prev {
    border-color: var(--theme-palette-color-8);
    background: transparent;
    color: var(--theme-palette-color-8);
}

.media-slider--dark .media-slider__filter:hover,
.media-slider--dark .media-slider__arrow:hover {
    border-color: var(--theme-palette-color-8);
    background: var(--theme-palette-color-8);
    color: var(--theme-palette-color-3);
}

/* Active filter and the "next" arrow stay red, as in light mode */
.media-slider--dark .media-slider__filter.is-active {
    border-color: var(--theme-palette-color-1);
    background: var(--theme-palette-color-1);
    color: var(--theme-palette-color-8);
}

.media-slider--dark .media-slider__filter:focus-visible,
.media-slider--dark .media-slider__arrow:focus-visible {
    outline-color: var(--theme-palette-color-8);
}

.media-slider--dark .media-slider__counter,
.media-slider--dark .media-slider__message {
    color: var(--theme-palette-color-8);
}

/* Inactive bars – white at low opacity, visible on any dark background */
.media-slider--dark .media-slider__pagination .swiper-pagination-bullet {
    background: color-mix(in srgb, var(--theme-palette-color-8) 30%, transparent);
}

.media-slider--dark .media-slider__pagination .swiper-pagination-bullet-active {
    background: var(--theme-palette-color-1);
}

/* Loader – dark veil instead of the white one */
.media-slider--dark .media-slider__loader {
    background: color-mix(in srgb, var(--theme-palette-color-3) 60%, transparent);
}

.media-slider--dark .media-slider__loader::after {
    border-color: var(--theme-palette-color-4);
    border-top-color: var(--theme-palette-color-1);
}

/* Tiles in the slider - darker gradient than the default tile (media-tile.css), the title and excerpt got lost on light photos */
.media-slider .media-tile__link::before {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.75) 40%,
        rgba(0, 0, 0, 0.35) 70%,
        rgba(0, 0, 0, 0.35) 100%
    );
}

/* Editor placeholder - no category / no posts */
.media-slider__notice {
    padding: 16px;
    border: 1px dashed var(--theme-palette-color-5);
}