/* ============================================================
   Nusbaum — Before & After gallery.
   Matches the site system: EB Garamond display, Urbanist body,
   brand blue #0B79BF, deep navy #0e2a44.

   NOTE: patient result photos are deliberately EXEMPT from the sitewide
   grayscale treatment — colour is clinically meaningful here (bruising,
   redness, pigment, tone), and a B&W before/after would be misleading.
   ============================================================ */

.nus-ba {
  --ba-accent: #0B79BF;
  --ba-ink: #0e2a44;
  --ba-body: #4a5b6b;
  --ba-line: #e3e8ee;
  --ba-serif: 'EB Garamond', Georgia, serif;
  --ba-sans: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  display: block;
  max-width: 80rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) 1.25rem;
  font-family: var(--ba-sans);
  color: var(--ba-body);
}
.nus-ba * { box-sizing: border-box; }

/* Defensive reset. master.css styles several BARE tags for the site chrome —
   notably `header{position:sticky;top:0;z-index:100;background:transparent}`.
   Any such tag used inside this component inherits that and floats over the
   photos as a ghost second header. Nothing in here should stick or stack. */
.nus-ba header, .nus-ba footer, .nus-ba section, .nus-ba aside, .nus-ba__head {
  position: static;
  top: auto;
  z-index: auto;
  background: none;
  box-shadow: none;
  transition: none;
}

/* ---- header ---- */
.nus-ba__head { text-align: center; max-width: 42rem; margin: 0 auto clamp(1.5rem, 4vw, 2.75rem); }
.nus-ba__eyebrow {
  margin: 0 0 .5rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ba-accent);
}
.nus-ba__title {
  font-family: var(--ba-serif); font-weight: 500; color: var(--ba-ink);
  font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.08; margin: 0 0 .75rem;
  letter-spacing: -.01em;
}
.nus-ba__lede { margin: 0; font-size: 1.02rem; line-height: 1.6; }

/* ---- filters ---- */
.nus-ba__filters {
  display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
}
.nus-ba__filter {
  appearance: none; cursor: pointer; background: #fff;
  border: 1px solid var(--ba-line); border-radius: 999px;
  padding: .5rem 1rem; font: 500 .84rem/1 var(--ba-sans); color: var(--ba-body);
  transition: background .16s, border-color .16s, color .16s;
}
.nus-ba__filter:hover { border-color: var(--ba-accent); color: var(--ba-accent); }
.nus-ba__filter.is-on { background: var(--ba-ink); border-color: var(--ba-ink); color: #fff; }

/* ---- groups ---- */
.nus-ba__group { margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.nus-ba__group[hidden] { display: none; }
.nus-ba__grouphead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap;
  padding-bottom: .85rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--ba-line);
}
.nus-ba__groupmeta {
  display: flex; align-items: baseline; gap: .5rem 1.25rem; flex-wrap: wrap;
}
.nus-ba__grouphead h3 {
  margin: 0; font-family: var(--ba-serif); font-weight: 500;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem); color: var(--ba-ink); line-height: 1.2;
}
.nus-ba__grouphead h3 span {
  display: inline-block; margin-left: .5rem; vertical-align: middle;
  font-family: var(--ba-sans); font-size: .7rem; font-weight: 600;
  color: var(--ba-accent); background: #eef7fd; border-radius: 999px;
  padding: .18rem .5rem;
}
.nus-ba__more {
  font-size: 1.02rem; font-weight: 600; color: var(--ba-accent);
  text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid rgba(11,121,191,.32); padding-bottom: 2px;
  transition: color .16s, border-color .16s;
}
.nus-ba__more:hover { color: var(--ba-accent-dk, #0a5f96); border-bottom-color: currentColor; }

/* Per-treatment booking CTA. Uses the site's own .btn (gold, uppercase) so it
   reads as the same action as BOOK CONSULTATION in the header. */
.nus-ba__cta {
  flex: 0 0 auto;
  padding: 13px 26px !important;
  font-size: .74rem !important;
  letter-spacing: .13em !important;
  text-align: center;
  text-decoration: none;
}
@media (max-width: 720px) {
  .nus-ba__grouphead { align-items: flex-start; }
  .nus-ba__cta { width: 100%; justify-content: center; }
}

.nus-ba__grid {
  display: grid; gap: clamp(.75rem, 2vw, 1.25rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.nus-ba__item { margin: 0; }

/* ---- the slider ---- */
.nus-ba__slider {
  --ba: 50%;
  position: relative; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--ba-line);
  background: #f2f5f8;
  cursor: ew-resize;
  touch-action: pan-y;              /* let the page scroll vertically; we own horizontal */
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  line-height: 0;
}
.nus-ba__slider:focus-visible { outline: 2px solid var(--ba-accent); outline-offset: 3px; }

.nus-ba__img {
  display: block; width: 100%; height: auto;
  /* Undo the sitewide grayscale — see note at the top of this file. */
  filter: none !important;
  -webkit-user-drag: none; user-drag: none; pointer-events: none;
}

/* The BEFORE image is clipped to the handle position and sits on top. */
.nus-ba__clip {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--ba)) 0 0);
}
/* Only hint the compositor while the reveal is actually moving — the page can
   hold 61 of these, and a standing will-change on all of them costs real memory
   on a phone. */
