/**
 * KMOnlineSolutions - Blog Slider (Portal) frontend.
 *
 * Slides are fed by the widget's WP_Query (see
 * includes/class-elementor-blog-slider-widget.php): image on top, post title
 * BELOW the image (never overlaid). This stylesheet only handles layout and
 * the per-slide image_fit display modes (data-fit lives on each
 * .wppm-blog-slide so every post can use its own mode):
 *   cover   -> object-fit: cover  (crop to fill)
 *   contain -> object-fit: contain, auto height (whole image visible)
 *   fill    -> object-fit: fill   (stretch)
 *   repeat  -> tiled background-image
 */

.wppm-blog-slider {
  position: relative;
  width: 100%;
}

.wppm-blog-viewport {
  overflow: hidden;
  width: 100%;
}

.wppm-blog-track {
  display: flex;
  gap: 16px;
  /* Every slide stretches to the tallest one, so a short slide never leaves
     a white void under its title — its image area grows instead. */
  align-items: stretch;
  transition: transform 0.4s ease;
  will-change: transform;
}

.wppm-blog-slide {
  /* flex-grow:1 so leftover space is shared when there are fewer posts
     than slides-to-show (e.g. 1 post with "Slides to Show: 3" still fills
     the whole container instead of leaving white space). With a full row
     the bases already sum to 100%, so growth changes nothing there. */
  flex: 1 0 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.wppm-blog-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  /* Themes commonly underline all links (often with higher specificity or
     later load order than this file). The whole slide — image + title — is
     one <a>, and an underline on the anchor propagates to the h3 text, so
     no title-level setting can remove it. Force it off on the anchor. */
  text-decoration: none !important;
  color: inherit;
}

.wppm-blog-image {
  /* Grows to the row height so Cover/Fill/Repeat truly fill the space even
     when a sibling slide (e.g. a tall Contain image) makes the row tall.
     min-height (driven by the widget's Image Height) is the floor.
     Transparent by default with content centered, so any uncovered area
     shows the page — never a grey box. (Only the no-image placeholder
     keeps its own gradient below.) */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  min-height: 320px;
  overflow: hidden;
  background-color: transparent;
  background-position: center;
  border-radius: 6px;
}

.wppm-blog-image img {
  display: block;
  width: 100%;
  height: 100%;
}

.wppm-blog-slide[data-fit="cover"] .wppm-blog-image img,
.wppm-blog-slide[data-fit="fill"] .wppm-blog-image img {
  /* Pinned to the (possibly stretched) wrapper so the image always covers
     the whole image area instead of leaving a void under the title. */
  position: absolute;
  top: 0;
  left: 0;
}

.wppm-blog-slide[data-fit="cover"] .wppm-blog-image img {
  object-fit: cover;
}

.wppm-blog-slide[data-fit="fill"] .wppm-blog-image img {
  object-fit: fill;
}

/* Specificity guard: theme content rules like `.entry-content img
   { height: auto }` would otherwise override the heights above, defeat
   object-fit, and expose the wrapper behind a natural-size image. */
.wppm-blog-slider .wppm-blog-slide[data-fit="cover"] .wppm-blog-image img,
.wppm-blog-slider .wppm-blog-slide[data-fit="fill"] .wppm-blog-image img {
  height: 100%;
}

/* Contain (Auto): whole image always visible, centered vertically and
   horizontally at its natural size (never upscaled blurry, never cropped).
   The stretched wrapper is transparent, so a smaller image simply sits
   centered on the page background while titles stay aligned. */
.wppm-blog-slide[data-fit="contain"] .wppm-blog-image {
  background: transparent;
}

.wppm-blog-slide[data-fit="contain"] .wppm-blog-image img {
  object-fit: contain;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

/* Repeat: PHP renders a div with inline background-image; tile it. */
.wppm-blog-slide[data-fit="repeat"] .wppm-blog-image {
  background-repeat: repeat;
  background-size: auto;
  background-position: top left;
}

.wppm-blog-image-empty {
  background-image: linear-gradient(135deg, #e8e8e8 0%, #d4d4d4 100%);
}

.wppm-blog-title {
  margin: 12px 0 0;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
}

.wppm-blog-prev,
.wppm-blog-next {
  position: absolute;
  /* Centered on the slider: rows can be taller than the default image
     height when a sibling Contain slide is tall. */
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.wppm-blog-prev {
  left: 8px;
}

.wppm-blog-next {
  right: 8px;
}

.wppm-blog-prev:hover,
.wppm-blog-next:hover {
  background: rgba(0, 0, 0, 0.75);
}

.wppm-blog-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.wppm-blog-dot {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  padding: 0;
}

.wppm-blog-dot.is-active {
  background: #333;
}

.wppm-blog-slider-empty {
  padding: 24px;
  text-align: center;
  background: #f7f7f7;
  border: 1px dashed #ccc;
  border-radius: 6px;
  color: #666;
}

@media (min-width: 600px) {
  .wppm-blog-slider[data-slides="2"] .wppm-blog-slide,
  .wppm-blog-slider[data-slides="3"] .wppm-blog-slide,
  .wppm-blog-slider[data-slides="4"] .wppm-blog-slide {
    flex: 1 0 calc((100% - 16px) / 2);
  }
}

@media (min-width: 1024px) {
  .wppm-blog-slider[data-slides="2"] .wppm-blog-slide {
    flex: 1 0 calc((100% - 16px) / 2);
  }
  .wppm-blog-slider[data-slides="3"] .wppm-blog-slide {
    flex: 1 0 calc((100% - 32px) / 3);
  }
  .wppm-blog-slider[data-slides="4"] .wppm-blog-slide {
    flex: 1 0 calc((100% - 48px) / 4);
  }
}