/* Post Slider Widget styles - Canvas Theme */

/* Container must not overflow page width */
.js-blog-slider.swiper,
.js-blog-slider {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  /* overflow handled by explicit classes below to support carousel toggle */
}

/* Responsive max-widths based on Tailwind CSS breakpoints */
/* Adjusted to subtract container padding (left + right) */

/* md: 768px and up - container padding: 2rem total left+right = 4rem */
@media (min-width: 768px) {
  .js-blog-slider.swiper,
  .js-blog-slider {
    max-width: calc(768px - 4rem) !important;
  }
}

/* lg: 1024px and up - container padding: 4rem total left+right = 8rem */
@media (min-width: 1024px) {
  .js-blog-slider.swiper,
  .js-blog-slider {
    max-width: calc(1024px - 8rem) !important;
  }
}

/* xl: 1280px and up - container padding: 5rem total left+right = 10rem */
@media (min-width: 1280px) {
  .js-blog-slider.swiper,
  .js-blog-slider {
    max-width: calc(1280px - 10rem) !important;
  }
}

/* 2xl: 1536px and up - container padding: 6rem total left+right = 12rem */
@media (min-width: 1536px) {
  .js-blog-slider.swiper,
  .js-blog-slider {
    max-width: calc(1536px - 12rem) !important;
  }
}

/* Elementor container settings take priority over default max-width */
.elementor-widget-container .js-blog-slider.swiper,
.elementor-widget-container .js-blog-slider {
  max-width: none; /* Remove default max-width when inside Elementor container */
  margin-left: 0;
  margin-right: 0;
}

/* When Elementor container has specific width settings, respect them */
.elementor-container .elementor-widget-container .js-blog-slider.swiper,
.elementor-container .elementor-widget-container .js-blog-slider {
  width: 100%; /* Fill the container width set by Elementor */
}

/* Overflow control to mirror Theme Options carousel toggle */
.js-blog-slider.swiper:not(.overflow-hidden) {
  overflow: visible;
}
.js-blog-slider.swiper.overflow-hidden {
  overflow: hidden;
}

/* Swiper wrapper and slides must stay in bounds */
.js-blog-slider .swiper-wrapper {
  width: 100%;
  max-width: 100%;
}
.js-blog-slider .swiper-slide {
  width: 100%;
  max-width: 100%;
  flex-shrink: 0;
}

/* Image handling */
.js-blog-slider .slide-image,
.js-blog-slider .slide-image img,
.js-blog-slider img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Navigation arrows - identical to home slider styling */
.js-blog-slider .swiper-button-prev,
.js-blog-slider .swiper-button-next {
  color: hsl(var(--text-inverse));
}

/* SVG color for arrows - identical to home slider */
.js-blog-slider .swiper-button-next>svg, 
.js-blog-slider .swiper-button-prev>svg { 
    color: hsl(var(--neutral-0)); 
} 

/* Opacity and transition for enabled arrows - identical to home slider */
.js-blog-slider.swiper .swiper-button-next:not(.swiper-button-hidden):not(.swiper-button-disabled), 
.js-blog-slider.swiper .swiper-button-prev:not(.swiper-button-hidden):not(.swiper-button-disabled) { 
    opacity: .3; 
    transition: opacity .2s ease; 
}

/* On hover over the swiper container: fully reveal enabled nav buttons - identical to home slider */
.js-blog-slider.swiper:hover .swiper-button-prev:not(.swiper-button-disabled):not(.swiper-button-hidden),
.js-blog-slider.swiper:hover .swiper-button-next:not(.swiper-button-disabled):not(.swiper-button-hidden) {
  opacity: 1;
}

/* Protect Post Slider Widget images from prose CSS margins */
.js-blog-slider img {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Chevron icon sizing and stroke behavior - identical to home slider */
.js-blog-slider .swiper-button-prev .chevron-icon,
.js-blog-slider .swiper-button-next .chevron-icon {
  width: 60%;
  height: 60%;
  display: block;
}

/* Ensure chevrons are strokes only, not filled (override vendor svg fill) */
.js-blog-slider .swiper-button-prev .chevron-icon path,
.js-blog-slider .swiper-button-next .chevron-icon path {
  fill: none;
  stroke: currentColor;
}

/* Neutralize vendor rotation for prev icon in LTR (we provide directional SVGs) */
.swiper-horizontal:not(.swiper-rtl) .js-blog-slider .swiper-button-prev .swiper-navigation-icon { 
  transform: none !important; 
}
.swiper-horizontal:not(.swiper-rtl) .js-blog-slider .swiper-button-prev .chevron-icon { 
  transform: none !important; 
}

/* Pagination dots styling - identical to home slider */
.js-blog-slider .swiper-pagination {
  bottom: 3rem;
  right: 3rem;
  left: unset;
  width: auto;
  top: auto; /* override any previous top utilities */
}

.js-blog-slider .swiper-pagination > .swiper-pagination-bullet {
  transition: 0.25s;
  background-color: hsl(var(--neutral-0));
  --swiper-pagination-bullet-border-radius: 9999px;
  position: relative; /* enable pseudo-element fill positioning */
  overflow: hidden; /* clip the progress fill inside the pill */
}

/* Swiper: pagination bullet default opacity (global override) */
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
  opacity: var(--swiper-pagination-bullet-inactive-opacity, .3);
}

