@charset "UTF-8";
/* ==========================================================================
   Blok: O usłudze — dwa kwadraty z akcentami + treść
   ========================================================================== */

.about {
  /* tłem steruje akordeon „Zaawansowane" (--sec-bg) */
  overflow: hidden; /* akcenty wychodzące poza kontener nie robią scrolla */
}

.about__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

/* --- Kompozycja zdjęć ---------------------------------------------------- */
.about__media {
  position: relative;
  aspect-ratio: 1 / 1;
  /* --p: 0→1 ustawiane przez block.js wraz z przewijaniem strony */
  --p: 0;
}

.about__photo {
  position: absolute;
  width: 67%;
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  will-change: transform;
  transition: transform 120ms linear;
}

/* Dolne, po lewej — przy przewijaniu odsuwa się w dół i w lewo. */
.about__photo--1 {
  left: 4%;
  bottom: 4%;
  z-index: 1;
  transform:
    translate(calc(var(--p) * -1.15rem), calc(var(--p) * 1.15rem))
    rotate(-2.5deg);
}

/* Górne, po prawej — odsuwa się w górę i w prawo. */
.about__photo--2 {
  right: 4%;
  top: 4%;
  z-index: 2;
  transform:
    translate(calc(var(--p) * 1.15rem), calc(var(--p) * -1.15rem))
    rotate(2deg);
}

.about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Akcenty ------------------------------------------------------------- */

/* Kontur przesunięty za dolnym zdjęciem — podąża za jego obrotem. */
.about__frame {
  position: absolute;
  left: calc(4% - 1.5rem);
  bottom: calc(4% + 1.5rem);
  width: 67%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  opacity: 0.6;
  z-index: 0;
  transform:
    translate(calc(var(--p) * -0.5rem), calc(var(--p) * 0.5rem))
    rotate(-2.5deg);
  transition: transform 120ms linear;
}

/* Narożnik ramki przy górnym zdjęciu — leży ZA nim, więc nigdy go nie zasłania.
   Wystaje tylko poza róg, tworząc parę z konturem przy dolnym zdjęciu. */
.about__mark {
  position: absolute;
  right: calc(4% - 1rem);
  top: calc(4% - 1rem);
  width: 6rem;
  aspect-ratio: 1 / 1;
  border-top: 2px solid var(--accent-deep);
  border-right: 2px solid var(--accent-deep);
  border-top-right-radius: var(--radius-sm);
  z-index: 0;
  transform:
    translate(calc(var(--p) * 0.6rem), calc(var(--p) * -0.6rem))
    rotate(2deg);
  transition: transform 120ms linear;
}

/* --- Treść --------------------------------------------------------------- */
.about__title { margin-bottom: var(--space-5); }
.about__lead { margin-bottom: var(--space-6); max-width: var(--measure-narrow); }
.about__lead p:last-child { margin-bottom: 0; }

/* Bez zdjęć — treść na pełnej szerokości. */
.about--no-media .about__inner { grid-template-columns: 1fr; }

/* --- Responsywność ------------------------------------------------------- */
@media (max-width: 900px) {
  .about__inner { grid-template-columns: 1fr; gap: var(--space-7); }
  .about__media { max-width: 30rem; margin-inline: auto; width: 100%; }
  .about__frame { left: calc(4% - 1rem); bottom: calc(4% + 1rem); }
}

/* Ograniczony ruch: bez przesuwania przy scrollu, ale obrót zostaje. */
@media (prefers-reduced-motion: reduce) {
  .about__photo,
  .about__frame,
  .about__mark { transition: none; }
  .about__photo--1,
  .about__frame { transform: rotate(-2.5deg) !important; }
  .about__photo--2,
  .about__mark { transform: rotate(2deg) !important; }
}