.adk-post-slider{
  position: relative;

  --gap: 18px;
  --radius: 12px;

  --thumb-h: 260px;

  --active-ratio: 16/9;
  --inactive-ratio: 9/16;

  --active-border: 2px;
  --active-border-color: rgba(255,255,255,0.55);

  --title-bg: rgba(0,0,0,0.55);
  --title-color: #ffffff;
  --meta-color: #ffffff;

  /* Tags */
  --tag-bg: rgba(0,0,0,0.20);
  --tag-color: #ffffff;
  --tag-gap: 8px;
  --tag-font-size: 12px;
  --tag-radius: 999px;
  --tag-pad-y: 6px;
  --tag-pad-x: 10px;
  --tag-border: 0px;
  --tag-border-color: rgba(255,255,255,0);

  --nav-bg: rgba(0,0,0,0.55);
  --nav-icon: #fff;
  --nav-size: 44px;
  --nav-icon-size: 20px;
  --nav-radius: 999px;

  --nav-bg-hover: rgba(0,0,0,0.75);
  --nav-icon-hover: #ffffff;
  --nav-border: 0px;
  --nav-border-color: rgba(255,255,255,0);

  /* Espace visuel (pour ne pas coller au bord) */
  --edge-pad: 18px;

  /* Espace technique (pour éviter de couper ombres/bordures) */
  --shadow-pad: 18px;

  /* Réserve pour le meta "float" sous l'actif (desktop)
     Augmentée pour intégrer: titre + tags (1 ligne) + desc */
  --meta-space: 130px;

  /* Spacer réel ajouté en JS à la fin du track */
  --tail-space: 0px;
}

/* Viewport */
.adk-post-slider .ps-viewport{
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;

  overflow-x: auto;
  overflow-y: visible;

  touch-action: pan-y;
  background: transparent !important;

  /* Padding SUR le scroll container */
  padding-left: calc(var(--edge-pad) + var(--shadow-pad) + var(--active-border));
  padding-right: calc(var(--edge-pad) + var(--shadow-pad) + var(--active-border));

  /* Anti-cut vertical */
  padding-top: calc(var(--shadow-pad) + var(--active-border));
  padding-bottom: calc(var(--meta-space) + var(--shadow-pad) + var(--active-border));

  scroll-behavior: smooth;
}

.adk-post-slider .ps-viewport::-webkit-scrollbar{ display:none; }

/* Track */
.adk-post-slider .ps-track{
  display: flex;
  gap: var(--gap);
  align-items: flex-start;

  /* IMPORTANT : pas de padding-left/right ici, le spacer fait le boulot */
  padding: 0;
}

/* Tail spacer (invisible but adds real scroll width) */
.adk-post-slider .ps-tail{
  flex: 0 0 auto;
  width: var(--tail-space);
  height: 1px;
}

/* Item */
.adk-post-slider .ps-item{
  flex: 0 0 auto;
  position: relative;
}

/* Card */
.adk-post-slider .ps-card{
  display: inline-block;
  text-decoration: none;
  cursor: pointer;

  border-radius: var(--radius);
  overflow: visible;
  vertical-align: top;
  background: transparent;

  position: relative; /* for ::after */
}

/* Active border via ::after to avoid Elementor shadow conflicts */
.adk-post-slider .ps-card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  pointer-events: none;
  box-shadow: none;
}
.adk-post-slider .ps-item.is-active .ps-card::after{
  box-shadow: 0 0 0 var(--active-border) var(--active-border-color);
}

/* Thumb */
.adk-post-slider .ps-thumb{
  position: relative;
  height: var(--thumb-h);
  aspect-ratio: var(--inactive-ratio);
  width: auto;

  border-radius: var(--radius);
  overflow: hidden;
}
.adk-post-slider .ps-item.is-active .ps-thumb{
  aspect-ratio: var(--active-ratio);
}

