/* ============================================================
   WordSearchZ — App-window screenshot gallery / carousel
   Carousel: <div class="wsz-gallery"> (driven by gallery.js)
   ============================================================ */

/* ---------- App-window frame ---------- */
.wsz-frame {
  position: relative;
  border-radius: 18px;
  background: #0b0f17;
  border: 1px solid rgba(74, 222, 128, 0.20);
  box-shadow:
    0 24px 60px -24px rgba(0, 0, 0, 0.75),
    0 0 40px -18px rgba(34, 197, 94, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1), box-shadow .4s ease;
}
@media (hover: hover) and (pointer: fine) {
  .wsz-frame:hover {
    transform: translateY(-4px);
    box-shadow:
      0 34px 74px -24px rgba(0, 0, 0, 0.80),
      0 0 55px -16px rgba(34, 197, 94, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
}
.wsz-frame-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  background: linear-gradient(180deg, #141b28 0%, #0d121c 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wsz-frame-dot { width: 11px; height: 11px; border-radius: 9999px; flex: 0 0 auto; }
/* window-control colours (moved out of inline style attributes) */
.wsz-frame-dot--red   { background: #ff5f57; }
.wsz-frame-dot--amber { background: #febc2e; }
.wsz-frame-dot--green { background: #28c840; }
.wsz-frame-title {
  margin-left: 8px;
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 11px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #9aa7b8; white-space: nowrap;
}
.wsz-frame-title i { color: #4ade80; font-size: 11px; }

/* ---------- Carousel ---------- */
.wsz-gallery {
  position: relative;
  aspect-ratio: 16 / 10;          /* stable frame on every screen size */
  background: #05070d;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.wsz-gallery:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(74, 222, 128, 0.65);
}
.wsz-gallery-viewport { position: absolute; inset: 0; overflow: hidden; cursor: grab; }
.wsz-gallery-viewport.is-dragging { cursor: grabbing; }
.wsz-gallery-track {
  display: flex; height: 100%; width: 100%;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.wsz-gallery.wsz-no-anim .wsz-gallery-track { transition: none; }
.wsz-gallery-slide {
  flex: 0 0 100%; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.wsz-gallery-slide img {
  display: block; width: 100%; height: 100%;
  object-fit: contain;            /* show the whole screenshot — never cropped */
  cursor: zoom-in;                /* hints: click to open full image in a new tab */
  user-select: none; -webkit-user-drag: none;
}
.wsz-gallery-viewport.is-dragging img { cursor: grabbing; }

/* ---------- Arrows (always visible, evenly distributed) ---------- */
.wsz-gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 20; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 9999px;
  border: 1px solid rgba(74, 222, 128, 0.40);
  background: rgba(5, 7, 13, 0.62);
  color: #4ade80; font-size: 14px; line-height: 1; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .2s ease, transform .2s ease, color .2s ease, border-color .2s ease;
  opacity: .92;
}
.wsz-gallery-arrow:hover  { background: rgba(34, 197, 94, .92); color: #04120a; border-color: rgba(74, 222, 128, .9); opacity: 1; }
.wsz-gallery-arrow:active { transform: translateY(-50%) scale(.9); }
.wsz-gallery-arrow:focus-visible { outline: 2px solid #4ade80; outline-offset: 2px; }
.wsz-gallery-prev { left: 12px; }
.wsz-gallery-next { right: 12px; }

/* Tablet + desktop: larger, more inset, balanced on both sides so the
   nav uses the space instead of hugging the edges. */
@media (min-width: 768px) {
  .wsz-gallery-arrow { width: 50px; height: 50px; font-size: 17px; }
  .wsz-gallery-prev { left: 18px; }
  .wsz-gallery-next { right: 18px; }
}

/* ---------- Dots ---------- */
.wsz-gallery-dots {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  z-index: 20; display: flex; gap: 7px; padding: 6px 10px;
  border-radius: 9999px; background: rgba(5, 7, 13, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.wsz-gallery-dot {
  width: 7px; height: 7px; padding: 0; border: none; border-radius: 9999px;
  background: rgba(255, 255, 255, .32); cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.wsz-gallery-dot.is-active { background: #4ade80; width: 20px; }
.wsz-gallery-dot:focus-visible { outline: 2px solid #4ade80; outline-offset: 2px; }

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  .wsz-frame { border-radius: 14px; }
  .wsz-gallery-arrow { width: 36px; height: 36px; font-size: 12px; }
  .wsz-gallery-prev { left: 8px; }
  .wsz-gallery-next { right: 8px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .wsz-frame, .wsz-gallery-track, .wsz-gallery-arrow, .wsz-gallery-dot { transition: none; }
}

/* ---------- Hero column split (give the screenshot preview more room) ----------
   Scoped to #hero and ID-qualified so it reliably wins over Tailwind's w-full,
   regardless of stylesheet order. Tune the two percentages to taste. */
@media (min-width: 768px) {          /* tablet */
  #hero .wsz-col-copy    { width: 46%; }
  #hero .wsz-col-preview { width: 54%; }
}
@media (min-width: 1024px) {         /* desktop — preview a bit larger still */
  #hero .wsz-col-copy    { width: 42%; }
  #hero .wsz-col-preview { width: 58%; }
}