@charset "UTF-8";
/* ==========================================================================
   Blok: Realizacje — kadry przed/po z suwakiem sterowanym kursorem
   ========================================================================== */

/* Tłem steruje akordeon „Zaawansowane" (--sec-bg). */

/* Nadtytuł i H2 — wyśrodkowane na całej szerokości treści. */
.works__head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.works__title { margin-bottom: 0; }

/* --- Siatka: trzy kadry poprzesuwane i lekko przekrzywione --------------- */
.works__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.75rem);
  align-items: start;
  /* zapas na przesunięcia w pionie, żeby nic nie było przycięte */
  padding-block: 3rem;
}

.work { margin: 0; }

.works__grid > .work:nth-child(3n + 1) { transform: translateY(2rem) rotate(-2deg); }
.works__grid > .work:nth-child(3n + 2) { transform: translateY(-1.75rem) rotate(1.5deg); }
.works__grid > .work:nth-child(3n + 3) { transform: translateY(3.25rem) rotate(-1deg); }

/* --- Kadr przed/po ------------------------------------------------------- */
.work__frame {
  --pos: 50%;
  position: relative;
  aspect-ratio: 2 / 3;   /* pionowy kadr — zgodny ze zdjęciami z telefonu */
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  cursor: ew-resize;
  background: var(--stone);
}

.work__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  user-select: none;
  -webkit-user-drag: none;
}

/* „Przed" zajmuje lewą stronę: przycinane od lewej krawędzi do pozycji kursora.
   Po prawej stronie kreski widać „po". */
.work__img--before {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  transition: clip-path 90ms ease-out;
}

/* --- Kreska rozdzielająca ze strzałkami ---------------------------------- */
.work__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(20, 27, 26, 0.18);
  transition: left 90ms ease-out;
  pointer-events: none;
}

/* Uchwyt: białe kółko w obwódce tego samego koloru co kreska. Przerywa linię
   w miejscu chwytu, dzięki czemu widać, gdzie złapać, a groty mają czytelne
   tło niezależnie od tego, co akurat jest na zdjęciu pod spodem. */
.work__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 27, 26, 0.22);
}

/* Same groty, bez kresek — sugerują przesuwanie. Trójkąty budowane
   obramowaniem: przezroczysta góra i dół, kolorowy bok daje ostry wierzchołek. */
.work__knob::before,
.work__knob::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -5px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.work__knob::before {
  left: 7px;
  border-right: 7px solid var(--accent-deep);
}
.work__knob::after {
  right: 7px;
  border-left: 7px solid var(--accent-deep);
}

/* --- Etykiety ------------------------------------------------------------ */
.work__tag {
  position: absolute;
  top: var(--space-3);
  z-index: 2;
  padding: 0.25em 0.7em;
  border-radius: 100px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--on-dark);
  background: rgba(26, 35, 34, 0.72);
  pointer-events: none;
}
.work__tag--before { left: var(--space-3); }
.work__tag--after  { right: var(--space-3); }

/* Podpis pod kadrem — wyśrodkowany na szerokość zdjęcia. */
.work__label {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  text-align: center;
}

/* --- Tekst pod realizacjami ---------------------------------------------- */
/* Akapit na dole — pełna szerokość treści, wyrównany do lewej. */
.works__text {
  margin-top: clamp(1.5rem, 4vw, 3rem);
}
.works__text p:last-child { margin-bottom: 0; }

/* --- Responsywność ------------------------------------------------------- */
@media (max-width: 900px) {
  .works__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block: 2rem;
  }
  .works__grid > .work:nth-child(3n + 1) { transform: translateY(1rem) rotate(-1.5deg); }
  .works__grid > .work:nth-child(3n + 2) { transform: translateY(-1rem) rotate(1deg); }
  .works__grid > .work:nth-child(3n + 3) { transform: translateY(1.5rem) rotate(-1deg); }
}

/* Poniżej 768 px zostaje sama środkowa realizacja.
 *
 * Trzy suwaki „przed i po" jeden pod drugim to na telefonie kilka ekranów
 * przewijania tej samej treści — jedna para zdjęć pokazuje dokładnie to samo.
 * Reszta zostaje w znacznikach, więc nic nie ginie ani dla wyszukiwarek,
 * ani po obróceniu telefonu na poziom.
 *
 * :has() pilnuje, żeby reguła włączyła się dopiero przy trzech kafelkach.
 * Przy jednym schowałaby jedyną realizację, przy dwóch zostawiłaby pustkę
 * po pierwszej — a liczba pozycji zależy od tego, co wpiszesz w panelu.
 */
@media (max-width: 767px) {
  .works__grid:has( > .work:nth-child(3) ) {
    grid-template-columns: minmax(0, 1fr);
    max-width: 24rem;
    margin-inline: auto;
    padding-block: 0;
  }
  .works__grid:has( > .work:nth-child(3) ) > .work:not(:nth-child(2)) { display: none; }
  /* Samotny kafelek nie ma się względem czego przesuwać — zostaje sam obrót. */
  .works__grid:has( > .work:nth-child(3) ) > .work:nth-child(2) { transform: rotate(1deg); }
}

@media (max-width: 600px) {
  .works__grid {
    grid-template-columns: 1fr;
    max-width: 24rem;
    margin-inline: auto;
    gap: var(--space-6);
    padding-block: 0;
  }
  .works__grid > .work:nth-child(3n + 1),
  .works__grid > .work:nth-child(3n + 2),
  .works__grid > .work:nth-child(3n + 3) { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .work__img--after,
  .work__divider { transition: none; }
}