/* ==========================================================================
   Post carousel
   Markup (Bricks): Div.post-carousel > Block.post-carousel__item (query loop)
   Built by post-carousel.js: desktop = big / 2 stacked columns, phones = 1 post per slide
   ========================================================================== */

/* Cards */

.post-carousel__item {
  display: flex;
  height: 100%;
}
.post-carousel__item img {
  flex: 1;
  width: 100%;
  min-height: 180px;
  object-fit: cover;
}

/* Columns */
.post-carousel__col--stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 30px;
}
.post-carousel__col--big > .post-carousel__item {
  height: 100%;
}

/* Arrows: match the Learn and Discover slider */
.post-carousel > .splide__arrows > .splide__arrow {
  width: 30px;
  height: 30px;
  top: -70px;
}
.post-carousel > .splide__arrows > .splide__arrow--prev {
  right: 40px;
  left: auto;
}
.post-carousel > .splide__arrows svg {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

@media (max-width: 1200px) {
  .post-carousel > .splide__arrows > .splide__arrow { top: -60px; }
}

/* Dark arrows variant: add the class "carousel-arrows--dark" to any parent (e.g. the section) */
.carousel-arrows--dark .post-carousel .splide__arrow .arrow-circle,
.carousel-arrows--dark .post-carousel .splide__arrow .arrow-stem {
  stroke: #3a3b3d !important;
  stroke-width: 8px !important;
}
.carousel-arrows--dark .post-carousel .splide__arrow .arrow-circle {
  fill: none !important;
  transition: fill 0.2s;
}
.carousel-arrows--dark .post-carousel .splide__arrow:hover .arrow-circle,
.carousel-arrows--dark .post-carousel .splide__arrow:focus-visible .arrow-circle {
  fill: #fff !important;
}

@media (max-width: 767px) {
  .post-carousel > .splide__arrows > .splide__arrow { top: -48.5px; }
}

@media (min-width: 768px) {
  .post-carousel > .splide__arrows > .splide__arrow { top: -78.5px; }
}