/* ==========================================================================
   MeczRealu: 2+ zdjec we wpisie jak na X (templates/__feeds_post.body.photos.tpl)
   Poziomy pasek: kazde zdjecie w swoich proporcjach (aspect-ratio z wymiarow
   pliku), stala wysokosc, przyciaganie do zdjecia przy przesuwaniu palcem,
   kolejne zdjecie wystaje z prawej. Na komputerze strzalki (mr-photo-carousel.js).
   ========================================================================== */
.pg_wrapper.mr-pcar-wrap {
  position: relative;
  overflow: visible !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  /* rodzic wpisu dopasowuje sie do tresci - bez tego pasek rozpycha wpis */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  contain: inline-size;
}
.mr-pcar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* spad jak na X: od krawedzi do krawedzi wpisu, pierwsze zdjecie przy tekscie */
  margin-left: calc(-1 * var(--mr-pcar-l, 0px));
  margin-right: calc(-1 * var(--mr-pcar-r, 0px));
  padding-left: var(--mr-pcar-l, 0px);
  padding-right: var(--mr-pcar-r, 0px);
  scroll-padding-left: var(--mr-pcar-l, 0px);
  scroll-padding-right: var(--mr-pcar-r, 0px);
}
.mr-pcar::-webkit-scrollbar { display: none; }
.mr-pcar-item {
  flex: 0 0 auto;
  height: min(410px, 66vw);
  aspect-ratio: 4 / 5;            /* gdy brak wymiarow pliku */
  max-width: 86%;                 /* szerokie zdjecie - nastepne i tak wystaje */
  min-width: 34%;
  scroll-snap-align: start;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.mr-pcar-item > a { border-radius: 16px; }
.mr-pcar-item .mr-pg-fill { border-radius: 16px !important; }

/* strzalki - tylko przy myszce */
.mr-pcar-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 20, 25, .75);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background-color .15s, opacity .15s;
}
.mr-pcar-btn svg { width: 20px; height: 20px; }
.mr-pcar-btn:hover { background: rgba(39, 44, 48, .9); }
.mr-pcar-prev { left: 8px; }
.mr-pcar-next { right: calc(8px - var(--mr-pcar-r, 0px)); }
.mr-pcar-btn[hidden] { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  .mr-pcar-wrap:hover .mr-pcar-btn { display: inline-flex; }
}