/* ── Solution page grid-slider gallery ──────────────────────────────
   One row of photos laid out as a grid inside a scroll-snapping track:
   reads as a 3-up grid on desktop, swipes as a carousel on touch.
   Scoped entirely to .asdf-gal so it can sit inside solution bodies,
   Elementor columns or the classic editor without leaking. */

.asdf-gal {
  position: relative;
  margin: 8px 0 30px;
}

.asdf-gal-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary-purple, #5e1062);
  margin: 0 0 12px;
}

/* Viewport clips the track; the track itself is what scrolls. */
.asdf-gal-viewport {
  overflow: hidden;
  border-radius: 14px;
}

/* The track is a <ul> and the items are <li>, so inside a solution body they are
   in range of solutions.css's `.solution-body ul` / `.solution-body ul li` rules
   (a vertical flex column with bullet ::before markers). Those are specificity
   0,1,1 and would beat a bare `.asdf-gal-track`, so every rule that has to win
   is written as `.asdf-gal .asdf-gal-*` (0,2,0). Do not flatten these back to a
   single class — the gallery collapses into a bulleted vertical list. */
.asdf-gal .asdf-gal-track {
  /* --asdf-gal-pv is the author's desktop preference and is what the shortcode's
     per_view sets, as an inline style. --asdf-gal-per-view is what the layout
     actually reads. Keeping them separate is deliberate: an inline style beats
     every stylesheet rule, so if per_view wrote --asdf-gal-per-view directly it
     would also override the responsive breakpoints below and the gallery would
     stay 3-up on a phone. The breakpoints set --asdf-gal-per-view instead, which
     no inline style touches, so they still win. */
  --asdf-gal-pv: 3;
  --asdf-gal-per-view: var(--asdf-gal-pv);
  --asdf-gal-gap: 14px;

  display: grid;
  grid-auto-flow: column;
  /* Each item is an equal share of the viewport, minus its share of the gaps. */
  grid-auto-columns: calc(
    (100% - (var(--asdf-gal-per-view) - 1) * var(--asdf-gal-gap)) / var(--asdf-gal-per-view)
  );
  gap: var(--asdf-gal-gap);

  list-style: none;
  margin: 0;
  padding: 0;

  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  /* The track scrolls but must not show a scrollbar — the arrows and dots are
     the affordance, and a visible bar would break the flush grid look. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.asdf-gal .asdf-gal-track::-webkit-scrollbar {
  display: none;
}

.asdf-gal .asdf-gal-item {
  display: block;
  scroll-snap-align: start;
  margin: 0;
  /* Grid items default to min-content width, which lets a wide image blow past
     the track column. This lets them shrink to the column instead. */
  min-width: 0;
}

/* Cancel the solution body's bullet marker on gallery items. */
.asdf-gal .asdf-gal-item::before {
  content: none;
  display: none;
}

/* The photo is wrapped in a button so it can open the lightbox from the
   keyboard; strip the native button chrome and let the image fill it. */
.asdf-gal .asdf-gal-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 12px;
}

.asdf-gal .asdf-gal-btn:focus-visible {
  outline: 3px solid var(--primary-purple, #5e1062);
  outline-offset: 3px;
}

.asdf-gal .asdf-gal-item img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--bg-lavender, #f6f1f7);
  box-shadow: 0 6px 18px rgba(94, 16, 98, 0.10);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.asdf-gal .asdf-gal-item img:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(94, 16, 98, 0.18);
}

/* ── Arrows ── */