.adk-post-slider .ps-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Title under image, above tags/desc (active only) */
.adk-post-slider .ps-active-title{
  display: none;
  color: var(--title-color);

  margin: 0 0 8px 0;
  line-height: 1.25;

  /* Allow full wrapping */
  white-space: normal;
  overflow: visible;
  text-overflow: unset;

  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.adk-post-slider .ps-item.is-active .ps-active-title{
  display: block;
}

/* Inactive items in black & white */
.adk-post-slider .ps-item:not(.is-active) .ps-img{
  filter: grayscale(1);
  transition: filter 160ms ease, opacity 160ms ease;
}

.adk-post-slider .ps-item.is-active .ps-img{
  filter: none;
  opacity: 1;
}

/* Meta (desktop float under active) */
.adk-post-slider .ps-meta{
  display: none;
  color: var(--meta-color);
}
.adk-post-slider .ps-item.is-active .ps-meta{
  display: block;
}
.adk-post-slider .ps-meta-float{
  position: absolute;
  left: 0;
  top: calc(var(--thumb-h) + 10px);
  width: 100%;
  max-width: 100%;
}

/* Tags: keep ONE LINE to prevent height explosion (=> prevents cut) */
.adk-post-slider .ps-tags{
  display: flex;
  flex-wrap: nowrap;        /* IMPORTANT */
  gap: var(--tag-gap);
  margin-bottom: 8px;
  max-width: 100%;

  overflow-x: auto;         /* allow horizontal scroll if many tags */
  overflow-y: hidden;
  scrollbar-width: none;
}
.adk-post-slider .ps-tags::-webkit-scrollbar{ display:none; }

.adk-post-slider .ps-tag{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;

  padding: var(--tag-pad-y) var(--tag-pad-x);
  border-radius: var(--tag-radius);

  background: var(--tag-bg);
  color: var(--tag-color);

  line-height: 1;
  font-size: var(--tag-font-size);

  box-shadow: 0 0 0 var(--tag-border) var(--tag-border-color);
}

/* Description */
.adk-post-slider .ps-desc{
  opacity: 0.9;
  line-height: 1.35;
  font-size: 14px;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Nav */
.adk-post-slider .ps-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--nav-size);
  height: var(--nav-size);
  border: none;
  cursor: pointer;
  z-index: 20;
  border-radius: var(--nav-radius);
  background: var(--nav-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;

  box-shadow: 0 0 0 var(--nav-border) var(--nav-border-color);
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.adk-post-slider .ps-nav:hover,
.adk-post-slider .ps-nav:focus-visible{
  background: var(--nav-bg-hover);
  box-shadow: 0 0 0 var(--nav-border) var(--nav-border-color);
}
.adk-post-slider .ps-nav:active{
  transform: translateY(-50%) scale(0.98);
}
.adk-post-slider .ps-nav .ps-nav-ic{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.adk-post-slider .ps-nav svg{
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
  fill: var(--nav-icon);
  transition: fill 160ms ease;
}
.adk-post-slider .ps-nav:hover svg,
.adk-post-slider .ps-nav:focus-visible svg{
  fill: var(--nav-icon-hover);
}
.adk-post-slider .ps-nav.prev{ left: 10px; }
.adk-post-slider .ps-nav.next{ right: 10px; }

/* Responsive */
@media (max-width: 1024px){
  .adk-post-slider{
    --thumb-h: 220px;
    --gap: 14px;
    --edge-pad: 14px;
    --shadow-pad: 14px;

    /* Reserve adjusted for smaller typography */
    --meta-space: 120px;

    --nav-size: 40px;
    --nav-icon-size: 18px;
  }

  .adk-post-slider .ps-active-title{
    font-size: 15px;
  }
}

@media (max-width: 767px){
  .adk-post-slider{
    --thumb-h: 190px;
    --gap: 12px;
    --edge-pad: 12px;
    --shadow-pad: 12px;

    /* Sur mobile: pas de float meta */
    --meta-space: 0px;
  }

  .adk-post-slider .ps-nav{
    display: none;
  }

  .adk-post-slider .ps-meta-float{
    position: static;
    margin-top: 10px;
  }

  .adk-post-slider .ps-desc{
    font-size: 13px;
  }

  .adk-post-slider .ps-active-title{
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce){
  .adk-post-slider .ps-viewport{ scroll-behavior: auto; }
  .adk-post-slider .ps-nav{ transition: none; }
}