/**
 * Product Banner Manager front-office styles.
 *
 * @author    KForge Web Solutions <info@kforge.it>
 * @copyright 2026 KForge Web Solutions
 * @license   AFL-3.0
 */

/* ============================================================
   ps_productbanner — Front-end CSS
   Fully responsive, zero dependencies, theme-agnostic.
   ============================================================ */

/* ── Container ── */
.psb-banner-container {
  width: 100%;
  margin: 12px 0;
  box-sizing: border-box;
  clear: both;
}

.psb-hook-displayAfterProductThumbs {
  display: block;
  position: relative;
  z-index: 1;
  margin-top: 12px;
}

.psb-hook-displayAfterProductThumbs.psb-has-embed {
  flex: 0 0 100%;
  order: 999;
  align-self: stretch;
  clear: both;
  width: 100%;
  max-width: 100%;
}

.psb-hook-displayAfterProductThumbs .psb-banner-item-embed {
  display: block;
  position: static;
  clear: both;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

.psb-hook-displayAfterProductThumbs .psb-banner-embed {
  display: block;
  position: static;
  width: 100%;
  max-width: 100%;
}

/* ── Single banner item ── */
.psb-banner-item {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.psb-banner-link {
  display: block;
  text-decoration: none;
  line-height: 0; /* remove img gap */
}

.psb-banner-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 4px;
  transition: opacity .2s;
}

.psb-banner-link:hover .psb-banner-img {
  opacity: .92;
}

.psb-banner-embed {
  width: 100%;
  overflow: visible;
  line-height: normal;
}

.psb-banner-embed > *:first-child {
  margin-top: 0;
}

.psb-banner-embed > *:last-child {
  margin-bottom: 0;
}

/* Responsive iframes inside embed */
.psb-banner-embed iframe,
.psb-banner-embed video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Stack layout ── */
.psb-stack .psb-banner-item + .psb-banner-item {
  margin-top: 12px;
}

/* ── Grid layout ── */
.psb-grid {
  display: grid;
  grid-template-columns: repeat(var(--psb-cols, 1), 1fr);
  gap: 12px;
}

.psb-grid-item {
  min-width: 0; /* prevent overflow */
}

@media (max-width: 575px) {
  .psb-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Carousel layout ── */
.psb-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  touch-action: pan-y; /* allow vertical scroll on mobile */
}

.psb-carousel-track {
  display: flex;
  transition: transform .4s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}

.psb-carousel-slide {
  min-width: 100%;
  box-sizing: border-box;
}

/* Navigation buttons */
.psb-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0, 0, 0, .45);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .2s;
  color: #fff;
}

.psb-carousel-btn:hover {
  background: rgba(0, 0, 0, .7);
}

.psb-carousel-btn svg {
  width: 20px;
  height: 20px;
}

.psb-carousel-prev { left: 10px; }
.psb-carousel-next { right: 10px; }

/* Dots */
.psb-carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
}

.psb-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s;
}

.psb-dot.active,
.psb-dot:hover {
  background: #fff;
  transform: scale(1.2);
}

/* Hide nav buttons when single item */
.psb-carousel[data-single="true"] .psb-carousel-btn,
.psb-carousel[data-single="true"] .psb-carousel-dots {
  display: none;
}

/* ── Accessibility ── */
@media (prefers-reduced-motion: reduce) {
  .psb-carousel-track { transition: none; }
  .psb-banner-link:hover .psb-banner-img { opacity: 1; }
}