/* ---------------------------------------------------------------------------
   Gallery — case pages, category listings, filters.

   Values marked (measured) are taken from the live site's inlined CSS.
   Layout is NOT measured: the source used Bootstrap's grid (col-xs-6,
   col-md-4), which we dropped, so the equivalent is supplied here with grid.
   --------------------------------------------------------------------------- */

.gallery-single,
.gallery-listing,
/* Gallery root container — measured from production at 1440 and 768.

   Production is Bootstrap 3, so .container is a FIXED-WIDTH STEP, not a fluid
   max-width: 750 at >=768, 970 at >=992, 1170 at >=1200, fluid below 768.
   A plain `max-width: 1170` matches only at >=1200 and is wrong in between —
   it gave a 678 slider window at 768 where production has 720.

     >=1200  container 1170, two columns, main 780 (pad 40 35 0 15) -> win 730
      >=768  container  750, one column,  main 750 (pad 40 15 0)    -> win 720
       <768  fluid, one column, swipe-only slides

   The two-column split is col-md-8 + col-md-4, so it starts at 992, not 991. */
.gallery-root {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
  width: 100%;
  margin-inline: auto;
  /* Never pad the grid itself: production's Bootstrap row cancels the
     container gutter with -15px margins, so the column spans the full
     container box and carries the 15px on .gallery-root__main instead.
     Padding here shrank main 750 -> 720 and the window 720 -> 690. */
  padding: 0;
}

.gallery-root__main { padding: 40px 15px 0; }

@media (min-width: 768px) {
  .gallery-single,
  .gallery-listing,
  .gallery-root { width: 750px; }
}

@media (min-width: 992px) {
  /* col-md-8 + col-md-4: the columns carry the gutters, so the grid itself
     drops its side padding and the row's negative margin is emulated.
     The listing and single-case pages use the SAME container in production —
     measured on /before-after-photos/breast-reduction/ at 1440: container
     1170, #content 780, padding 40px 35px 0 15px, identical to the root. */
  .gallery-single,
  .gallery-listing,
  .gallery-root {
    width: 970px;
    grid-template-columns: 2fr 1fr;
    padding: 0;
  }

  .gallery-root__main { padding: 40px 35px 0 15px; }
}

@media (min-width: 1200px) {
  .gallery-single,
  .gallery-listing,
  .gallery-root { width: 1170px; }
}

@media (max-width: 991px) {
  .gallery-single,
  .gallery-listing { grid-template-columns: 1fr; }
}

/* --- Breadcrumbs ----------------------------------------------------------
   Re-measured on live at an emulated 1440, 14 Sep 2026 (the old 12px grey
   values were another surface's): 16px Montserrat, GOLD links, the current
   page in live's own #042a3e, #ddd arrows with a 10px rhythm (live does it
   as link padding around the arrow spans; the ::after margin reproduces the
   same spacing on our ol/li markup).                                        */
.breadcrumbs { color: var(--color-4); padding: 2px 0; margin: 0 0 6px; }

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1em;
}

.breadcrumbs li:not(:last-child)::after {
  content: "›";
  margin: 0 10px;
  color: var(--color-4);
}

.breadcrumbs a { display: inline-block; padding: 3px 0; color: var(--color-1); }
.breadcrumbs a:hover { color: var(--color-hover-10); }
.breadcrumbs .breadcrumb_last { color: #042a3e; }   /* live's own hex — not a token */

/* Page title. Production styles it on the wrapper, not the tag, because the
   base rule is `h1 { font-size: 16px }` — an odd but deliberate part of the
   design. Two measured sizes:
     header.post-title h1      2.4em, Poiret One, --color-5, 2px tracking
     #gallery-* h1             1.2em, no bottom margin
   The page templates previously used <h2> here, which left 74 URLs (61 pages,
   13 posts) with no h1 at all. Corrected 20 Aug 2026.                        */
.post-title h1 {
  font-family: var(--font-family-2);
  color: var(--color-5);
  font-size: 2.4em;
  font-weight: 400;
  letter-spacing: 2px;
  margin-block: 12px 24px;
}

#gallery-single .post-title h1,
#gallery-listing .post-title h1,
.gallery-root .post-title h1 {
  font-size: 1.2em;
  margin-bottom: 0;
}

/* CORRECTED 15 Sep 2026 (Juan Carlos's desktop side-by-sides): EVERY
   gallery h1 on live is 54.4px Poiret (3.4em) at DESKTOP — measured on the
   case page AND the listing at 1024. The 1.2em above is live's PHONE tier
   (19.2px at 375), which is where the old blanket value came from. */
@media (min-width: 768px) {
  #gallery-single .post-title h1,
  #gallery-listing .post-title h1,
  .gallery-root .post-title h1 { font-size: 3.4em; }
}

/* --- Prev / next ----------------------------------------------------------
   The button primitive is 18.5px 70px; inside the gallery the source overrides
   it to 10px 20px (measured).
   SPACE-BETWEEN, not flex-end (corrected 15 Sep 2026): live puts PREVIOUS at
   the column's left edge and NEXT at its right, both widths.               */
.next-prev {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-block: 20px;
}

.next-prev .gallery-prev-btn,
.next-prev .gallery-next-btn { padding: 10px 20px; }

/* --- Before / After column headers ---------------------------------------- */
.bna-labels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;      /* tracks the pair columns below — live's halves TOUCH */
}