.asdf-gal-nav {
  position: absolute;
  top: calc(50% + 6px);
  transform: translateY(-50%);
  z-index: 2;

  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;

  background: #ffffff;
  color: var(--primary-purple, #5e1062);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: opacity 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.asdf-gal-nav:hover {
  background: var(--primary-purple, #5e1062);
  color: #ffffff;
}

.asdf-gal-prev { left: 10px; }
.asdf-gal-next { right: 10px; }

/* Hidden rather than removed at the ends, so the track never reflows. */
.asdf-gal-nav[disabled] {
  opacity: 0;
  pointer-events: none;
}

/* ── Dots ── */

.asdf-gal-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
}

.asdf-gal-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: var(--border-lavender, #e4d7e8);
  transition: background 0.25s ease, width 0.25s ease;
}

.asdf-gal-dot[aria-selected="true"] {
  width: 22px;
  border-radius: 4px;
  background: var(--primary-purple, #5e1062);
}

/* ── Responsive ── */

@media (max-width: 900px) {
  .asdf-gal .asdf-gal-track { --asdf-gal-per-view: 2; }
  .asdf-gal .asdf-gal-item img { height: 200px; }
}

@media (max-width: 600px) {
  .asdf-gal .asdf-gal-track { --asdf-gal-per-view: 1; }
  .asdf-gal .asdf-gal-item img { height: 240px; }
  .asdf-gal-nav { width: 34px; height: 34px; }
}

/* Respect a reduced-motion preference: no smooth scroll, no hover lift. */
@media (prefers-reduced-motion: reduce) {
  .asdf-gal .asdf-gal-track { scroll-behavior: auto; }
  .asdf-gal .asdf-gal-item img { transition: none; }
  .asdf-gal .asdf-gal-item img:hover { transform: none; }
}

/* ── Lightbox ───────────────────────────────────────────────────────
   One shared overlay for every gallery on the page, appended to <body>
   by solution-gallery.js. Fixed to the viewport and above Elementor's
   sticky header (which sits around z-index 1000). */

.asdf-gal-lb {
  position: fixed;
  /* Longhands before `inset`: Safari below 14.1 ignores the shorthand, and a
     fixed element with no offsets collapses to its content instead of covering
     the viewport — which reads as a broken lightbox rather than a missing one. */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transition: opacity 0.2s ease;
}

.asdf-gal-lb.is-open {
  opacity: 1;
}

.asdf-gal-lb[hidden] {
  display: none;
}

.asdf-gal-lb-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: rgba(12, 4, 14, 0.92);
  cursor: zoom-out;
}

.asdf-gal-lb-inner {
  position: relative;
  z-index: 1;
  /* Not min(): unsupported below Safari 13.1, where it would leave width auto. */
  width: 100%;
  max-width: 1100px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 76px;
  /* Clicks land on the backdrop behind, so tapping beside the photo closes. */
  pointer-events: none;
}

.asdf-gal-lb-figure {
  margin: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: auto;
}

.asdf-gal-lb-img {
  max-width: 100%;
  /* Leave room for the caption below and the counter under that. */
  max-height: calc(100vh - 190px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);

  opacity: 0;
  transition: opacity 0.25s ease;
}

.asdf-gal-lb-img.is-loaded {
  opacity: 1;
}

.asdf-gal-lb-cap {
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  max-width: 60ch;
}

.asdf-gal-lb-count {
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  letter-spacing: 1px;
  pointer-events: none;
}

/* ── Lightbox controls ── */

.asdf-gal-lb-close,
.asdf-gal-lb-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;

  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  transition: background 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
}

.asdf-gal-lb-close:hover,
.asdf-gal-lb-nav:hover {
  background: var(--primary-purple, #5e1062);
}

.asdf-gal-lb-close:focus-visible,
.asdf-gal-lb-nav:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.asdf-gal-lb-close {
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
}

.asdf-gal-lb-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
}

.asdf-gal-lb-nav:hover {
  transform: translateY(-50%) scale(1.06);
}

.asdf-gal-lb-prev { left: 12px; }
.asdf-gal-lb-next { right: 12px; }

.asdf-gal-lb-nav[hidden],
.asdf-gal-lb-count[hidden] {
  display: none;
}

/* Lock the page behind the overlay. */
body.asdf-gal-lb-open {
  overflow: hidden;
}

@media (max-width: 700px) {
  .asdf-gal-lb-inner { padding: 56px 12px 72px; }
  .asdf-gal-lb-img   { max-height: calc(100vh - 200px); }
  .asdf-gal-lb-nav   { width: 42px; height: 42px; }
  .asdf-gal-lb-prev  { left: 4px; }
  .asdf-gal-lb-next  { right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .asdf-gal-lb,
  .asdf-gal-lb-img,
  .asdf-gal-lb-close,
  .asdf-gal-lb-nav { transition: none; }
  .asdf-gal-lb-nav:hover { transform: translateY(-50%); }
}