/* Home slider: Active bullet size and shape */
.js-blog-slider .swiper-pagination > .swiper-pagination-bullet.swiper-pagination-bullet-active {
  --swiper-pagination-bullet-width: 1.5rem;
}

/* Home slider: Active bullet size when in autoplay mode */
.js-blog-slider.swiper-autoplay .swiper-pagination > .swiper-pagination-bullet.swiper-pagination-bullet-active {
  --swiper-pagination-bullet-width: 3.5rem;
  /* Base (unfilled) uses the same color with the inactive opacity */
  background-color: hsl(var(--neutral-0) / var(--swiper-pagination-bullet-inactive-opacity, .2));
}

/* Use a transform-based pseudo-element for smooth, GPU-accelerated progress */
.js-blog-slider.swiper-autoplay .swiper-pagination > .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background-color: hsl(var(--neutral-0));
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  backface-visibility: hidden;
  animation: homeBulletProgressFill var(--swiper-autoplay-delay, 10000ms) linear forwards;
  pointer-events: none;
}

@keyframes homeBulletProgressFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Entry title typography/colors - identical to home slider */
.js-blog-slider .entry-title a {
  color: hsl(var(--neutral-0));
  font-size: 1.875rem;
  line-height: 2.25rem;
  line-height: 1;
  letter-spacing: -0.05em;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

@media (min-width: 768px) {
  .js-blog-slider .entry-title a {
    font-size: 3rem;
    line-height: 1.25;
  }
}

.js-blog-slider .entry-title a:hover {
  opacity: 0.8;
}

/* Entry content color - identical to home slider */
.js-blog-slider .entry-content {
  color: hsl(var(--gray-300));
  display: none;
  max-width: 36rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  line-height: 1.5;
  opacity: 0.9;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .js-blog-slider .entry-content {
    display: block;
  }
}

/* Entry footer "read more" button - identical to blog overlay layout */
.js-blog-slider .entry-footer a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  background-color: hsl(var(--background-secondary));
  color: hsl(var(--text-inverse));
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.js-blog-slider .entry-footer a:hover {
  background-color: hsl(var(--background-secondary-hover));
}

.js-blog-slider .entry-footer a:focus {
  outline: 2px solid hsl(var(--border-focus));
  outline-offset: 2px;
}

.js-blog-slider .entry-footer svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s;
}

.js-blog-slider .entry-footer a:hover svg {
  transform: translateX(0.25rem);
}

/* Category badges - identical to search modal style */
.js-blog-slider .search-category-btn {
  background: hsl(var(--glass-background-primary-hover));
  color: hsl(var(--neutral-0));
  font-weight: 600;
  line-height: 1.5rem;
  transition: all 0.3s ease;
}

.js-blog-slider .search-category-btn:hover {
  background: hsl(var(--glass-background-primary-hover));
}

/* Slide overlay */
.js-blog-slider .swiper-slide-overlay {
  background: linear-gradient(
    to top,
    hsl(var(--opacity-black-88)),
    hsl(var(--opacity-black-32)),
    transparent
  );
}

/* Image aspect ratio and styling */
.js-blog-slider .swiper-slide-image {
  position: relative;
  overflow: hidden;
}

.js-blog-slider .swiper-slide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .js-blog-slider .swiper-button-prev,
  .js-blog-slider .swiper-button-next {
    display: none;
  }
  
  .js-blog-slider .swiper-slide-overlay {
    padding: 1.5rem;
  }
  
  .js-blog-slider .entry-title {
    font-size: 1.125rem;
  }
}

@media (max-width: 480px) {
  .js-blog-slider .swiper-slide-overlay {
    padding: 1rem;
  }
  
  .js-blog-slider .entry-title {
    font-size: 1rem;
  }
  
  .js-blog-slider .entry-content {
    font-size: 0.875rem;
  }
}