/* Slick CSS imports */
@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css');

/* Roboto font */
.posts-slider-block .font-roboto {
    font-family: 'Roboto', sans-serif;
}

/* Reset Slick default arrow content */
.posts-slider-block .slick-prev:before,
.posts-slider-block .slick-next:before {
    display: none;
}

/* Remove focus outline */
.posts-slider-block .slick-prev:focus,
.posts-slider-block .slick-next:focus {
    outline: none;
}

/* === Double Ring Arrow === */
.posts-slider-block .slick-prev,
.posts-slider-block .slick-next {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 9999px;
    transition: transform 0.2s ease;
}
.posts-slider-block .slick-prev:hover,
.posts-slider-block .slick-next:hover {
    transform: translateY(-50%) scale(1.05);
}
.posts-slider-block .slick-prev:active,
.posts-slider-block .slick-next:active {
    transform: translateY(-50%) scale(0.95);
}

/* Inner ring */
.posts-slider-block .slick-prev > div,
.posts-slider-block .slick-next > div {
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2.5px white; /* Mobile default white gap */
}

/* Font Awesome icons */
.posts-slider-block .slick-prev i,
.posts-slider-block .slick-next i {
    color: white;
    font-size: 0.875rem;
}

/* === Sizes === */

/* Mobile: 30 outer, 25 inner + 2.5px white ring */
.posts-slider-block .slick-prev,
.posts-slider-block .slick-next {
    width: 1.875rem;
    height: 1.875rem;
}
.posts-slider-block .slick-prev > div,
.posts-slider-block .slick-next > div {
    width: 1.5625rem;
    height: 1.5625rem;
    box-shadow: 0 0 0 2.5px white;
}

/* Tablet ≥640px: 35 outer, 30 inner + 2.5px */
@media (min-width: 640px) {
    .posts-slider-block .slick-prev,
    .posts-slider-block .slick-next {
        width: 2.1875rem;
        height: 2.1875rem;
    }
    .posts-slider-block .slick-prev > div,
    .posts-slider-block .slick-next > div {
        width: 1.875rem;
        height: 1.875rem;
        box-shadow: 0 0 0 2.5px white;
    }
}

/* Desktop ≥1200px: 60 outer, 50 inner + 5px */
@media (min-width: 1200px) {
    .posts-slider-block .slick-prev,
    .posts-slider-block .slick-next {
        width: 3.75rem;
        height: 3.75rem;
    }
    .posts-slider-block .slick-prev > div,
    .posts-slider-block .slick-next > div {
        width: 3.125rem;
        height: 3.125rem;
        box-shadow: 0 0 0 5px white;
    }
}

/* === Positioning === */
.posts-slider-block .slick-prev {
    left: -0.3rem;
}
.posts-slider-block .slick-next {
    right: -0.3rem;
}
@media (min-width: 640px) {
    .posts-slider-block .slick-prev {
        left: -1.5rem;
    }
    .posts-slider-block .slick-next {
        right: -1.5rem;
    }
}
@media (min-width: 768px) {
    .posts-slider-block .slick-prev {
        left: -4vw;
    }
    .posts-slider-block .slick-next {
        right: -4vw;
    }
}
@media (min-width: 1024px) {
    .posts-slider-block .slick-prev {
        left: -2.5rem;
    }
    .posts-slider-block .slick-next {
        right: -2.5rem;
    }
}
@media (min-width: 1200px) {
    .posts-slider-block .slick-prev {
        left: -3.5rem;
    }
    .posts-slider-block .slick-next {
        right: -3.5rem;
    }
}
@media (min-width: 1200px) {
    .posts-slider-block .slick-prev {
        left: -4.5rem;
    }
    .posts-slider-block .slick-next {
        right: -4.5rem;
    }
}
/* Slick dots spacing */
.posts-slider-block .slick-dots {
    bottom: -3rem;
}

/* Center each slide */
.posts-slider-block .slick-slide {
    display: flex !important;
    justify-content: center;
}

/* Slide container width */
.posts-slider-block .slick-slide > div {
    width: 100%;
    max-width: 28rem;
    margin: 0 auto;
}