.donbuild-lightbox { width: min(calc(100% - var(--donbuild-space-8)), var(--donbuild-container-max)); max-height: calc(100dvh - var(--donbuild-space-8)); padding: var(--donbuild-space-4); border: 1px solid var(--donbuild-color-border); border-radius: var(--donbuild-radius-lg); color: var(--donbuild-color-text-primary); background: var(--donbuild-color-surface); overflow: auto; }
.donbuild-lightbox::backdrop { background: var(--donbuild-color-overlay); }
.donbuild-lightbox__toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--donbuild-space-2); flex-wrap: wrap; }
.donbuild-lightbox__toolbar h2 { font-size: var(--donbuild-type-h4-size); margin: 0; }
.donbuild-lightbox__navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.donbuild-lightbox__navigation p { grid-column: 1 / -1; grid-row: 1; margin: 0; text-align: center; }
.donbuild-lightbox__figure { margin: var(--donbuild-space-4) 0; }
.donbuild-lightbox__figure img { display: block; width: 100%; height: auto; max-height: 65dvh; object-fit: contain; }
.donbuild-lightbox__figure figcaption { margin-top: var(--donbuild-space-2); overflow-wrap: anywhere; }
[data-lightbox-image] { touch-action: pan-y; }
.donbuild-project-single__comparison.donbuild-before-after { display: block; }
.donbuild-before-after__images { display: grid; gap: var(--donbuild-space-4); }
.donbuild-before-after__control input { display: block; width: 100%; min-height: var(--donbuild-space-12); accent-color: var(--donbuild-color-brand-text); }
.donbuild-before-after__control p { font-size: var(--donbuild-type-body-small-size); }
.donbuild-before-after.is-enhanced .donbuild-before-after__images { display: block; position: relative; aspect-ratio: var(--donbuild-comparison-ratio); overflow: hidden; background: var(--donbuild-color-surface-subtle); }
.donbuild-before-after.is-enhanced .donbuild-before-after__before,
.donbuild-before-after.is-enhanced .donbuild-before-after__after { position: absolute; inset: 0; }
.donbuild-before-after.is-enhanced .donbuild-before-after__before { z-index: 1; clip-path: inset(0 calc(100% - var(--donbuild-comparison-position)) 0 0); }
.donbuild-before-after.is-enhanced figure { width: 100%; height: 100%; margin: 0; }
.donbuild-before-after.is-enhanced img { width: 100%; height: 100%; object-fit: contain; }
.donbuild-before-after.is-enhanced figcaption { display: none; }
.donbuild-before-after.is-enhanced h3 { position: absolute; top: var(--donbuild-space-2); left: var(--donbuild-space-2); z-index: 1; margin: 0; padding: var(--donbuild-space-1) var(--donbuild-space-2); background: var(--donbuild-color-surface); border-radius: var(--donbuild-radius-sm); font-size: var(--donbuild-type-body-size); }
.donbuild-before-after.is-enhanced .donbuild-before-after__after h3 { left: auto; right: var(--donbuild-space-2); }
.donbuild-before-after.is-enhanced .donbuild-before-after__images::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--donbuild-comparison-position); border-left: 2px solid var(--donbuild-color-surface); z-index: 2; pointer-events: none; }
@media (min-width: 768px) {
  .donbuild-before-after__images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .donbuild-lightbox__navigation { grid-template-columns: auto minmax(0, 1fr) auto; }
  .donbuild-lightbox__navigation p { grid-column: auto; grid-row: auto; }
}
/* Comparison has a fixed neutral track, independent of the split position. */
.donbuild-before-after__control input{appearance:none;background:transparent;accent-color:var(--donbuild-color-brand)}
.donbuild-before-after__control input::-webkit-slider-runnable-track{height:var(--donbuild-space-1);border-radius:var(--donbuild-radius-sm);background:var(--donbuild-color-border-strong)}
.donbuild-before-after__control input::-webkit-slider-thumb{appearance:none;width:var(--donbuild-space-6);height:var(--donbuild-space-6);margin-top:calc(-1 * var(--donbuild-space-2) - 2px);border:0;border-radius:50%;background:var(--donbuild-color-brand)}
.donbuild-before-after__control input::-moz-range-track{height:var(--donbuild-space-1);border-radius:var(--donbuild-radius-sm);background:var(--donbuild-color-border-strong)}
.donbuild-before-after__control input::-moz-range-progress{height:var(--donbuild-space-1);background:var(--donbuild-color-border-strong)}
.donbuild-before-after__control input::-moz-range-thumb{width:var(--donbuild-space-6);height:var(--donbuild-space-6);border:0;border-radius:50%;background:var(--donbuild-color-brand)}