/* ===========================================================================
   Układ dwukolumnowy: tekst + zdjęcie.

   Wyciągnięty z „O nas" przy drugim użyciu (Rezydencje). Używa go osiem
   z trzynastu makiet.

   SKALA nagłówka: `clamp(30px, 3.6vw, 46px)` — tak ma pięć makiet;
   trzy informacyjne (m.in. „O nas") mają mniejszą i nadpisują ją u siebie.
   =========================================================================== */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }

/* Odwrócenie kolejności: zdjęcie po lewej, tekst po prawej. */
.split.rev .txt { order: 2; }

.split .media {
  overflow: hidden;
  align-self: stretch;
  min-height: 440px;
  clip-path: polygon(0 0, calc(100% - var(--skos-l)) 0, 100% var(--skos-l), 100% 100%, 0 100%);
}
.split .media img { width: 100%; height: 100%; object-fit: cover; }

.split h2 { font-size: clamp(30px, 3.6vw, 46px); margin-bottom: 22px; }
.split p { color: var(--text); margin-bottom: 16px; }

/* Lista z kropkami w kolorze marki — kropka rysowana pseudoelementem,
   bo znacznik listy nie da się ustawić w pionie względem pierwszej linii. */
.split .points { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.split .points li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 15.5px; color: var(--text); }
.split .points li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--beige); margin-top: 9px; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  /* Na telefonie zdjęcie zawsze nad tekstem — również w wariancie odwróconym. */
  .split.rev .txt { order: 0; }
  .split .media { order: -1; min-height: 320px; }
}