/* =========
   PT Metamorfozy – frontend
   (CSS przekazany przez Ciebie + drobne uzupełnienia pod grid + mobile stack)
========= */

/* Główny kontener metamorfozy */
.ptm-metamorphosis { 
    margin: 0 auto;
    background-color: rgba(218, 209, 200, 0.4);
	border-radius: 25px;
}

/* SLIDER ROOT */
.ptm-slider {
    position: relative;
    width: 100%;
    border-radius: 0;
    overflow: hidden;
	padding: 10px;
}

/* Aspect ratio 16:9 */
.ptm-wrapper {
    position: relative;
    width: 100%;
}
.ptm-wrapper::before {
    content: "";
    display: block;
    padding-top: 75%;
}

/* OBRAZY – NIERUCHOME */
.ptm-before,
.ptm-after {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
	border-radius: 25px;
}

/* MASKA AFTER – JEDYNY ELEMENT, KTÓRY SIĘ PRZESUWA */
.ptm-after-mask {
    position: absolute;
    inset: 0;
    overflow: hidden;
    clip-path: inset(0 50% 0 0); /* start: 50% */
}

/* SUWAK */
.ptm-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    cursor: ew-resize;
    z-index: 20;
}

.ptm-handle-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1.5px;
    width: 3px;
    background: #ffffff;
}

.ptm-handle-circle {
    position: absolute;
    top: 50%;
    left: -18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    background: rgba(0, 0, 0, 0.4);
    transform: translateY(-50%);
}

/* PRZED / PO */
.ptm-before-after-label {
    font-family: "Oddlini", serif;
    position: absolute;
    top: 16px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 25;
}

.ptm-before-label { left: 16px; }
.ptm-after-label { right: 16px; }

/* META POD SLIDEREM */
.ptm-meta {
    padding: 30px 24px;
    min-height: 135px;
}

.ptm-row {
    font-family: "Garamond", serif;
    font-size: 22px;
    line-height: 1.4; 
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 8px;
    text-align:left !important; 
}

.ptm-row:last-child { margin-bottom: 0; }

.ptm-label {
    font-family: "Oddlini", serif;
    font-weight: 600;
    margin-right: 8px;
    color: #2b3f58;
    font-size:16px;
}

.ptm-value {
    font-family: "Oddlini", serif;
    color: #2b3f58;
    font-size:16px;
}

/* Opis */
.ptm-row-desc {
    display: block;
    margin-top: 8px;
    color: #4b5563;
}

/* ===============================
   EFFECTS CAROUSEL – DOTS
================================ */
.ptm-carousel-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:32px;
}

/* HIT AREA */
.ptm-carousel-dot{
  position:relative;
  width:48px;
  height:48px;
  padding:0;
  margin:0;
  background:none;
  border:none;
  cursor:pointer;
}

/* WIZUALNA KROPKA */
.ptm-carousel-dot::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(31,42,54,.35);
  transform:translate(-50%,-50%);
  transition:background .2s ease, transform .2s ease;
}

/* ACTIVE */
.ptm-carousel-dot.is-active::before{
  background:#1f2a36;
  transform:translate(-50%,-50%) scale(1.2);
}

/* FOCUS (A11Y) */
.ptm-carousel-dot:focus-visible{
  outline:2px solid #1f2a36;
  outline-offset:4px;
}

/* MOBILE – większy hit-area */
@media (pointer:coarse){
  .ptm-carousel-dot{ width:52px; height:52px; }
}

/* Przycisk */
.ptm-row-btn { margin-top: 50px; }

.ptm-btn {
  padding: 10px 15px;
  border-radius: 40px;
  font-family: "Oddlini", serif;
  font-size: 13px;
  background: #203b57;
  color: #fff;
  text-decoration: none;
  transition: all .25s ease;
   display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ptm-btn:hover { background: #afafaf; }

/* RWD */
@media (max-width: 768px) {
  .ptm-slider,
  .ptm-wrapper { touch-action: pan-y; }
  .ptm-handle { touch-action: pan-x; }

  .ptm-meta { padding: 36px 18px 16px 18px; }
  .ptm-before-after-label { font-size: 12px; padding: 5px 12px; }
  .ptm-handle-circle { width: 30px; height: 30px; left: -15px; }
}

/* === KARUZELA METAMORFOZ === */
.ptm-carousel { position: relative; margin: 0 auto; }
.ptm-carousel-track-wrapper { overflow: hidden; width: 100%; margin-top:45px; }
.ptm-carousel-track { display: flex; transition: transform 0.35s ease-in-out; will-change: transform; }
.ptm-carousel-slide { flex: 0 0 100%; padding: 0 20px; box-sizing: border-box; }

/* Strzałki */
.ptm-carousel-arrow {
    position: absolute;
    top: 52%;
    transform: translateY(-52%);
    z-index: 30;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: none;
    background: #2f445d;
    color: #fff;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ptm-carousel-prev { left: -40px; }
.ptm-carousel-next { right: -40px; }
.ptm-carousel-arrow:disabled { opacity: 0.3; cursor: default; box-shadow: none; }

/* Kontener sekcji efektów */
.pt-effects-section { text-align: center; margin: 0 auto; padding: 80px 0px; }
.pt-effects-title {
  font-family: "Oddlini", serif;
  font-size: 38px;
  line-height: 1.2;
  margin: 0;
  color: #0d2344;
}
.pt-effects-subtitle {
  font-family: "Garamond", serif;
  font-size: 24px;
  line-height: 1.6;
  margin: 24px 0;
}

/* GRID layout (używane gdy layout=grid) */
.ptm-grid{
  display:grid;
  grid-template-columns: repeat(var(--ptm-cols-desktop, 3), minmax(0, 1fr));
  gap: 40px;
  margin-top:45px;
}
.ptm-grid-item{ padding:0; }

/* Load more */
.ptm-load-more-wrap{ margin-top:32px; display:flex; justify-content:center; }
.ptm-load-more{
  appearance:none;
  border:0;
  background:#2f445d;
  color:#fff;
  border-radius:999px;
  padding:12px 26px;
  cursor:pointer;
  font-family:"Oddlini", serif;
  font-size:16px;
}
.ptm-load-more[disabled]{ opacity:.5; cursor:default; }

/* Mobile – wymaganie: na mobile „wszystkie efekty” jeden pod drugim */
@media (max-width: 768px) {
  .ptm-carousel-dots { margin:0; }
  .pt-effects-section { padding: 80px 0px; }
  .ptm-carousel-slide { padding: 0; }
  .ptm-carousel-arrow { display:none; }
  .pt-effects-title { font-size: 27px; text-align: left; }
  .pt-effects-subtitle { font-size: 21px; text-align: left; }
  .ptm-row { font-size:20px; }
  .ptm-grid{ grid-template-columns: 1fr; gap: 22px; }
  /* =================================
   MOBILE – KARUZELA AKTYWNA
================================= */
@media (max-width: 768px) {

  .ptm-carousel-track-wrapper{
    overflow: hidden;
    touch-action: pan-y;
  }

  .ptm-carousel-track{
    display:flex;
    transition: transform .35s ease;
    will-change: transform;
  }

  .ptm-carousel-slide{
    flex: 0 0 100%;
    padding: 0;
  }

  /* DOTS widoczne */
  .ptm-carousel-dots{
    display:flex;
    margin-top:24px;
  }

  /* Strzałki wyłączone – swipe + dots */
  .ptm-carousel-arrow{
    display:none;
  }
}

}