/* ===========================================================================
   RISER.domy — podstrona „Domy murowane".

   Komponenty rodziny ofertowej są w `segment.css`, czat w `czat.css`.
   Tutaj to, co własne: karty zakresu, ciemna sekcja korzyści i drobne
   odchyłki od wartości bazowych rodziny.
   =========================================================================== */

/* --- Odchyłki od skali rodziny ------------------------------------------ */

/* Makieta tej podstrony ma te wartości o oczko inne niż „Rezydencje",
   z której wzięte są wartości bazowe. Różnice są drobne, ale mierzalne. */
.section-head { margin-bottom: 58px; }
.subcat h3 { font-size: 23px; margin-bottom: 14px; padding-bottom: 14px; }
.tl-step { padding: 0 12px; }
.tl-step .num { font-size: 13px; }
.tl-step h4 { font-size: 21px; margin: 10px 0 12px; letter-spacing: normal; }
/* Opis węższy niż kolumna i wyśrodkowany — trzy etapy mają tu dłuższe teksty
   niż pięć etapów na „Rezydencjach". */
.tl-step p { font-size: 15px; max-width: 300px; margin: 0 auto; }
.timeline { gap: 30px; margin-top: 51px; margin-bottom: 120px; padding-top: 8px; }
.portfolio { background: var(--bg-alt); }
.port-card .cap { padding: 36px 18px 15px; background: linear-gradient(0deg, rgba(0, 0, 0, .72), transparent); }

/* Sekcja zakresu jest celem kotwicy z kafla podkategorii. */
.sekcja-zakres { scroll-margin-top: 90px; }

@media (max-width: 860px) {
  .tl-step { padding: 0 0 40px 40px; }
  .tl-step p { margin: 0; }
}

/* --- Karty zakresu ------------------------------------------------------ */

/* Zestawienie „u nas / u Państwa". Wariant `brand` jest w kolorze marki,
   `out` wyszarzony — różnica ma być czytelna na pierwszy rzut oka. */
.zakres-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

.zakres-card {
  background: var(--bg-alt);
  padding: 42px 40px;
  clip-path: polygon(0 0, calc(100% - 42px) 0, 100% 42px, 100% 100%, 0 100%);
  transition: transform .45s cubic-bezier(.2, 0, .2, 1), box-shadow .45s ease;
}
.zakres-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(26, 26, 28, .06); }
.zakres-card h4 { font-size: 18px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.zakres-card ul { list-style: none; display: flex; flex-direction: column; gap: 15px; }
.zakres-card li { font-size: 15px; color: var(--text); display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.zakres-card li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--beige); margin-top: 9px; }

.zakres-card.out h4 { color: var(--text); }
.zakres-card.out li::before { background: #c9c6c0; }

.zakres-card.brand { background: var(--beige); }
.zakres-card.brand h4 { color: #fff; border-bottom-color: rgba(255, 255, 255, .4); }
.zakres-card.brand li { color: #fff; }
.zakres-card.brand li::before { background: #fff; }
.zakres-card.brand:hover { box-shadow: 0 18px 44px rgba(175, 151, 121, .35); }

@media (max-width: 860px) { .zakres-cards { grid-template-columns: 1fr; gap: 20px; } }
@media (prefers-reduced-motion: reduce) { .zakres-card { transition: none; } }

/* --- Co dostają Państwo ------------------------------------------------- */

.co-dostajesz { background: var(--ink); }
.co-dostajesz .eyebrow { color: #e9dfce; }
.co-dostajesz .section-head h2 { color: #fff; }
.co-dostajesz .benefit { border-top-color: rgba(255, 255, 255, .14); }
.co-dostajesz .benefit h4 { color: #fff; }
.co-dostajesz .benefit p { color: rgba(255, 255, 255, .62); }

/* Dwie kolumny bez `row-gap` — odstęp robi `padding` pozycji, dzięki czemu
   linia oddzielająca biegnie przez całą szerokość kolumny. */
.benefits { display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px; }
.benefit { padding: 32px 0; border-top: 1px solid var(--line); }
.benefit .ic { width: 30px; height: 30px; stroke: var(--beige); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 18px; display: block; }
.benefit h4 { font-size: 20px; margin-bottom: 10px; }
.benefit p { font-size: 15px; color: var(--text); }

@media (max-width: 860px) { .benefits { grid-template-columns: 1fr; } }

/* --- Odnośnik pod FAQ --------------------------------------------------- */

.faq-more { text-align: center; margin-top: 40px; }