/* Before and after gallery. Loaded only by /gallery/ pages. */

.ga-wrap{max-width:1180px;margin:0 auto;padding:0 20px 78px}
.ga-head{padding:120px 0 8px;text-align:center}
.ga-head h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
  font-size:clamp(30px,4.4vw,46px);line-height:1.14;color:#2A1B35;margin:0 0 18px}
.ga-intro{max-width:760px;margin:0 auto;color:#4A3B55;font-size:17px;line-height:1.72}

/* filter row */
.ga-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;
  margin:34px auto 6px;padding:0;list-style:none}
.ga-filter{appearance:none;border:1px solid #E3D8C8;background:#fff;color:#5A4A66;
  font:600 14px/1 'Inter',system-ui,sans-serif;letter-spacing:.01em;
  padding:11px 17px;border-radius:999px;cursor:pointer;transition:all .16s ease}
.ga-filter:hover{border-color:#7B2B7B;color:#7B2B7B}
.ga-filter[aria-pressed="true"]{background:#7B2B7B;border-color:#7B2B7B;color:#fff}
.ga-count{font:500 13px/1 'Inter',system-ui,sans-serif;color:#7A6B86;
  text-align:center;margin:16px 0 0}

/* sections */
.ga-sec{margin:44px 0 0;padding:0 0 4px}
.ga-sec__note{text-align:center;margin:14px 0 0;
  font:400 13px/1.6 'Inter',system-ui,sans-serif;color:#7A6B86}
.ga-sec[hidden]{display:none}


/* full-width section band: the treatment name and the route into its child
   page in one element, so nothing competes with the photos or with itself */
.ga-band{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  background:#7B2B7B;color:#fff;border-radius:8px;padding:14px 22px;
  text-decoration:none;box-shadow:0 2px 10px rgba(123,43,123,.18);
  transition:background .16s ease}
.ga-band:hover{background:#5F1F5F;color:#fff}
.ga-band:focus-visible{outline:3px solid #7B2B7B;outline-offset:3px}
.ga-band--plain{cursor:default}
.ga-band--plain:hover{background:#7B2B7B}
.ga-band__t{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
  font-size:clamp(21px,2.5vw,28px);line-height:1.2;letter-spacing:.01em}
.ga-band__a{flex:none;font:600 13px/1 'Inter',system-ui,sans-serif;letter-spacing:.04em;
  opacity:.92;white-space:nowrap}
.ga-band:hover .ga-band__a{opacity:1}
@media (max-width:720px){
  .ga-band{flex-direction:column;align-items:flex-start;gap:7px;padding:13px 17px}
}

/* grid — every card is the same square, images are contained so a
   before/after is never cropped in half */
.ga-grid{display:grid;gap:18px;margin:20px 0 0;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.ga-item{margin:0}
.ga-card{display:block;width:100%;padding:0;border:1px solid #ECE2D0;background:#fff;
  border-radius:12px;overflow:hidden;cursor:zoom-in;transition:box-shadow .18s ease,transform .18s ease}
.ga-card:hover{box-shadow:0 8px 26px rgba(42,27,53,.13);transform:translateY(-2px)}
.ga-card:focus-visible{outline:3px solid #7B2B7B;outline-offset:2px}
.ga-pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#ECE2D0}
.ga-half{display:block;background:#F6F4F1}
.ga-half img{display:block;width:100%;aspect-ratio:1/1;height:auto;object-fit:contain}
/* label sits UNDER the picture, never over it */
.ga-lbl{display:block;padding:7px 4px;background:#fff;color:#5A4A66;text-align:center;
  font:600 10.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase}

/* page-level notice */
.ga-notice{max-width:860px;margin:46px auto 0;padding:20px 22px;background:#FAF7F2;
  border:1px solid #ECE2D0;border-radius:12px;
  font:400 13.5px/1.65 'Inter',system-ui,sans-serif;color:#5A4A66}

/* child-page links */
.ga-sub{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:26px 0 0}
.ga-sub a{font:600 14px/1 'Inter',system-ui,sans-serif;color:#7B2B7B;text-decoration:none;
  border:1px solid #E3D8C8;border-radius:999px;padding:11px 17px;transition:all .16s ease}
.ga-sub a:hover{background:#7B2B7B;border-color:#7B2B7B;color:#fff}
.ga-back{display:inline-block;margin:0 0 14px;font:600 14px/1 'Inter',system-ui,sans-serif;
  color:#7B2B7B;text-decoration:none}
.ga-back:hover{text-decoration:underline}

/* lightbox */
.ga-lb{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
  background:rgba(18,10,24,.93);padding:28px}
.ga-lb[open]{display:flex}
.ga-lb__fig{margin:0;max-width:1100px;max-height:100%;display:flex;flex-direction:column;gap:12px}
.ga-lb__pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ga-lb__half{display:block}
.ga-lb__half img{display:block;width:100%;max-height:72vh;object-fit:contain;
  border-radius:8px;background:#201428}
.ga-lb__lbl{display:block;margin-top:7px;text-align:center;color:#D9CDE2;
  font:600 11px/1 'Inter',system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.ga-lb__cap{color:#E8DFEE;font:500 13.5px/1.6 'Inter',system-ui,sans-serif;text-align:center}
.ga-lb__cap b{color:#fff;display:block;font-size:15px;margin-bottom:3px}
.ga-lb__x,.ga-lb__nav{position:absolute;appearance:none;border:0;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.12);border-radius:999px;transition:background .16s ease}
.ga-lb__x:hover,.ga-lb__nav:hover{background:rgba(255,255,255,.26)}
.ga-lb__x{top:18px;right:18px;width:44px;height:44px;font-size:26px;line-height:1}
.ga-lb__nav{top:50%;transform:translateY(-50%);width:50px;height:50px;font-size:28px;line-height:1}
.ga-lb__nav--prev{left:16px}
.ga-lb__nav--next{right:16px}
.ga-lb__x:focus-visible,.ga-lb__nav:focus-visible{outline:3px solid #fff;outline-offset:2px}

@media (max-width:640px){
  .ga-wrap{padding-bottom:52px}
  .ga-head{padding:92px 0 4px}
  .ga-grid{grid-template-columns:1fr;gap:14px}
  .ga-lb{padding:14px}
  .ga-lb__nav{width:42px;height:42px;font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  .ga-card,.ga-filter,.ga-sub a{transition:none}
  .ga-card:hover{transform:none}
}

/* STAGING ONLY — reference number inside the photo for the office review.
   Goes away when build_gallery.py REVIEW_MODE is set to False. */
.ga-card{position:relative}
.ga-num{position:absolute;top:8px;left:8px;z-index:2;
  background:rgba(18,10,24,.78);color:#fff;border-radius:6px;
  font:700 13px/1 "Inter",system-ui,sans-serif;letter-spacing:.04em;
  padding:6px 9px;pointer-events:none}

/* two angles of one result: a single full-width cell holding both pairs */
.ga-item--duo{grid-column:1/-1}
.ga-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ga-duo>.ga-card{width:100%}
@media (max-width:620px){ .ga-duo{grid-template-columns:1fr;gap:12px} }