/* ============================================================
   WP Carousel Gallery – Frontend CSS
   ============================================================ */

/* ── Section container ──────────────────────────────────────── */
.wpcg-section {
  position: relative;
  overflow: hidden;

  /*
     * BLEED EFFECT: Break out of theme's centered container by ~10% on each side.
     * This makes the section ~20% wider than its parent.
     * Adjust the percentage to match your theme's container setup.
     *
     * If your theme uses a .container with padding instead of margin auto,
     * swap these for:
     *   width: calc(100% + var(--theme-container-padding, 40px) * 2);
     *   margin-left: calc(-1 * var(--theme-container-padding, 40px));
     */
  width: 120%;
  margin-left: -10%;

  transform: skew(1.1deg, -1.1deg);
  margin-top: -1.5rem;
  padding: 8px 0;
}

/* ── Track wrapper (one per row) ────────────────────────────── */
.wpcg-track-wrap {
  position: relative;
  width: 100%;
  box-shadow:
    0px -4px 4px #1b5319,
    0px 5px 8px #0c3b0a;
}

/* Make Splide track overflow-visible so edge slides bleed */
.wpcg-splide .splide__track {
  overflow: visible !important;
}

/* ── Slides ─────────────────────────────────────────────────── */
.wpcg-splide .splide__slide {
  width: var(--wpcg-w, 320px) !important;
  box-shadow: 0px 4px 4px #28552726;
}

/* ── Individual item (the <a> tag) ─────────────────────────── */
.wpcg-item {
  display: block;
  position: relative;
  border: 2px solid #dbe3ca;
  border-radius: var(--wpcg-r, 12px);
  overflow: hidden;
  text-decoration: none;
  outline: none;
  cursor: zoom-in;
  box-shadow: 0px 4px 4px #28552726;
  /* GPU-composite hover transform */
  will-change: transform;
  transition:
    transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.35s ease;
}

.wpcg-item:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  z-index: 2;
}

/* Focus ring (keyboard / screen reader) */
.wpcg-item:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* ── Image ──────────────────────────────────────────────────── */
.wpcg-item img {
  display: block;
  width: var(--wpcg-w, 320px);
  height: var(--wpcg-h, 220px);
  object-fit: cover;
  border-radius: var(--wpcg-r, 12px);
  /* Prevent layout shift with explicit dimensions */
  aspect-ratio: auto var(--wpcg-w, 320) / var(--wpcg-h, 220);
}

/* ── Caption overlay (shown on hover) ──────────────────────── */
.wpcg-caption-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 14px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.68));
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
  border-radius: 0 0 var(--wpcg-r, 12px) var(--wpcg-r, 12px);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  pointer-events: none;
  /* Prevent text selection during fast scrolling */
  user-select: none;
}

.wpcg-item:hover .wpcg-caption-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* ── GLightbox overrides ────────────────────────────────────── */
.glightbox-clean .gslide-description {
  background: rgba(10, 10, 10, 0.8);
}
.glightbox-clean .gdesc-inner {
  padding: 12px 20px 16px;
}
.glightbox-clean .gslide-title {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 4px;
}
.glightbox-clean .gslide-desc {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  margin: 0;
}
/* Prev / next arrows */
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  width: 44px;
  height: 44px;
}
.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover {
  background-color: rgba(0, 0, 0, 0.75);
}

/* ── Reduced-motion: disable hover scale & caption fade ─────── */
@media (prefers-reduced-motion: reduce) {
  .wpcg-item {
    transition: none;
  }
  .wpcg-caption-overlay {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Responsive: smaller slides on mobile ───────────────────── */
@media (max-width: 600px) {
  .wpcg-section {
    /* On very small screens, reduce the bleed */
    width: 110%;
    margin-left: -5%;
  }
  .wpcg-splide .splide__slide {
    /* Scale down slide width proportionally */
    width: calc(var(--wpcg-w, 320px) * 0.75) !important;
  }
  .wpcg-item img {
    width: calc(var(--wpcg-w, 320px) * 0.75);
    height: calc(var(--wpcg-h, 220px) * 0.75);
  }
}