/* Original production photo mosaic; captions and opening buttons stay visible. */
.bart-reference-mosaic .bart-reference-tile { min-height: 400px; }
.bart-reference-mosaic .home_portfolio-hover {
  display: flex;
  opacity: 1;
  padding: 24px;
  background-image: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.58) 52%, rgba(0,0,0,0) 100%);
}
.bart-reference-mosaic .home_portfolio-hover > .margin-bottom { margin-bottom: 12px; }
.bart-reference-mosaic .home_portfolio-hover .icon-1x1-medium,
.bart-reference-mosaic .home_portfolio-hover .w-embed { width: 32px; height: 32px; margin-bottom: 10px; }
.bart-reference-mosaic .home_portfolio-hover h3 { margin: 0; color: #fff; font-size: 28px; line-height: 1.2; }
.bart-reference-mosaic .home_portfolio-hover > p { margin: 0; color: #fff; font-size: 16px; line-height: 1.45; }
.bart-reference-mosaic .bart-reference-action { margin-top: 20px; }
.bart-reference-mosaic .bart-reference-action .button { display: inline-flex; align-items: center; justify-content: center; }
.bart-reference-mosaic .bart-reference-tile:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
@media (max-width: 991px) {
  .bart-reference-mosaic .home_portfolio_image { height: 100%; min-height: 440px; }
}
@media (max-width: 479px) {
  .bart-reference-mosaic .home_portfolio-hover { padding: 24px; }
}

.bart-portfolio-dialog {
  position: fixed;
  inset: 0;
  width: min(1280px, calc(100vw - 40px));
  max-width: none;
  height: min(900px, calc(100vh - 40px));
  height: min(900px, calc(100dvh - 40px));
  max-height: none;
  margin: auto;
  padding: 24px;
  border: 1px solid #5a685e;
  border-radius: 16px;
  color: #fff;
  background: #111c15;
  overflow: hidden;
}
.bart-portfolio-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 18px; }
.bart-portfolio-dialog::backdrop { background: rgba(0, 0, 0, .82); }
.bart-portfolio-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.bart-portfolio-bar h2 { margin: 0 0 6px; font-size: 28px; line-height: 1.2; color: #fff; }
.bart-portfolio-bar p { margin: 0; color: #d6e1d8; font-size: 16px; line-height: 1.4; }
.bart-portfolio-control {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #287347;
  color: #fff;
  cursor: pointer;
}
.bart-portfolio-control:hover { background: #1d5936; }
.bart-portfolio-control:focus-visible { outline: 3px solid #5cc66f; outline-offset: 4px; }
.bart-portfolio-stage { position: relative; min-height: 0; background: #0a100c; border-radius: 8px; overflow: hidden; touch-action: pan-y pinch-zoom; }
.bart-portfolio-photo > img { width: 100%; height: 100%; display: block; object-fit: contain; transition: opacity .15s; user-select: none; }
.bart-portfolio-photo > img[hidden] { display: none; }
.bart-portfolio-stage.is-loading .bart-portfolio-photo > img { opacity: .3; }
.bart-portfolio-stage .bart-portfolio-arrow { position: absolute; margin: 0; padding: 0; z-index: 1; }
.bart-portfolio-caption { margin: 0; min-height: 24px; color: #e7ece8; font-size: 16px; line-height: 1.4; }
.bart-portfolio-error { margin: 0; padding: 80px; text-align: center; }
@media (max-width: 600px) {
  .bart-portfolio-dialog { width: calc(100vw - 16px); height: calc(100vh - 16px); height: calc(100dvh - 16px); padding: 14px; border-radius: 12px; }
  .bart-portfolio-dialog[open] { gap: 12px; }
  .bart-portfolio-bar { gap: 12px; }
  .bart-portfolio-bar h2 { font-size: 24px; }
  .bart-portfolio-bar p { font-size: 15px; }
  .bart-portfolio-caption { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .bart-portfolio-photo > img { transition: none; } }

/* Keep the original arrows on the photo, including portrait and landscape images. */
.bart-portfolio-stage { display: flex; align-items: center; justify-content: center; }
.bart-portfolio-photo { position: relative; width: 100%; height: 100%; }

/* Fixed gallery geometry: photo proportions and captions cannot move the controls. */
.bart-portfolio-dialog[open] { grid-template-rows: 70px minmax(0,1fr) 45px 88px; gap: 12px; }
.bart-portfolio-bar > div { min-width: 0; }
.bart-portfolio-caption { overflow: auto; min-height: 0; }
.bart-portfolio-stage .bart-portfolio-arrow { top: auto; bottom: 16px; left: auto; right: 16px; transform: none; }
.bart-portfolio-stage [data-portfolio-step="-1"] { right: 80px; }
.bart-portfolio-filmstrip { display: grid; grid-template-columns: 48px minmax(0,1fr) 48px; gap: 14px; align-items: center; min-width: 0; }
.bart-portfolio-filmstrip > button { position: static; margin: 0; padding: 0; }
.bart-portfolio-thumbs { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; height: 88px; padding: 4px 2px; scrollbar-width: thin; scrollbar-color: #5cc66f #253329; }
.bart-portfolio-thumb { flex: 0 0 100px; height: 72px; padding: 2px; background: transparent; border: 2px solid transparent; border-radius: 6px; cursor: pointer; }
.bart-portfolio-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.bart-portfolio-thumb[aria-current="true"] { border-color: #5cc66f; background: #5cc66f; }
.bart-portfolio-thumb:focus-visible, .bart-portfolio-arrow:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.bart-portfolio-filmstrip > button:disabled { opacity: .35; cursor: default; }
@media(max-width:600px) {
 .bart-portfolio-dialog[open] { grid-template-rows: 80px minmax(0,1fr) 44px 72px; gap: 10px; }
 .bart-portfolio-filmstrip { gap: 8px; grid-template-columns: 40px minmax(0,1fr) 40px; }
 .bart-portfolio-filmstrip > button { width: 40px; height: 40px; }
 .bart-portfolio-thumbs { height: 72px; }
 .bart-portfolio-thumb { flex-basis: 80px; height: 58px; }
 .bart-portfolio-stage .bart-portfolio-arrow { bottom: 12px; right: 12px; }
 .bart-portfolio-stage [data-portfolio-step="-1"] { right: 76px; }
}
@media(max-height:520px) and (orientation:landscape) {
 .bart-portfolio-dialog { padding: 10px; }
 .bart-portfolio-dialog[open] { grid-template-rows: 50px minmax(0,1fr) 0 60px; gap: 6px; }
 .bart-portfolio-bar h2 { font-size: 20px; margin: 0; }
 .bart-portfolio-bar p { font-size: 14px; }
 .bart-portfolio-thumbs { height: 60px; }
 .bart-portfolio-thumb { height: 48px; }
}

/* Scrollable photo strip, with controls fixed to the outer stage. */
.bart-portfolio-stage.bart-native-portfolio-stage {
  display: block;
  touch-action: pan-x pan-y pinch-zoom;
}
.bart-portfolio-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;
  cursor: grab;
}
.bart-portfolio-track::-webkit-scrollbar { display: none; }
.bart-portfolio-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.bart-portfolio-slide > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.bart-portfolio-slide > img[hidden] { display: none; }
.bart-portfolio-track.bart-dragging { scroll-snap-type: none; cursor: grabbing; }
.bart-portfolio-track:focus-visible { outline: 2px solid #5cc66f; outline-offset: -3px; }
.bart-portfolio-load-error { padding: 24px; text-align: center; }