h3.bna {                                          /* measured */
  font-size: 1.125em;
  color: var(--color-8);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
}

/* --- Image pairs ----------------------------------------------------------
   zero-right is BEFORE (left column), zero-left is AFTER (right column).
   The class names are inherited from the source and are deliberately kept:
   they are the pairing contract described in build/gallery-schema.md.        */
/* Gap 0 (corrected 15 Sep 2026): live's before/after halves TOUCH at every
   width — the 20px gap split every pair (Juan Carlos's side-by-side). With
   the main column's own gutter below, the desktop halves compute 298px:
   identical to live's. */
.image-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 20px;
}

/* The case page's main column carries the same desktop gutter as the root's
   (live: content starts 15px into the column, 35px off its right edge). */
@media (min-width: 992px) {
  .gallery-single__main { padding: 40px 35px 0 15px; }
}

.image-pair .img-box img {
  width: 100%;
  height: auto;
}

/* --- Patient info --------------------------------------------------------- */
#patient-info {                                   /* measured */
  border-top: 1px solid var(--color-1);
  border-bottom: 1px solid var(--color-1);
  padding-block: 18px;
  margin-block: 28px;
}

#patient-info ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#patient-info li {                                /* measured */
  color: var(--color-9);
  font-size: 1em;
  line-height: 2;
}

#patient-info .data { color: var(--color-2); }    /* measured */
#patient-info .data a { color: var(--color-1); }

/* --- Category grid --------------------------------------------------------
   Source: col-md-4 / col-sm-6 / col-xs-12.                                  */
.patient-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

@media (max-width: 991px) { .patient-grid { grid-template-columns: repeat(2, 1fr); } }
/* 767, not 575. The source is Bootstrap 3, where `xs` ends at 767 — its tiles
   are `col-sm-6 col-xs-12` with no override, so live shows ONE per row below
   768. 575 is a Bootstrap 4/5 boundary and put two per row across 576-767.
   Verified on the live gallery at 700: tiles are full-width, one per row. */
@media (max-width: 767px) { .patient-grid { grid-template-columns: 1fr; } }

.patient-item[hidden] { display: none; }

.patient .main-pic img {
  width: 100%;
  height: auto;
}

.patient-meta {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  color: var(--color-9);
  font-size: var(--font2c);
  line-height: 1.9;
}

.patient-meta .data { color: var(--color-2); }

.patient-text a {
  display: inline-block;
  margin-top: 8px;
  font-size: var(--font7);
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* --- Filters -------------------------------------------------------------- */
#tax-filters {                                    /* measured */
  background: var(--color-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
  margin-bottom: 30px;
}

@media (max-width: 767px) { #tax-filters { grid-template-columns: 1fr; } }

/* STACKED options (corrected 15 Sep 2026, Juan Carlos's desktop
   side-by-side): live lists each choice on its OWN LINE under a 24px
   Poiret group title — ours ran them inline and they wrapped mid-label.
   The fieldset is a two-column grid: radio | label per row. */
.tax-filters__group {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  /* start, not the stretch default: the three groups share a row, so the
     two-option Gender group otherwise stretches its rows to Age's height
     and the options drift apart. */
  align-content: start;
  gap: 8px 8px;
}

.tax-filters__group legend {
  font-family: var(--font-family-2);
  font-size: 24px;                  /* live: h3-equivalent, 24px, black */
  color: var(--color-2);
  margin-bottom: 15px;
}

#tax-filters label {
  font-size: 16px;                  /* live: 16px per option row */
  line-height: 1.4;
  display: block;
  margin: 0;
  cursor: pointer;
}

#tax-filters input:checked + label {
  color: var(--color-1);
  font-weight: 600;
}

/* --- Gallery root --------------------------------------------------------- */

