/* ==========================================================================
   Posts slider – slider z wybranymi wpisami
   ========================================================================== */
.posts-slider {
    width: 100%;
}

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

/* Bottom bar – counter on the left, pagination in the middle, arrows on the right (equal side columns keep the pagination centred) */
.posts-slider__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

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

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

.posts-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;
}

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

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

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

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

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

/* Swiper */
.posts-slider__swiper {
    width: 100%;
    overflow: visible !important;
}

.posts-slider__swiper .swiper-slide {
    position: relative;
    height: auto; /* equal-height cards */
}

/* Vertical line between posts – in the middle of the 24px gap (spaceBetween in posts-slider.js), the one at the edge is clipped by the swiper */
.posts-slider__slide::after {
    content: "";
    position: absolute;
    top: 0;
    right: -12px;
    width: 1px;
    height: 100%;
    background: var(--theme-palette-color-5);
}

.posts-slider__slide:last-child::after {
    display: none;
}

/* Blocksy card – one post per slide, stretched to the slide height */
.posts-slider__slide .ct-posts-shortcode,
.posts-slider__slide .entries {
    height: 100%;
}

/* Not the grid from Customizer – it would shrink the single card to one column */
.posts-slider__slide .entries {
    display: flex !important;
    flex-direction: column;
}

/* Light mode (default) – card as in HomeHero: default colours, line under the post and between posts */
.posts-slider__slide .entries article {
    flex: 1;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--theme-palette-color-5) !important;
}

/* Card dividers from the listings – replaced by the slider lines */
.posts-slider__slide .entries article:before {
    display: none !important;
}

.posts-slider__slide .entries article h2 {
    margin: 0 !important;
}

/* Dark mode – for dark backgrounds: black tile without lines or borders, 16px content padding, white meta (tag + date), title and counter */
.posts-slider--dark .posts-slider__slide .entries article {
    padding-bottom: 0 !important;
    border: none !important;
    background: var(--theme-palette-color-4);
}

/* Tiles are separated by their background – no divider line in the gap */
.posts-slider--dark .posts-slider__slide::after {
    display: none;
}

/* Image stays edge to edge, the 16px padding of the content gives the spacing below it */
.posts-slider--dark .posts-slider__slide .entries article .ct-media-container {
    margin-bottom: 0 !important;
}

/* Content (meta + title) – the wrapper / .card-content after the image, absolute labels left alone */
.posts-slider--dark .posts-slider__slide .entries article > *:not(.ct-media-container):not(.post__card-label):not(.custom-url__youtube) {
    padding: 16px;
}

.posts-slider--dark .entries article .card__tag,
.posts-slider--dark .entries article .card__tag *,
.posts-slider--dark .entries article .entry-meta,
.posts-slider--dark .entries article .entry-meta *,
.posts-slider--dark .entries article .entry-title,
.posts-slider--dark .entries article .entry-title a,
.posts-slider--dark .posts-slider__counter {
    color: var(--theme-palette-color-8) !important;
}

/* Pagination – bars instead of dots */
.posts-slider__pagination {
    position: static;
    display: flex;
    justify-content: center;
    gap: 8px;
    width: auto !important; /* Swiper sets 100%, which would push the counter and arrows out of the bar */
}

.posts-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;
}

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

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

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

/* Tablet - card title cut to 4 lines, mobile - to 3 (ellipsis at the end) */
@media (max-width: 1024px) {
    .posts-slider__slide .entries article .entry-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        overflow: hidden;
    }
}

@media (max-width: 767px) {
    .posts-slider__slide .entries article .entry-title {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    /* Bar - pagination in the first line, counter (left) + arrows (right) in the second */
    .posts-slider__bar {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "pagination pagination"
            "counter nav";
    }

    .posts-slider__pagination {
        grid-area: pagination;
    }

    .posts-slider__counter {
        grid-area: counter;
    }

    .posts-slider__nav {
        grid-area: nav;
    }
}