/**
 * Perfecta Elements — Content Slider (CleanSwiper look)
 * Author: Marco Nötzold (Hagalaz Design)
 * Version: 1.0.0
 *
 * Critical styles for the CleanSwiper visual appearance.
 * This file is optional if you keep the inline fallback in the widget.
 */

/* Base resets */
:root { box-sizing: border-box; }
*,*::before,*::after{ box-sizing: inherit; }

/* Demo container */
.hgd-demo-slider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px;
  overflow: hidden;
}
.hgd-demo-outer {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 6vw;
}
.hgd-demo-wrap { position: relative; overflow: visible; }

/* sizing tokens */
:root{
  --slide-width: clamp(360px, 56vw, 900px);
  --slide-height: 60vh;
  --gap: 64px;
  --accent-start: #0d6efd;
  --accent-end: #6610f2;
}

/* Swiper root */
.hgd-demo-slider .swiper {
  padding-top: 18px;
  padding-left: max(calc((100% - min(var(--slide-width), 100%)) / 2), 64px);
  padding-right: max(calc((100% - min(var(--slide-width), 100%)) / 2), 64px);
  overflow: visible;
  box-sizing: content-box;
}

.hgd-demo-slider .swiper-wrapper { align-items: center; }

.hgd-demo-slider .swiper-slide {
  flex: 0 0 auto;
  width: var(--slide-width);
  height: var(--slide-height);
  min-height: 300px;
  border-radius: 14px;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  color: #fff;
  position: relative;
  overflow: hidden;
  transition: transform .56s ease, opacity .56s ease, filter .56s ease, box-shadow .28s ease;
  box-shadow: 0 8px 30px rgba(0,0,0,.14);
  background: #222;
  will-change: transform, opacity, filter;
}

/* prev/next */
.hgd-demo-slider .swiper-slide {
  transform: scale(.8) !important;
  opacity: .5;
  filter: brightness(.95);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.hgd-demo-slider .swiper-slide-active{
  transform: scale(1) !important;
  z-index:3;
  box-shadow: 0 20px 48px rgba(0,0,0,0.26);
  opacity:1;
}

.hgd-slide-media{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  filter:contrast(.92) saturate(.95) brightness(.55);
  transition: transform .6s ease, filter .28s ease;
}
.hgd-demo-slider .swiper-slide-prev .hgd-slide-media,
.hgd-demo-slider .swiper-slide-next .hgd-slide-media {
  filter: blur(2px) brightness(.3);
}
.hgd-demo-slider .swiper-slide-active .hgd-slide-media{ transform: scale(1.04); }

.hgd-slide-gradient{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:48%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 65%, rgba(0,0,0,.9) 100%);
  pointer-events:none;
}

.hgd-slide-inner{ position:relative; z-index:2; width:100%; }
.hgd-slide-title{ font-size: clamp(20px, 3.4vw, 34px); margin:0 0 8px 0; font-weight:700; }
.hgd-slide-sub{ font-size: clamp(13px,1.5vw,16px); margin:0; opacity:.9; }

/* scrollbar scoped */
.hgd-swiper-scrollbar{
  height:12px;
  margin-top:12px;
  background: rgba(0,0,0,0.06);
  border-radius:999px;
  transform: translateY(50px);
}
.hgd-swiper-scrollbar .swiper-scrollbar-drag,
.hgd-demo-slider .swiper-scrollbar-drag{
  background: linear-gradient(90deg,var(--accent-start),var(--accent-end));
  border-radius:999px;
  box-shadow: 0 6px 18px rgba(13,110,253,0.12);
  cursor:grab;
}

/* responsive */
@media (max-width:520px){
  .hgd-demo-slider .swiper-slide{ height:48vh; min-height:220px; }
}