/* ==========================================================================
   B.E Security Services — Gallery slider
   Scoped to #gallery. Does not touch any global selector or colour token.
   ========================================================================== */
#gallery {
  --g-bg: oklch(12.8% 0 0);
  --g-panel: #0c0c0c;
  --g-text: #fff;
  --g-muted: rgb(255 255 255 / .68);
  --g-gold: #f3c44b;
  --g-gold-line: rgb(243 196 75 / .45);
  --g-radius: .5rem;
  position: relative;
  background: var(--g-bg);
  color: var(--g-text);
  overflow: hidden; /* guards against any horizontal overflow */
  border-top: 1px solid rgb(243 196 75 / .2);
}
#gallery .container-x { max-width: 64rem; }

/* ---- Heading ---- */
.gal-head { text-align: center; max-width: 42rem; margin: 0 auto 2.5rem; }
.gal-title {
  margin: 0;
  font-family: var(--font-display, "Archivo", sans-serif);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: .12em;
  line-height: 1.1;
  color: var(--g-text);
}
.gal-rule { display: block; width: 3.5rem; height: 2px; margin: 1.1rem auto 0; background: var(--g-gold); }
.gal-sub { margin: 1.1rem 0 0; font-size: clamp(.95rem, 1.6vw, 1.125rem); line-height: 1.6; color: var(--g-muted); }

/* ---- Slider ---- */
.gal-slider { position: relative; min-width: 0; }
.gal-viewport {
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  overflow: hidden;
  border-radius: var(--g-radius);
  border: 1px solid var(--g-gold-line);
  background: var(--g-panel);
  box-shadow: 0 24px 50px -22px rgb(0 0 0 / .85), 0 0 0 4px rgb(243 196 75 / .05);
  touch-action: pan-y;            /* vertical page scroll still works on touch */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.gal-viewport.is-dragging { cursor: grabbing; }
.gal-viewport:focus-visible { outline: 2px solid var(--g-gold); outline-offset: 3px; }

.gal-slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transform: scale(1.015);
  transition: opacity .7s ease, transform .9s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .7s;
}
.gal-slide.is-active { opacity: 1; visibility: visible; transform: none; z-index: 1; transition-delay: 0s; }

/* Blurred copy of the image fills any empty space so "contain" never looks bare */
.gal-slide::before {
  content: ""; position: absolute; inset: -8%;
  background: var(--gal-img) center / cover no-repeat;
  filter: blur(26px) brightness(.45) saturate(1.1);
}
.gal-slide img {
  position: relative; display: block; width: 100%; height: 100%;
  object-fit: contain;            /* original aspect ratio kept, no cropping */
  -webkit-user-drag: none; pointer-events: none;
}
/* Landscape artwork already matches the 16:10 stage, so let it fill it */
.gal-slide.is-wide img { object-fit: cover; }

.gal-slide figcaption {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: flex; align-items: baseline; gap: .9rem;
  padding: 3.5rem 1.5rem 1.2rem;
  background: linear-gradient(to top, rgb(0 0 0 / .85), rgb(0 0 0 / 0));
}
.gal-num { font-family: var(--font-display, "Archivo", sans-serif); font-weight: 800; font-size: .9rem; letter-spacing: .1em; color: var(--g-gold); }
.gal-cap { font-family: var(--font-display, "Archivo", sans-serif); font-weight: 700; font-size: clamp(1rem, 2vw, 1.4rem); line-height: 1.25; color: var(--g-text); }

/* ---- Buttons ---- */
.gal-btn {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 3rem; height: 3rem; padding: 0;
  border-radius: 50%;
  border: 1px solid rgb(243 196 75 / .75);
  background: rgb(12 12 12 / .72);
  color: var(--g-gold);
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 6px 16px -6px rgb(0 0 0 / .7);
  transition: background .2s, color .2s, transform .2s;
}
.gal-btn:hover { background: var(--g-gold); color: #0c0c0c; }
.gal-btn:active { transform: translateY(-50%) scale(.94); }
.gal-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; background: var(--g-gold); color: #0c0c0c; }
.gal-prev { left: 1rem; }
.gal-next { right: 1rem; }
.gal-btn svg { width: 1.35rem; height: 1.35rem; }

/* ---- Footer row: dots + play/pause ---- */
.gal-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.25rem; }
.gal-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem; }
.gal-dot {
  position: relative; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: none; cursor: pointer; /* 24px tap area */
}
.gal-dot::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: .6rem; height: .6rem; transform: translate(-50%, -50%);
  border-radius: 999px; background: rgb(255 255 255 / .3);
  transition: width .3s, background .3s;
}
.gal-dot:hover::after { background: rgb(255 255 255 / .6); }
.gal-dot[aria-current="true"]::after { width: 1.5rem; background: var(--g-gold); }
.gal-dot:focus-visible { outline: 2px solid var(--g-gold); outline-offset: 1px; border-radius: 4px; }

.gal-toggle {
  display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
  border-radius: 50%; border: 1px solid var(--g-gold-line); background: transparent;
  color: var(--g-gold); cursor: pointer; transition: background .2s, color .2s;
}
.gal-toggle:hover, .gal-toggle:focus-visible { background: var(--g-gold); color: #0c0c0c; outline: none; }
.gal-toggle svg { width: .85rem; height: .85rem; }
.gal-toggle .i-play { display: none; }
.gal-toggle[aria-pressed="true"] .i-pause { display: none; }
.gal-toggle[aria-pressed="true"] .i-play { display: block; }

.gal-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Responsive ---- */
@media (max-width: 991.98px) {   /* tablet */
  .gal-head { margin-bottom: 2rem; }
  .gal-btn { width: 2.75rem; height: 2.75rem; }
}
@media (max-width: 767.98px) {   /* mobile */
  .gal-head { margin-bottom: 1.5rem; }
  .gal-viewport { aspect-ratio: 4 / 3; }          /* taller stage = less cropping on narrow screens */
  .gal-slide.is-wide img { object-fit: contain; }
  .gal-btn { width: 2.75rem; height: 2.75rem; }   /* ≥44px tap target */
  .gal-prev { left: .5rem; } .gal-next { right: .5rem; }
  .gal-slide figcaption { padding: 2.5rem 1rem .9rem; gap: .65rem; }
}
@media (max-width: 380px) {      /* small mobile */
  .gal-title { letter-spacing: .08em; }
  .gal-viewport { aspect-ratio: 1 / 1; }
  .gal-slide figcaption { padding-inline: .8rem; }
  .gal-cap { font-size: .95rem; }
  .gal-dot { width: 1.25rem; }
  .gal-dot[aria-current="true"]::after { width: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gal-slide, .gal-btn, .gal-dot::after { transition: none; }
}