/* ============================================================
   QB - Images Gallery  |  v1.0.0
   ============================================================ */

/* ----------------------------------------------------------
   CSS VARIABLES (defaults — overridden by Elementor controls)
---------------------------------------------------------- */
:root {
  --qb-columns: 4;
  --qb-gap: 20px;
  --qb-hover-color: #6366f1;
  --qb-radius: 12px;
  --qb-transition: 300ms;
  --qb-shadow: 0 4px 20px rgba(0,0,0,0.07);
  --qb-shadow-hover: 0 12px 40px rgba(0,0,0,0.14);
}

/* ----------------------------------------------------------
   SHARED RATIO CONTAINERS
---------------------------------------------------------- */
.qb-ratio-1-1  { --qb-ratio: 100%; }
.qb-ratio-4-3  { --qb-ratio: 75%; }
.qb-ratio-16-9 { --qb-ratio: 56.25%; }
.qb-ratio-3-2  { --qb-ratio: 66.66%; }
.qb-ratio-2-3  { --qb-ratio: 150%; }
.qb-ratio-free { --qb-ratio: auto; }

[class*="qb-ratio-"]:not(.qb-ratio-free) {
  position: relative;
  width: 100%;
  padding-bottom: var(--qb-ratio);
  overflow: hidden;
}

[class*="qb-ratio-"]:not(.qb-ratio-free) > img,
[class*="qb-ratio-"]:not(.qb-ratio-free) > .qb-gallery-item__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.qb-ratio-free {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ----------------------------------------------------------
   IMAGE DEFAULTS — perfect display without crop
---------------------------------------------------------- */
.qb-gallery-item__img,
.qb-carousel-item__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;       /* shows full image — no crop */
  object-position: center;
  transition: transform var(--qb-transition) ease, filter var(--qb-transition) ease;
}

.qb-ratio-free .qb-gallery-item__img,
.qb-ratio-free .qb-carousel-item__img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* ----------------------------------------------------------
   GRID WIDGET
---------------------------------------------------------- */
.qb-gallery-grid {
  display: grid;
  grid-template-columns: repeat(var(--qb-columns), 1fr);
  gap: var(--qb-gap, 20px);
  width: 100%;
}

.qb-gallery-item {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: var(--qb-radius);
  box-shadow: var(--qb-shadow);
  overflow: hidden;
  transition: transform var(--qb-transition) ease,
              box-shadow var(--qb-transition) ease,
              border-color var(--qb-transition) ease;
  text-decoration: none;
  color: inherit;
}

a.qb-gallery-item:hover { text-decoration: none; }

.qb-gallery-item__media {
  padding: 16px;
  flex-shrink: 0;
}

.qb-gallery-item__title {
  padding: 8px 16px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1e293b;
  text-align: center;
  line-height: 1.4;
}

/* Overlay element */
.qb-gallery-item__overlay {
  background: rgba(0, 0, 0, 0);
  transition: background var(--qb-transition) ease;
  z-index: 1;
}

/* ── Hover: Lift ───────────────────────────── */
.qb-hover-lift .qb-gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--qb-shadow-hover);
}

/* ── Hover: Zoom ───────────────────────────── */
.qb-hover-zoom .qb-gallery-item:hover .qb-gallery-item__img {
  transform: scale(1.08);
}

/* ── Hover: Fade overlay ───────────────────── */
.qb-hover-fade .qb-gallery-item:hover .qb-gallery-item__overlay {
  background: rgba(0, 0, 0, 0.28);
}

/* ── Hover: Border ─────────────────────────── */
.qb-hover-border .qb-gallery-item {
  border: 2px solid transparent;
}
.qb-hover-border .qb-gallery-item:hover {
  border-color: var(--qb-hover-color, #6366f1);
}

/* ── Hover: Grayscale → Color ──────────────── */
.qb-hover-grayscale .qb-gallery-item__img {
  filter: grayscale(100%);
}
.qb-hover-grayscale .qb-gallery-item:hover .qb-gallery-item__img {
  filter: grayscale(0%);
}

/* ----------------------------------------------------------
   CAROUSEL WIDGET
---------------------------------------------------------- */
.qb-carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: visible;
}

.qb-carousel-swiper {
  width: 100%;
  overflow: hidden;
  padding-bottom: 48px; /* space for pagination */
}

.qb-carousel-swiper:not(:has(.qb-pagination .swiper-pagination-bullet)) {
  padding-bottom: 0;
}

.qb-carousel-item {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: var(--qb-radius);
  box-shadow: var(--qb-shadow);
  overflow: hidden;
  transition: transform var(--qb-transition) ease, box-shadow var(--qb-transition) ease;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

a.qb-carousel-item:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: var(--qb-shadow-hover);
}

.qb-carousel-item__media {
  padding: 16px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* For ratio containers inside carousel */
.qb-carousel-item__media [class*="qb-ratio-"]:not(.qb-ratio-free) {
  width: 100%;
}

.qb-carousel-item__title {
  padding: 8px 16px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1e293b;
  text-align: center;
}

/* ── Navigation Arrows ─────────────────────── */
.qb-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% - 24px)); /* offset above pagination */
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 50%;
  cursor: pointer;
  color: #6366f1;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
  padding: 0;
}

.qb-carousel-btn:hover {
  background: var(--qb-hover-color, #6366f1);
  color: #ffffff;
  border-color: var(--qb-hover-color, #6366f1);
  box-shadow: 0 4px 20px rgba(99,102,241,0.30);
  transform: translateY(calc(-50% - 24px)) scale(1.05);
}

.qb-btn-prev { left: -22px; }
.qb-btn-next { right: -22px; }

/* ── Pagination Dots ───────────────────────── */
.qb-pagination {
  bottom: 10px !important;
  text-align: center;
}

.qb-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #cbd5e1;
  opacity: 1;
  transition: background 220ms ease, transform 220ms ease;
}

.qb-pagination .swiper-pagination-bullet-active {
  background: #6366f1;
  transform: scale(1.35);
}

/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */
@media (max-width: 1024px) {
  .qb-btn-prev { left: -14px; }
  .qb-btn-next { right: -14px; }
}

@media (max-width: 767px) {
  .qb-btn-prev { left: 0; }
  .qb-btn-next { right: 0; }

  .qb-carousel-btn {
    width: 36px;
    height: 36px;
  }
}

/* ----------------------------------------------------------
   ELEMENTOR EDITOR TWEAKS
---------------------------------------------------------- */
.elementor-editor-active .qb-gallery-item,
.elementor-editor-active .qb-carousel-item {
  pointer-events: auto;
}