.nus-ba__slider.is-dragging .nus-ba__clip,
.nus-ba__slider.is-hinting .nus-ba__clip { will-change: clip-path; }
.nus-ba__clip .nus-ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- labels ---- */
.nus-ba__tag {
  position: absolute; top: .6rem; z-index: 3;
  font: 600 .64rem/1 var(--ba-sans); letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(14,42,68,.72); backdrop-filter: blur(4px);
  border-radius: 999px; padding: .34rem .6rem;
  transition: opacity .18s;
}
.nus-ba__tag--b { left: .6rem; }
.nus-ba__tag--a { right: .6rem; }
/* Hide a label once the handle sweeps past it, so it never sits on the wrong half. */
.nus-ba__slider[aria-valuenow="0"]   .nus-ba__tag--b,
.nus-ba__slider[aria-valuenow="100"] .nus-ba__tag--a { opacity: 0; }

/* ---- handle ---- */
.nus-ba__handle {
  position: absolute; top: 0; bottom: 0; z-index: 4;
  left: var(--ba); width: 2px; margin-left: -1px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 1px rgba(14,42,68,.18), 0 0 14px rgba(14,42,68,.28);
  pointer-events: none;
}
.nus-ba__handle i {
  position: absolute; top: 50%; left: 50%;
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 2px 10px rgba(14,42,68,.32);
  display: block;
}
/* Two chevrons, drawn with borders — no icon font, no SVG request. */
.nus-ba__handle i::before,
.nus-ba__handle i::after {
  content: ''; position: absolute; top: 50%; width: 7px; height: 7px;
  border-top: 2px solid var(--ba-accent); border-right: 2px solid var(--ba-accent);
}
.nus-ba__handle i::before { left: 10px;  transform: translateY(-50%) rotate(-135deg); }
.nus-ba__handle i::after  { right: 10px; transform: translateY(-50%) rotate(45deg); }

.nus-ba__slider.is-dragging .nus-ba__handle i { transform: scale(1.06); }
.nus-ba__slider.is-dragging { cursor: grabbing; }

/* ---- disclaimer ---- */
.nus-ba__disclaimer {
  margin: clamp(1.5rem, 4vw, 2.5rem) auto 0; max-width: 46rem; text-align: center;
  font-size: .76rem; line-height: 1.55; color: #8794a2;
}

/* ---- phones ----
   The source photos are mostly 560x800 portrait. One-up on a 390px phone made
   every card ~500px tall, and there are 61 of them — the whole gallery was
   ~30,000px of scroll and each image filled the screen. Two-up halves it and
   makes the set skimmable; tapping any card opens the full-size comparison. */
@media (max-width: 560px) {
  .nus-ba__grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; align-items: start; }
  .nus-ba__slider { border-radius: 9px; }
  /* Scale the chrome down with the card, or it swamps a 165px-wide thumbnail. */
  .nus-ba__handle i { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .nus-ba__handle i::before,
  .nus-ba__handle i::after { width: 5px; height: 5px; border-width: 1.5px; }
  .nus-ba__handle i::before { left: 7px; }
  .nus-ba__handle i::after  { right: 7px; }
  .nus-ba__tag { top: .35rem; font-size: .52rem; padding: .24rem .42rem; letter-spacing: .06em; }
  .nus-ba__tag--b { left: .35rem; }
  .nus-ba__tag--a { right: .35rem; }
}

/* ---- fullscreen comparison (tap a card on touch devices) ----
   At two-up the thumbnail is too small to drag meaningfully, so a tap that
   isn't a drag promotes that pair to a full-screen slider. */
.nus-ba__zoom {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  /* .nus-ba sets a centred max-width column; the overlay is the whole screen. */
  max-width: none; margin: 0;
  padding: 1rem;
  /* Near-opaque and blurred: at .94 the nav and headings behind stayed legible
     and competed with the photo. */
  background: rgba(8, 20, 32, .97);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
  overscroll-behavior: contain;
}
.nus-ba__zoom.is-open { opacity: 1; visibility: visible; }
/* Shrink-wrap the pair: the in-flow "after" image sizes the box, and the
   absolutely-positioned "before" clip then lines up with it exactly whatever
   the aspect ratio. */
.nus-ba__zoom .nus-ba__slider {
  width: auto; max-width: min(100%, 34rem);
  border-color: rgba(255,255,255,.14);
  cursor: ew-resize;
}
.nus-ba__zoom .nus-ba__img--after { width: auto; max-width: 100%; max-height: 82vh; }
.nus-ba__zoom .nus-ba__handle i { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.nus-ba__zoom .nus-ba__handle i::before,
.nus-ba__zoom .nus-ba__handle i::after { width: 7px; height: 7px; border-width: 2px; }
.nus-ba__zoom .nus-ba__handle i::before { left: 11px; }
.nus-ba__zoom .nus-ba__handle i::after  { right: 11px; }
.nus-ba__zoom .nus-ba__tag { top: .6rem; font-size: .64rem; padding: .34rem .6rem; letter-spacing: .1em; }
.nus-ba__zoom .nus-ba__tag--b { left: .6rem; }
.nus-ba__zoom .nus-ba__tag--a { right: .6rem; }

.nus-ba__zoomcap {
  position: absolute; left: 0; right: 0; bottom: max(1rem, env(safe-area-inset-bottom));
  margin: 0; text-align: center;
  font: 500 .8rem/1.4 var(--ba-sans, sans-serif); color: rgba(255,255,255,.72);
}
.nus-ba__zoomclose {
  position: absolute; top: max(.75rem, env(safe-area-inset-top)); right: .75rem;
  width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  appearance: none; cursor: pointer;
  background: rgba(255,255,255,.12); border: 0; border-radius: 50%;
  color: #fff; font-size: 1.5rem; line-height: 1;
}
.nus-ba__zoomclose:hover { background: rgba(255,255,255,.2); }
body.nus-ba-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nus-ba__zoom { transition-duration: .01ms; }
}

@media (prefers-reduced-motion: reduce) {
  .nus-ba * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}