/* Labiaplasty thumbnails are BLURRED outside their own section — live's own
   three rules, copied verbatim from the mirror's custom CSS (caught missing
   by Juan Carlos 14 Sep 2026). The hook is the alt text ("Labiaplasty
   Before & After Patient #NNNN", which our cards reproduce), and the
   unblur scope is the category listing and the case page — the two
   surfaces a visitor reaches deliberately, behind the age gate. Our
   templates carry live's exact container ids, so the selectors are
   identical. */
img[alt*="Labiaplasty Before & After"] { filter: blur(20px); }

#gallery-listing img[alt*="Labiaplasty"],
#gallery-single img[alt*="Labiaplasty"] { filter: blur(0); }

/* "Results May Vary" — live renders the whole disclaimer apparatus as CSS
   PSEUDO-ELEMENT CONTENT (mirror rules, copied verbatim): an asterisk after
   every strip heading on the root, and the uppercase footnote at the end of
   all three gallery surfaces. Nothing in the DOM carries this text, which is
   why every word-count and content sweep missed it for four weeks — it took
   Juan Carlos's eyes (14 Sep 2026). The #gallery-home id these key on is
   live's own wrapper id, added to archive-pg_patient.php the same day.      */
#gallery-home h3 a::after { content: "*"; }

#gallery-home::after,
#gallery-listing::after,
#gallery-single::after {
  content: "*Results May Vary";
  text-transform: uppercase;
  font-size: 14px;
  color: #000;
  padding: 20px 0;
  display: block;
  font-weight: 300;
  clear: both;
}

.gallery-group { margin-bottom: 40px; }

.gallery-group__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 20px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

/* --- Sidebar -------------------------------------------------------------- */
/* The stage-5 promo-list rules were removed 31 Aug 2026 with the placeholder
   markup they styled; the aside now uses .aside-procedures (content.css) and
   the Testimonials box (#side-review-box, content.css).                      */

/* --- Strip caption bars ----------------------------------------------------
   Production overlays each slide: translucent black bar, "Patient #NNNN"
   left, "Click to Enlarge" + info icon right. Values are production's own:
   rgba(0,0,0,.6), 18px tall, 12px type, white links; the label hides below
   768 (live's hidden-xs).                                                    */
.gallery-strip__item { position: relative; }

.gallery-strip__item .patient-meta {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, .6);
  height: 18px;
  padding: 1px 10px 0;
}

.gallery-strip__item .patient-meta p {
  float: left;
  margin: 0;
  font-size: 12px;
  line-height: 1em;
}

.gallery-strip__item .patient-meta p.right { float: right; }

.gallery-strip__item .patient-meta a {
  color: #fff;
  line-height: 1em;
  position: relative;
  top: 2px;
}

.patient-meta__icon {
  fill: #fff;
  vertical-align: -1px;
}

@media (max-width: 767px) {
  .patient-meta__zoom { display: none; }
}

/* --- Case card thumbnails --------------------------------------------------
   Production renders every image for the case: pair 1 at 100x100 in .main-pic,
   each further pair at 50x50 in .sub-pic-N. Corrected 20 Aug 2026 — the card
   previously showed only the first before-image.                             */
/* The flex belongs on the ANCHOR, not the row: the images live inside a
   block <a>, so flex on the row laid out one anchor and the pair stacked
   vertically — every card ran ~180px tall over production (found 31 Aug PDT,
   tile-grid audit). Production also sets the sub-pic pairs SIDE BY SIDE on
   one 50px row, not one row per pair. */
.patient .main-pic a,
.patient [class^="sub-pic-"] a {
  display: flex;
  gap: 4px;
}

.patient [class^="sub-pic-"] {
  display: inline-flex;
  margin-right: 4px;
  vertical-align: top;
}

.patient .main-pic { margin-bottom: 4px; }

.patient [class^="sub-pic-"] { margin-bottom: 4px; }

/* FLUID at every width (corrected 15 Sep 2026 — the fixed 100/50 matched
   nothing: live scales the card images with the card, halves for the main
   pair and quarters for the thumbs — measured 79/79/39 in a 179px card at
   1024 and 163/163/80 in a 345px card at 375). The full fluid card layout
   lives in the block near the end of this file. */
.patient .main-pic img {
  width: 50%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.patient [class^="sub-pic-"] img {
  width: 50%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* --- Gallery root: category strips ----------------------------------------
   Production shows every category followed by a horizontal strip of its cases,
   two thumbnails per case. Added 20 Aug 2026 — the root previously listed only
   category links.                                                            */
.gallery-group > h2 {
  font-family: var(--font-family-2);
  font-size: var(--font4);
  margin-bottom: 18px;
}

.gallery-category { margin-bottom: 34px; }

/* ---------------------------------------------------------------------------
   Procedure row — measured from production at 1440 and 768.

   h2  Poiret One 30/33 #999, margins 0
   h3  Poiret One 20/22 #999, margin-bottom 35   <- the gap to the slider
   NO border under the head row. An earlier build drew one; production has
   `0px none` on both the head row and the h3.
   Slider window -> next h3: 50px.                                          */
.gallery-category__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0;
}

.gallery-group > h2 {
  font-family: var(--font-family-2);
  font-size: 30px;
  line-height: 33px;
  color: var(--color-8);
  margin: 0 0 18px;
}

.gallery-category__head h3 {
  font-family: var(--font-family-2);
  font-size: 20px;
  line-height: 22px;
  color: var(--color-8);
  margin: 0 0 35px;
}

.gallery-category__head h3 span { color: var(--color-8); }

/* Production's View All is a gold pill: bg + 2px border both #b09259,
   white text, 16px, radius 50px, padding 6px 12px 5px, box 128x38. */
.view-all {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 16px;
  /* measured: 22.857px, weight 500, 0.8px tracking, UPPERCASE. The tracking
     and the caps are what make the box 128 wide -- setting them to none gave
     103 and looked like a padding bug. */
  line-height: 22.857px;
  font-weight: 500;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-1);
  border: 2px solid var(--color-1);
  border-radius: 50px;
  padding: 6px 12px 5px;
  transition: background-color .2s ease, color .2s ease;
}

.view-all:hover,
.view-all:focus-visible { background: transparent; color: var(--color-1); }

/* --- the windowed carousel ------------------------------------------------
   The window is the full content column (730 at 1440, 720 at 768); the slide
   is a FIXED 500x250 at >=768, so one case is framed and the next peeks —
   which is what tells the user there is more. Production is identical.

   overflow-x stays `auto` rather than `hidden`: the arrows drive it, but
   trackpad and touch still work, and the scrollbar is hidden so it reads the
   same. scroll-snap keeps a case from being left half-scrolled.            */
.gallery-strip-wrap { position: relative; }

.gallery-strip {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gallery-strip::-webkit-scrollbar { display: none; }

.gallery-strip__item {
  flex: 0 0 500px;
  scroll-snap-align: start;
}

.gallery-strip__item a { display: flex; gap: 0; }

.gallery-strip__item img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  display: block;
}

/* Arrows: 60 wide, full slide height, pinned to the window edges. */
.gallery-strip__arrow {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 60px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 100%);
  transition: opacity .2s ease;
}

.gallery-strip__arrow--prev {
  left: 0;
  background: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 100%);
}

.gallery-strip__arrow--next { right: 0; }

.gallery-strip__arrow:disabled { opacity: 0; pointer-events: none; }

.gallery-strip__arrow:focus-visible { outline: 2px solid var(--color-1); outline-offset: -4px; }

.gallery-strip:focus-visible { outline: 2px solid var(--color-1); outline-offset: 2px; }

/* Below 768 production drops to 182x91 slides, swipe only — no arrows, and
   `hidden-xs` removes View All. Bootstrap 3: xs ends at 767, not 575. */
@media (max-width: 767px) {
  /* 15px between tiles — live's phone slides carry a gutter (measured on
     live at 375, 15 Sep 2026); ours sat flush. Desktop stays gap 0 as
     QC-verified. */
  .gallery-strip { gap: 15px; }
  .gallery-strip__item { flex: 0 0 182px; }
  .gallery-strip__item img { width: 91px; height: 91px; }
  .gallery-strip__arrow { display: none; }
  .view-all { display: none; }
  .gallery-category__head h3 { margin-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-strip { scroll-behavior: auto; }
}

/* A GRID ITEM DEFAULTS TO min-width:auto, so it cannot shrink below its
   content's intrinsic width. .gallery-strip is a horizontal scroller whose
   intrinsic width is the sum of all its tiles — 1890px — which forced the grid
   item to 1890 and gave the gallery ROOT page 1210px of horizontal page scroll
   at a 700px viewport. The strip's own overflow-x:auto could never take effect
   because nothing was constraining its parent.

   min-width:0 lets the item shrink to its track, and the strip scrolls
   internally as intended. Same applies to any flex/grid child wrapping a
   horizontal scroller. */
/* EVERY grid child, not just the main column. The sidebar defaults to
   min-width:auto too, and at 1024 its content min-width (348) beat its 1fr
   track (323) — which stole 25px from the main column and shrank the slider
   window from 597 to 572. The 2fr/1fr ratio only holds when both sides can
   shrink. */
.gallery-root > *,
.gallery-root__main,
.gallery-group,
.gallery-category { min-width: 0; }



/* Card meta + View More — production's values: stats list at .875em with
   tight rows, and a full-width uppercase button between thumbnails and
   stats (a.view-more: block, padding 10px 0 7px, margin 5px 0 8px).       */
.patient .patient-meta {
  font-size: .875em;
}

.patient .patient-meta li { line-height: 19px; }

.view-more--card {
  display: block;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  margin: 5px 0 8px;
  padding: 10px 0 7px;
  background: var(--color-1);
  color: var(--color-3);
}

.view-more--card:hover {
  background: var(--color-3);
  color: var(--color-1);
}

/* --- Case-card chrome, corrected 15 Sep 2026 (gallery pass with Juan
   Carlos). Measured on live at BOTH 375 and 1024 — none of this is
   breakpointed on live, and all of it was missing or inverted here:
     .patient       1px #acacac box, 9px padding (absent at every width)
     stats          labels BLACK, values GOLD (ours had grey labels and
                    black values — the earlier "production's values" note
                    was measured off the ROOT strips, not these cards)
     .patient-text  top rule above Read More, 5px gap
     Read More      sentence case, 14px (ours was uppercase/tracked)     */
.patient {
  border: 1px solid rgb(172, 172, 172);
  padding: 9px;
}

.patient-meta { color: var(--color-2); }
.patient-meta .data { color: var(--color-1); }

.patient-text {
  border-top: 1px solid rgb(172, 172, 172);
  padding-top: 5px;
  margin-top: 8px;
}

.patient-text a {
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;
}

/* Fluid card layout, ALL widths (was ≤767 only until Juan Carlos's desktop
   side-by-side, 15 Sep 2026 — live is fluid everywhere): main pair = two
   touching halves; sub-thumbs = two touching quarters per pair, two pairs
   per row with a 4px seam. Everything scales with the card. */
.patient { display: flex; flex-wrap: wrap; }
.patient > * { flex: 0 0 100%; min-width: 0; }

.patient .main-pic a { gap: 0; }

.patient [class^="sub-pic-"] {
  flex: 0 0 calc(50% - 2px);
  display: flex;
  margin: 0 4px 4px 0;
}
/* children: main-pic(1), sub-1(2), sub-2(3)… — the odd ones end a row. */
.patient [class^="sub-pic-"]:nth-child(odd) { margin-right: 0; }
.patient [class^="sub-pic-"] a { gap: 0; width: 100%; }

/* Live's phone tile keeps 15px side gutters (its own .patient-item
   padding), which is what makes the thin card frame VISIBLE — ours ran
   full-bleed and pushed the border to the screen edge (Juan Carlos,
   15 Sep 2026). Desktop separation comes from the grid gap instead. */
@media (max-width: 767px) {
  .patient-item { padding: 0 15px 30px; }
}

/* --- Single case page: share button (live's "Click To Share With
   Friends", below the bottom prev/next) + phone layout. -------------- */
.case-share {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 16px;
  border: 0;
  border-radius: 4px;
  background: #ebebeb;
  color: var(--color-2);
  font-size: 16px;
  cursor: pointer;
}

.case-share:hover { background: #dedede; }

/* Live's phone case page (Juan Carlos's capture, 15 Sep 2026): each
   before/after pair is one TOUCHING two-up row, and the info block is a
   TWO-COLUMN grid (Patient#|Gender, Ethnicity|Age, Procedure across). */
@media (max-width: 767px) {
  /* The grid container is deliberately padding:0 (Bootstrap-row emulation)
     and each main column carries its own gutter — the ROOT's does
     (.gallery-root__main), but the case page's never got one below 768, so
     its pairs/stats/buttons ran edge-to-edge ("same thing is happening" —
     Juan Carlos, 15 Sep 2026). Live insets the case content ~15px. */
  .gallery-single__main { padding-inline: 15px; }

  #gallery-single .image-pair {
    display: flex;
    gap: 0;                      /* live's pair halves TOUCH on the phone */
    margin-bottom: 28px;
  }

  /* PREVIOUS at the left edge, NEXT at the right — live's phone layout. */
  #gallery-single .next-prev {
    display: flex;
    justify-content: space-between;
  }
  #gallery-single .image-pair .col-center {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0;
  }
  #gallery-single .img-box { margin: 0; }
  #gallery-single .img-box img { width: 100%; height: auto; display: block; }

  #patient-info ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
  }
  #patient-info li:last-child { grid-column: 1 / -1; }
}